/* ================================================================
   Motion Transport — Design Tokens & Base Styles
   Editorial Trade direction
   ================================================================ */

:root {
  /* Palette — locked. CTA red is the brand color. */
  --mt-ink:    #1C1917;  /* stone-900 — primary text + headings */
  --mt-paper:  #FAFAF9;  /* stone-50 — page background */
  --mt-sand:   #F5F5F4;  /* stone-100 — alternating sections */
  --mt-amber:  #CD0002;  /* brand red — primary CTA (variable name kept for backward compat) */
  --mt-amber-deep: #A30001;  /* deeper red — CTA hover */
  --mt-cream:  #FFFBEB;  /* off-white — text on red buttons (5.4:1 contrast, AA) */
  --mt-border: #E7E5E4;  /* stone-200 */
  --mt-muted:  #57534E;  /* stone-600 — secondary copy */
  --mt-maple:  #0F2A4B;  /* deep navy — cross-border-only accent (differentiates from CTA red) */
  --mt-pine:   #166534;  /* green-800 — verified / success */

  /* Type scale (fluid, mobile-first) — scaled down for easier reading */
  --mt-h1: clamp(2.25rem, 5vw, 4rem);      /* 36px → 64px */
  --mt-h2: clamp(1.625rem, 3vw, 2.25rem);  /* 26px → 36px */
  --mt-h3: clamp(1.25rem, 2vw, 1.625rem);  /* 20px → 26px */
  --mt-h4: 1.125rem;                        /* 18px */
  --mt-body: 1.0625rem;     /* 17px */
  --mt-small: 0.9375rem;    /* 15px */
  --mt-caption: 0.8125rem;  /* 13px */

  /* Spacing (4pt scale, semantic) */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-size: var(--mt-body);
  line-height: 1.6;
  color: var(--mt-ink);
  background-color: var(--mt-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lexend', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--mt-ink);
  margin: 0;
}

h1 { font-size: var(--mt-h1); letter-spacing: -0.04em; }
h2 { font-size: var(--mt-h2); }
h3 { font-size: var(--mt-h3); }
h4 { font-size: var(--mt-h4); }

p { margin: 0; max-width: 68ch; }

a { color: inherit; text-underline-offset: 0.2em; }

img { max-width: 100%; height: auto; display: block; }

button { font: inherit; cursor: pointer; }

/* ================================================================
   Reusable component classes
   ================================================================ */

.mt-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .mt-container { padding: 0 2rem; } }

/* Primary CTA — single canonical button sitewide */
.mt-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  background-color: var(--mt-amber);
  color: var(--mt-cream);
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-md);
  border: none;
  text-decoration: none;
  transition: background-color 200ms ease;
  min-height: 56px;
}
.mt-btn-primary:hover { background-color: var(--mt-amber-deep); }
.mt-btn-primary:focus-visible {
  outline: 2px solid var(--mt-amber);
  outline-offset: 2px;
}

/* Secondary CTA — phone link, always paired with primary */
.mt-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  background-color: transparent;
  color: var(--mt-ink);
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid #D6D3D1;  /* stone-300 */
  text-decoration: none;
  transition: background-color 200ms ease;
  min-height: 56px;
}
.mt-btn-secondary:hover { background-color: var(--mt-sand); }

/* Risk-reversal strip — appears in every hero */
.mt-risk-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--mt-small);
  color: var(--mt-muted);
}
.mt-risk-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mt-risk-strip svg {
  width: 1rem; height: 1rem;
  color: var(--mt-ink);
  flex-shrink: 0;
}

