/* ============================================================
   MIG Modern Heritage — Theme Styles
   Builds on tokens.css (already loaded first)
   ============================================================ */

/* ============================================================
   NAV HEADER
   ============================================================ */
.mig-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mh-rule);
}

.mig-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.mig-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.mig-nav__brand-mark {
  height: 27px;
  width: auto;
  display: block;
}

.mig-nav__brand-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mh-navy);
  line-height: 1;
  white-space: nowrap;
}

.mig-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.mig-nav__link {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-navy);
  text-decoration: none;
  /* Balance the underline: mirror the 4px pad + 1.5px border on top so the
     link text stays optically centred in the nav bar and lines up with the
     wordmark, instead of riding ~2.75px high from bottom-only spacing. */
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
.mig-nav__link:hover,
.mig-nav__link--active {
  color: var(--mh-terracotta);
  border-bottom-color: var(--mh-terracotta);
  text-decoration: none;
}

.mig-nav__divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--mh-rule-strong);
  margin: 0 var(--space-2);
}

/* PLAN-TWEAKS C.3 — header search. Icon-only chip on desktop that expands
   inline; full menu item with icon + label on mobile inside the hamburger
   panel. Form action goes to home_url() with the standard `s` param so
   WP's native /?s={query} → search.php pipeline handles results. */
.mig-nav__search { position: relative; display: inline-flex; align-items: center; }
.mig-nav__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mh-navy);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast) var(--ease-out-expo);
}
.mig-nav__search-toggle:hover,
.mig-nav__search-toggle:focus-visible,
.mig-nav__search-toggle[aria-expanded="true"] {
  color: var(--mh-terracotta);
  border-color: var(--mh-rule-strong);
}
.mig-nav__search-icon { display: block; flex-shrink: 0; }
.mig-nav__search-label {
  display: none; /* hidden on desktop — revealed in mobile media query below */
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Mobile-only search toggle that sits in the bar (hidden on desktop). */
.mig-nav__mobile-search { display: none; }

/* SEARCH-UX-PLAN Phase 3 — full-width drop-down search strip below the bar.
   Decoupled from .mig-nav__links so opening it never reflows the menu (this
   replaces the old inline 320px form that squeezed the nav). The reveal
   animates transform + opacity only → zero layout shift / CLS. */
.mig-nav__search-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--mh-cream);
  border-bottom: 1px solid var(--mh-rule-strong);
  box-shadow: 0 10px 28px rgba(26, 43, 76, 0.10);
  z-index: 49;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--dur-fast) var(--ease-out-expo),
              transform var(--dur-fast) var(--ease-out-expo);
}
.mig-nav__search-strip[hidden] { display: none; }
.mig-nav__search-strip.is-open { opacity: 1; transform: translateY(0); }
.mig-nav__search-strip-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.mig-nav__search-strip-icon { color: var(--mh-ink-2); flex-shrink: 0; }
.mig-nav__search-strip-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--mh-navy);
  padding: 8px 14px; /* internal padding so text/caret never hugs the field edge / focus ring */
}
.mig-nav__search-strip-input::placeholder { color: var(--mh-ink-2); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .mig-nav__search-strip { transition: none; }
}
.mig-nav__search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--mh-ink-2);
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.mig-nav__search-close:hover,
.mig-nav__search-close:focus-visible { color: var(--mh-terracotta); }

/* Toggle stays visible while the strip is open; the strip is a separate
   element below the bar, so there's nothing to hide. aria-expanded + the
   close (X) in the strip handle state. (SEARCH-UX-PLAN Phase 3) */

/* Blog dropdown */
.mig-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.mig-nav__item--has-dropdown .mig-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mig-nav__caret {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.mig-nav__item--open .mig-nav__caret { transform: rotate(180deg); }
.mig-nav__item--open .mig-nav__link  { color: var(--mh-terracotta); border-bottom-color: transparent; }

/* Invisible hover bridge — fills the gap between the trigger and the
   dropdown so the mouse can traverse without losing :hover. Lives inside
   the parent so it counts as the same hover target. */
.mig-nav__item--has-dropdown { position: relative; }
.mig-nav__item--has-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 59;
}

.mig-nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule-strong);
  box-shadow: 0 24px 60px -20px rgba(26,43,76,0.22);
  padding: var(--space-5) 28px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out-expo);
}

.mig-nav__item--open > .mig-nav__dropdown,
.mig-nav__item--has-dropdown:hover > .mig-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mig-nav__dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.mig-nav__dropdown-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mig-nav__dropdown-head {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 2.6 / punch #9 — comfortable leading so titles that wrap to two lines
     (e.g. the longer guest-audience labels in the mobile dropdown) don't
     cramp. Single-line items are unaffected. */
  line-height: 1.45;
  color: var(--mh-terracotta);
  text-decoration: none;
  padding-bottom: 4px;
}
/* QA9-R10 (Samuel, 2026-06-11): the token deepening compressed terracotta/terracotta-2
   to near-identical darks, making this colour-only hover invisible — add the underline
   cue he remembered (matches the top-level nav's hover language). */
.mig-nav__dropdown-head:hover { color: var(--mh-terracotta-2); text-decoration: underline; text-underline-offset: 3px; }

.mig-nav__dropdown-subs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mig-nav__dropdown-subs a {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  color: var(--mh-ink);
  text-decoration: none;
  display: block;
  padding: 2px 0;
}
.mig-nav__dropdown-subs a::before {
  content: "— ";
  color: var(--mh-ink-2);
}
.mig-nav__dropdown-subs a:hover { color: var(--mh-terracotta); text-decoration: none; }

.mig-nav__dropdown-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--mh-rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-eyebrow);
  color: var(--mh-ink-2);
}

/* Small contact button variant */
.btn--sm {
  padding: 9px 18px;
  font-size: var(--t-micro);
}

.mig-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--mh-navy);
  padding: var(--space-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.mig-footer {
  background: var(--mh-navy);
  color: var(--mh-cream);
  padding-top: var(--space-8);
}

.mig-footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(253,251,247,0.12);
}

.mig-footer__tagline {
  font-size: var(--t-caption);
  line-height: 1.7;
  color: rgba(253,251,247,0.7);
  margin: var(--space-4) 0 0;
  max-width: 300px;
}

.mig-footer__col-head {
  color: var(--mh-terracotta) !important;
  margin-bottom: var(--space-4);
  display: block;
}

.mig-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mig-footer__list a {
  font-size: var(--t-caption);
  color: rgba(253,251,247,0.8);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.mig-footer__list a:hover {
  color: var(--mh-cream);
  text-decoration: none;
}

.mig-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-5); /* #TR2-6: was `padding: … 0` which zeroed the horizontal gutter, leaving the bottom bar (copyright/social/credentials) flush to the edge while the columns above were inset 24px. Let .container's gutter through so it aligns at every width. */
  font-size: var(--t-micro);
  color: rgba(253,251,247,0.55);
}

.mig-footer__social {
  display: flex;
  gap: var(--space-3);
}

.mig-footer__social-link {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(253,251,247,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(253,251,247,0.7);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
.mig-footer__social-link:hover {
  color: var(--mh-cream);
  border-color: var(--mh-terracotta);
  text-decoration: none;
}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

/* Hero */
.mig-hero {
  background: var(--mh-sand);
  padding: var(--space-10) 0;
}

.mig-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mig-hero__eyebrow {
  margin-bottom: var(--space-4);
}

.mig-hero__h1 {
  font-size: var(--t-display-1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--mh-navy);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

.mig-hero__lead {
  font-size: var(--t-body-l);
  line-height: 1.65;
  color: var(--mh-ink);
  margin: 0 0 var(--space-7);
  max-width: 520px;
}

.mig-hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mig-hero__stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--mh-rule);
}

.mig-stat__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1;
}

.mig-stat__label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-ink-2);
  margin-top: var(--space-2);
}

.mig-hero__image-wrap {
  position: relative;
}

.mig-hero__image {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.mig-hero__badge {
  position: absolute;
  bottom: 24px;
  left: -32px;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  padding: var(--space-5) var(--space-6);
  max-width: 280px;
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-md);
}

.mig-hero__badge-title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--mh-navy);
  margin: var(--space-2) 0 0;
  line-height: 1.3;
}

/* Services grid */
.mig-services {
  background: var(--mh-sand-2);
  padding: 120px 0;
}

.mig-services__header {
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.mig-services__rule {
  margin-top: var(--space-4);
}

.mig-services__h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mh-navy);
  margin: 0;
}

.mig-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.mig-service-card {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-radius: var(--radius-md);
  padding: 36px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo);
}
.mig-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.mig-service-card__icon {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--mh-terracotta);
}

.mig-service-card__title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--mh-navy);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}

.mig-service-card__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--mh-ink);
  margin: 0;
}

/* Philosophy */
.mig-philosophy {
  background: var(--mh-navy);
  color: var(--mh-cream);
  padding: var(--section-y) 0;
}

.mig-philosophy__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}

.mig-philosophy__image {
  width: 100%;
  /* 3:2 (matches the source) so the full landscape shows — was 4/5, which
     cropped to a tight face-slice (Samuel 2026-06-05). */
  aspect-ratio: 3/2;
  /* height:auto required — without it the img's HTML height attribute
     becomes the used height and the 3/2 crop is ignored (PERF-PLAN 8.1). */
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.mig-philosophy__h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mh-cream);
  margin: 0 0 var(--space-6);
}

.mig-philosophy__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(253,251,247,0.85);
  margin: 0 0 var(--space-4);
}

.mig-philosophy__stats {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid rgba(253,251,247,0.18);
}

.mig-philosophy .mig-stat__value {
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--mh-cream);
}

.mig-philosophy .mig-stat__label {
  color: var(--mh-terracotta);
}

/* Itinerary cards */
.mig-itineraries {
  background: var(--mh-sand);
  padding: 120px 0;
}

.mig-itineraries__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-8);
}

.mig-itineraries__view-all {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.mig-itineraries__view-all:hover { color: var(--mh-terracotta-2); text-decoration: none; }

.mig-itineraries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.mig-itin-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.mig-itin-card__image {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.mig-itin-card:hover .mig-itin-card__image {
  transform: scale(1.03);
}

.mig-itin-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--mh-cream);
  padding: 6px 12px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-navy);
}

.mig-itin-card__days {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  margin-bottom: var(--space-2);
}

.mig-itin-card__title {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--mh-navy);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

.mig-itin-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mh-ink);
  margin: 0;
}

/* Testimonial strip */
.mig-testimonial {
  background: var(--mh-sand-2);
  padding: 120px 0;
  text-align: center;
}

.mig-testimonial__inner {
  max-width: 900px;
  margin: 0 auto;
}

.mig-testimonial__quote {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--mh-navy);
  margin: 0 0 var(--space-7);
  text-wrap: balance;
}

.mig-testimonial__rule {
  width: 48px;
  height: 1px;
  background: var(--mh-rule-strong);
  border: 0;
  margin: 0 auto var(--space-5);
}

.mig-testimonial__name {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mh-navy);
}

.mig-testimonial__meta {
  font-size: var(--t-eyebrow);
  color: var(--mh-ink-2);
  margin-top: var(--space-1);
}

/* Call to book */
.mig-ctabook {
  background: var(--mh-navy);
  padding: 96px 0;
  text-align: center;
}

.mig-ctabook__inner {
  max-width: 900px;
  margin: 0 auto;
}

.mig-ctabook__rule {
  margin: var(--space-4) auto var(--space-6);
}

.mig-ctabook__h2 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mh-cream);
  margin: 0 0 var(--space-5);
}

.mig-ctabook__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(253,251,247,0.8);
  margin: 0 auto var(--space-7);
  max-width: 600px;
}

/* ============================================================
   GENERIC PAGE / POST
   ============================================================ */
.mig-page-hero {
  background: var(--mh-navy);
  color: var(--mh-cream);
  padding: var(--space-9) 0 var(--space-8);
}

.mig-page-hero__eyebrow { margin-bottom: var(--space-4); }

.mig-page-hero__title {
  font-size: var(--t-display-2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mh-cream);
  margin: 0;
  max-width: 800px;
}

.mig-post-body {
  max-width: 740px;
  margin: 0 auto;
  padding: var(--space-9) var(--gutter);
}

.mig-post-body h2,
.mig-post-body h3,
.mig-post-body h4 {
  color: var(--mh-navy);
  margin-top: var(--space-7);
}

.mig-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.mig-post-body blockquote {
  border-left: 3px solid var(--mh-terracotta);
  margin-left: 0;
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--t-body-l);
  color: var(--mh-navy);
  font-style: italic;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1160px) { /* was 900 — the desktop nav needs ~1144px, so it overflowed at 1024 (iPad landscape). Switch to the hamburger until it actually fits. */
  .mig-nav__links {
    display: none;
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--mh-sand);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5);
    gap: var(--space-1);
    overflow-y: auto;
    z-index: 49;
  }

  .mig-nav__links.is-open {
    display: flex;
  }

  .mig-nav__link {
    padding: var(--space-3) var(--space-2);
    font-size: var(--t-body);
    border-bottom: 1px solid var(--mh-rule);
  }

  .mig-nav__divider { display: none; }

  /* SEARCH-UX-PLAN Phase 3 — on mobile, search lives in the bar (a toggle next
     to the hamburger), not inside the menu. Hide the desktop toggle that sits
     in the (overlay) links container; show + right-align the bar toggle. The
     drop-down strip is shared with desktop. */
  .mig-nav__search { display: none; }
  .mig-nav__mobile-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;   /* pushes search + hamburger to the right edge */
    margin-right: 2px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--mh-navy);
    cursor: pointer;
  }
  .mig-nav__mobile-search:hover,
  .mig-nav__mobile-search:focus-visible,
  .mig-nav__mobile-search[aria-expanded="true"] { color: var(--mh-terracotta); }

  .btn--sm { width: 100%; justify-content: center; margin-top: var(--space-3); }

  .mig-nav__toggle { display: block; }

  /* Mobile: use fixed positioning (more reliable than sticky on iOS Safari)
     and drop backdrop-filter so position:fixed children work properly. */
  .mig-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--mh-sand);
  }

  body {
    padding-top: var(--nav-height);
  }

  .mig-nav__links {
    z-index: 100;
  }

  /* Lock body scroll when mobile menu is open */
  body.mig-menu-open {
    overflow: hidden;
  }

  /* Mobile accordion for blog dropdown */
  .mig-nav__item { display: block; width: 100%; }

  .mig-nav__item--has-dropdown {
    border-bottom: 1px solid var(--mh-rule);
  }
  .mig-nav__item--has-dropdown .mig-nav__link {
    border-bottom: 0;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
    font-size: var(--t-body);
  }

  .mig-nav__caret {
    /* QA9 B3, Samuel's pick (a): bare chevron — the circle read as busy. The 32px
       box stays as the invisible tap target; the chevron itself grows a touch. */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
  }
  .mig-nav__caret svg {
    width: 14px;
    height: 14px;
  }

  .mig-nav__dropdown {
    position: static;
    transform: none;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 var(--space-2);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms var(--ease-out-expo),
                padding   280ms var(--ease-out-expo);
  }

  .mig-nav__item--open > .mig-nav__dropdown {
    max-height: 1200px;
    padding: var(--space-2) var(--space-2) var(--space-4);
  }

  .mig-nav__dropdown-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .mig-nav__dropdown-head { padding: var(--space-2) 0; }

  .mig-nav__dropdown-foot {
    margin-top: var(--space-3);
    font-size: var(--t-micro);
  }

  .mig-hero__inner,
  .mig-philosophy__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .mig-hero__badge { display: none; }

  .mig-hero__h1 { font-size: var(--t-h1); }

  .mig-services__grid,
  .mig-itineraries__grid {
    grid-template-columns: 1fr;
  }

  /* Footer: brand full-width, link groups in 3 tight columns (Option A). */
  .mig-footer { padding-top: var(--space-7); }
  .mig-footer__main {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6) var(--space-5);
    padding-bottom: var(--space-6);
  }
  .mig-footer__brand { grid-column: 1 / -1; }

  .mig-testimonial__quote { font-size: 1.5rem; }
  .mig-ctabook__h2 { font-size: 2rem; }

  .mig-itineraries__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .mig-philosophy__stats { flex-direction: column; gap: var(--space-5); }
}

@media (max-width: 580px) {
  /* Footer: brand full-width, link groups paired 2-across (Option A). */
  .mig-footer { padding-top: var(--space-6); }
  .mig-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-5);
  }
  .mig-footer__brand { grid-column: 1 / -1; }
  /* Stack the bottom bar so the social icons never clip off-screen. */
  .mig-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .mig-services__grid { grid-template-columns: 1fr; }
  .mig-hero__stats { flex-direction: column; gap: var(--space-5); }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal;
}

:focus-visible {
  outline: 2px solid var(--mh-terracotta);
  outline-offset: 3px;
}

/* ============================================================
   1) HERO HOMEPAGE — editorial photo/video
   ============================================================ */
.mh-hero {
  position: relative;
  background: #0E1B32;
  min-height: min(86vh, 760px);
  overflow: hidden;
  border-bottom: 1px solid var(--mh-rule);
  color: var(--mh-cream);
}

.mh-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Hero media policy: phones show the portrait Western Wall poster (Dome top-right,
   in the light right-hand zone away from the left-aligned text); desktop shows the video. */
.mh-hero__poster-mobile { display: block; object-position: 72% top; }
.mh-hero__video         { display: none; }
@media (min-width: 768px) {
  .mh-hero__poster-mobile { display: none; }
  .mh-hero__video         { display: block; }
}

.mh-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mh-hero__scrim--tone   { background: rgba(14,27,50,0.42); }
.mh-hero__scrim--left   { background: linear-gradient(100deg, rgba(14,27,50,0.92) 0%, rgba(14,27,50,0.70) 38%, rgba(14,27,50,0.22) 72%, rgba(14,27,50,0.08) 100%); }
.mh-hero__scrim--bottom { background: linear-gradient(180deg, rgba(14,27,50,0.30) 0%, transparent 24%, transparent 58%, rgba(14,27,50,0.65) 100%); }

.mh-hero__rule {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--mh-terracotta); opacity: 0.55; z-index: 2;
}

.mh-hero__inner {
  position: relative;
  z-index: 3;
  padding: var(--space-8) var(--gutter) var(--space-9);
  min-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mh-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.mh-hero__kicker {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.mh-hero__kicker-rule {
  width: 24px; height: 1px;
  background: var(--mh-terracotta);
  display: inline-block;
}

.mh-hero__credentials {
  font-size: var(--t-micro);
  color: rgba(253,251,247,0.78);
  letter-spacing: 0.05em;
}

.mh-hero__license {
  color: var(--mh-cream);
  font-weight: 600;
}
/* QA9 B1 (Samuel, 2026-06-11): declutter the mobile hero top — the terracotta kicker
   rule read as a stray em-dash, and the "· Guiding since 2014" tail duplicated the
   lead ("…since 2014") while wrapping with a stranded "·". Desktop unchanged. */
@media (max-width: 600px) {
  .mh-hero__kicker-rule { display: none; }
  .mh-hero__credentials-extra { display: none; }
}
/* QA9 B5 width relaxation (Samuel "go with your suggestion", 2026-06-11): at phone
   widths the inner card paddings ate ~50px of field width — halve them so the form
   fields and the WhatsApp card breathe. */
@media (max-width: 480px) {
  .mig-contact__form-well { padding: 28px 12px; }
  .mig-whatsapp-block { padding: 24px 18px; }
}

.mh-hero__well {
  margin-top: var(--space-9);
  max-width: 880px;
  padding: var(--space-7) var(--space-7) var(--space-7) 0;
  position: relative;
}

.mh-hero__well::before {
  content: "";
  position: absolute;
  inset: -12px -32px -12px -32px;
  background: radial-gradient(ellipse at 25% 60%, rgba(14,27,50,0.55) 0%, rgba(14,27,50,0.28) 55%, rgba(14,27,50,0) 85%);
  z-index: -1;
  pointer-events: none;
}

.mh-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  font-weight: 400;
  color: var(--mh-cream);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(8,18,36,0.85), 0 1px 4px rgba(8,18,36,0.5);
}

.mh-hero__h1-soft { color: rgba(253,251,247,0.72); }

.mh-hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center; /* #13: optically level the CTA with the lead text (was flex-end, which dropped it to the text baseline) */
  margin-top: var(--space-7);
  gap: var(--space-8);
  flex-wrap: wrap;
}

.mh-hero__lead {
  font-size: var(--t-body-l);
  line-height: 1.6;
  color: var(--mh-cream);
  margin: 0;
  max-width: 560px;
  text-shadow: 0 2px 24px rgba(8,18,36,0.85), 0 1px 4px rgba(8,18,36,0.6);
}

/* ============================================================
   PHOTO BLOCK — editorial placeholder (used in several sections)
   ============================================================ */
.mh-photo-block {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 28px;
}

.mh-photo-block--navy {
  background: linear-gradient(135deg, #1A2B4C 0%, #0E1B32 100%);
  color: var(--mh-cream);
}

.mh-photo-block--sand {
  background: linear-gradient(135deg, #EAE5DA 0%, #DDD6C5 100%);
  color: var(--mh-navy);
}

.mh-photo-block > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-photo-block__ornament {
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0.35;
}

.mh-photo-block__caption {
  position: relative;
  max-width: 320px;
}

.mh-photo-block__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  margin-bottom: 10px;
}

.mh-photo-block__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 6px;
}

.mh-photo-block__brief {
  font-size: var(--t-micro);
  line-height: 1.55;
  opacity: 0.6;
}

.mh-photo-block--sand .mh-photo-block__brief { color: rgba(26,43,76,0.55); }
.mh-photo-block--navy .mh-photo-block__brief { color: rgba(253,251,247,0.55); }

/* ============================================================
   2) TRUST STRIP
   ============================================================ */
.mh-trust {
  background: var(--mh-cream);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--mh-rule);
  border-bottom: 1px solid var(--mh-rule);
}

.mh-trust__top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-8);
  align-items: flex-start;
  margin-bottom: var(--space-8);
}

.mh-trust__note {
  font-size: var(--t-caption);
  line-height: 1.65;
  color: var(--mh-ink-2);
  margin: 0;
  max-width: 280px;
}

.mh-trust__quote {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--mh-navy);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

.mh-trust__byline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.mh-trust__byline-rule {
  width: 48px;
  height: 1px;
  background: var(--mh-rule-strong);
  display: inline-block;
}

.mh-trust__byline-name {
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mh-navy);
}

.mh-trust__byline-meta {
  font-size: var(--t-micro);
  color: var(--mh-ink-2);
  margin-top: 2px;
}

.mh-trust__platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mh-rule);
  border-bottom: 1px solid var(--mh-rule);
}

.mh-trust__platform {
  padding: var(--space-6) 28px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.mh-trust__platform + .mh-trust__platform {
  border-left: 1px solid var(--mh-rule);
}

.mh-trust__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.mh-trust__stars {
  display: flex;
  gap: 2px;
  color: var(--mh-terracotta);
}

.mh-trust__score-val {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1;
}

.mh-trust__score-suffix {
  font-size: 1.125rem;
  color: var(--mh-ink-2);
  font-weight: 400;
}

.mh-trust__thumb { color: var(--mh-terracotta); }

.mh-trust__platform-name {
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mh-navy);
}

.mh-trust__platform-count {
  font-size: var(--t-caption);
  color: var(--mh-ink-2);
  margin-top: 4px;
}

.mh-trust__platform-note {
  font-size: var(--t-micro);
  color: var(--mh-terracotta);
  margin-top: 6px;
  font-style: italic;
}

/* ============================================================
   3) ABOUT SAMUEL
   ============================================================ */
.mh-about {
  background: var(--mh-sand);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--mh-rule);
}

.mh-about__inner {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-8);
  align-items: start;
}

.mh-about__photo-col {
  position: sticky;
  top: 120px;
}

/* About-teaser photo: full uncropped portrait, capped to a modest size so it
   doesn't dominate the section — top-anchored, sticky (Samuel 2026-06-06). */
.mh-about__photo-col .mh-photo-block {
  aspect-ratio: auto;
  max-width: 360px;
  padding: 0;
  background: none;
}
.mh-about__photo-col .mh-photo-block > img {
  position: static;
  width: 100%;
  height: auto;
}
/* Second stacked photo: consistent vertical gap so the two read as a pair. */
.mh-about__photo-2 {
  margin-top: var(--space-5);
}

.mh-about__h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-6);
}

.mh-about__p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mh-ink);
  margin: 0 0 var(--space-5);
}

.mh-about__readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  text-decoration: none;
  margin-top: var(--space-2);
}
.mh-about__readmore:hover { color: var(--mh-terracotta-2); text-decoration: none; }

.mh-about__signature {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--mh-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}

.mh-about__sig-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--mh-navy);
  line-height: 1;
}

.mh-about__sig-role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-ink-2);
  margin-top: 6px;
}

.mh-about__creds {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mh-about__cred-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--t-caption);
}

.mh-about__cred-k {
  width: 84px;
  color: var(--mh-ink-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
}

.mh-about__cred-v {
  color: var(--mh-navy);
  font-weight: 500;
}

/* ============================================================
   4) EXPERIENCES EDITORIAL
   ============================================================ */
.mh-experiences { background: var(--mh-sand-2); padding: var(--section-y) 0; }

.mh-experiences__head { max-width: 920px; margin-bottom: var(--space-8); }

.mh-section-h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

.mh-section-h2--md {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.mh-experiences__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mh-ink);
  margin: 0;
  max-width: 600px;
}

.mh-experiences__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.mh-exp-card {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 240ms var(--ease-out-expo),
              box-shadow 240ms var(--ease-out-expo);
  display: flex;
  flex-direction: column;
}
.mh-exp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.mh-exp-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
}
.mh-exp-card__link:hover { text-decoration: none; }

.mh-exp-card__photo {
  aspect-ratio: 4/3;
  border-radius: 0;
}

.mh-exp-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mh-exp-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}

.mh-exp-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
}

.mh-exp-card__days {
  font-size: var(--t-micro);
  color: var(--mh-ink-2);
}

.mh-exp-card__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--mh-navy);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

.mh-exp-card__lede {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mh-ink);
  margin: 0 0 var(--space-5);
}

.mh-exp-card__bullets {
  list-style: none;
  padding: var(--space-5) 0 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--mh-rule);
}

.mh-exp-card__bullets li {
  display: flex;
  gap: 10px;
  font-size: var(--t-eyebrow);
  color: var(--mh-ink);
}

.mh-exp-card__bullet {
  color: var(--mh-terracotta);
  font-weight: 700;
}

.mh-exp-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
}

.mh-exp-card:hover .mh-exp-card__cta svg {
  transform: translateX(4px);
  transition: transform 240ms var(--ease-out-expo);
}

.mh-experiences__pricing {
  margin-top: var(--space-7);
  padding: var(--space-5) 28px;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.mh-experiences__pricing-eye { margin-bottom: 6px; }

.mh-experiences__pricing-note {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  color: var(--mh-navy);
  font-weight: 500;
}

/* ============================================================
   6) INSTAGRAM GRID
   ============================================================ */
.mh-insta {
  background: var(--mh-cream);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--mh-rule);
}

.mh-insta__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: flex-end;
  margin-bottom: var(--space-7);
}

.mh-insta__handle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  text-decoration: none;
}
.mh-insta__handle:hover { color: var(--mh-terracotta-2); text-decoration: none; }

.mh-insta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mh-insta__tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.mh-insta__tile:hover { text-decoration: none; }

.mh-insta__tile--navy {
  background: linear-gradient(135deg, #1A2B4C 0%, #0E1B32 100%);
  color: var(--mh-cream);
}

.mh-insta__tile--sand {
  background: linear-gradient(135deg, #EAE5DA 0%, #DDD6C5 100%);
  color: var(--mh-navy);
}

.mh-insta__aperture {
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: 0.4;
}

.mh-insta__cap {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  line-height: 1.35;
  opacity: 0.55;
  transform: translateY(8px);
  transition: opacity 240ms, transform 240ms;
}

.mh-insta__tile:hover .mh-insta__cap,
.mh-insta__tile:focus-visible .mh-insta__cap {
  opacity: 1;
  transform: translateY(0);
}

/* Hover scrim — fades in over the photo, sits beneath the caption */
.mh-insta__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(14,27,50,0.82) 0%, rgba(14,27,50,0.15) 50%, rgba(14,27,50,0) 80%);
  opacity: 0;
  transition: opacity 260ms;
}
.mh-insta__tile:hover::before,
.mh-insta__tile:focus-visible::before { opacity: 1; }

.mh-insta__cap { position: relative; z-index: 2; }

/* Curated photo from Instagram CPT (featured image) */
.mh-insta__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mh-insta__tile:hover .mh-insta__photo,
.mh-insta__tile:focus-visible .mh-insta__photo { transform: scale(1.06); }

.mh-insta__tile--has-img { color: var(--mh-cream); }
/* clean photo by default; caption + scrim reveal on hover (overrides base 0.55) */
.mh-insta__tile--has-img .mh-insta__cap { opacity: 0; transform: translateY(10px); }

/* Centre tile — quiet terracotta hero frame */
.mh-insta__tile--hero { outline: 2px solid var(--mh-terracotta); outline-offset: -2px; z-index: 1; }

/* ============================================================
   7) FIELD JOURNAL — blog teaser
   ============================================================ */
.mh-journal {
  background: var(--mh-sand);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--mh-rule);
}

.mh-journal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
  gap: var(--space-5);
}

.mh-journal__viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  text-decoration: none;
}
.mh-journal__viewall:hover { color: var(--mh-terracotta-2); text-decoration: none; }

/* 3.4 — mobile "Read the blog" button; replaces the header link ≤767. */
.mh-journal__cta-mobile { display: none; }
@media (max-width: 767px) {
  .mh-journal__viewall { display: none; }
  .mh-journal__cta-mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--space-6);
  }
}

.mh-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--mh-rule-strong);
}

.mh-journal__entry {
  padding: 40px 32px 40px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mh-journal__entry + .mh-journal__entry {
  padding-left: 32px;
  border-left: 1px solid var(--mh-rule);
}

.mh-journal__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mh-journal__cat { color: var(--mh-terracotta); }
.mh-journal__date { color: var(--mh-ink-2); }

.mh-journal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}

.mh-journal__title a {
  color: var(--mh-navy);
  text-decoration: none;
}
.mh-journal__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--mh-terracotta);
  text-underline-offset: 6px;
}

.mh-journal__lede {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mh-ink);
  margin: 0;
}

.mh-journal__foot {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--t-micro);
  color: var(--mh-ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mh-journal__readmore {
  color: var(--mh-terracotta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  text-decoration: none;
  transition: transform 200ms var(--ease-out-expo);
  display: inline-block;
}

.mh-journal__entry:hover .mh-journal__readmore { transform: translateX(3px); }

/* ============================================================
   8) FAQ
   ============================================================ */
.mh-faq {
  background: var(--mh-cream);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--mh-rule);
}

.mh-faq__head {
  max-width: 880px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.mh-faq__list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--mh-rule-strong);
}

.mh-faq__item {
  border-bottom: 1px solid var(--mh-rule);
}

.mh-faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.3;
  text-wrap: balance;
}
.mh-faq__q::-webkit-details-marker { display: none; }

.mh-faq__toggle {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--mh-rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mh-terracotta);
  font-size: 1.125rem;
  font-weight: 300;
  transition: transform 240ms var(--ease-out-expo);
}

.mh-faq__item[open] .mh-faq__toggle {
  transform: rotate(45deg);
}

.mh-faq__a {
  overflow: hidden;
  padding-bottom: var(--space-6);
}

.mh-faq__a p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mh-ink);
  margin: 0;
  padding-right: 56px;
  max-width: 720px;
}
.mh-faq__a p + p { margin-top: var(--space-4); }

/* ============================================================
   9) HOMEPAGE CTA
   ============================================================ */
.mh-homecta {
  background: var(--mh-navy);
  padding: var(--section-y) 0;
}

.mh-homecta__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: stretch;
  max-width: 1100px;
}

/* Left column is the invitation; the button lives here so the call to action
   reads as the natural end of the copy rather than floating off on its own. */
.mh-homecta__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Pin the button to the bottom of the (stretched) column so its baseline lines
   up with the bottom of the contact card — both columns end on the same grid
   line. A min keeps it off the lead when the column is short. */
.mh-homecta__cta {
  margin-top: auto;
  margin-bottom: 12px; /* nest the button just inside the card's bottom edge */
}
.mh-homecta__lead { margin-bottom: var(--space-6); }

.mh-homecta__h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  font-weight: 500;
  color: var(--mh-cream);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

.mh-homecta__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(253,251,247,0.78);
  margin: 0;
  max-width: 480px;
}

/* Right column is a self-contained contact card. It stretches to the height of
   the invitation column and centres its contents, so the two sides read as a
   balanced pair rather than a tall block of text beside a floating button. */
.mh-homecta__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(253,251,247,0.045);
  border: 1px solid rgba(253,251,247,0.14);
  border-radius: 16px;
  padding: var(--space-6) var(--space-6) calc(var(--space-6) + 4px);
}

.mh-homecta__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

/* Stacked label-over-value: a long value (the reply line) wraps cleanly
   instead of colliding with the label, the way justify-content:space-between
   forced it to. */
.mh-homecta__line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-eyebrow);
}

/* Phone block is the card's focal point; a hairline separates it from the
   reply line below. */
.mh-homecta__line--phone {
  gap: 6px;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(253,251,247,0.14);
}

.mh-homecta__line-k {
  color: rgba(253,251,247,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
}

.mh-homecta__line-v {
  color: var(--mh-cream);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 42ch;
}

/* Phone value → tappable wa.me link + tri-modal caption */
a.mh-homecta__line-tel {
  display: inline-block;
  width: fit-content;
  color: var(--mh-cream);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 1px solid rgba(253,251,247,0.28);
  transition: border-color 160ms ease;
}
a.mh-homecta__line-tel:hover,
a.mh-homecta__line-tel:focus-visible {
  border-bottom-color: var(--mh-cream);
  text-decoration: none; /* #TR2-1: same — avoid the global a:hover underline doubling with the border-bottom */
}
.mh-homecta__line-modes {
  margin-top: 2px;
  color: rgba(253,251,247,0.5);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* #TR2-1: contact modes as individual tap targets (Call · Text · WhatsApp · FaceTime). */
.mh-homecta__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-top: 4px; }
.mh-homecta__mode {
  display: inline-flex; align-items: center;
  padding: 4px 6px;
  color: rgba(253,251,247,0.82); /* AA on the navy card (verified) */
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.mh-homecta__mode:first-of-type { padding-left: 0; } /* row's left edge aligns with the number */
.mh-homecta__mode:hover { color: var(--mh-cream); border-bottom-color: rgba(253,251,247,0.5); text-decoration: none; } /* #TR2-1: kill the global a:hover terracotta underline so only the single border-bottom shows (was double-underlining) */
.mh-homecta__mode:focus-visible { outline: 2px solid #e08b6f; outline-offset: 2px; border-radius: 2px; }
.mh-homecta__mode-sep { color: rgba(253,251,247,0.55); font-size: 0.625rem; } /* QA9 A4: 0.4→0.55 = 4.79:1 on the navy card (was 3.28) */
.mh-homecta__mode[hidden] { display: none; } /* #TR2-1: beat .mh-homecta__mode{display:inline-flex} so the Apple-only FaceTime link truly stays hidden on other devices */
/* touch devices: real 44px hit area + a touch more spacing between targets */
@media (pointer: coarse) {
  .mh-homecta__mode { min-height: 44px; padding: 0 8px; }
  .mh-homecta__mode:first-of-type { padding-left: 0; }
}

/* ============================================================
   MOBILE — homepage sections
   ============================================================ */
@media (max-width: 900px) {
  .mh-hero__inner { padding: var(--space-6) var(--gutter) var(--space-7); min-height: 70vh; }
  .mh-hero__well { margin-top: var(--space-6); padding: var(--space-5) 0; }
  .mh-hero__bottom { gap: var(--space-5); }

  .mh-trust__top,
  .mh-about__inner,
  .mh-insta__head,
  .mh-homecta__inner { grid-template-columns: 1fr; gap: var(--space-6); }

  /* CTA on mobile: full-width button so it reads as one column with the card
     below it, rather than a small left-aligned button floating above. */
  .mh-homecta__left { align-items: stretch; }
  .mh-homecta__cta { width: 100%; text-align: center; margin-top: var(--space-5); }

  .mh-about__photo-col { position: static; max-width: 360px; }

  .mh-trust__platforms,
  .mh-experiences__grid,
  .mh-journal__grid { grid-template-columns: 1fr; }

  /* Instagram stays a clean 3-wide 3x3 on mobile; captions off so photos breathe */
  .mh-insta__grid { gap: 4px; }
  .mh-insta__cap { display: none; }

  .mh-trust__platform + .mh-trust__platform { border-left: 0; border-top: 1px solid var(--mh-rule); }

  .mh-journal__entry + .mh-journal__entry { border-left: 0; border-top: 1px solid var(--mh-rule); padding-left: 0; padding-top: var(--space-5); }
  .mh-journal__entry { padding-right: 0; }

  .mh-experiences__pricing { flex-direction: column; align-items: flex-start; }

  .mh-insta__handle { justify-self: start; }

  .mh-faq__q { font-size: var(--t-h4); }
}

@media (max-width: 580px) {
  .mh-insta__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   A5 (iter 2) — MOBILE density tweaks
   Home sections taper via --section-y (48px phone floor). The rules below
   cover what the token can't: inner-page heroes/content (base rules that had
   NO mobile override) + the home About teaser font (reads ~19px serif vs
   ~16px elsewhere). Higher specificity (body / .mh-about) so the later base
   rules can't win on source order. Desktop untouched — all gated to phones.
   ============================================================ */
@media (max-width: 767px) {
  /* Home About teaser: bring the big serif prose in line with other sections.
     Drop-cap kept (consistent with vignettes/blog/About, per A4). */
  .mh-about .mig-prose { font-size: 1.0625rem; line-height: 1.65; }
}
/* (Inner-page section padding tightening lives in one consolidated block at the
   end of this file — see "A5 — MOBILE section density, all page templates".) */

/* ============================================================
   PAGE HERO — shared inner-page hero
   ============================================================ */
.mig-page-hero {
  background: var(--mh-sand);
  /* 3.2 — tightened vertical rhythm (was 80px/64px) so content sits higher on
     the fold without cramping. Left alignment kept (3.1). */
  padding: 56px var(--gutter) 44px;
  border-bottom: 1px solid var(--mh-rule);
}
/* Archive/blog pages: the sand hero sits directly above the sand .mig-blog
   grid (which has no top border), so this 1px divider reads as a stray line at
   the top of the post list. Remove it only where .mig-blog follows the hero;
   on every other page the divider is intentional. (SEARCH-UX-PLAN Phase 1) */
.mig-page-hero:has(+ .mig-blog) { border-bottom: 0; }
.mig-page-hero--navy {
  background: var(--mh-navy);
  border-bottom: 1px solid rgba(253,251,247,0.18);
}
.mig-page-hero__inner { max-width: 1200px; margin: 0 auto; }
.mig-page-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
}
.mig-page-hero__rule {
  width: 48px;
  height: 2px;
  background: var(--mh-terracotta);
  border: 0;
  margin: 12px 0 18px; /* 3.2 — tighter eyebrow→title gap */
}
.mig-page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 16px; /* 3.2 — tighter title→dek gap */
  text-wrap: balance;
  max-width: 920px;
  color: var(--mh-navy);
}
.mig-page-hero--navy .mig-page-hero__title { color: var(--mh-cream); }
.mig-page-hero__dek {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--mh-ink);
  margin: 0;
  max-width: 700px;
  text-wrap: pretty;
}
.mig-page-hero--navy .mig-page-hero__dek { color: rgba(253,251,247,0.78); }
/* Links inside a hero dek must read as links at rest (matches .mig-prose a) —
   terracotta + underline, not only on hover where they looked like plain text. */