/* Cards — flat editorial */
.mt-card {
  border: 1px solid var(--mt-border);
  background-color: var(--mt-sand);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  transition: border-color 200ms ease;
}
.mt-card:hover { border-color: #D6D3D1; }

/* Forms */
.mt-label {
  display: block;
  font-size: var(--mt-small);
  font-weight: 500;
  color: var(--mt-ink);
  margin-bottom: 0.375rem;
}
.mt-input, .mt-select, .mt-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: var(--mt-body);
  color: var(--mt-ink);
  background-color: var(--mt-paper);
  border: 1px solid #D6D3D1;
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mt-input:focus, .mt-select:focus, .mt-textarea:focus {
  outline: none;
  border-color: var(--mt-amber);
  box-shadow: 0 0 0 2px rgba(205, 0, 2, 0.25);
}
.mt-input::placeholder { color: #A8A29E; }

/* Trust band — appears above footer on every page */
.mt-trust-band {
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  padding: 2.5rem 0;
  background-color: var(--mt-paper);
}

/* Maple stripe — cross-border page only */
.mt-maple-stripe {
  height: 4px;
  background-color: var(--mt-maple);
  width: 64px;
  margin-bottom: 1.5rem;
}

/* Star ratings */
.mt-stars {
  display: inline-flex;
  gap: 2px;
  color: #D97706;  /* amber-600 — for star fill */
}

/* Visually hidden (a11y) */
.mt-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   Scroll reveal — subtle fade-up as content enters the viewport.
   Classes are added by assets/reveal.js ONLY to below-the-fold
   elements (no above-fold flash) and ONLY when motion is allowed.
   If JS is off or motion is reduced, nothing is ever hidden.
   ================================================================ */
.mt-reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.mt-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .mt-reveal { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   Hero banner — full-bleed photo with overlaid title (matches the
   current motiontransport.ca hero feel). Used on every page.
   Markup:
   <section class="mt-hero">
     <img class="mt-hero__bg" ... />
     <div class="mt-hero__overlay"></div>
     <div class="mt-hero__content"><div class="mt-container"> ... </div></div>
   </section>
   Add .mt-hero--tall on the homepage; .mt-hero--compact on list pages.
   ================================================================ */
/* MOBILE-FIRST: stacked hero — the photo keeps a landscape ratio (minimal crop)
   above a solid ink text panel. On ≥768px it becomes the full-bleed overlay banner.
   Verify with measure_images.py — every hero should report "shows" ≥ ~75% at both sizes. */
.mt-hero { position: relative; display: flex; flex-direction: column;
  overflow: hidden; background-color: var(--mt-ink); }
.mt-hero__bg { position: relative; width: 100%; height: auto; aspect-ratio: 2 / 1;
  object-fit: cover; object-position: center; z-index: 0; }
.mt-hero--tall .mt-hero__bg { aspect-ratio: 16 / 9; }
.mt-hero--compact .mt-hero__bg { aspect-ratio: 5 / 2; }
.mt-hero__overlay { display: none; }
.mt-hero__content { position: relative; z-index: 2; width: 100%;
  background-color: var(--mt-ink); color: var(--mt-paper);
  padding-top: 2rem; padding-bottom: 2.5rem; }
.mt-hero__content .mt-eyebrow { color: var(--mt-cream); opacity: 0.92; }
.mt-hero__content h1 { color: var(--mt-paper); font-size: clamp(2.5rem, 6.5vw, 4.75rem); line-height: 1.0; letter-spacing: -0.045em; }
.mt-hero__content p { color: #E7E5E4; }
.mt-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }

@media (min-width: 768px) {
  .mt-hero { flex-direction: row; align-items: flex-end;
    min-height: clamp(360px, 50vh, 540px); }
  .mt-hero--tall { min-height: clamp(520px, 80vh, 820px); }
  .mt-hero--compact { min-height: clamp(340px, 46vh, 480px); }
  .mt-hero__bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .mt-hero--tall .mt-hero__bg, .mt-hero--compact .mt-hero__bg { aspect-ratio: auto; }
  .mt-hero__overlay { display: block; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(28,25,23,0.82) 0%, rgba(28,25,23,0.55) 42%, rgba(28,25,23,0.12) 80%),
      linear-gradient(0deg, rgba(28,25,23,0.55) 0%, rgba(28,25,23,0) 55%); }
  .mt-hero__content { background-color: transparent; padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
@media (min-width: 1024px) { .mt-hero__grid { grid-template-columns: 1.25fr 0.95fr; } }
/* Secondary button reads light on the dark hero photo */
.mt-hero .mt-btn-secondary { color: var(--mt-paper); border-color: rgba(231,229,228,0.55); background: transparent; }
.mt-hero .mt-btn-secondary:hover { background: rgba(255,255,255,0.12); }
/* Risk strip on the hero photo */
.mt-hero .mt-risk-strip { color: #E7E5E4; }
.mt-hero .mt-risk-strip span { color: #E7E5E4; }

/* ================================================================
   Section utilities
   ================================================================ */

.mt-section { padding: 4rem 0; }
@media (min-width: 768px) { .mt-section { padding: 6rem 0; } }

.mt-section-sand { background-color: var(--mt-sand); }

.mt-eyebrow {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--mt-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mt-muted);
  margin-bottom: 0.75rem;
}

/* ================================================================
   Google reviews badge / trust strip (sits under the hero)
   ================================================================ */
.mt-googlebar { background: var(--mt-paper); border-bottom: 1px solid var(--mt-border); }
.mt-googlebar__inner { display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  flex-wrap: wrap; padding: 0.85rem 0; font-size: var(--mt-small); color: var(--mt-muted); }
.mt-googlebar svg { width: 20px; height: 20px; flex-shrink: 0; }
.mt-googlebar__stars { color: #FBBC05; letter-spacing: 1px; font-size: 1.05rem; line-height: 1; }
.mt-googlebar strong { color: var(--mt-ink); }
.mt-googlebar a { color: var(--mt-amber); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mt-googlebar a:hover { text-decoration: underline; }

/* ================================================================
   Persistent CTAs — sticky top nav (desktop) + fixed quote/call bar (mobile)
   ================================================================ */
body > header { position: sticky; top: 0; z-index: 40; background: var(--mt-paper); }

.mt-ctabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 0.5rem; padding: 0.6rem 0.75rem;
  background: rgba(28,25,23,0.97); box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
.mt-ctabar a { flex: 1; text-align: center; padding: 0.8rem 0.5rem; border-radius: 9px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.mt-ctabar__quote { background: var(--mt-amber); color: #fff; }
.mt-ctabar__call { color: #fff; border: 1px solid rgba(255,255,255,0.45); }
@media (min-width: 768px) { .mt-ctabar { display: none; } }       /* desktop uses the sticky header CTA */
@media (max-width: 767px) { body { padding-bottom: 4.25rem; } }   /* clear space for the fixed bar */

/* ================================================================
   "Brands we work with" trust strip
   ================================================================ */
.mt-brands { padding: 3rem 0; background: var(--mt-paper); border-top: 1px solid var(--mt-border); border-bottom: 1px solid var(--mt-border); }
.mt-brands__label { text-align: center; font-size: var(--mt-caption); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mt-muted); margin-bottom: 2rem; }
/* Logos large + full colour, kept on ONE line (uniform height, never wraps) */
.mt-brands__row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 4rem); }
.mt-brands__row img { height: clamp(34px, 5vw, 60px); width: auto; max-width: 100%; }
.mt-brands__row span { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.5rem; color: #A8A29E; }

/* Brand logo in the header */
.mt-logo { height: 38px; width: auto; display: block; }
@media (max-width: 767px) { .mt-logo { height: 32px; } }

/* ================================================================
   Network map hero (routes page) — abstract corridor diagram
   ================================================================ */
.mt-mapnet { background: var(--mt-ink); color: var(--mt-paper); overflow: hidden; }
.mt-mapnet__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
  padding: 3rem 0 3.5rem; }
@media (min-width: 900px) { .mt-mapnet__grid { grid-template-columns: 0.82fr 1.18fr; gap: 3rem; } }
.mt-mapnet .mt-eyebrow { color: var(--mt-cream); }
.mt-mapnet h1 { color: var(--mt-paper); }
.mt-mapnet p { color: #E7E5E4; }
.mt-mapnet svg { width: 100%; height: auto; display: block; }
.mt-mapnet .lane { stroke: #57534E; stroke-width: 2; fill: none; }
.mt-mapnet .lane-in { stroke: var(--mt-amber); stroke-width: 2.5; fill: none; stroke-dasharray: 5 6;
  animation: mt-dash 2.4s linear infinite; }
.mt-mapnet .node-ca { fill: var(--mt-amber); }
.mt-mapnet .node-us { fill: #A8A29E; }
.mt-mapnet .lbl-ca { fill: #FAFAF9; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 15px; }
.mt-mapnet .lbl-us { fill: #D6D3D1; font-family: 'Source Sans 3', sans-serif; font-size: 13px; }
.mt-mapnet .border-line { stroke: #44403C; stroke-width: 1.5; stroke-dasharray: 2 6; }
.mt-mapnet .border-lbl { fill: #78716C; font-family: 'Source Sans 3', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
@keyframes mt-dash { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .mt-mapnet .lane-in { animation: none; } }

/* Single-corridor route hero (reuses .mt-mapnet container + lane/node styles) */
.mt-mapnet .lbl-dist { fill: #FFFBEB; font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 27px; }
.mt-mapnet .lbl-sub { fill: #A8A29E; font-family: 'Source Sans 3', sans-serif; font-size: 14px; }

/* Faint context hubs on single-corridor maps (non-route cities) */
.mt-mapnet .node-ghost { fill: #44403C; }

/* ================================================================
   Corridor snapshot — stat tiles (replaces the basic route facts table)
   ================================================================ */
.mt-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .mt-statgrid { grid-template-columns: repeat(3, 1fr); } }
.mt-stat { border: 1px solid var(--mt-border); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.6rem; background: var(--mt-paper); }
.mt-stat--sand { background: var(--mt-sand); }
.mt-stat__label { font-size: var(--mt-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mt-muted); font-weight: 600; margin: 0; }
.mt-stat__num { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 2.35rem; line-height: 1; color: var(--mt-ink); margin: 0.55rem 0 0; letter-spacing: -0.03em; }
.mt-stat__num span { font-size: 1.05rem; font-weight: 700; color: var(--mt-muted); letter-spacing: 0; }
.mt-stat__sub { font-size: var(--mt-small); color: var(--mt-muted); margin: 0.5rem 0 0; }
.mt-stat--dark { background: var(--mt-ink); border-color: #44403C; }
.mt-stat--dark .mt-stat__label { color: #A8A29E; }
.mt-stat--dark .mt-stat__num { color: var(--mt-paper); }
.mt-stat--dark .mt-stat__sub { color: #A8A29E; }
.mt-stat--cta { background: var(--mt-amber); border-color: var(--mt-amber); display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.mt-stat--cta p { color: var(--mt-cream); font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.15; margin: 0; }
.mt-stat--cta span { color: #FFE9C7; font-size: var(--mt-small); }
.mt-stat--cta a { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; margin-top: 0.25rem;
  background: var(--mt-paper); color: var(--mt-ink); font-weight: 700; text-decoration: none; padding: 0.6rem 1rem; border-radius: var(--radius-md); }

/* Tactile feedback + card lift (skill: physical feedback, engagement) */
.mt-btn-primary:active, .mt-btn-secondary:active, .mt-ctabar a:active { transform: translateY(1px); }
.mt-card { transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.mt-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(28,25,23,0.09); }
@media (prefers-reduced-motion: reduce) { .mt-card:hover { transform: none; } }

/* ================================================================
   Branded duotone image band — turns library photos into on-brand visuals
   ================================================================ */
.mt-imgband { position: relative; height: clamp(260px, 34vw, 400px); overflow: hidden; background: var(--mt-ink); }
.mt-imgband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.02); }
.mt-imgband__duo { position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(28,25,23,0.16) 0%, rgba(28,25,23,0) 42%); }
.mt-imgband__veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,25,23,0) 38%, rgba(28,25,23,0.82) 100%); }
.mt-imgband__cap { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.mt-imgband__cap .mt-container { padding-bottom: 2rem; }
.mt-imgband__cap p { color: var(--mt-cream); font-family: 'Lexend', sans-serif; font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.1; max-width: 28rem; letter-spacing: -0.02em; }
.mt-imgband__cap span { display: block; color: #E7E5E4; font-family: 'Source Sans 3', sans-serif;
  font-weight: 400; font-size: var(--mt-small); margin-top: 0.5rem; }

/* Subtle topographic texture for accent sections (no media weight) */
.mt-topo { background-image: repeating-linear-gradient(135deg, rgba(28,25,23,0.022) 0 1px, transparent 1px 24px); }
/* Icons inside stat-tile labels */
.mt-stat__label { display: flex; align-items: center; gap: 0.45rem; }
.mt-stat__label svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }

/* Elevation profile (Calgary↔Vancouver delight) */
.mt-elev { width: 100%; height: auto; display: block; margin-top: 1.5rem; }
.mt-elev .area { fill: rgba(205,0,2,0.10); }
.mt-elev .line { fill: none; stroke: var(--mt-amber); stroke-width: 2.5; stroke-linejoin: round; }
.mt-elev .base { stroke: #D6D3D1; stroke-width: 1; stroke-dasharray: 3 4; }
.mt-elev .pk { fill: var(--mt-amber); }
.mt-elev .pklbl { fill: var(--mt-muted); font-family: 'Source Sans 3', sans-serif; font-size: 11px; }
.mt-elev .city { fill: var(--mt-ink); font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 13px; }
.mt-elev .baselbl { fill: #A8A29E; font-family: 'Source Sans 3', sans-serif; font-size: 11px; }

/* ── Destination split (route pages): branded city truck + copy ───────────── */
.mt-destn { padding: 4rem 0; }
@media (min-width: 768px) { .mt-destn { padding: 5.5rem 0; } }
.mt-destn__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .mt-destn__grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } }
.mt-destn__media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 2; box-shadow: 0 22px 48px -26px rgba(28,25,23,0.5); }
.mt-destn__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.02); }
.mt-destn__badge { position: absolute; left: 1rem; bottom: 1rem; background: var(--mt-amber);
  color: #fff; font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.02em; padding: 0.45rem 0.85rem; border-radius: 999px; }

/* ── Destinations grid (home / routes index): city image cards ────────────── */
.mt-destgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 860px) { .mt-destgrid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.mt-destcard { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; text-decoration: none; background: var(--mt-ink);
  transition: transform 200ms ease, box-shadow 200ms ease; }
.mt-destcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-destcard__veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,25,23,0) 40%, rgba(28,25,23,0.78) 100%); }
.mt-destcard__lbl { position: absolute; left: 0.9rem; bottom: 0.8rem; color: #fff;
  font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.mt-destcard__lbl span { display: block; font-weight: 400; font-size: var(--mt-small); color: var(--mt-cream); }
.mt-destcard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28,25,23,0.18); }
@media (prefers-reduced-motion: reduce) { .mt-destcard:hover { transform: none; } }

/* ── Photo gallery strip (real move/team photos from the live site) ───────── */
.mt-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 760px) { .mt-gallery { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.mt-gallery figure { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--mt-sand); }
.mt-gallery img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease; }
.mt-gallery figure:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .mt-gallery figure:hover img { transform: none; } }
.mt-gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
@media (min-width: 760px) { .mt-gallery figure:first-child { aspect-ratio: auto; } }

/* Breadcrumb — force a single uniform line across all pages (P-fix 2026-07-21, !important to beat theme CSS on WP canvas) */
nav[aria-label="Breadcrumb"]{display:flex !important;flex-direction:row !important;align-items:center !important;flex-wrap:nowrap !important;white-space:nowrap !important;overflow-x:auto !important;gap:0 !important;width:auto !important;}
nav[aria-label="Breadcrumb"] > *{display:inline !important;float:none !important;width:auto !important;margin-top:0 !important;margin-bottom:0 !important;white-space:nowrap !important;flex:0 0 auto !important;}
nav[aria-label="Breadcrumb"] > span{padding:0 0.4rem !important;}

/* ── Nav "Routes" dropdown — reliable hover (2026-07-27b) ──────────────────────
   Kills the margin-top dead-zone entirely: the menu sits flush under the
   "Routes" trigger, so there is NO gap to fall through on the way to a route
   link. Short close-delay for forgiveness. Replaces the earlier fragile
   ::before-bridge/transform approach. */
.mt-drop-menu{
  display:flex !important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  margin-top:0 !important;               /* remove the dead-zone gap under "Routes" */
  padding-top:0.6rem !important;         /* keep visual breathing room INSIDE the hover area */
  transition:opacity .13s ease, visibility .13s ease;
  transition-delay:.3s;                  /* lingers ~0.3s after the cursor leaves */
}
.mt-dropdown:hover > .mt-drop-menu,
.mt-drop-menu:hover{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transition-delay:0s;                   /* opens immediately */
}