.mig-page-hero__dek a { color: var(--mh-terracotta); text-decoration: underline; text-underline-offset: 3px; }
.mig-page-hero__dek a:hover { color: #a95a3f; }
.mig-page-hero--navy .mig-page-hero__dek a { color: #e08b6f; }
.mig-page-hero--navy .mig-page-hero__dek a:hover { color: var(--mh-cream); }

/* ============================================================
   TRUST RAIL
   ============================================================ */
.mig-trust-rail {
  background: var(--mh-cream);
  padding: 64px var(--gutter);
  border-top: 1px solid var(--mh-rule);
}
.mig-trust-rail--dark {
  background: var(--mh-navy);
  border-top: 1px solid rgba(253,251,247,0.18);
}
.mig-trust-rail__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: center;
}
.mig-trust-rail__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  margin-bottom: 12px;
}
.mig-trust-rail__platforms { display: flex; gap: 24px; flex-wrap: wrap; }
.mig-trust-rail__platform {
  padding-right: 24px;
  border-right: 1px solid var(--mh-rule);
}
.mig-trust-rail--dark .mig-trust-rail__platform { border-right-color: rgba(253,251,247,0.18); }
.mig-trust-rail__platform:last-child { border-right: 0; padding-right: 0; }
/* Uniform icon row so star tiles and the recommend-thumb tile align vertically */
.mig-trust-rail__icon {
  height: 14px;          /* matches the recommend thumb height (the tallest icon) */
  margin-bottom: 4px;
  display: flex;
  align-items: center;   /* centres stars within the row */
}
.mig-trust-rail__stars { display: flex; gap: 1px; color: var(--mh-terracotta); margin-bottom: 0; }
.mig-trust-rail__thumb { color: var(--mh-terracotta); display: block; }

/* Hover affordance on tiles that link out */
.mig-trust-rail__platform--link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: opacity 150ms ease, transform 150ms ease;
}
.mig-trust-rail__platform--link:hover { opacity: 1; }
.mig-trust-rail__platform--link:focus-visible { outline: 2px solid var(--mh-terracotta); outline-offset: 4px; }
.mig-trust-rail__platform-cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mh-terracotta);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.mig-trust-rail--dark .mig-trust-rail__platform-cta { color: var(--mh-terracotta); }
.mig-trust-rail__platform-cta-arrow {
  display: inline-block;
  transition: transform 180ms ease;
}
.mig-trust-rail__platform--link:hover .mig-trust-rail__platform-cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mig-trust-rail__platform--link:hover .mig-trust-rail__platform-cta-arrow { transform: translateX(3px); }
.mig-trust-rail__score {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1;
}
.mig-trust-rail--dark .mig-trust-rail__score { color: var(--mh-cream); }
.mig-trust-rail__score-denom { font-size: 0.8125rem; font-weight: 400; color: var(--mh-ink-2); }
.mig-trust-rail--dark .mig-trust-rail__score-denom { color: rgba(253,251,247,0.65); }
.mig-trust-rail__platform-name {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mh-navy);
  margin-top: 6px;
}
.mig-trust-rail--dark .mig-trust-rail__platform-name { color: var(--mh-cream); }
.mig-trust-rail__platform-count { font-size: 0.6875rem; color: var(--mh-ink-2); margin-top: 2px; }
.mig-trust-rail--dark .mig-trust-rail__platform-count { color: rgba(253,251,247,0.65); }
.mig-trust-rail__quote-col {
  border-left: 1px solid var(--mh-rule);
  padding-left: 56px;
}
.mig-trust-rail--dark .mig-trust-rail__quote-col { border-left-color: rgba(253,251,247,0.18); }
.mig-trust-rail__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--mh-navy);
  margin: 0 0 16px;
  text-wrap: balance;
}
.mig-trust-rail--dark .mig-trust-rail__quote { color: var(--mh-cream); }
.mig-trust-rail__attr { font-size: 0.75rem; color: var(--mh-ink-2); }
.mig-trust-rail--dark .mig-trust-rail__attr { color: rgba(253,251,247,0.65); }
.mig-trust-rail__attr-name {
  color: var(--mh-navy);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}
.mig-trust-rail--dark .mig-trust-rail__attr-name { color: var(--mh-cream); }

/* ============================================================
   BREADCRUMB — demoted 2026-05-30 (PLAN-TWEAKS C.2) so the new category
   eyebrow takes the topical-badge spotlight. Breadcrumb is now a quiet
   "you are here" nav trail; the leaf item is no longer accented, so it
   doesn't compete with the terracotta uppercase eyebrow above the title.
   ============================================================ */
.mig-breadcrumb { font-size: 0.6875rem; color: var(--mh-ink-2); margin-bottom: 16px; opacity: 0.85; }
.mig-breadcrumb a { color: var(--mh-ink-2); text-decoration: none; }
.mig-breadcrumb a:hover { color: var(--mh-navy); }
.mig-breadcrumb__sep { margin: 0 8px; color: var(--mh-rule-strong); }
.mig-breadcrumb__current { color: var(--mh-ink-2); font-weight: 500; }

/* ============================================================
   SINGLE ARTICLE — header
   ============================================================ */
.mig-article-header { background: var(--mh-sand); padding: 80px var(--gutter) 56px; }
.mig-article-header__inner { max-width: 760px; margin: 0 auto; }
.mig-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.mig-article-meta__cat { color: var(--mh-terracotta); }
.mig-article-meta__cat a {
  color: inherit;
  text-decoration: none;
  transition: opacity 150ms;
}
.mig-article-meta__cat a:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 3px; }
.mig-article-meta__dash { width: 24px; height: 1px; background: var(--mh-rule-strong); flex-shrink: 0; }
.mig-article-meta__date { color: var(--mh-ink-2); }
.mig-article-meta__updated { color: var(--mh-navy); }

/* PLAN-TWEAKS C.2 — dedicated category eyebrow above the title.
   Distinct visual treatment from .mig-article-meta__cat so it reads as a
   topical badge, not metadata. The breadcrumb above + this eyebrow + the
   meta strip categorise the post at three escalating levels of prominence. */
.mig-article-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mig-article-eyebrow a { color: inherit; text-decoration: none; transition: opacity 150ms; }
.mig-article-eyebrow a:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 3px; }
.mig-article-eyebrow__sep { color: var(--mh-ink-2); opacity: 0.6; }

.mig-breadcrumb a.mig-breadcrumb__current:hover { color: var(--mh-navy); text-decoration: underline; text-underline-offset: 3px; }
.mig-article-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 400;
  color: var(--mh-navy);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.mig-article-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--mh-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.mig-article-byline {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--mh-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mig-article-byline__author { display: flex; align-items: center; gap: 14px; }
.mig-article-byline__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mh-navy); color: var(--mh-cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.1875rem;
  flex-shrink: 0;
}
.mig-article-byline__name { font-size: 0.8125rem; font-weight: 600; color: var(--mh-navy); }
/* 6.2.4 — byline name links to /about/ (E-E-A-T author → bio page); quiet affordance */
.mig-article-byline__name a { color: inherit; text-decoration: none; }
.mig-article-byline__name a:hover,
.mig-article-byline__name a:focus-visible { color: var(--mh-terracotta); text-decoration: underline; text-underline-offset: 3px; }
.mig-article-byline__role { font-size: 0.75rem; color: var(--mh-ink-2); }
.mig-article-byline__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mig-article-byline__btn {
  background: transparent;
  border: 1px solid var(--mh-rule-strong);
  padding: 8px 16px;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mh-navy); cursor: pointer; border-radius: 2px;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.mig-article-byline__btn:hover { background: var(--mh-navy); color: var(--mh-cream); }

/* Article body */
.mig-article-body { background: var(--mh-sand); padding: 0 var(--gutter) 80px; }
.mig-article-body__inner { max-width: 720px; margin: 0 auto; position: relative; }
.mig-article-body__hero { margin-bottom: 56px; }
.mig-article-body__hero img { width: 100%; height: auto; display: block; }
.mig-article-body__hero-caption {
  font-size: 0.75rem; color: var(--mh-ink-2);
  font-style: italic; margin-top: 12px; line-height: 1.5;
  text-align: center;
}

/* Editorial prose */
.mig-prose {
  font-family: var(--font-display);
  font-size: 1.1875rem; /* 19px — desktop (original; Samuel's easing was mobile-only) */
  line-height: 1.75;
  color: var(--mh-ink);
}
.mig-prose p { margin: 0 0 26px; }
/* Consistency: blog prose is always left-aligned (ragged right). A handful of
   legacy posts carry inline `text-align: justify` on paragraphs (Northern
   Judean Desert, Mount Carmel, Mount Sedom, The Sharon Plain, Jerusalem in the
   First Temple Period). Force them left and guard against any future post that
   picks up the same stray inline style. No DB edit needed. */
.mig-prose [style*="justify"] { text-align: left !important; }
@media (max-width: 767px) {
  /* Mobile-only easing (2026-06-03): 17px + tighter leading/gaps for less scroll. */
  .mig-prose { font-size: 1.0625rem; line-height: 1.6; }
  .mig-prose p { margin: 0 0 16px; }
}
/* About bio — inline mid-bio photo, MOBILE ONLY (hidden ≥768px). During the
   image audit, swap .mig-bio-inline__ph for an <img>. */
.mig-bio-inline { margin: 4px 0 22px; }
.mig-bio-inline img { display: block; width: 100%; height: auto; border-radius: 2px; }
.mig-bio-inline__ph {
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(45deg, var(--mh-sand-2), var(--mh-sand-2) 10px, #e2ddd0 10px, #e2ddd0 20px);
  border: 1px solid var(--mh-rule-strong);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
}
.mig-bio-inline__ph span { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--mh-ink-2); letter-spacing: .02em; line-height: 1.5; }
@media (min-width: 768px) { .mig-prose .mig-bio-inline--mobile { display: none; } }
.mig-prose > p:first-of-type::first-letter {
  font-size: 4.75rem;
  font-weight: 500;
  color: var(--mh-terracotta);
  float: left;
  line-height: 0.85;
  margin-right: 12px;
  margin-top: 6px;
}
.mig-prose blockquote {
  border-left: 3px solid var(--mh-terracotta);
  padding-left: 32px;
  margin: 40px 0;
  font-style: italic;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--mh-navy);
  text-wrap: balance;
}
.mig-prose h2 {
  font-size: 2rem; font-weight: 500; color: var(--mh-navy);
  line-height: 1.2; letter-spacing: -0.005em; margin: 48px 0 20px; text-wrap: balance;
}
.mig-prose h3 {
  font-size: 1.5rem; font-weight: 600; color: var(--mh-navy);
  line-height: 1.25; margin: 40px 0 16px;
}
.mig-prose ul, .mig-prose ol { padding-left: 24px; margin: 0 0 26px; }
.mig-prose li { margin-bottom: 8px; }
.mig-prose a { color: var(--mh-terracotta); text-decoration: underline; text-underline-offset: 3px; }

/* ----- Images: natural aspect, centered, height-capped (Option A) -----
   Uses !important throughout because legacy [caption] shortcodes inject
   inline width/style on wrappers that would otherwise beat external CSS. */

/* Neutralise the legacy [caption] wrapper that has inline width */
.mig-prose .wp-caption,
.mig-prose .wp-block-image,
.mig-prose figure {
  width: auto !important;
  max-width: 100% !important;
  margin: 40px auto !important;
  display: block;
  text-align: center;
  float: none !important;
}

/* Neutralise legacy alignment classes (alignleft/alignright on the wrapper or img) */
.mig-prose .alignleft,
.mig-prose .alignright,
.mig-prose .aligncenter,
.mig-prose .alignnone {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* The image itself — natural aspect, height-capped at ~680px */
.mig-prose img,
.mig-prose figure img,
.mig-prose .wp-caption img,
.mig-prose .wp-block-image img {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(680px, 80vh) !important;
  border-radius: 2px;
}

/* Standalone <img> (no wrapper) — give it the top/bottom rhythm */
.mig-prose > img,
.mig-prose p > img {
  margin: 40px auto !important;
}

/* "is-small" — opt a detail shot into a narrower display */
.mig-prose img.is-small,
.mig-prose figure.is-small img,
.mig-prose .wp-caption.is-small img,
.mig-prose .wp-block-image.is-small img {
  max-width: 380px !important;
  max-height: min(480px, 60vh) !important;
}

/* "is-wide" — panoramic figures break out of the 720px prose column.
   Auto-detected server-side by inc/blog-images.php for any image with
   aspect ratio >= 2:1. Can also be added manually by editors via the
   Gutenberg "Align wide" toggle. */
.mig-prose figure.is-wide,
.mig-prose .wp-caption.is-wide,
.mig-prose .wp-block-image.is-wide {
  max-width: 100% !important;
  width: auto !important;
}
.mig-prose figure.is-wide img,
.mig-prose .wp-caption.is-wide img,
.mig-prose .wp-block-image.is-wide img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
}
@media (min-width: 1024px) {
  .mig-prose figure.is-wide,
  .mig-prose .wp-caption.is-wide,
  .mig-prose .wp-block-image.is-wide {
    width: 960px !important;
    max-width: 960px !important;
    margin-left: -120px !important;
    margin-right: -120px !important;
  }
}

/* PLAN-TWEAKS E.4 — true panoramics (aspect ≥ 2.5). Auto-tagged by
   inc/blog-images.php. The figure stays inside the 720px prose column;
   blog-pano.js wraps the inner <img> in a horizontally-scrollable
   viewport (scroll-snap, three snap points), adds a fading "swipe →"
   hint that fades on first interaction or after 4s, and pins a tiny
   ↔ chip to the bottom-right of the viewport. Without JS the panoramic
   degrades to a small wide thumbnail — functional, not interactive. */
.mig-prose figure.mig-pano,
.mig-prose .wp-block-image.mig-pano {
  max-width: 720px !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* No-JS fallback only — the bare <img> directly inside an un-upgraded figure
   gets the prose-width treatment. Once JS adds .is-upgraded the more
   specific .mig-pano__img-wrap img rule below takes over. */
.mig-prose figure.mig-pano:not(.is-upgraded) img,
.mig-prose .wp-block-image.mig-pano:not(.is-upgraded) img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block;
}

/* Once JS upgrades the figure (adds `.is-upgraded`), the inner viewport
   takes over: the new <img> inside .mig-pano__img-wrap fills the viewport
   height (360 / 240px) at its natural aspect ratio — width auto so it
   extends beyond the 720px viewport and the user pans through it. */
.mig-pano__frame {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--mh-navy);
}
@media (max-width: 720px) {
  .mig-pano__frame { height: 240px; }
}
.mig-pano__viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--mh-terracotta) rgba(26, 43, 76, 0.3);
  scrollbar-width: thin;
}
.mig-pano__viewport::-webkit-scrollbar { height: 4px; }
.mig-pano__viewport::-webkit-scrollbar-thumb { background: var(--mh-terracotta); border-radius: 2px; }
.mig-pano__viewport::-webkit-scrollbar-track { background: rgba(26, 43, 76, 0.15); }
.mig-pano__strip { display: flex; align-items: stretch; height: 100%; }
.mig-pano__img-wrap { position: relative; height: 100%; flex: 0 0 auto; }
/* Nuclear-specificity selector — must beat both
     `.mig-prose figure img` (height:auto + max-height:680px)
     `.mig-prose .wp-caption img` (same)
   AND any inline `style="width: 600px"` left on the figure by the WP
   classic-editor caption shortcode. The HTML width/height attrs on the
   <img> (e.g. width="600" height="100") would also constrain dimensions
   without explicit !important here. */
.mig-prose figure.mig-pano.is-upgraded .mig-pano__frame .mig-pano__img-wrap img,
.mig-prose .wp-block-image.mig-pano.is-upgraded .mig-pano__frame .mig-pano__img-wrap img,
.mig-prose .wp-caption.mig-pano.is-upgraded .mig-pano__frame .mig-pano__img-wrap img {
  height: 100% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}
.mig-pano__snap { position: absolute; top: 0; bottom: 0; width: 1px; scroll-snap-stop: always; }
.mig-pano__snap--left { left: 0; scroll-snap-align: start; }
.mig-pano__snap--centre { left: 50%; scroll-snap-align: center; }
.mig-pano__snap--right { right: 0; left: auto; scroll-snap-align: end; }

.mig-pano__hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 43, 76, 0.85);
  color: var(--mh-cream);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
}
.mig-pano__hint.is-faded { opacity: 0; }
.mig-pano__icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 43, 76, 0.78);
  color: var(--mh-cream);
  border: 1px solid rgba(253, 251, 247, 0.18);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2;
}
/* `.mig-prose ol` (line 2344) sets `padding-left: 24px; margin: 0 0 26px`
   which would offset the dots leftward AND add 26px of gap before the
   caption. Match its specificity + !important to zero both out. */
.mig-prose .mig-pano__dots,
.mig-pano__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
/* Tighten the gap between dots and figcaption — default figcaption rule
   adds 10px on top, plus the figure's natural 40px margin would push it
   further. Inside a .mig-pano figure the caption sits 8px below the dots. */
.mig-prose figure.mig-pano figcaption,
.mig-prose .wp-block-image.mig-pano figcaption,
.mig-prose figure.mig-pano .wp-caption-text,
.mig-prose .wp-block-image.mig-pano .wp-caption-text {
  margin-top: 8px !important;
}
.mig-pano__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mh-rule);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms, transform 200ms;
}
.mig-pano__dot.is-active { background: var(--mh-terracotta); transform: scale(1.3); }

/* Captions — centered under the image */
.mig-prose figcaption,
.mig-prose .wp-caption-text {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--mh-ink-2);
  margin: 10px auto 0;
  line-height: 1.5;
  max-width: 100%;
}

.mig-article-sig {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 2px solid var(--mh-navy);
}
.mig-article-sig__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--mh-navy);
}
.mig-article-sig__date { font-size: 0.75rem; color: var(--mh-ink-2); margin-top: 8px; }

/* PLAN-TWEAKS C.2 — tag chips strip (after .mig-prose, before author card).
   Visible cap is data-cap (default 8); JS in blog-ux.js hides extras and
   injects a toggle button. With JS disabled all chips render — the cap is
   progressive enhancement, not enforcement. */
.mig-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 24px;
  align-items: center;
}
.mig-tag-chips__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mh-sand);
  color: var(--mh-navy);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.mig-tag-chips__chip:hover,
.mig-tag-chips__chip:focus-visible {
  background: var(--mh-navy);
  color: var(--mh-cream);
  border-color: var(--mh-navy);
}
.mig-tag-chips__chip[hidden] { display: none; }
.mig-tag-chips__toggle {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--mh-rule-strong);
  background: transparent;
  color: var(--mh-ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 999px;
  transition: color 150ms, border-color 150ms;
}
.mig-tag-chips__toggle:hover,
.mig-tag-chips__toggle:focus-visible {
  color: var(--mh-terracotta);
  border-color: var(--mh-terracotta);
}

/* Table of contents — single blog posts only.
   Mobile/tablet: a <details> collapsible card above the prose.
   Desktop ≥1200px: a sticky right-rail nav in the gutter beside the column.
   Same source data, CSS toggles which variant is visible. */

/* Anchor-jump offset so clicked H2s clear the sticky 72px header,
   plus smooth-scroll on TOC link clicks (respects prefers-reduced-motion). */
html {
  scroll-padding-top: calc(var(--nav-height) + 24px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.mig-toc { font-family: var(--font-body); }

/* ---- Mobile/tablet variant: <details> ---- */
.mig-toc__card {
  margin: 0 0 40px;
  border: 1px solid var(--mh-rule);
  border-left: 3px solid var(--mh-terracotta);
  background: var(--mh-cream);
}
.mig-toc__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-navy);
}
.mig-toc__summary::-webkit-details-marker { display: none; }
.mig-toc__heading { color: var(--mh-terracotta); }
.mig-toc__count { color: var(--mh-ink-2); margin-left: 2px; font-weight: 500; letter-spacing: 0; }
.mig-toc__caret { margin-left: auto; color: var(--mh-ink-2); transition: transform 180ms var(--ease-out-expo); flex-shrink: 0; }
.mig-toc__card[open] .mig-toc__caret { transform: rotate(180deg); }
.mig-toc__card .mig-toc__list {
  list-style: none;
  margin: 0;
  padding: 8px 18px 18px;
  border-top: 1px solid var(--mh-rule);
  counter-reset: mig-toc-item;
}
.mig-toc__card .mig-toc__list li { counter-increment: mig-toc-item; }
.mig-toc__card .mig-toc__list a {
  position: relative;
  display: block;
  padding: 8px 0 8px 32px;
  color: var(--mh-navy);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mig-toc__card .mig-toc__list a::before {
  content: counter(mig-toc-item, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--mh-ink-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.mig-toc__card .mig-toc__list a:hover { color: var(--mh-terracotta); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Desktop variant: sticky right rail ---- */
.mig-toc__rail { display: none; }

@media (min-width: 1200px) {
  /* Hide the inline mobile card, show the right-rail variant */
  .mig-toc__card { display: none; }

  .mig-toc__rail {
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% + 32px);
    width: 220px;
    height: 100%;
  }
  .mig-toc__rail-sticky {
    position: sticky;
    top: calc(var(--nav-height) + 32px);
    max-height: calc(100vh - var(--nav-height) - 64px);
    overflow-y: auto;
    padding-right: 4px; /* room for the scrollbar */
  }
  .mig-toc__rail-heading {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mh-terracotta);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mh-rule);
  }
  .mig-toc__rail .mig-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: mig-toc-item;
  }
  .mig-toc__rail .mig-toc__list li {
    counter-increment: mig-toc-item;
    border-left: 2px solid transparent;
    transition: border-color 200ms;
  }
  .mig-toc__rail .mig-toc__list a {
    position: relative;
    display: block;
    padding: 6px 0 6px 36px;
    color: var(--mh-ink);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: color 200ms;
  }
  .mig-toc__rail .mig-toc__list a::before {
    content: counter(mig-toc-item, decimal-leading-zero) ".";
    position: absolute;
    left: 12px;
    top: 6px;
    color: var(--mh-ink-2);
    font-size: 0.6875rem;
    font-weight: 600;
  }
  .mig-toc__rail .mig-toc__list a:hover { color: var(--mh-terracotta); }
  /* Active link — set via JS using aria-current */
  .mig-toc__rail .mig-toc__list li:has(a[aria-current="location"]) {
    border-left-color: var(--mh-terracotta);
  }
  .mig-toc__rail .mig-toc__list a[aria-current="location"] {
    color: var(--mh-navy);
    font-weight: 600;
  }
}


/* Author card — appears at the bottom of every single blog post.
   Edited via Site Settings → Author tab. */
.mig-author-card {
  margin-top: 48px;
  padding: 32px;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-left: 3px solid var(--mh-terracotta);
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.mig-author-card__portrait {
  flex-shrink: 0;
}
.mig-author-card__portrait img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.mig-author-card__monogram {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--mh-navy);
  color: var(--mh-cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 2.5rem;
}
.mig-author-card__body { flex: 1; min-width: 0; }
.mig-author-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  margin-bottom: 8px;
}
.mig-author-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--mh-navy);
  line-height: 1.2;
  margin-bottom: 4px;
}
.mig-author-card__name-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms; }
.mig-author-card__name-link:hover,
.mig-author-card__name-link:focus-visible { border-bottom-color: var(--mh-terracotta); }
.mig-author-card__role {
  font-size: 0.875rem;
  color: var(--mh-ink);
  margin-bottom: 2px;
}
.mig-author-card__credentials {
  font-size: 0.75rem;
  color: var(--mh-ink-2);
  font-style: italic;
}
.mig-author-card__bio {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mh-ink);
}
.mig-author-card__bio p { margin: 0 0 12px; }
.mig-author-card__bio p:last-child { margin-bottom: 0; }
.mig-author-card__actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile layout — stack portrait above text */
@media (max-width: 600px) {
  .mig-author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    gap: 16px;
  }
  .mig-author-card__portrait img,
  .mig-author-card__monogram {
    width: 80px;
    height: 80px;
  }
  .mig-author-card__actions { justify-content: center; }
}

/* Comments */
.mig-comments { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--mh-rule); }
.mig-comments__eyebrow {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mh-terracotta); margin-bottom: 10px;
}
.mig-comments__title {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 500;
  color: var(--mh-navy); margin: 0 0 8px; line-height: 1.2;
}
.mig-comments__note {
  font-family: var(--font-display);
  font-style: italic; font-size: 1rem;
  line-height: 1.55; color: var(--mh-ink-2); margin: 0 0 28px;
}
.mig-comments .comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.mig-comments .comment-list .comment { padding: 24px 0; border-bottom: 1px solid var(--mh-rule); }
.mig-comments .comment-author .fn {
  font-size: 0.8125rem; font-weight: 600; color: var(--mh-navy);
}
.mig-comments .comment-metadata { font-size: 0.75rem; color: var(--mh-ink-2); margin: 4px 0 12px; }
.mig-comments .comment-metadata a { color: var(--mh-ink-2); text-decoration: none; }
.mig-comments .comment-content p {
  font-family: var(--font-display);
  font-size: 1rem; line-height: 1.65; color: var(--mh-ink); margin: 0 0 10px;
}
.mig-comments .reply a {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mh-terracotta); text-decoration: none;
}
#respond { margin-top: 40px; }
#respond .comment-reply-title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 500;
  color: var(--mh-navy); margin: 0 0 24px;
}
#commentform { display: flex; flex-direction: column; gap: 18px; }
#commentform label {
  display: block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mh-navy); margin-bottom: 8px;
}
#commentform .required { color: var(--mh-terracotta); }
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font-family: var(--font-display); font-size: 1rem; line-height: 1.55;
  color: var(--mh-ink); background: var(--mh-cream);
  border: 1px solid var(--mh-rule-strong); border-radius: 2px; resize: vertical;
}
#commentform .comment-form-author,
#commentform .comment-form-email { flex: 1; }
#commentform .comment-form-cookies-consent {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; color: var(--mh-ink-2);
}

/* Related articles */
.mig-related { background: var(--mh-sand); padding: 80px var(--gutter); border-top: 1px solid var(--mh-rule); }
.mig-related__inner { max-width: 1200px; margin: 0 auto; }
.mig-related__head { margin-bottom: 40px; }
.mig-related__title {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 500;
  color: var(--mh-navy); margin: 16px 0 0; line-height: 1.2;
}
.mig-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mig-related__card { text-decoration: none; color: inherit; }
.mig-related__card img { width: 100%; height: auto; display: block; }
.mig-related__card-cat {
  margin-top: 18px; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mh-terracotta);
}
.mig-related__card-title {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 600;
  color: var(--mh-navy); margin: 8px 0; line-height: 1.25; text-wrap: balance;
}
.mig-related__card:hover .mig-related__card-title {
  text-decoration: underline;
  text-decoration-color: var(--mh-terracotta);
  text-underline-offset: 5px;
}
.mig-related__card-mins { font-size: 0.75rem; color: var(--mh-ink-2); }

/* ============================================================
   BLOG INDEX / ARCHIVE
   ============================================================ */
.mig-blog { background: var(--mh-sand); padding: 64px var(--gutter) 80px; }
.mig-blog__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 240px 1fr; gap: 64px;
}
.mig-cat-sidebar { position: sticky; top: calc(var(--nav-height) + 24px); align-self: start; }
.mig-cat-sidebar__eyebrow {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mh-terracotta); margin-bottom: 16px;
}
.mig-cat-sidebar__list { list-style: none; padding: 0; margin: 0; }
.mig-cat-sidebar__item { margin-bottom: 6px; }
.mig-cat-sidebar__link {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 8px 0;
  border-bottom: 1px solid var(--mh-rule);
  font-size: 0.875rem; font-weight: 500;
  color: var(--mh-navy); text-decoration: none;
}
.mig-cat-sidebar__link:hover,
.mig-cat-sidebar__link--active { color: var(--mh-terracotta); font-weight: 600; }
.mig-cat-sidebar__count {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.8125rem; color: var(--mh-ink-2);
}
.mig-cat-sidebar__subs { list-style: none; padding: 4px 0 8px 16px; margin: 0; }
.mig-cat-sidebar__sub-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 0.8125rem; color: var(--mh-ink-2); text-decoration: none;
}
.mig-cat-sidebar__sub-link:hover,
.mig-cat-sidebar__sub-link--active { color: var(--mh-terracotta); font-weight: 600; }
.mig-cat-sidebar__subscribe { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--mh-navy); }
.mig-cat-sidebar__sub-eyebrow {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mh-terracotta); margin-bottom: 10px;
}
.mig-cat-sidebar__sub-note {
  font-family: var(--font-display);
  font-size: 0.875rem; line-height: 1.55; color: var(--mh-ink); margin: 0 0 14px;
}

.mig-article-list__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; padding-bottom: 16px; border-bottom: 2px solid var(--mh-navy);
}
.mig-article-list__heading {
  font-family: var(--font-display); font-size: 1.625rem; font-weight: 500;
  color: var(--mh-navy); margin: 0;
}
.mig-article-list__sort { font-size: 0.75rem; color: var(--mh-ink-2); }

/* Featured article card */
.mig-post-card--featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
  padding: 32px 0; border-bottom: 1px solid var(--mh-rule);
  text-decoration: none; color: inherit;
}
.mig-post-card--featured img { width: 100%; height: auto; display: block; }
.mig-post-card--featured:hover .mig-post-card__title {
  text-decoration: underline;
  text-decoration-color: var(--mh-terracotta);
  text-underline-offset: 5px;
}
.mig-post-card--featured__body {
  display: flex; flex-direction: column; justify-content: center;
}
.mig-post-card__editors-pick {
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mh-cream); background: var(--mh-terracotta); padding: 4px 10px;
}
.mig-post-card__featured-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mig-post-card__cat {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mh-terracotta);
}
.mig-post-card__title {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 500;
  color: var(--mh-navy); margin: 0 0 14px; line-height: 1.15;
  letter-spacing: -0.01em; text-wrap: balance;
}
.mig-post-card__dek {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.125rem; line-height: 1.55;
  color: var(--mh-ink-2); margin: 0 0 18px; text-wrap: pretty;
}
.mig-post-card__byline { font-size: 0.75rem; color: var(--mh-ink-2); }
.mig-post-card__byline strong { color: var(--mh-navy); font-weight: 600; }

/* Regular article card */
.mig-post-card {
  display: block; padding: 28px 0; border-bottom: 1px solid var(--mh-rule);
  text-decoration: none; color: inherit;
}
.mig-post-card:hover .mig-post-card__title {
  text-decoration: underline;
  text-decoration-color: var(--mh-terracotta);
  text-underline-offset: 5px;
}
.mig-post-card__inner { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
.mig-post-card__inner img { width: 100%; height: auto; display: block; }
.mig-post-card .mig-post-card__title { font-size: 1.375rem; font-weight: 600; margin: 0 0 8px; }
.mig-post-card .mig-post-card__dek {
  font-family: var(--font-ui); font-style: normal;
  font-size: 0.875rem; line-height: 1.6; margin: 0 0 12px;
}

/* Pagination */
.mig-pagination { display: flex; justify-content: center; margin-top: 48px; gap: 8px; flex-wrap: wrap; }
.mig-pagination a,
.mig-pagination span,
.mig-pagination__btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--mh-rule-strong);
  background: transparent; color: var(--mh-navy);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background 150ms, color 150ms;
}
.mig-pagination a:hover,
.mig-pagination .current,
.mig-pagination__btn:hover,
.mig-pagination__btn.current { background: var(--mh-navy); color: var(--mh-cream); }
.mig-pagination .prev,
.mig-pagination .next { padding: 0 16px; }
/* paginate_links() wraps items in <ul class="page-numbers"><li>. Without these the inner ul keeps default block + bullets and the outer nav-level flex never reaches the buttons. */
.mig-pagination ul.page-numbers { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mig-pagination ul.page-numbers li { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   SEARCH RESULTS — type badge + branded thumbnail fallback
   (SEARCH-UX-PLAN Phase 2). Reuses .mig-post-card; adds a type
   label so Articles / Itineraries / Pages are distinguishable,
   and a branded emblem fallback in place of an empty colour box.
   Uses tokens so it reads correctly with the Warm Host toggle
   on or off. One accent (terracotta), neutral pill border.
   ============================================================ */
/* Image-card layout (matches the site's .mig-related__card pattern): media is
   full-bleed, text body is inset with comfortable padding so nothing hugs the
   card edge. Card padding reset to 0 + overflow:hidden so the warm card surface
   clips the full-bleed media to its rounded corners. min-height stops short
   results (e.g. a Page with no excerpt) collapsing the media to a thin sliver. */
.mig-search-card { padding: 0; overflow: hidden; }
.mig-search-card__inner { grid-template-columns: 170px 1fr; gap: 0; align-items: stretch; }
.mig-search-card__media { align-self: stretch; min-height: 124px; overflow: hidden; }
/* extra class needed to beat `.mig-post-card__inner img { height:auto }` (0,1,1) */
.mig-search-card .mig-search-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mig-search-card__fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 124px;
  background: linear-gradient(135deg, #EAE5DA 0%, #DDD6C5 100%);
}
.mig-search-card__fallback img { width: 52px; height: auto; opacity: 0.4; }
.mig-search-card__body { padding: 20px 24px; align-self: center; }
.mig-search-badge {
  display: inline-block; margin-bottom: 8px;
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mh-terracotta);
  border: 1px solid var(--mh-rule-strong);
  border-radius: 999px; padding: 3px 10px; line-height: 1.4;
}
@media (max-width: 640px) {
  /* image stacks full-bleed on top; text body padded below */
  .mig-search-card__inner { grid-template-columns: 1fr; }
  .mig-search-card__media { aspect-ratio: 16 / 9; min-height: 0; }
  .mig-search-card__fallback { aspect-ratio: 16 / 9; min-height: 0; }
  .mig-search-card__fallback img { width: 44px; }
  .mig-search-card__body { padding: 16px 20px 20px; align-self: stretch; }
}

/* ============================================================
   GENERIC PAGE
   ============================================================ */
.mig-page-content { background: var(--mh-sand); padding: 64px var(--gutter) 80px; }
.mig-page-content__inner { max-width: 1200px; margin: 0 auto; } /* #7: match the hero inner so the body left-aligns under the H1 (was 760px centred, which offset the text ~220px right of the header) */
.mig-page-content .entry-content {
  max-width: 760px; /* #7: keep the readable measure, but left-aligned under the H1 instead of centred */
  font-family: var(--font-display); font-size: 1.1875rem;
  line-height: 1.75; color: var(--mh-ink);
}
.mig-page-content .entry-content p { margin: 0 0 26px; }
.mig-page-content .entry-content h2 {
  font-size: 2rem; font-weight: 500; color: var(--mh-navy); margin: 48px 0 20px; line-height: 1.2;
}
.mig-page-content .entry-content h3 {
  font-size: 1.5rem; font-weight: 600; color: var(--mh-navy); margin: 40px 0 16px;
}
.mig-page-content .entry-content blockquote {
  border-left: 3px solid var(--mh-terracotta); padding-left: 32px; margin: 40px 0;
  font-style: italic; font-size: 1.375rem; color: var(--mh-navy);
}
.mig-page-content .entry-content a {
  color: var(--mh-terracotta); text-decoration: underline; text-underline-offset: 3px;
}
.mig-page-content .entry-content .wp-caption,
.mig-page-content .entry-content .wp-block-image,
.mig-page-content .entry-content figure {
  width: auto !important;
  max-width: 100% !important;
  margin: 40px auto !important;
  display: block;
  text-align: center;
  float: none !important;
}
.mig-page-content .entry-content .alignleft,
.mig-page-content .entry-content .alignright,
.mig-page-content .entry-content .aligncenter,
.mig-page-content .entry-content .alignnone {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}
.mig-page-content .entry-content img {
  display: block !important;
  margin: 40px auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(680px, 80vh) !important;
  border-radius: 2px;
}
.mig-page-content .entry-content img.is-small {
  max-width: 380px !important;
  max-height: min(480px, 60vh) !important;
}

/* ============================================================
   ITINERARY DETAIL
   ============================================================ */
.mig-itin-body { background: var(--mh-sand); padding: 64px var(--gutter) 80px; }
.mig-itin-body__inner { max-width: 720px; margin: 0 auto; }
/* Itinerary hero matched to the body reading column (mirrors the blog: 760 header / 720 body,
   both centred) so the H1 aligns with the prose instead of sitting in the wide 1200 hero. */
.single-itinerary .mig-page-hero__inner { max-width: 760px; }
.mig-itin-body__inner img { width: 100%; height: auto; display: block; }
.mig-itin-overview { margin-top: 64px; }
.mig-itin-overview__title {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 500;
  color: var(--mh-navy); margin: 14px 0 22px; line-height: 1.18;
  letter-spacing: -0.01em; text-wrap: balance;
}
.mig-itin-overview .mig-prose p { font-size: 1.1875rem; }
.mig-itin-days { margin-top: 80px; }
.mig-itin-days__title {
  font-family: var(--font-display); font-size: 2rem; font-weight: 500;
  color: var(--mh-navy); margin: 14px 0 36px; line-height: 1.2;
}
.mig-itin-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.mig-itin-timeline::before {
  content: '';
  position: absolute; left: 13px; top: 14px; bottom: 14px;
  width: 1px; background: var(--mh-rule-strong);
}
.mig-itin-timeline__item { position: relative; padding-left: 56px; padding-bottom: 40px; }
.mig-itin-timeline__item:last-child { padding-bottom: 0; }
.mig-itin-timeline__dot {
  position: absolute; left: 0; top: 8px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--mh-sand); border: 1.5px solid var(--mh-terracotta);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; color: var(--mh-terracotta);
}
.mig-itin-timeline__day-label {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mh-terracotta); margin-bottom: 6px;
}
.mig-itin-timeline__region { color: var(--mh-ink-2); letter-spacing: 0.06em; }
.mig-itin-timeline__title {
  font-family: var(--font-display); font-size: 1.625rem; font-weight: 500;
  color: var(--mh-navy); margin: 0 0 12px; line-height: 1.22;
  letter-spacing: -0.005em; text-wrap: balance;
}
.mig-itin-timeline__summary {
  font-family: var(--font-display); font-size: 1.0625rem;
  line-height: 1.65; color: var(--mh-ink); margin: 0; text-wrap: pretty;
}
/* Per-day links to the component day itineraries (multi-day hub) */
.mig-itin-timeline__links {
  margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.mig-itin-timeline__links a {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  color: var(--mh-terracotta); text-decoration: none; border-bottom: 1px solid transparent;
}
.mig-itin-timeline__links a:hover { border-bottom-color: var(--mh-terracotta); }
/* Reciprocal "Part of <hub>" link on a component day page */
.mig-itin-partof { margin: 0 0 28px; font-family: var(--font-body); font-size: 0.9rem; }
.mig-itin-partof__lbl {
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.6875rem;
  font-weight: 600; color: var(--mh-ink-2); margin-right: 8px;
}
.mig-itin-partof a {
  font-weight: 600; color: var(--mh-terracotta); text-decoration: none;
  border-bottom: 1px solid rgba(200, 106, 76, 0.4);
}
.mig-itin-partof a:hover { border-bottom-color: var(--mh-terracotta); }
.mig-itin-arrangement {
  margin-top: 80px; background: var(--mh-cream);
  padding: 40px; border: 1px solid var(--mh-rule-strong);
}
.mig-itin-arrangement__title {
  font-family: var(--font-display); font-size: 1.625rem; font-weight: 500;
  color: var(--mh-navy); margin: 12px 0 28px; line-height: 1.2;
}
.mig-itin-arrangement__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.mig-itin-arrangement__label {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mh-terracotta); margin-bottom: 12px;
}
.mig-itin-arrangement__label--not { color: var(--mh-ink-2); }
.mig-itin-arrangement__row {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--mh-rule);
  font-family: var(--font-display); font-size: 0.9375rem; color: var(--mh-ink);
}
.mig-itin-arrangement__row--not { color: var(--mh-ink-2); }
.mig-itin-arrangement__check { color: var(--mh-terracotta); }
.mig-itin-arrangement__dash { color: var(--mh-ink-2); }

/* Itinerary CTA */
.mig-itin-cta { background: var(--mh-navy); padding: 80px var(--gutter); }
.mig-itin-cta__inner { max-width: 880px; margin: 0 auto; }
.mig-itin-cta__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 48px); font-weight: 400; color: var(--mh-cream);
  line-height: 1.12; letter-spacing: -0.018em; margin: 0 0 20px; text-wrap: balance;
}
.mig-itin-cta__lead {
  font-size: 1.0625rem; line-height: 1.7;
  color: rgba(253,251,247,0.78); margin: 0 0 36px; text-wrap: pretty; max-width: 640px;
}
.mig-itin-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mig-itin-cta__wa-note {
  margin: 22px 0 0; font-size: 0.95rem; line-height: 1.5;
  color: rgba(253,251,247,0.6);
}
.mig-itin-cta__wa-note a {
  color: var(--mh-cream); text-decoration: none;
}
.mig-itin-cta__wa-note a span {
  border-bottom: 1px solid rgba(253,251,247,0.35);
  padding-bottom: 1px; transition: border-color 150ms;
}
.mig-itin-cta__wa-note a:hover span { border-color: var(--mh-cream); }

/* ============================================================
   ITINERARY ARCHIVE
   ============================================================ */
.mig-itin-filters { background: var(--mh-sand); padding: 48px var(--gutter) 24px; }
.mig-itin-filters__inner { max-width: 1200px; margin: 0 auto; }
.mig-itin-filters__row {
  display: grid; grid-template-columns: 100px 1fr; gap: 24px;
  align-items: center; padding: 20px 0;
  border-top: 1px solid var(--mh-rule);
}
.mig-itin-filters__row + .mig-itin-filters__row { border-top: 0; margin-top: -1px; }
.mig-itin-filters__label {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mh-ink-2);
}
.mig-itin-filters__pills { display: flex; gap: 8px; flex-wrap: wrap; }
/* 3.3 — unified filter pill (shared language with .mig-reviews-filter__pill):
   rounded pill, 1.5px border, subtle hover, terracotta active. */
.mig-filter-pill {
  padding: 8px 16px; border: 1.5px solid var(--mh-rule-strong);
  background: transparent; color: var(--mh-navy);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; border-radius: var(--radius-pill); transition: all 180ms;
}
.mig-filter-pill:hover {
  background: var(--mh-cream); border-color: var(--mh-navy);
}
.mig-filter-pill.is-active {
  background: var(--mh-terracotta); border-color: var(--mh-terracotta); color: var(--mh-cream);
}
.mig-itin-count {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0;
}
.mig-itin-count__text {
  font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--mh-ink-2);
}
.mig-itin-count__text strong { color: var(--mh-navy); font-style: normal; }
.mig-itin-count__sort { font-size: 0.75rem; color: var(--mh-ink-2); }
.mig-itin-grid { background: var(--mh-sand); padding: 8px var(--gutter) 80px; }
.mig-itin-grid__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.mig-itin-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--mh-cream); border: 1px solid var(--mh-rule);
  transition: transform 200ms, box-shadow 200ms;
}
.mig-itin-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(26,43,76,0.18); }
.mig-itin-card img { width: 100%; height: auto; display: block; }
.mig-itin-card__body { padding: 28px; }
.mig-itin-card__themes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mig-itin-card__theme {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mh-terracotta); border: 1px solid var(--mh-terracotta); padding: 3px 8px;
}
.mig-itin-card__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--mh-navy); margin: 0 0 10px; line-height: 1.2;
  letter-spacing: -0.005em; text-wrap: balance;
}
.mig-itin-card__dek {
  font-family: var(--font-display); font-style: italic; font-size: 0.9375rem;
  line-height: 1.55; color: var(--mh-ink-2); margin: 0; text-wrap: pretty;
}
.mig-itin-card__duration {
  display: inline-block; margin-top: 14px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mh-ink-2);
  border-top: 1px solid var(--mh-rule); padding-top: 12px; width: 100%;
}
.mig-itin-card__duration-region { color: var(--mh-ink-2); opacity: 0.7; }
/* Desktop/tablet (cards side by side): pin the duration·region line to the bottom of each
   card so it aligns across a row regardless of title/dek length. Cards already stretch to
   equal row height in the grid; this makes the body a flex column and pushes the meta down.
   Below 601px the cards stack, so it doesn't apply. */
@media (min-width: 601px) {
  .mig-itin-card { display: flex; flex-direction: column; height: 100%; }
  .mig-itin-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
  /* Absorb the slack ABOVE the divider (on the dek) so the meta bottom-aligns across the row
     while the divider keeps its original 14px gap from the text — never tight. */
  .mig-itin-card__dek { margin-bottom: auto; }
}

/* ============================================================
   ITINERARY SINGLE — SITES VISITED (single-day tours)
   ============================================================ */
.mig-itin-sites { margin-top: 80px; }
.mig-itin-sites__title {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 500;
  color: var(--mh-navy); margin: 12px 0 36px; line-height: 1.2; text-wrap: balance;
}
.mig-itin-sites__list { list-style: none; padding: 0; margin: 0; }
.mig-itin-sites__item {
  display: flex; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--mh-rule);
}
.mig-itin-sites__item:last-child { border-bottom: 1px solid var(--mh-rule-strong); }
.mig-itin-sites__num {
  font-family: var(--font-display); font-size: 0.875rem; font-style: italic;
  color: var(--mh-terracotta); flex-shrink: 0; min-width: 32px;
  letter-spacing: 0.04em;
}
.mig-itin-sites__name {
  font-family: var(--font-display); font-size: 1.125rem;
  color: var(--mh-navy); line-height: 1.4;
}
.mig-itin-sites__note {
  font-family: var(--font-display); font-style: italic; font-size: 0.9375rem;
  color: var(--mh-ink-2); margin: 24px 0 0; text-wrap: pretty; line-height: 1.6;
}

/* ============================================================
   ITINERARY SINGLE — A11 expansion: who / FAQ / related
   ============================================================ */
.mig-itin-who,
.mig-itin-faq,
.mig-itin-related { margin-top: 80px; }

/* Drop-cap stays the single opening signal on the overview lead only — suppress it
   on the supporting "Who this day suits" prose. */
.mig-itin-who .mig-prose > p:first-of-type::first-letter {
  font-size: inherit; font-weight: inherit; color: inherit;
  float: none; line-height: inherit; margin-right: 0;
}

.mig-itin-who__title,
.mig-itin-faq__title,
.mig-itin-related__title {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 500;
  color: var(--mh-navy); margin: 12px 0 28px; line-height: 1.2; text-wrap: balance;
}

/* Reuse the site FAQ accordion (.mh-faq__*) but left-aligned, full column width */
.mig-itin-faq .mh-faq__list {
  max-width: none; margin: 0;
  border-top: 1px solid var(--mh-rule-strong);
}

/* Related reading / pair-with cards */
.mig-itin-related__grid { display: grid; gap: 12px; }
.mig-itin-relcard {
  display: block; padding: 18px 22px;
  background: var(--mh-sand); border: 1px solid var(--mh-rule);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}
.mig-itin-relcard:hover { border-color: var(--mh-terracotta); background: var(--mh-cream); }
.mig-itin-relcard:focus-visible { outline: 2px solid var(--mh-terracotta); outline-offset: 2px; }
.mig-itin-relcard__kind {
  display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mh-terracotta); margin-bottom: 5px;
}
.mig-itin-relcard__title {
  font-family: var(--font-display); font-size: 1.125rem; color: var(--mh-navy); line-height: 1.35;
}
/* Optional thumbnail variant (when the linked post has a featured image) */
.mig-itin-relcard--img { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
/* Higher-specificity selector to beat the base `.mig-itin-body__inner img` rule (width:100%;height:auto). */
.mig-itin-body__inner img.mig-itin-relcard__thumb {
  flex: 0 0 76px; width: 76px; height: 76px; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
}
.mig-itin-relcard__text { min-width: 0; }
@media (max-width: 480px) {
  .mig-itin-body__inner img.mig-itin-relcard__thumb { flex-basis: 64px; width: 64px; height: 64px; }
}

/* ============================================================
   TESTIMONIALS / REVIEWS
   ============================================================ */
.mig-reviews { background: var(--mh-sand); padding: 64px var(--gutter) 80px; }
.mig-reviews__grid {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  /* Cards stretch to uniform row height; foot is pushed to the bottom
     inside each card via margin-top: auto (see .mig-review-card__foot). */
}
@media (min-width: 1024px) {
  .mig-reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.mig-review-card {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  padding: 28px;
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-md);
}
.mig-review-card--large { padding: 32px; border-color: var(--mh-rule-strong); }
/* Featured cards get a terracotta left accent + slightly larger quote — grid stays 1-col-per-card */
.mig-review-card--featured {
  border-color: var(--mh-rule-strong);
  box-shadow: var(--shadow-1);
}
.mig-review-card--featured::before {
  content: '';
  position: absolute;
  left: 0; top: 28px; bottom: 28px;
  width: 3px;
  background: var(--mh-terracotta);
  border-top-left-radius: 1.5px;
  border-bottom-left-radius: 1.5px;
}
.mig-review-card--featured .mig-review-card__quote {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.mig-review-card__stars { display: flex; gap: 3px; color: var(--mh-terracotta); margin-bottom: 14px; }
.mig-review-card--large .mig-review-card__stars { gap: 4px; margin-bottom: 16px; }
.mig-review-card__quote {
  font-family: var(--font-display); font-size: 1rem;
  line-height: 1.6; color: var(--mh-navy);
  margin: 0 0 18px; padding: 0; text-wrap: pretty;
  /* Fixed visible-quote area: 5 lines tall. This forces every card's
     Read more button + divider + byline to sit at exactly the same
     y-coordinate, regardless of how long the natural quote is. */
  min-height: calc(5 * 1.6em);
}
.mig-review-card__quote-visible {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mig-review-card.is-expanded .mig-review-card__quote {
  min-height: 0;
}
.mig-review-card.is-expanded .mig-review-card__quote-visible {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
/* Paragraph spacing inside the quote — nl2br emits <br><br>; this tightens the visual gap */
.mig-review-card__quote br + br { display: block; content: ''; margin-top: 0.6em; }
.mig-review-card--large .mig-review-card__quote { font-size: 1.375rem; margin-bottom: 24px; }
.mig-review-card__foot {
  padding-top: 16px;
  margin-top: auto;   /* sticks foot to the bottom of the (stretched) card */
}
.mig-review-card--large .mig-review-card__foot {
  padding-top: 20px; display: flex; justify-content: space-between; align-items: baseline;
}
.mig-review-card__name {
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mh-navy);
  line-height: 1.4;
  /* Reserve space for ~2 lines so single-line names align with the top
     line of two-line names. Meta line below then aligns across all cards. */
  min-height: calc(2 * 1.4em);
}
.mig-review-card__meta { font-size: 0.6875rem; color: var(--mh-ink-2); margin-top: 3px; }
.mig-review-card--large .mig-review-card__meta { font-size: 0.75rem; }
.mig-review-card__tour {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.75rem; color: var(--mh-terracotta); margin-top: 6px;
}
.mig-review-card--large .mig-review-card__tour { font-size: 0.875rem; margin-top: 0; }

/* Read more / Show less toggle on long quotes */
.mig-review-card__more {
  appearance: none; background: none; border: 0; padding: 0;
  margin: -4px 0 18px;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.875rem; color: var(--mh-terracotta);
  cursor: pointer; letter-spacing: 0.01em;
  border-bottom: 1px solid currentColor;
  line-height: 1.4;
  transition: opacity 0.15s ease;
}
.mig-review-card__more:hover,
.mig-review-card__more:focus-visible { opacity: 0.7; }
.mig-review-card__more:focus-visible { outline: 2px solid var(--mh-terracotta); outline-offset: 4px; }
.mig-review-card--large .mig-review-card__more { font-size: 0.9375rem; }

/* ============================================================
   GUEST-PAGE TESTIMONIAL COLLAPSE CARDS (Option 1, 2026-06-08)
   Reuse the warm .mig-review-card shell. Headline + name/stars/source
   stay visible; the full verbatim review collapses via grid-rows
   (it stays in the DOM, so Google/AI still read every word).
   Toggle handled by assets/js/reviews.js (.is-expanded).
   ============================================================ */
.mig-guests-cards {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.mig-review-card--guest { margin: 0; }
.mig-guests-cards .mig-review-card__stars { margin-bottom: 10px; }
.mig-guests-card__headline {
  font-family: var(--font-display);
  font-size: 1.1875rem; line-height: 1.4; color: var(--mh-navy);
  margin: 0 0 12px; text-wrap: pretty;
}
.mig-guests-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px;
}
.mig-guests-card__who {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mh-navy);
}
.mig-guests-card__src {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; color: var(--mh-ink-2); text-decoration: none;
}
.mig-guests-card__src svg { flex: none; display: block; }
a.mig-guests-card__src:hover { color: var(--mh-terracotta); }
a.mig-guests-card__src:hover span { text-decoration: underline; text-underline-offset: 2px; }
/* Collapsed full review — present in the DOM, height 0 until expanded */
.mig-guests-card__full {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.mig-review-card--guest.is-expanded .mig-guests-card__full { grid-template-rows: 1fr; }
.mig-guests-card__full-inner { overflow: hidden; min-height: 0; }
.mig-guests-card__full-inner p {
  font-size: 0.9375rem; line-height: 1.65; color: var(--mh-ink);
  margin: 14px 0 0;
}
.mig-guests-card__full-inner p:first-child { margin-top: 16px; }
.mig-review-card--guest .mig-review-card__more { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .mig-guests-card__full { transition: none; }
}

/* ============================================================
   SEARCH
   ============================================================ */
.mig-search { background: var(--mh-sand); padding: 64px var(--gutter) 80px; }
.mig-search__inner { max-width: 760px; margin: 0 auto; }
.mig-search__form { display: flex; gap: 0; margin-bottom: 48px; }
.mig-search__input {
  flex: 1; padding: 14px 16px; font-size: 1rem; color: var(--mh-ink);
  background: var(--mh-cream); border: 1px solid var(--mh-rule-strong);
  border-right: 0; border-radius: 2px 0 0 2px;
}
.mig-search__submit {
  padding: 14px 24px; background: var(--mh-navy); color: var(--mh-cream);
  border: 1px solid var(--mh-navy); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; border-radius: 0 2px 2px 0; transition: background 150ms;
}
.mig-search__submit:hover { background: var(--mh-terracotta); border-color: var(--mh-terracotta); }
.mig-search__count {
  font-size: 0.75rem; color: var(--mh-ink-2); margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 2px solid var(--mh-navy);
}
.mig-search__none { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.7; color: var(--mh-ink); }

/* ============================================================
   404
   ============================================================ */
.mig-404 {
  background: var(--mh-sand); min-height: 60vh;
  display: flex; align-items: center; padding: 80px var(--gutter);
}
.mig-404__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.mig-404__number {
  font-family: var(--font-display);
  font-size: clamp(80px, 15vw, 160px); font-weight: 400;
  color: var(--mh-rule-strong); line-height: 1; margin: 0;
}
.mig-404__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px); font-weight: 400;
  color: var(--mh-navy); margin: 24px 0 16px; line-height: 1.15; text-wrap: balance;
}
.mig-404__text { font-size: 1.0625rem; line-height: 1.65; color: var(--mh-ink-2); margin: 0 0 36px; }
.mig-404__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   MOBILE — page templates
   ============================================================ */
@media (max-width: 900px) {
  .mig-page-hero { padding: 48px var(--gutter) 36px; } /* 3.2 — tighter tablet rhythm */
  .mig-article-header { padding: 72px var(--gutter) 48px; }
  .mig-article-byline { flex-direction: column; align-items: flex-start; gap: 16px; }

  .mig-blog__inner { grid-template-columns: 1fr; }
  .mig-cat-sidebar { position: static; }
  .mig-post-card--featured { grid-template-columns: 1fr; }
  .mig-related__grid { grid-template-columns: 1fr; }

  .mig-itin-arrangement__grid { grid-template-columns: 1fr; }
  .mig-itin-filters__row { grid-template-columns: 1fr; gap: 12px; }
  .mig-itin-grid__inner { grid-template-columns: repeat(2, 1fr); }

  .mig-reviews__grid { grid-template-columns: 1fr; }
  .mig-review-card--large .mig-review-card__foot { flex-direction: column; align-items: flex-start; gap: 8px; }

  .mig-trust-rail__inner { grid-template-columns: 1fr; gap: 32px; }
  .mig-trust-rail__quote-col { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--mh-rule); }
  .mig-trust-rail--dark .mig-trust-rail__quote-col { border-top-color: rgba(253,251,247,0.18); }
}

@media (max-width: 600px) {
  .mig-itin-grid__inner { grid-template-columns: 1fr; }
  .mig-post-card__inner { grid-template-columns: 1fr; }
  #commentform .comment-form-author,
  #commentform .comment-form-email { flex: none; width: 100%; }
}

/* ============================================================
   COOKIE BANNER  (WPConsent — brand overrides)
   PLAN-TWEAKS D — Concept 2c: snug centered floating card at the
   bottom-right on desktop, full-width strip pinned to the bottom on
   mobile.

   IMPORTANT: WPConsent renders the banner inside a Shadow DOM. Regular
   class selectors don't pierce shadow boundaries — only CSS custom
   properties on the host AND ::part() selectors targeting elements with
   the `part` attribute do. The plugin exposes these parts on the
   #wpconsent-container shadow host:
     wpconsent-banner, wpconsent-banner-body, wpconsent-banner-footer,
     wpconsent-button-accept, wpconsent-button-cancel, wpconsent-button-preferences,
     wpconsent-preferences-modal, wpconsent-preferences-content, …
   ============================================================ */

/* CSS custom properties on the host pierce Shadow DOM. */
.wpconsent-banner-holder,
#wpconsent-root,
#wpconsent-container {
  font-family: var(--mh-font-ui), sans-serif !important;
  --wpconsent-border-radius: 4px;
  --wpconsent-shadow: 0 12px 36px rgba(0,0,0,0.25);
  --wpconsent-padding: 14px 18px 12px;
  --wpconsent-font-size: 13px;
  --wpconsent-line-height: 1.45;
  --wpconsent-title-size: 14px;
  --wpconsent-min-width: 260px;
}

/* ::part selectors reach into the Shadow DOM. Both #wpconsent-container
   (the actual shadow host) and #wpconsent-root listed for robustness. */

/* Snug card: width fits content, max 360px on desktop. */
#wpconsent-container::part(wpconsent-banner),
#wpconsent-root::part(wpconsent-banner) {
  width: fit-content;
  max-width: min(360px, calc(100vw - 32px));
  min-width: 260px;
  border: 1px solid rgba(253, 251, 247, 0.08);
}

/* Body — centered, no wrap on desktop. */
#wpconsent-container::part(wpconsent-banner-body),
#wpconsent-root::part(wpconsent-banner-body) {
  text-align: center;
  padding: 0;
  margin: 0;
  width: auto;
  white-space: nowrap;
}

/* Footer — centered horizontal button row. */
#wpconsent-container::part(wpconsent-banner-footer),
#wpconsent-root::part(wpconsent-banner-footer) {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}

/* Buttons — natural width, centered, Inter not uppercase. */
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-root::part(wpconsent-button-accept),
#wpconsent-root::part(wpconsent-button-cancel),
#wpconsent-root::part(wpconsent-button-preferences) {
  width: auto;
  flex: initial;
  padding: 7px 18px;
  min-width: 0;
  font-family: var(--mh-font-ui), sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border-width: 1px;
  border-style: solid;
}

/* Decline + Manage — cream outline. */
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-root::part(wpconsent-button-cancel),
#wpconsent-root::part(wpconsent-button-preferences) {
  background-color: transparent;
  border-color: rgba(253, 251, 247, 0.3);
  color: #FDFBF7;
}

/* Accept — filled terracotta. */
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-root::part(wpconsent-button-accept) {
  background-color: #C86A4C;
  border-color: #C86A4C;
  color: #FDFBF7;
}

/* Mobile (≤767px to match the plugin's own breakpoint): card stretches
   full-width pinned to the bottom; copy wraps; buttons share width
   equally in a single row. */
@media (max-width: 767px) {
  #wpconsent-container::part(wpconsent-banner),
  #wpconsent-root::part(wpconsent-banner) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.22);
  }
  #wpconsent-container::part(wpconsent-banner-body),
  #wpconsent-root::part(wpconsent-banner-body) {
    white-space: normal;
  }
  #wpconsent-container::part(wpconsent-banner-footer),
  #wpconsent-root::part(wpconsent-banner-footer) {
    flex-direction: row;
    gap: 6px;
    width: 100%;
  }
  #wpconsent-container::part(wpconsent-button-accept),
  #wpconsent-container::part(wpconsent-button-cancel),
  #wpconsent-container::part(wpconsent-button-preferences),
  #wpconsent-root::part(wpconsent-button-accept),
  #wpconsent-root::part(wpconsent-button-cancel),
  #wpconsent-root::part(wpconsent-button-preferences) {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 9px 8px;
    font-size: 12px;
  }
}

/* ============================================================
   ABOUT PAGE  (page-about.php — slug: about)
   ============================================================ */
.mig-about {
  background: var(--mh-sand);
  padding: 64px var(--gutter) 80px;
}
.mig-about__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-areas:
    "bio       sidebar"
    "interests sidebar";
  column-gap: 64px;
  row-gap: 0;
  align-items: start;
}
.mig-about__bio       { grid-area: bio; }
.mig-about__sidebar   { grid-area: sidebar; }
.mig-about-interests  { grid-area: interests; }

/* Portrait photo */
.mig-about__portrait { margin-bottom: 48px; }
.mig-about__portrait img,
.mig-about__portrait-ph { width: 100%; height: auto; display: block; border-radius: 2px; }
.mig-about__portrait-caption {
  font-family: var(--mh-font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mh-ink-2);
  margin: 10px 0 0;
  text-align: center;
}

/* Bio prose — first paragraph matches the body size; the drop-cap (::first-letter)
   is the opening signal, so no separate lede size (2026-06-03, Samuel). */
@media (max-width: 767px) {
  /* Hide the personal-interests grid on mobile (Samuel's call). */
  .mig-about-interests { display: none; }
  /* Hide the bio signature on mobile — its 2px navy top-border (the "sign-off"
     rule) reads heavy on a narrow screen and has nothing to close once the
     signature is gone. Desktop keeps it. */
  .mig-article-sig { display: none; }
}

/* Sticky sidebar */
.mig-about__sidebar { position: sticky; top: 100px; }

/* Credentials card */
.mig-credentials {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule-strong);
  padding: 32px;
  margin-bottom: 16px;
}
.mig-credentials__eyebrow { margin-bottom: 14px; }
.mig-credentials__list { list-style: none; padding: 0; margin: 0; }
.mig-credentials__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--mh-rule);
}
.mig-credentials__item:last-child { border-bottom: 0; padding-bottom: 0; }
.mig-credentials__key {
  font-family: var(--mh-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-ink-2);
}
.mig-credentials__val {
  font-family: var(--mh-font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--mh-navy);
  margin-top: 2px;
}
.mig-credentials__link {
  color: var(--mh-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.mig-credentials__link:hover { color: var(--mh-terracotta-2); }

.mig-about__sidebar-cta { display: block; text-align: center; width: 100%; box-sizing: border-box; }

/* ============================================================
   CONTACT PAGE  (page-contact.php — slug: contact)
   ============================================================ */
.mig-contact {
  background: var(--mh-sand);
  padding: 64px var(--gutter) 80px;
}
.mig-contact__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Form well */
.mig-contact__form-well {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule-strong);
  padding: 48px;
}
.mig-contact__form-head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--mh-navy);
}
.mig-contact__form-title {
  font-family: var(--mh-font-serif);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--mh-navy);
  margin: 12px 0 0;
  line-height: 1.2;
}

/* ============================================================
   CONTACT FORM — Jetpack Contact Form (grunion), brand-styled (A7, 2026-06-02).
   NB: the form is Jetpack's grunion form, NOT WPForms. The previous block here
   targeted .wpforms-form (nonexistent on the page) + nonexistent vars
   (--mh-font-ui / --mh-font-serif) → it was dead, leaving the form unstyled.
   !important is used deliberately to beat Jetpack's own form CSS.
   ============================================================ */
/* Labels */
.mig-contact__form-well .grunion-field-label,
.mig-contact__form-well form label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: var(--t-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--fg-heading) !important;
  margin: 0 0 var(--space-2) !important;
}
.mig-contact__form-well .grunion-field-label span,
.mig-contact__form-well .grunion-label-required { color: var(--accent) !important; font-weight: 600 !important; }

/* Inputs / select / textarea — match the brand .input */
.mig-contact__form-well input[type="text"],
.mig-contact__form-well input[type="email"],
.mig-contact__form-well input[type="tel"],
.mig-contact__form-well input[type="url"],
.mig-contact__form-well input[type="number"],
.mig-contact__form-well select,
.mig-contact__form-well textarea {
  font-family: var(--font-body) !important;
  font-size: var(--t-body) !important;
  color: var(--mh-ink) !important;
  background: var(--mh-cream) !important;
  border: 1px solid var(--mh-rule-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo) !important;
}
.mig-contact__form-well textarea { min-height: 160px !important; resize: vertical !important; }
.mig-contact__form-well input::placeholder,
.mig-contact__form-well textarea::placeholder { color: var(--mh-ink-2) !important; opacity: 1; }

.mig-contact__form-well input:focus,
.mig-contact__form-well select:focus,
.mig-contact__form-well textarea:focus {
  outline: none !important;
  border-color: var(--mh-navy) !important;
  box-shadow: 0 0 0 3px rgba(26,43,76,0.12) !important;
}

/* Submit — terracotta primary (the conversion action) */
.mig-contact__form-well button[type="submit"],
.mig-contact__form-well .pushbutton-wide {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  font-family: var(--font-body) !important;
  font-size: var(--t-caption) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
  color: var(--mh-cream) !important;
  background: var(--accent) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.875rem 2rem !important;
  margin-top: var(--space-3) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo) !important;
}
.mig-contact__form-well button[type="submit"]:hover,
.mig-contact__form-well .pushbutton-wide:hover { background: var(--accent-press) !important; }
.mig-contact__form-well button[type="submit"]:active,
.mig-contact__form-well .pushbutton-wide:active { transform: translateY(1px) !important; }

/* Error / validation states — readable (AA on cream) */
.mig-contact__form-well .contact-form__input-error,
.mig-contact__form-well .contact-form__error {
  color: #B23A2E !important;
  font-size: var(--t-caption) !important;
  font-family: var(--font-body) !important;
  margin-top: var(--space-1) !important;
}
.mig-contact__form-well input[aria-invalid="true"],
.mig-contact__form-well select[aria-invalid="true"],
.mig-contact__form-well textarea[aria-invalid="true"] { border-color: var(--accent) !important; background: #FFF7F3 !important; } /* OI-10: soften the invalid-field cue from fire-red to a calm terracotta */

/* OI-10 — friendly validation summary. Replaces Jetpack's red "Error!" box with a
   warm, all-body-text notice (copy softened in inc/contact-form.php). The whole block
   reads as one calm message: a lead line + a plain bulleted list, on soft sand with a
   quiet terracotta edge. Scoped to .mig-contact so it only touches this form. */
.mig-contact .form-error {
  background: #FBF1EA !important;
  border: 1px solid #ECD6C8 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 0 0 22px !important;
}
.mig-contact .form-error h3 { /* the "Oops, looks like something’s missing:" lead — body text, not a heading */
  font-family: var(--font-body) !important;
  font-size: var(--t-body) !important;
  font-weight: 500 !important;
  color: var(--mh-navy) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
}
.mig-contact .form-error .form-errors { margin: 0 !important; padding-left: 20px !important; list-style: disc !important; }
.mig-contact .form-error .form-error-message {
  color: #6E4636 !important; /* warm brown — AA on the sand */
  font-family: var(--font-body) !important;
  font-size: var(--t-body) !important;
  line-height: 1.5 !important;
  margin: 2px 0 !important;
}
/* OI-10 EXTENSION (QA9 A8, 2026-06-11 — found by Samuel's Safari pass): Jetpack 15.8
   moved validation CLIENT-SIDE with new markup the block above never matched —
   .contact-form__error (the summary box, was white-on-fire-red), __error-message,
   __input-error (per-field) and __warning-icon. Same warm treatment as the legacy
   classes; the no-JS/server path above stays for graceful degradation. */
.mig-contact .contact-form__error {
  background: #FBF1EA !important;
  border: 1px solid #ECD6C8 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 0 0 22px !important;
}
.mig-contact .contact-form__error-message,
.mig-contact .contact-form__error {
  color: var(--mh-navy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--t-body) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.mig-contact .contact-form__input-error {
  color: #6E4636 !important; /* warm brown — AA on the cream well */
  font-family: var(--font-body) !important;
  font-size: var(--t-small, 0.875rem) !important;
  line-height: 1.5 !important;
}
.mig-contact .contact-form__warning-icon svg path { fill: var(--accent) !important; }
.mig-contact .jetpack-form-field-error { /* any field-level inline error → warm, body text */
  color: #6E4636 !important;
  font-family: var(--font-body) !important;
  font-size: var(--t-caption) !important;
}
/* Mobile: full-width submit for an easy tap target */
@media (max-width: 600px) {
  .mig-contact__form-well button[type="submit"],
  .mig-contact__form-well .pushbutton-wide { width: 100% !important; }
}
/* On submit, Jetpack reloads to ?contact-form-sent=… at the top of the page.
   Give the confirmation a scroll anchor that clears the fixed nav (the JS in
   page-contact.php scrolls here on the reload path). */
.mig-contact .contact-form-submission,
.mig-contact #contact-form-success-header,
.mig-contact__form-well { scroll-margin-top: calc(var(--nav-height) + 24px); }

/* Aside */
.mig-contact__aside { display: flex; flex-direction: column; gap: 16px; }

/* WhatsApp block */
.mig-whatsapp-block {
  background: var(--mh-navy);
  color: var(--mh-cream);
  padding: 36px;
}
.mig-whatsapp-block .eyebrow,
.mig-whatsapp-block__eyebrow {
  color: rgba(253,251,247,0.65);
  border-color: rgba(253,251,247,0.25);
}
.mig-whatsapp-block__title {
  font-family: var(--mh-font-serif, Lora, Georgia, serif); /* OI-25: was bare var() w/ no fallback → undefined var made it inherit Inter; restore Lora to match every other --mh-font-serif usage */
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--mh-cream);
  margin: 14px 0;
  line-height: 1.25;
}
.mig-whatsapp-block__body {
  font-family: var(--mh-font-serif, Lora, Georgia, serif); /* OI-25: same missing-fallback fix */
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(253,251,247,0.85);
  margin: 0 0 20px;
}
.mig-whatsapp-block__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--mh-terracotta);
  color: var(--mh-cream);
  text-decoration: none;
  padding: 14px 20px;
  font-family: var(--mh-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 160ms;
}
.mig-whatsapp-block__btn:hover { background: #a95a3f; color: var(--mh-cream); }
.mig-whatsapp-block__number {
  display: block;
  font-family: var(--mh-font-ui);
  font-size: 15px;
  color: var(--mh-cream);
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  margin-inline: auto;
  transition: border-color 160ms ease;
}
a.mig-whatsapp-block__number:hover,
a.mig-whatsapp-block__number:focus-visible {
  border-bottom-color: rgba(253,251,247,0.5);
}
.mig-whatsapp-block__modes {
  font-family: var(--mh-font-ui);
  font-size: 10px;
  color: rgba(253,251,247,0.55);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Email / office block */
.mig-email-block {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule-strong);
  padding: 32px;
}
.mig-email-block__title {
  font-family: var(--mh-font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--mh-navy);
  margin: 12px 0;
}
.mig-email-block__body {
  font-family: var(--mh-font-serif);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mh-ink);
  margin: 0 0 12px;
}
.mig-email-block__address {
  font-family: var(--mh-font-serif);
  font-size: 1.0625rem;
  color: var(--mh-terracotta);
  font-weight: 500;
  text-decoration: none;
  word-break: break-all;
}
.mig-email-block__address:hover { text-decoration: underline; }
.mig-email-block__rule { border: 0; border-top: 1px solid var(--mh-rule); margin: 20px 0; }
.mig-email-block__office {
  font-family: var(--mh-font-ui);
  font-size: 12px;
  color: var(--mh-ink-2);
  line-height: 1.6;
}
.mig-email-block__office strong {
  display: block;
  color: var(--mh-navy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 4px;
}

/* ============================================================
   GALLERY PAGE  (page-gallery.php — slug: gallery)
   ============================================================ */
.mig-gallery-section {
  background: var(--mh-sand);
  padding: 64px var(--gutter) 80px;
}

/* CSS-columns masonry */
.mig-masonry {
  column-count: 4;
  column-gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
}

.mig-gallery-tile {
  break-inside: avoid;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: block;
  outline-offset: 2px;
}
.mig-gallery-tile:focus-visible { outline: 2px solid var(--mh-terracotta); }
.mig-gallery-tile img { display: block; width: 100%; height: auto; transition: transform 320ms ease; }
.mig-gallery-tile:hover img,
.mig-gallery-tile:focus-visible img { transform: scale(1.04); }

.mig-gallery-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(14,27,50,0.88) 100%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity 220ms;
  pointer-events: none;
}
.mig-gallery-tile:hover .mig-gallery-tile__overlay,
.mig-gallery-tile:focus-visible .mig-gallery-tile__overlay { opacity: 1; }

.mig-gallery-tile__loc {
  font-family: var(--mh-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
}
.mig-gallery-tile__caption {
  font-family: var(--mh-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mh-cream);
  margin-top: 4px;
}

.mig-gallery-empty {
  font-family: var(--mh-font-serif);
  font-style: italic;
  color: var(--mh-ink-2);
  text-align: center;
  padding: 64px;
}

/* Lightbox */
.mig-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(14,27,50,0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.mig-lightbox[aria-hidden="true"] { display: none; }

.mig-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: var(--mh-cream);
  font-family: var(--mh-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 12px;
  opacity: 0.8;
  transition: opacity 160ms;
}
.mig-lightbox__close:hover { opacity: 1; }

.mig-lightbox__prev,
.mig-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(253,251,247,0.3);
  color: var(--mh-cream);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms, background 160ms;
}
.mig-lightbox__prev:hover,
.mig-lightbox__next:hover { border-color: var(--mh-terracotta); background: rgba(200,106,76,0.2); }
.mig-lightbox__prev { left: 32px; }
.mig-lightbox__next { right: 32px; }

.mig-lightbox__stage { max-width: 1100px; width: 100%; text-align: center; }
.mig-lightbox__img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.mig-lightbox__meta { margin-top: 24px; }
.mig-lightbox__loc {
  font-family: var(--mh-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
}
.mig-lightbox__caption {
  font-family: var(--mh-font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--mh-cream);
  margin-top: 6px;
}

/* ============================================================
   MOBILE — phase 4 templates
   ============================================================ */
@media (max-width: 900px) {
  .mig-about__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bio"
      "sidebar"
      "interests";   /* Mobile: interests after credentials + CTA per Samuel */
    row-gap: 64px;   /* restore stacking gap (desktop row-gap:0 collapses sections; mobile needs the breathing room) */
  }
  .mig-about__sidebar { position: static; }
  .mig-contact__inner { grid-template-columns: 1fr; }
  .mig-contact__form-well { padding: 32px 24px; }
  .mig-masonry { column-count: 3; }
  .mig-lightbox__prev { left: 12px; }
  .mig-lightbox__next { right: 12px; }
}
@media (max-width: 640px) {
  .mig-masonry { column-count: 2; }
  .mig-lightbox { padding: 16px 48px; }
  .mig-lightbox__prev,
  .mig-lightbox__next { width: 40px; height: 40px; font-size: 22px; }
}

/* ============================================================
   ABOUT PAGE — NOTABLE GUESTS GRID (6.5.21 Phase 7)
   Mini-section between bio and trust rail; 3-4 captioned photos.
   ============================================================ */
.mig-about-notable {
  padding: 80px 0;
  background: var(--mh-sand-2);
  border-top: 1px solid var(--mh-rule);
}
.mig-about-notable__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mig-about-notable__head {
  max-width: 720px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.mig-about-notable__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  color: var(--mh-navy);
  margin: var(--space-3) 0 var(--space-3);
}
.mig-about-notable__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mh-ink);
  margin: 0;
}
/* Natural-ratio photo strip. The three sources are mixed orientation
   (portrait / landscape / square), so any uniform crop over-zooms one of them.
   Instead: uniform HEIGHT on desktop with natural width (nothing cropped),
   full-width stacked on mobile. */
.mig-about-notable__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
@media (min-width: 700px) {
  .mig-about-notable__grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-6);
  }
}
.mig-about-notable__tile {
  margin: 0;
  max-width: 100%;
}
.mig-about-notable__tile-img-wrap {
  overflow: hidden;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  line-height: 0;
}
.mig-about-notable__tile-img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 700px) {
  .mig-about-notable__tile-img {
    width: auto;
    height: 320px;
  }
}
.mig-about-notable__tile-caption {
  margin-top: var(--space-3);
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--mh-ink-2);
  font-style: italic;
}

/* ---- Notable guests: marquee names roster (A10) ---- */
.mig-about-notable__roster {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.85;
  max-width: 720px;
  margin: var(--space-3) auto 0;
}
@media (max-width: 699px) {
  .mig-about-notable__roster { font-size: 1rem; line-height: 1.7; }
}
.mig-about-notable__roster-name { display: inline; white-space: nowrap; }
.mig-about-notable__roster-name:not(:last-child)::after {
  content: "·";
  color: var(--mh-terracotta);
  margin: 0 0.55em;
  font-weight: 400;
}

/* ============================================================
   ABOUT — WORKED WITH (A10)
   A credibility roster between the bio and Notable guests.
   Desktop: credits rows (label left, names inline w/ terracotta dots).
   Mobile (<700px): stacked lists (label above, one name per line).
   ============================================================ */
.mig-about-workedwith {
  padding: var(--space-8) 0;
  background: var(--mh-cream);
  border-top: 1px solid var(--mh-rule);
}
.mig-about-workedwith__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mig-about-workedwith__head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.mig-about-workedwith__group {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  border-bottom: 1px solid var(--mh-rule);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.mig-about-workedwith__group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mig-about-workedwith__cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-terracotta-2);
  padding-top: 4px;
}
.mig-about-workedwith__names {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.7;
}
.mig-about-workedwith__name { display: inline; white-space: nowrap; }
.mig-about-workedwith__name:not(:last-child)::after {
  content: "·";
  color: var(--mh-terracotta);
  margin: 0 0.55em;
  font-weight: 400;
}
.mig-about-workedwith__name.is-soft { font-style: italic; color: var(--mh-ink-2); }
.mig-about-workedwith__name.is-soft::after { font-style: normal; }

@media (max-width: 699px) {
  .mig-about-workedwith__group {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .mig-about-workedwith__cat {
    padding-top: 0;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--mh-rule-strong);
  }
  .mig-about-workedwith__name { display: block; padding: 4px 0; white-space: normal; }
  .mig-about-workedwith__name:not(:last-child)::after { content: none; }
}

/* ============================================================
   QUOTE ROTATOR (A9 Option A) — homepage trust band + About.
   Cross-fade between quotes; height locked to the tallest quote and quotes
   vertically centred (never resizes as it rotates); terracotta dot nav.
   ============================================================ */
.mh-rotator__stage { position: relative; touch-action: pan-y; }
.mh-rotator__slide { margin: 0; }
.mh-rotator__stage.is-ready .mh-rotator__slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease-out-expo);
}
.mh-rotator__stage.is-ready .mh-rotator__slide.is-active { opacity: 1; visibility: visible; }
.mh-rotator__quote {
  font-family: var(--font-display);
  font-size: 1.375rem; line-height: 1.45; font-weight: 500;
  color: var(--mh-navy); margin: 0 0 16px;
}
.mh-rotator__quote::before { content: "\201C"; }
.mh-rotator__quote::after  { content: "\201D"; }
.mh-rotator__attr {
  font-style: normal; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .04em; color: var(--mh-navy);
}
.mh-rotator__attr::before { content: "\2014\00a0"; color: var(--mh-ink-2); }
.mh-rotator__dots { display: flex; gap: 2px; margin-top: 22px; }
.mh-rotator__dot {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; margin-left: -8px;
}
.mh-rotator__dot:first-child { margin-left: -10px; }
.mh-rotator__dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(26,43,76,.22); transition: background .2s, transform .2s;
}
.mh-rotator__dot:hover::before { background: rgba(26,43,76,.4); }
.mh-rotator__dot.is-active::before { background: var(--mh-terracotta); transform: scale(1.18); }
.mh-rotator__dot:focus-visible { outline: 2px solid var(--mh-terracotta); outline-offset: 2px; border-radius: 50%; }
@media (max-width: 600px) { .mh-rotator__quote { font-size: 1.1875rem; line-height: 1.5; } }
@media (prefers-reduced-motion: reduce) { .mh-rotator__stage.is-ready .mh-rotator__slide { transition: none; } }

/* ============================================================
   GUESTS LANDING PAGES (6.5.21 — Phase 2+)
   Editorial split: warm narrative left + sticky credibility cards
   right on desktop; cards stack above narrative on mobile.
   ============================================================ */

.mig-guests {
  padding: 80px 0 80px;
  background: var(--mh-cream);
}

.mig-guests__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

/* Mobile single-quote + read-more link (#3): hidden by default (desktop shows the full list). */
.mig-guests-quote-single { display: none; }
.mig-guests__reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding-left: 28px; /* #TR2-7: align the link's text with the card content (cards are single-column at all widths and have 28px inner padding); was flush to the card's outer edge, 28px left of the text. Also widens the tap area. */
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-terracotta);
  text-decoration: none;
}
.mig-guests__reviews-link:hover { text-decoration: underline; }
.mig-guests-quote__meta { display: block; color: var(--mh-ink-2); font-weight: 400; }

/* ---- Mobile (<=899px): remix the audience page into one ordered column.
   display:contents flattens the main + sidebar wrappers so each section/card
   becomes an orderable grid item of .mig-guests__inner. Order:
   clients -> narrative -> Tour examples -> one quote+link -> At a glance(slim)
   -> Awards(top 2) -> CTA. Desktop (>=900px) keeps the two-column split. */
@media (max-width: 899px) {
  .mig-guests__main,
  .mig-guests__sidebar,
  .mig-guests-sidebar { display: contents; }

  /* Stacked sidebar cards must not balloon to full content width — keep them card-sized so
     the CTA button (full-width within its card) stays a button, not a slab (Samuel 2026-06-07). */
  .mig-guests-card,
  .mig-guests-credgroup { max-width: 460px; }

  /* OI-05 (DQ-049) 2026-06-09: Samuel's mobile order = Approach → Worked-with → main text.
     "descriptor" is the Approach card, "clients" is the Worked-with/Trusted-by card. */
  .mig-guests-card--descriptor { order: 1; }   /* Approach */
  .mig-guests-card--clients    { order: 2; }   /* Worked with */
  .mig-guests__prose           { order: 3; }   /* main narrative */
  .mig-guests__vignettes       { order: 4; }
  .mig-guests__testimonials    { order: 5; }
  .mig-guests-card--cta        { order: 8; }

  /* Mobile = story-led, minimal credentials. Hidden: lead photo, sidebar photo, the
     sidebar quote card (quote shows in the testimonials block), and BOTH credential
     cards — "At a glance" + "Awards" (scrapped on mobile per Samuel; kept on desktop).
     The "Worked with" clients box up top carries the credibility on mobile. */
  .mig-guests__lead-photo,
  .mig-guests-card--photo,
  .mig-guests-card--quote,
  .mig-guests-card--stats,
  .mig-guests-card--awards { display: none; }

  /* Testimonials: single quote + link instead of the full list. */
  .mig-guests__testimonials .mig-guests-quote-list--full { display: none; }
  .mig-guests__testimonials .mig-guests-quote-single { display: block; }

  /* First narrative paragraph: drop the oversized lead font to body size on mobile so it's
     consistent with the rest (Samuel). Keep the drop-cap — the vignettes/blog/About use it.
     Extra-specific (.mig-guests ancestor) so it beats the base 1.375rem rule that sits
     later in the file. */
  .mig-guests .mig-guests__prose > p:first-of-type {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--mh-ink);
  }
}

/* The credgroup wrapper is always transparent: At-a-glance + Awards are independent
   cards (they just sit together in the sidebar source so they can be grouped if needed). */
.mig-guests-credgroup { display: contents; }

/* Mobile gap fix (2026-06-02): on <=899px the audience page is flattened into one
   grid (gap:48px) via display:contents + order. The reordered blocks ALSO carried
   their desktop margins (vignettes +48, testimonials +64, leading H2 +48) and in a
   grid those margins ADD to the gap (no collapsing) — producing 96–168px gaps.
   Let the 48px grid gap be the only spacing. Two-class specificity beats the base
   margin rules regardless of source order. */
@media (max-width: 899px) {
  .mig-guests .mig-guests__vignettes,
  .mig-guests .mig-guests__testimonials { margin-top: 0; }
  .mig-guests .mig-guests__vignettes > *:first-child,
  .mig-guests .mig-guests__testimonials > *:first-child { margin-top: 0; }
  .mig-guests .mig-guests__prose > p:last-child { margin-bottom: 0; }
}

@media (min-width: 900px) {
  .mig-guests__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-9);
    align-items: start;
  }
  .mig-guests__main { order: 1; grid-column: 1; }
  .mig-guests__sidebar {
    order: 2;
    grid-column: 2;
    position: sticky;
    top: calc(var(--nav-height) + 32px);
    align-self: start;
  }
}

/* Main column: narrative + vignettes + testimonials */
.mig-guests__lead-photo {
  margin: 0 0 var(--space-6);
}
.mig-guests__lead-photo-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.mig-guests__prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mh-ink);
}
.mig-guests__prose > p:first-of-type {
  /* First paragraph matches body size on desktop too — the drop-cap is the
     opening signal, no separate lede size (Samuel 2026-06-05; matches the
     About-bio treatment + the mobile rule). Was 1.375rem/navy. */
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mh-ink);
}
.mig-guests__prose p { margin: 0 0 var(--space-5); }

.mig-guests__section-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  color: var(--mh-navy);
  margin: var(--space-7) 0 var(--space-5);
}

.mig-guests__vignettes { margin-top: var(--space-7); }

.mig-guests-vignette {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--mh-rule);
}
.mig-guests-vignette:first-of-type { border-top: 0; padding-top: 0; }

.mig-guests-vignette__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--mh-navy);
  margin: 0 0 var(--space-3);
}
.mig-guests-vignette__body p { margin: 0 0 var(--space-3); font-size: 1rem; line-height: 1.65; }

.mig-guests__testimonials { margin-top: var(--space-8); }

.mig-guests-quote-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mig-guests-quote {
  background: var(--mh-sand);
  border-left: 3px solid var(--mh-terracotta);
  padding: var(--space-5) var(--space-6);
  margin: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mig-guests-quote__body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mh-navy);
}
.mig-guests-quote__body p { margin: 0 0 var(--space-3); }
.mig-guests-quote__body p:last-child { margin-bottom: 0; }
.mig-guests-quote__byline {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--mh-ink-2);
  margin-top: var(--space-3);
}

/* ---- Sidebar cards ---- */
/* Desktop only: the sidebar cards stack in a flex column. On mobile (<=899px) this
   wrapper is display:contents (see the mobile remix above) so its cards become
   orderable grid items — keep that flex scoped to desktop so it doesn't override it. */
@media (min-width: 900px) {
  .mig-guests-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
}

.mig-guests-card {
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}

.mig-guests-card .eyebrow {
  margin-bottom: var(--space-3);
}

.mig-guests-card__list,
.mig-guests-card__stats {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mig-guests-card__list-item {
  font-family: var(--font-display); /* match award names + at-a-glance values (Lora) */
  font-size: 1rem;
  font-weight: 500;
  color: var(--mh-navy);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--mh-rule);
}
.mig-guests-card__list-item:last-child { border-bottom: 0; }

.mig-guests-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--mh-rule);
}
.mig-guests-card__stat:last-child { border-bottom: 0; }
.mig-guests-card__stat-key {
  font-size: var(--t-caption);
  color: var(--mh-ink-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  white-space: nowrap;
}
.mig-guests-card__stat-val {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mh-navy);
  text-align: right;
}
.mig-guests-card__stat-line {
  font-size: 0.9375rem;
  color: var(--mh-navy);
  font-weight: 500;
}

.mig-guests-card__awards {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mig-guests-card__award {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--mh-rule);
}
.mig-guests-card__award:first-child {
  padding-top: 0;
  border-top: 0;
}
.mig-guests-card__award-org {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.3;
}
.mig-guests-card__award-detail {
  font-size: var(--t-caption);
  color: var(--mh-ink-2);
  font-style: italic;
  margin-top: 2px;
  line-height: 1.4;
}

.mig-guests-card--photo {
  padding: 0;
  overflow: hidden;
  margin: 0;
}
.mig-guests-card__photo-img {
  width: 100%;
  height: auto;
  display: block;
}
.mig-guests-card__photo-caption {
  padding: var(--space-3) var(--space-5);
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--mh-ink-2);
  background: var(--mh-sand);
}

.mig-guests-card--quote {
  background: var(--mh-sand);
  border-color: var(--mh-rule-strong);
}
.mig-guests-card__quote { margin: 0; }
.mig-guests-card__quote-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mh-navy);
}
.mig-guests-card__quote-body p { margin: 0 0 var(--space-2); }
.mig-guests-card__quote-body p:last-child { margin-bottom: 0; }
.mig-guests-card__quote-byline {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--mh-navy);
  margin-top: var(--space-3);
}
.mig-guests-card__quote-meta {
  display: block;
  font-weight: 400;
  font-size: var(--t-micro);
  color: var(--mh-ink-2);
  margin-top: 2px;
}

.mig-guests-card--descriptor .mig-guests-card__descriptor-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--mh-ink);
}
.mig-guests-card--descriptor p { margin: 0 0 var(--space-2); }
.mig-guests-card--descriptor p:last-child { margin-bottom: 0; }

/* ---- CTA card ---- */
.mig-guests-card--cta {
  background: var(--mh-navy);
  color: var(--mh-cream);
  border-color: var(--mh-navy);
}
.mig-guests-card__cta-intro {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mh-cream);
  margin: 0 0 var(--space-4);
}
.mig-guests-card__cta-btn {
  display: block;
  width: fit-content;        /* normal-sized button, sized to its label… */
  max-width: 100%;           /* …but never wider than the card (long labels wrap) */
  margin-inline: auto;       /* …centred in the card (Samuel's call) — not a full-width slab */
  text-align: center;
  box-sizing: border-box;
}

/* Desktop CTA button shows always; mobile email + WhatsApp shown only < 768px */
.mig-guests-card__cta-mobile {
  display: none;
  margin-top: var(--space-3);
  flex-direction: column;
  gap: var(--space-2);
}

/* Secondary text link under the WhatsApp button (Corporate) — quiet route to
   the contact form. Sits on the navy CTA card, so cream + underline. */
.mig-guests-card__cta-secondary {
  align-self: center;
  font-size: var(--t-caption);
  color: var(--mh-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(253, 251, 247, 0.45);
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.mig-guests-card__cta-secondary:hover {
  color: var(--mh-terracotta);
  text-decoration-color: var(--mh-terracotta);
}
.mig-guests-card__cta-mobile-btn {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .mig-guests-card__cta-btn--desktop { display: none; }
  .mig-guests-card__cta-mobile { display: flex; }
}

/* ---- FAQ section ---- */
.mig-guests-faq {
  background: var(--mh-sand);
  padding: 80px 0;
  border-top: 1px solid var(--mh-rule);
}
.mig-guests-faq__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mig-guests-faq__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  color: var(--mh-navy);
  margin: 0 0 var(--space-7);
  text-align: center;
}
.mig-guests-faq__list { margin: 0; }
.mig-guests-faq__item {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--mh-rule);
}
.mig-guests-faq__item:last-child { border-bottom: 1px solid var(--mh-rule); }
/* 3.6 — guest FAQ disclosure. A small inline script (page-guests-landing.php)
   opens all items on desktop (static) and collapses them on mobile (≤899, tap to
   expand). Answers stay in the DOM either way, so SEO/JSON-LD is unaffected. */
.mig-guests-faq__q {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--mh-navy);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
}
.mig-guests-faq__q::-webkit-details-marker { display: none; }
.mig-guests-faq__toggle {
  color: var(--mh-terracotta);
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.mig-guests-faq__item[open] .mig-guests-faq__toggle { transform: rotate(45deg); }
.mig-guests-faq__a {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mh-ink);
  margin: var(--space-3) 0 0;
}
@media (min-width: 900px) {
  .mig-guests-faq__q { cursor: default; }
  .mig-guests-faq__toggle { display: none; }
}
.mig-guests-faq__a p { margin: 0 0 var(--space-3); }
.mig-guests-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   GUESTS HUB PAGE (6.5.21 — Phase 4)
   Hub at /guests/ — hero + optional intro + tile grid of all audience
   landing pages auto-discovered from child pages.
   ============================================================ */
.mig-guests-hub {
  padding: 80px 0 80px;
  background: var(--mh-cream);
}
.mig-guests-hub__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mig-guests-hub__intro {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--mh-ink);
  text-align: center;
}
.mig-guests-hub__intro p { margin: 0 0 var(--space-4); }
.mig-guests-hub__intro p:last-child { margin-bottom: 0; }

.mig-guests-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 700px) {
  .mig-guests-hub__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .mig-guests-hub__grid { grid-template-columns: repeat(3, 1fr); }
}

.mig-guests-hub__tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition:
    transform   var(--dur-fast) var(--ease-out-expo),
    box-shadow  var(--dur-fast) var(--ease-out-expo);
}
.mig-guests-hub__tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.mig-guests-hub__tile-image { aspect-ratio: 3 / 2; overflow: hidden; }
.mig-guests-hub__tile-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.mig-guests-hub__tile:hover .mig-guests-hub__tile-img { transform: scale(1.03); }

.mig-guests-hub__tile-content {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.mig-guests-hub__tile-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--mh-navy);
  margin: 0;
  line-height: 1.25;
}
.mig-guests-hub__tile-dek {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mh-ink);
  margin: 0;
  flex: 1;
}
.mig-guests-hub__tile-arrow {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--mh-terracotta);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.mig-guests-hub__tile:hover .mig-guests-hub__tile-arrow { transform: translateX(4px); }

/* ============================================================
   HOMEPAGE GUESTS STRIP (6.5.21 — Phase 5)
   Sits between the homepage About section and Experiences section.
   ============================================================ */
.mh-home-guests {
  padding: var(--section-y) 0;
  background: var(--mh-sand);
  border-top: 1px solid var(--mh-rule);
}
.mh-home-guests__head {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.mh-home-guests__intro {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--mh-ink);
  margin: var(--space-4) 0 0;
}

/* Two-column editorial layout: numbered list left, sticky preview right */
.mh-home-guests__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 900px) {
  .mh-home-guests__layout { grid-template-columns: 7fr 5fr; gap: var(--space-9); }
}

/* ---- Numbered list (left column) ---- */
.mh-home-guests__list { display: flex; flex-direction: column; }

.mh-home-guests__row {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: var(--space-4);
  align-items: baseline;
  padding: 1.75rem var(--space-4);  /* +4px above/below space-5 — gives rows more breathing room to meet the card */
  margin: 0 calc(var(--space-4) * -1);
  border-bottom: 1px solid var(--mh-rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition:
    background-color  var(--dur-fast) var(--ease-out-expo),
    padding-left      var(--dur-med)  var(--ease-out-expo);
}
.mh-home-guests__row:first-child { border-top: 1px solid var(--mh-rule); }
.mh-home-guests__row:hover,
.mh-home-guests__row.is-active {
  background: var(--mh-sand-2);
  text-decoration: none;
}

.mh-home-guests__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--mh-terracotta);
  line-height: 1;
  letter-spacing: 0.01em;
}

.mh-home-guests__row-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--mh-navy);
  line-height: 1.3;
}

.mh-home-guests__row-arrow {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--mh-terracotta);
  text-align: right;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.mh-home-guests__row:hover .mh-home-guests__row-arrow,
.mh-home-guests__row.is-active .mh-home-guests__row-arrow {
  transform: translateX(4px);
}

/* ---- Sticky preview panel (right column) ---- */
/* CSS-grid stacking: all 5 cards occupy the same grid cell, only the active
   one is visible. Grid auto-sizes to the tallest card so nothing gets cut off. */
.mh-home-guests__preview {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media (min-width: 900px) {
  .mh-home-guests__preview {
    position: sticky;
    top: calc(var(--nav-height) + 32px);
    align-self: start;
  }
}

.mh-home-guests__preview-card {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  background: var(--mh-cream);
  border: 1px solid var(--mh-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity     var(--dur-med) var(--ease-out-expo),
    visibility  var(--dur-med) var(--ease-out-expo);
}
.mh-home-guests__preview-img-wrap { flex-shrink: 0; }
.mh-home-guests__preview-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mh-home-guests__preview-img-wrap {
  aspect-ratio: 24 / 9;       /* cinematic crop — kept short to balance the list height */
  overflow: hidden;
}
.mh-home-guests__preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;  /* overridden per-page via inline style from ACF */
  display: block;
}

/* Body grows to fill remaining space below the image, with content
   centred vertically — so short quotes don't leave empty whitespace
   at the bottom while long quotes still flow naturally. */
.mh-home-guests__preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5);
}

.mh-home-guests__preview-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mh-home-guests__preview-eyebrow-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--mh-terracotta);
}
.mh-home-guests__preview-eyebrow-text {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mh-terracotta);
}

.mh-home-guests__preview-quote {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--mh-navy);
}
.mh-home-guests__preview-quote p { margin: 0 0 var(--space-3); }
.mh-home-guests__preview-quote p:last-child { margin-bottom: 0; }

.mh-home-guests__preview-byline {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--mh-navy);
}
.mh-home-guests__preview-bymeta {
  display: block;
  font-weight: 400;
  font-size: var(--t-micro);
  color: var(--mh-ink-2);
  margin-top: 2px;
}

.mh-home-guests__preview-cta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  text-decoration: none;
  border-bottom: 1px solid var(--mh-terracotta);
  padding-bottom: 4px;
  transition: gap var(--dur-fast) var(--ease-out-expo);
}
.mh-home-guests__preview-cta:hover {
  color: var(--mh-terracotta-2);
  gap: var(--space-3);
  text-decoration: none;
}
.mh-home-guests__preview-cta-title { text-transform: none; letter-spacing: 0.02em; font-weight: 500; }

/* Mobile: hide the preview panel (rows already carry the links). */
@media (max-width: 899px) {
  .mh-home-guests__preview { display: none; }
}

.mh-home-guests__foot {
  text-align: center;
  margin-top: var(--space-8);
}

/* ============================================================
   TESTIMONIAL AUDIENCE FILTER (6.5.21 — Phase 6)
   Pill-style filter buttons above the /testimonials/ grid.
   ============================================================ */
.mig-reviews-filter {
  padding: var(--space-7) 0 var(--space-6);
  background: var(--mh-sand);
  border-top: 1px solid var(--mh-rule);
}
.mig-reviews-filter__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.mig-reviews-filter__pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mh-navy);
  background: transparent;
  border: 1.5px solid var(--mh-rule-strong);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition:
    background    var(--dur-fast) var(--ease-out-expo),
    border-color  var(--dur-fast) var(--ease-out-expo),
    color         var(--dur-fast) var(--ease-out-expo);
}
.mig-reviews-filter__pill:hover {
  border-color: var(--mh-navy);
  background: var(--mh-cream);
  text-decoration: none;
}
.mig-reviews-filter__pill.is-active {
  /* 3.3 — terracotta active to match .mig-filter-pill (was navy) */
  background: var(--mh-terracotta);
  border-color: var(--mh-terracotta);
  color: var(--mh-cream);
}
.mig-reviews-filter__pill.is-empty {
  opacity: 0.5;
  border-style: dashed;
}

/* 3.3 (ui-ux-pro-max repass) — on touch widths the unified filter pills must
   meet the 44px minimum tap target. Both pill types share this rule. */
@media (max-width: 900px) {
  .mig-filter-pill,
  .mig-reviews-filter__pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* (Phase 6 expandable-rows experiment removed 2026-05-21 — replaced
   with the grid+card pattern below. Old .mig-review-row styles
   preserved here in case the pattern returns.) */
/* ============================================================
   TESTIMONIAL ROWS — pull-quote headlines with progressive
   disclosure (DEPRECATED, retained for reference only)
   ============================================================ */
.mig-reviews {
  padding: 80px 0 80px;
  background: var(--mh-sand);
}
.mig-reviews__list {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mig-reviews__empty {
  text-align: center;
  color: var(--mh-ink-2);
  font-style: italic;
  padding: var(--space-7) 0;
}

.mig-review-row {
  border-bottom: 1px solid var(--mh-rule);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out-expo);
}
.mig-review-row:first-child { border-top: 1px solid var(--mh-rule); }
.mig-review-row:hover { background: var(--mh-cream); }

/* Featured rows: terracotta accent rule on the left edge */
.mig-review-row--featured::before {
  content: '';
  position: absolute;
  left: -16px;
  top: var(--space-5);
  bottom: var(--space-5);
  width: 3px;
  background: var(--mh-terracotta);
  border-radius: 1.5px;
}

.mig-review-row__summary {
  cursor: pointer;
  padding: var(--space-5) 0;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: var(--space-4);
  align-items: start;
  list-style: none;
}
.mig-review-row__summary::-webkit-details-marker { display: none; }
.mig-review-row__summary::marker { content: none; }

.mig-review-row__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--mh-navy);
  margin: 0;
  text-wrap: pretty;
}

.mig-review-row__byline {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--mh-ink-2);
  line-height: 1.4;
}
.mig-review-row__name {
  color: var(--mh-navy);
  font-weight: 600;
}
.mig-review-row__tour {
  color: var(--mh-ink-2);
  font-style: italic;
}

.mig-review-row__toggle {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--mh-terracotta);
  line-height: 1;
  text-align: center;
  margin-top: 4px;
  transition: transform var(--dur-fast) var(--ease-out-expo);
  user-select: none;
}
.mig-review-row[open] .mig-review-row__toggle {
  transform: rotate(45deg);
}

.mig-review-row__body {
  padding: 0 0 var(--space-6);
  animation: mig-review-row-fade-in var(--dur-med) var(--ease-out-expo);
}
@keyframes mig-review-row-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mig-review-row__stars {
  display: flex;
  gap: 3px;
  color: var(--mh-terracotta);
  margin-bottom: var(--space-3);
}

.mig-review-row__quote {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mh-ink);
  text-wrap: pretty;
}
/* Paragraph spacing inside nl2br-rendered quotes */
.mig-review-row__quote br + br { display: block; content: ''; margin-top: 0.6em; }

.mig-review-row__meta {
  margin: 0;
  font-size: var(--t-caption);
  color: var(--mh-ink-2);
  font-style: italic;
}

@media (max-width: 700px) {
  .mig-review-row__headline { font-size: 1.0625rem; }
  .mig-review-row--featured::before { left: -10px; }
}

/* ============================================================
   Quick Facts & Guide Tips table
   ============================================================
   Used on long-form travelogue and how-to posts that include
   genuine practical reference info (where, time, season, pacing).
   Class is added in post_content when the GEO-Preservation
   Protocol's table test passes.

   Pattern follows .mig-toc__card: cream background, subtle navy
   rule, terracotta accent on the left edge. Labels in uppercase
   Inter eyebrow style; values in Lora for editorial weight.
*/
.quick-facts-table {
  width: 100%;
  margin: var(--space-6, 2rem) 0 var(--space-7, 2.5rem);
  border: 1px solid var(--mh-rule);
  border-left: 3px solid var(--mh-terracotta);
  border-collapse: collapse;
  background: var(--mh-cream);
  font-family: var(--font-body);
}
.quick-facts-table th,
.quick-facts-table td {
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  text-align: left;
  vertical-align: top;
  border: none;
  border-bottom: 1px solid var(--mh-rule);
}
.quick-facts-table tr:last-child th,
.quick-facts-table tr:last-child td {
  border-bottom: none;
}
.quick-facts-table th {
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  color: var(--mh-navy);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  width: 30%;
  padding-top: calc(var(--space-4, 1rem) + 4px);
  white-space: nowrap;
}
.quick-facts-table td {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--mh-ink);
}
@media (max-width: 600px) {
  .quick-facts-table th,
  .quick-facts-table td {
    display: block;
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
    border: none;
    white-space: normal;
  }
  .quick-facts-table th {
    padding-bottom: 0;
    padding-top: var(--space-4, 1rem);
  }
  .quick-facts-table tr {
    border-bottom: 1px solid var(--mh-rule);
  }
  .quick-facts-table tr:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   About — Personal interests section (Phase G)
   Concept A: typographic, no containers, hairline rule above. Lives inside
   the bio column, after the closing signature.
   ========================================================================== */
.mig-about-interests {
  margin: 56px 0 16px;
  padding-top: 36px;
  border-top: 1px solid var(--mh-rule);
}
.mig-about-interests__eyebrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mh-ink-2);
  margin-bottom: 22px;
}
.mig-about-interests__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 28px;
}
.mig-about-interests__label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mh-terracotta);
  margin-bottom: 6px;
}
.mig-about-interests__text {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  color: var(--mh-navy);
  line-height: 1.45;
}
@media (max-width: 720px) {
  .mig-about-interests {
    margin: 40px 0 8px;
    padding-top: 28px;
  }
  .mig-about-interests__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ============================================================
   A5 — MOBILE section density, ALL page templates (2026-06-02)
   Home sections taper via --section-y. These inner-page section paddings
   were base rules with no phone override (64–100px on phones). Tighten the
   VERTICAL rhythm only (padding-block) so horizontal gutters are never
   touched. Placed last so source-order wins at same specificity; desktop
   (≥768px) is untouched. Matches the home mobile floor (~48px).
   ============================================================ */
@media (max-width: 767px) {
  /* shared simple pages (page.php) */
  .mig-page-hero       { padding-block: 48px 40px; }
  .mig-page-content    { padding-block: 40px 56px; }
  /* blog */
  .mig-article-header  { padding-block: 48px 32px; }
  .mig-article-body    { padding-block: 0 56px; }
  .mig-blog            { padding-block: 48px 56px; }
  .mig-related         { padding-block: 48px; }
  /* itineraries */
  .mig-itin-body       { padding-block: 48px 56px; }
  .mig-itin-cta        { padding-block: 56px; }
  .mig-itin-grid       { padding-block: 8px 56px; }
  /* testimonials / search / 404 / about-page rail */
  .mig-reviews         { padding-block: 48px 56px; }
  .mig-search          { padding-block: 48px 56px; }
  .mig-404             { padding-block: 56px; }
  .mig-trust-rail      { padding-block: 48px; }
  .mig-about-notable   { padding-block: 48px; }
  /* guests landing + hub + faq */
  .mig-guests          { padding-block: 48px 56px; }
  .mig-guests-faq      { padding-block: 48px 56px; }
  .mig-guests-hub      { padding-block: 48px 56px; }
}

/* ============================================================
   Quick-wins batch (2026-06-02) — see POLISH-PLAN.md
   ============================================================ */
/* Q6c — home experiences: pricing block removed; the lone "Browse itineraries"
   CTA shouldn't sit in a bordered card. Strip card chrome, centre it. */
.mh-experiences__pricing--cta-only {
  background: transparent;
  border: 0;
  padding: 0;
  justify-content: center;
}
/* Q7 — philosophy section is navy; its inline link ("More about my approach →")
   was navy-on-navy = invisible. Cream text, terracotta underline, terracotta hover. */
.mig-philosophy a {
  color: var(--mh-cream);
  text-decoration: underline;
  text-decoration-color: var(--mh-terracotta);
  text-underline-offset: 3px;
}
.mig-philosophy a:hover { color: var(--mh-terracotta); text-decoration-color: var(--mh-terracotta); }
/* Q9 — About signature looks odd on mobile; hide it ≤767 (desktop keeps it). */
@media (max-width: 767px) {
  .mh-about__signature { display: none; }
}
/* Q5 follow-up — make links inside FAQ answers obvious (the WhatsApp link in the
   executive bookings FAQ was inheriting the default near-navy link colour). */
.mig-guests-faq__a a,
.mh-faq__a a {
  color: var(--mh-terracotta);
  text-decoration: underline;
  text-decoration-color: var(--mh-terracotta);
  text-underline-offset: 2px;
  font-weight: 500;
}
.mig-guests-faq__a a:hover,
.mh-faq__a a:hover { color: var(--mh-terracotta-2); text-decoration-color: var(--mh-terracotta-2); }

/* ============================================================
   SEO-GEO R-14 (2026-06-10) — tag-chip row under listing cards
   (blog index / category + tag archives / search results).
   Each card is one big <a>, so the chips render as a SIBLING
   <nav> directly after it (nested links are invalid HTML); these
   rules attach the row to the card visually. :has() lets the row
   take over the card's bottom border + closing padding. Chips
   reuse the single-post .mig-tag-chips__chip look, slightly
   smaller. Warm Host overrides live in mig-warmhost.css (R-14).
   ============================================================ */
.mig-tag-chips.mig-tag-chips--card { margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--mh-rule); }
.mig-tag-chips.mig-tag-chips--card .mig-tag-chips__chip { padding: 4px 10px; font-size: 0.75rem; }
.mig-post-card:has(+ .mig-tag-chips--card),
.mig-post-card--featured:has(+ .mig-tag-chips--card) { border-bottom: 0; padding-bottom: 14px; }
/* search cards are full-bleed boxes (padding 0) — don't add card padding;
   give the row its own breathing room instead */
.mig-search-card:has(+ .mig-tag-chips--card) { padding-bottom: 0; }
.mig-search-card + .mig-tag-chips--card { padding-top: 14px; }
/* desktop/tablet: align the row with the card's text column */
@media (min-width: 601px) {
  .mig-post-card + .mig-tag-chips--card { padding-left: calc(180px + 28px); } /* thumb col + gap */
}
@media (min-width: 641px) {
  .mig-search-card + .mig-tag-chips--card { padding-left: calc(170px + 24px); } /* media col + body inset */
}
@media (max-width: 640px) {
  /* search cards stack 1-col below 640 with a 20px body inset */
  .mig-search-card + .mig-tag-chips--card { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   SEO-GEO R-29 (2026-06-10) — gallery thumbnail strip under
   listing cards (blog index / tag + category archives). Sibling
   <div> after the card <a> → chips <nav> (card-thumb-strip.php).
   ALL of the post's gallery images sit in the markup (image-SEO
   URL parity with the old tag pages — `medium` src family); the
   row clamps VISUALLY: fixed 52px thumbs, one row, overflow
   hidden, no JS. Height is reserved by the fixed thumb size →
   zero CLS. The last sibling in the card group owns the listing
   divider. Warm Host overrides in mig-warmhost.css (R-29).
   ============================================================ */
.mig-card-strip {
  display: flex; flex-wrap: nowrap; gap: 8px;
  /* Samuel 2026-06-10: horizontal swipe-scroll instead of a hard clip — the
     row was cutting thumbs off mid-image on mobile. overflow-x only; the page's
     vertical scroll is unaffected. Scrollbar kept invisible (the half-thumb
     peeking at the edge is the swipe affordance). */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  /* width:0 + min-width:100% — keeps the no-wrap row's min-content width from
     propagating up the blog grid column (grid min-width:auto trap: a 13-thumb
     strip otherwise blows the page out to ~820px at a 390 viewport). Specified
     width 0 zeroes the intrinsic contribution; min-width stretches it back to
     the column. (LESSONS.md §1 family — flex/grid intrinsic sizing.) */
  width: 0; min-width: 100%;
  margin: 0; padding: 0 0 24px;
  border-bottom: 1px solid var(--mh-rule);
}
.mig-card-strip::-webkit-scrollbar { display: none; }
.mig-card-strip img {
  width: 52px; height: 52px; flex: 0 0 auto;
  object-fit: cover; display: block;
  border-radius: 5px; /* tiny thumbs — the 12px kit radius reads clumsy at this size */
}
/* divider hand-off: card / chips give up the bottom rule when a strip follows */
.mig-post-card:has(+ .mig-card-strip),
.mig-post-card--featured:has(+ .mig-card-strip) { border-bottom: 0; padding-bottom: 14px; }
.mig-tag-chips--card:has(+ .mig-card-strip) { border-bottom: 0; padding-bottom: 14px; }
/* desktop/tablet: align with the regular card's text column (same offset as the chips) */
@media (min-width: 601px) {
  .mig-post-card + .mig-card-strip,
  .mig-post-card + .mig-tag-chips--card + .mig-card-strip { padding-left: calc(180px + 28px); } /* thumb col + gap */
}

/* Zero-CLS video embeds (PERF-PLAN 8.1.4): legacy posts embed fixed
   560x315 YouTube iframes with no responsive wrapper; reserve 16:9
   space and scale fluidly instead. */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 2.4.11 Focus Not Obscured (PERF-PLAN 8.3.8): keep keyboard-focused targets
   clear of the sticky header when the browser scrolls them into view. */
html {
  scroll-padding-top: calc(var(--nav-height, 72px) + 16px);
}

/* Hero-video pause control (PERF-PLAN 8.3.9, WCAG 2.2.2). Hidden by the
   `hidden` attribute until JS reveals it (a11y preview now; sitewide after
   the 8.5 ruling). Bottom-right, clear of the kicker/credentials row. */
.mh-hero__pause[hidden] { display: none; } /* CSS display beats the hidden attr — without this the gated button leaks (caught by the 8.4.1 keyboard pass) */
/* The button accompanies the VIDEO, which is display:none below 768px — mirror
   that breakpoint so a load-wide-then-rotate/resize never strands the button
   over the mobile poster (Samuel, 2026-06-11). */
@media (max-width: 767px) { .mh-hero__pause { display: none !important; } }
.mh-hero__pause {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(253, 251, 247, 0.55);
  border-radius: 50%;
  background: rgba(14, 27, 50, 0.45);
  color: var(--mh-cream);
  cursor: pointer;
}
.mh-hero__pause:hover { background: rgba(14, 27, 50, 0.7); }

/* Quote-rotator pause toggle (preview-gated in JS) — sits with the dots. */
.mh-rotator__pause {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  vertical-align: middle;
}
.mh-rotator__pause:hover { opacity: 1; }

/* 2.5.8 target-size (PERF-PLAN 8.3.6): expand small tap targets to >=24px.
   Real box growth (axe ignores pseudo-element hit areas); negative margins
   cancel the layout impact so the rendered position is unchanged. */
.mig-nav__caret {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -3px -5px;
}
.mig-guests-card__src {
  /* inline-flex (not inline-block) — keeps the icon + name on one line;
     the block version wrapped them and grew every card (Samuel-era visual,
     restored at 8.6.3). min-height still satisfies the 24px target. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* 2.5.8 companion (8.6.1b): at phone widths the read-more link's box started
   8px INSIDE the source link's 24px box ("partially obscured") — separate the
   two targets so both have clear space. */
@media (max-width: 767px) {
  .mig-review-card--guest .mig-guests-card__meta { margin-bottom: 10px; }
}


/* FIX-AUTHORCARD-WIDTH 2026-06-15 */
/* Wave-1 answer pages (page-answer.php): the author card is a sibling of
   .entry-content inside the 1200px .mig-page-content__inner, so with no width
   cap it sprawled full width. Constrain it to the 760px reading column so it
   sits under the prose. Only matches the answer template (normal pages have no
   author card), so no other page is affected. */
.mig-page-content__inner > .mig-author-card { max-width: 760px; }


/* ===== ANSWER PAGES v3 (page-answer.php) — added 2026-06-15 ===== */
.mig-answer{ display:grid; grid-template-columns:minmax(0,760px) 300px; gap:48px; align-items:start; }
.mig-answer__main{ min-width:0; }
.mig-answer .entry-content{ max-width:none; }
.mig-answer__side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; }

/* soft "short answer" box (authored into the content) */
.mig-answer-box{ background:var(--mh-cream); border:1px solid var(--wh-bd,rgba(140,72,48,.14)); border-left:3px solid var(--mh-terracotta); border-radius:var(--wh-r,12px); padding:18px 22px; box-shadow:var(--wh-shadow-sm,0 8px 20px -12px rgba(140,72,48,.26)); margin:0 0 22px; }
.mig-answer-box__k{ font-family:var(--font-body); font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mh-terracotta); display:block; margin-bottom:7px; }
.mig-answer-box p{ font-family:var(--font-display); font-size:1.125rem; line-height:1.5; color:var(--mh-navy); margin:0; }

/* optional, page-specific stat strip */
.mig-answer-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 10px; }
.mig-answer-stat{ background:var(--mh-cream); border:1px solid var(--wh-bd,rgba(140,72,48,.14)); border-radius:var(--wh-r,12px); padding:16px 18px; box-shadow:var(--wh-shadow-sm,0 8px 20px -12px rgba(140,72,48,.26)); }
.mig-answer-stat__n{ font-family:var(--font-display); color:var(--mh-terracotta); font-size:1.5rem; line-height:1; display:block; margin-bottom:5px; }
.mig-answer-stat__l{ font-size:.8125rem; color:var(--mh-ink-2); line-height:1.4; }

/* photo band (figure.mig-answer-photo authored into the content) */
.mig-answer .entry-content figure.mig-answer-photo{ width:100% !important; max-width:none !important; margin:30px 0 !important; border-radius:var(--wh-r,12px); overflow:hidden; box-shadow:var(--wh-shadow,0 20px 44px -18px rgba(140,72,48,.30)); text-align:left; }
.mig-answer-photo img{ width:100% !important; height:auto !important; display:block !important; margin:0 !important; border-radius:0 !important; max-height:none !important; }
.mig-answer-photo figcaption{ font-family:var(--font-body); font-size:.8125rem; color:var(--mh-ink-2); padding:9px 14px; background:var(--mh-cream); }

/* sidebar: Contents */
.mig-answer-toc{ background:var(--mh-cream); border:1px solid var(--wh-bd,rgba(140,72,48,.14)); border-radius:var(--wh-r,12px); box-shadow:var(--wh-shadow-sm,0 8px 20px -12px rgba(140,72,48,.26)); padding:16px 18px; }
.mig-answer-toc__head{ font-family:var(--font-body); font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mh-terracotta); margin-bottom:8px; }
.mig-answer-toc__list{ list-style:none; margin:0; padding:0; }
.mig-answer-toc__list a{ display:block; font-family:var(--font-body); font-size:.85rem; color:var(--mh-navy); text-decoration:none; padding:6px 0; border-bottom:1px solid var(--mh-rule); }
.mig-answer-toc__list li:last-child a{ border-bottom:0; }
.mig-answer-toc__list a:hover{ color:var(--mh-terracotta); }

/* sidebar: Credentials (reuses .mig-credentials base; compacted + warm chrome) */
.mig-answer .mig-answer-cred{ padding:18px 20px; margin:0; border-color:var(--wh-bd,rgba(140,72,48,.14)); border-radius:var(--wh-r,12px); box-shadow:var(--wh-shadow-sm,0 8px 20px -12px rgba(140,72,48,.26)); }
.mig-answer-cred__more{ display:inline-block; margin-top:10px; font-family:var(--font-body); font-size:.78rem; font-weight:600; color:var(--mh-terracotta); text-decoration:none; }
.mig-answer-cred__more:hover{ text-decoration:underline; }

.mig-answer__cta{ display:block; text-align:center; width:100%; box-sizing:border-box; }

@media (max-width:980px){
  .mig-answer{ grid-template-columns:1fr; gap:0; }
  .mig-answer__side{ position:static; flex-direction:row; flex-wrap:wrap; gap:14px; margin-top:36px; }
  .mig-answer__side > *{ flex:1 1 240px; }
}
@media (max-width:560px){
  .mig-answer-stats{ grid-template-columns:1fr; }
  .mig-answer__side{ flex-direction:column; }
}
/* ===== END ANSWER PAGES v3 ===== */