/* =========================================================================
   Milvus base stylesheet
   -----------------------------------------------------------------------
   Single canonical CSS for marketing + /me. Loaded by
   marketing/layouts/app.blade.php. Mirrors design tokens defined in
   marketing/partials/design-tokens.blade.php.
   ======================================================================= */

@font-face {
  font-family: 'Norelli';
  src: url('/assets/fonts/NorelliDemoBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Noto Naskh Arabic', 'Tajawal', sans-serif;
  font-size: 17px; line-height: 1.65;
  color: #0C0E1A;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid rgba(12,14,26,0.08); margin: 40px 0; }

/* Typography defaults — 2026 refresh: bigger, more confident, less timid */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 700; line-height: 1.1; margin: 0;
  color: #0C0E1A;
  letter-spacing: 0.04em;
}
h1 { font-size: clamp(40px, 5.2vw, 68px); font-weight: 900; font-family: 'Norelli', 'Cormorant Garamond', 'Playfair Display', serif; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; }
h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; }
h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
em, i { font-style: italic; color: #1E3A5F; font-weight: 500; }
::selection { background: #EEF3F8; color: #0C0E1A; }

/* RTL */
[dir="rtl"] body { font-family: 'Tajawal', 'Noto Naskh Arabic', sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: 'Tajawal', 'Noto Naskh Arabic', sans-serif;
  font-weight: 700;
}


/* Shell + grid */
.m-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.m-main { min-height: 60vh; padding-bottom: 80px; }


/* Header
   Base is fully transparent — pages decide their own chrome.
   • Pages with a DARK hero (home/journeys/destinations/journal/philosophy)
     add a dark→transparent gradient in their own <style> block so nav
     text is legible over imagery.
   • Pages with a CREAM background leave it transparent so the nav sits
     cleanly on the page — no dark stripe over cream.
   • Scrolled state is shared: a cream, blurred solid so the nav always
     stays readable once the user leaves the hero. */
.m-header {
  position: sticky; top: 0; z-index: 50;
  /* Top state: fully transparent — let the hero photo read uninterrupted.
     The .is-scrolled rule below adds a frosted background once the user
     leaves the hero, so legibility is preserved further down the page. */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease,
              backdrop-filter 240ms ease, -webkit-backdrop-filter 240ms ease,
              box-shadow 240ms ease;
}
.m-header.is-scrolled {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(30, 58, 95, 0.10);
  box-shadow: 0 6px 22px rgba(20, 42, 71, 0.06);
}
.m-header-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 0;
}
.m-brand {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
}
.m-brand-mark { display: inline-flex; }
.m-brand-mark svg { width: 32px; height: 32px; }
.m-brand-word { display: flex; flex-direction: column; line-height: 1; }
.m-brand-name {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 18px; color: #0C0E1A;
}
.m-brand-tag {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #1E3A5F; margin-top: 4px;
}

/* Nav container: takes the remaining row width so the list sits next
   to the brand (left in LTR, right in RTL) and the aside pushes itself
   to the opposite edge via its own margin-auto. */
.m-nav { flex: 1; display: flex; align-items: center; gap: 32px; }
.m-nav-list {
  display: flex; gap: 28px; list-style: none;
}
/* Aside pushes to the far edge of the row (opposite the brand). */
.m-nav-aside { margin-left: auto; }
[dir="rtl"] .m-nav-aside { margin-left: 0; margin-right: auto; }
.m-nav-link {
  position: relative;
  font-size: 13px; color: #2A4A6A; padding: 8px 0;
  border-bottom: 0;
  transition: color 160ms ease;
}
/* Smooth animated underline — grows from center on hover, stays for active */
.m-nav-link::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 0; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  opacity: 0.85;
  pointer-events: none;
}
.m-nav-link:hover::before,
.m-nav-link:focus-visible::before,
.m-nav-link.is-active::before { width: 100%; }
.m-nav-link:hover { color: #1A3550; }
.m-nav-link.is-active {
  color: #1A3550; font-weight: 500;
}
.m-nav-aside {
  display: flex; align-items: center; gap: 16px;
}
.m-nav-locale {
  font-size: 12px; letter-spacing: 1px; color: #2A4A6A;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(30, 58, 95,0.22);
  transition: background 160ms ease;
}
.m-nav-locale:hover { background: rgba(30, 58, 95,0.08); }

/* Mobile menu toggle — hidden at desktop, flex at narrow viewports */
.m-nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  padding: 0; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 160ms ease;
}
[dir="rtl"] .m-nav-toggle { margin-left: 0; margin-right: auto; }
.m-nav-toggle:hover { background: rgba(12, 14, 26, 0.06); }
.m-nav-toggle span {
  display: block; width: 20px; height: 1.5px;
  background: #0C0E1A;
  border-radius: 2px;
  transition: background 200ms ease, transform 260ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}

/* Spans become cream/white when header is transparent over a dark hero */
.m-header:not(.is-scrolled) .m-nav-toggle span { background: #0C0E1A; }

/* Hamburger → × animation when open */
.m-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.m-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.m-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 880px) {
  /* Show the toggle, hide the inline nav list + shrink aside gap */
  .m-nav-toggle { display: flex; }
  .m-nav-list { display: none; }
  .m-nav-aside { gap: 8px; }

  /* ── Mobile nav panel (slides down when is-open) ────────────── */
  .m-nav.is-open .m-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Position as a full-width dropdown below the sticky header */
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 45;
    padding: 76px 24px 32px;
    background: rgba(247, 242, 235, 0.97);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    box-shadow: 0 8px 32px rgba(12, 14, 26, 0.14);
    animation: mNavSlideDown 240ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes mNavSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .m-nav.is-open .m-nav-link {
    display: flex; align-items: center;
    padding: 15px 4px;
    font-size: 16px; font-weight: 500;
    color: #0C0E1A;
    border-bottom: 1px solid rgba(12, 14, 26, 0.07);
  }
  .m-nav.is-open .m-nav-link:last-child { border-bottom: 0; }
  .m-nav.is-open .m-nav-link.is-active { color: #3d7ca8; }

  /* Aside items stay visible alongside the toggle at mobile */
  .m-nav-aside .m-nav-locale { font-size: 12px; }
  .m-nav-aside .m-btn { padding: 9px 14px; font-size: 13px; }
}

/* Scroll-lock when mobile nav is open */
body.m-nav-locked { overflow: hidden; }


/* Buttons */
.m-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  text-decoration: none; text-align: center;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  cursor: pointer; border: 0; line-height: 1.2;
}
.m-btn-gold {
  background: linear-gradient(135deg, #3D6A93, #1E3A5F); color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(30, 58, 95,0.22);
}
.m-btn-gold:hover {
  background: linear-gradient(135deg, #F5BAB6, #3D6A93);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30, 58, 95,0.34);
}
.m-btn-ghost {
  background: transparent; color: #1A3550;
  border: 1px solid rgba(42,74,106,0.18);
}
.m-btn-ghost:hover {
  background: rgba(30, 58, 95,0.05);
  border-color: rgba(42,74,106,0.32);
}
.m-btn-link {
  background: none; padding: 6px 0;
  color: #1E3A5F; font-size: 13px;
}
.m-btn-link:hover { color: #1A3550; }
.m-btn-sm { padding: 6px 12px; font-size: 12px; }
.m-btn-lg { padding: 14px 28px; font-size: 15px; }
.m-btn-arrow { font-size: 14px; }

.m-nav-cta { padding: 8px 16px; font-size: 12px; }


/* Tier pill */
.m-tier-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(30, 58, 95,0.10);
  border: 1px solid rgba(30, 58, 95,0.26);
  font-size: 11px; color: #1A3550;
  text-decoration: none; line-height: 1;
}
.m-tier-pill:hover { background: rgba(30, 58, 95,0.16); }
.m-tier-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.m-tier-seedling { background: #3D6A93; }
.m-tier-grove    { background: #1E3A5F; }
.m-tier-orchard  { background: #142A47; }
.m-tier-reserve  { background: #0C0E1A; box-shadow: 0 0 0 2px rgba(30, 58, 95,0.4); }
.m-tier-label {
  font-weight: 500; letter-spacing: 0.5px;
  text-transform: uppercase; font-size: 10px;
}


/* Account dropdown */
.m-account { position: relative; }
.m-account-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer; color: #0C0E1A;
  transition: background 160ms ease, border-color 160ms ease;
}
.m-account-trigger:hover,
.m-account.is-open .m-account-trigger {
  background: rgba(12,14,26,0.04);
  border-color: rgba(12,14,26,0.08);
}
.m-account-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #0C0E1A; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 14px;
  line-height: 1;
}
.m-account-name { font-size: 13px; font-weight: 500; }
.m-account-chev { font-size: 10px; color: #6B7280; }

.m-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 280px;
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.25);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(12,14,26,0.10), 0 2px 6px rgba(12,14,26,0.06);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 100;
}
[dir="rtl"] .m-account-menu { right: auto; left: 0; }
.m-account.is-open .m-account-menu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.m-account-menu a, .m-account-menu button {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  background: transparent; border: 0; color: #0C0E1A;
  text-decoration: none; text-align: inherit; cursor: pointer; width: 100%;
  transition: background 120ms ease;
}
.m-account-menu a:hover, .m-account-menu button:hover {
  background: rgba(30, 58, 95,0.12);
}
.m-account-menu-label { font-size: 14px; font-weight: 500; }
.m-account-menu-sub { font-size: 11px; color: #6B7280; }
.m-account-menu-sep { height: 1px; background: rgba(12,14,26,0.08); margin: 6px 4px; }
.m-account-menu-form { margin: 0; }
.m-hidden-form { display: none; }


/* Eyebrows + hero typography */
.m-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: #1E3A5F;
}
.m-eyebrow.m-gold { color: #1E3A5F; }

.m-display-xl {
  font-family: 'Norelli', 'Cormorant Garamond', 'Playfair Display', serif; font-weight: 900;
  font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1;
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}
.m-display-lg {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}
.m-display-md {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.25; letter-spacing: 0.02em; margin: 0 0 8px;
}
.m-display-sm {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 18px; line-height: 1.35; margin: 0 0 6px;
}
[dir="rtl"] .m-display-xl, [dir="rtl"] .m-display-lg,
[dir="rtl"] .m-display-md, [dir="rtl"] .m-display-sm {
  font-family: 'Tajawal', 'Noto Naskh Arabic', sans-serif;
}
.m-lede {
  font-size: 17px; line-height: 1.6; color: #3A3F6E;
  max-width: 620px;
}


/* Sections + cards */
.m-section { padding: 80px 0; }
.m-section-tight { padding: 48px 0; }

.m-card {
  background: #FFFFFF;
  border: 1px solid rgba(42,74,106,0.10);
  border-radius: 16px;
  padding: 24px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.m-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26,53,80,0.08);
  border-color: rgba(30, 58, 95,0.30);
}


/* ===================================================
   Bespoke Hero System — .bh-*
   =================================================== */
.bh-hero {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
  background: #0C0E1A;
  display: flex;
  align-items: center;
}

.bh-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bh-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05); /* Soft margin for parallax */
}

/* ── Overlays ── */
.bh-overlay-readability {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right, 
    rgba(12, 14, 26, 0.75) 0%, 
    rgba(12, 14, 26, 0.3) 40%, 
    transparent 100%
  );
}
[dir="rtl"] .bh-overlay-readability {
  background: linear-gradient(
    to left, 
    rgba(12, 14, 26, 0.75) 0%, 
    rgba(12, 14, 26, 0.3) 40%, 
    transparent 100%
  );
}

.bh-overlay-geometry {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.bh-geometry-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Content ── */
.bh-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 80px; /* Nav offset */
}
.bh-body {
  max-width: 720px;
}
.bh-eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 227, 211, 0.9);
  margin-bottom: 24px;
}
.bh-headline {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 92px);
  line-height: 0.95;
  color: #FFFFFF;
  margin: 0 0 32px;
  letter-spacing: -0.02em;
}
.bh-sub {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 48px;
  max-width: 480px;
}

/* ── Button ── */
.bh-cta {
  display: inline-flex;
  align-items: center;
  padding: 18px 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}
.bh-cta:hover {
  background: #FFFFFF;
  color: #0C0E1A;
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .bh-hero { height: auto; padding: 120px 0 80px; }
  .bh-overlay-readability {
    background: linear-gradient(
      to bottom,
      rgba(12, 14, 26, 0.6) 0%,
      rgba(12, 14, 26, 0.85) 100%
    );
  }
  .bh-headline { font-size: 52px; }
}

/* =========================================================================
   /me client portal
   ======================================================================= */
.me-page .m-main { padding-top: 24px; }

.me-hero {
  padding: 48px 0 32px;
  border-bottom: 1px solid rgba(30, 58, 95,0.18);
}
.me-hero-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: #1E3A5F; margin-bottom: 12px;
  display: block;
}
.me-hero-title {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(40px, 5vw, 60px); line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px; color: #0C0E1A;
}
.me-hero-title em { font-style: italic; color: #2A4A6A; }

/* Tight meta line — sits under the H1 as a quiet status, no card chrome.
   Replaces the previous .me-hero-active pill which duplicated the destination
   that's already in the H1. */
.me-hero-meta {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--m-success-deep, #1E5A3A);
  letter-spacing: 0.2px;
}
.me-hero-meta-dot { color: rgba(30, 58, 95, 0.4); }

.me-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px;
  gap: 64px; padding-top: 40px; padding-bottom: 80px;
}
@media (max-width: 900px) {
  .me-grid { grid-template-columns: 1fr; gap: 32px; }
}

.me-section { margin: 32px 0 16px; }
.me-section:first-child { margin-top: 0; }
.me-section-title {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 22px; margin: 0 0 4px; color: #0C0E1A;
}
.me-section-sub {
  font-size: 13px; color: #3A3F6E; margin: 0;
}

.me-trip-list { display: grid; gap: 16px; }

.me-empty {
  padding: 56px 24px; text-align: center;
  background: rgba(30, 58, 95,0.06);
  border: 1px solid rgba(30, 58, 95,0.18);
  border-radius: 14px;
}
.me-empty-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 26px; line-height: 1.2; color: #0C0E1A; margin: 0 0 10px;
}
.me-empty-body { color: #3A3F6E; max-width: 460px; margin: 0 auto 24px; line-height: 1.6; }
.me-empty-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Aside */
.me-aside { align-self: start; padding-top: 4px; }
.me-aside-tier {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(30, 58, 95,0.18);
  font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #0C0E1A;
}
.me-aside-tier-label { font-style: italic; letter-spacing: 0.3px; }
.me-aside-links { display: flex; flex-direction: column; gap: 12px; }
.me-aside-links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #3A3F6E;
  text-decoration: none;
  transition: color 120ms ease, transform 120ms ease;
}
.me-aside-links a:hover { color: #0C0E1A; transform: translateX(2px); }
[dir="rtl"] .me-aside-links a:hover { transform: translateX(-2px); }
.me-aside-links a span { color: #1E3A5F; font-size: 12px; }

/* Page heads (for sub-pages: messages, loyalty, etc.) */
.me-page-head { padding: 48px 0 24px; border-bottom: 1px solid rgba(30, 58, 95,0.18); }
.me-page-eyebrow {
  display: block;
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: #1E3A5F; margin-bottom: 10px;
}
.me-page-title {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px;
}
.me-page-lead { font-size: 15px; color: #3A3F6E; line-height: 1.6; max-width: 620px; }

.me-muted { color: #6B7280; }


/* Subnav (sub-pages of /me) */
.me-subnav {
  display: flex; gap: 24px;
  border-bottom: 1px solid rgba(30, 58, 95,0.18);
  padding: 16px 0;
  overflow-x: auto;
}
.me-subnav a {
  font-size: 13px; color: #3A3F6E;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.me-subnav a:hover { color: #0C0E1A; }
.me-subnav a.is-active { color: #0C0E1A; border-bottom-color: #1E3A5F; }


/* Footer */
.m-footer {
  background: linear-gradient(180deg, #1e3d5c 0%, #1A3550 100%);
  color: rgba(255,255,255,0.65);
  padding: 44px 0 0;
  margin-top: 0;
  border-top: 0;
}
.m-footer a {
  color: rgba(255,255,255,0.60); text-decoration: none;
  transition: color 160ms ease;
}
.m-footer a:hover { color: #FFFFFF; }
.m-footer ul { list-style: none; padding: 0; margin: 0; }

.m-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 40px;
}

/* Brand column */
.m-footer-brand { display: flex; flex-direction: column; }
.m-footer-mark {
  display: inline-flex;
  margin-bottom: 12px;
  color: #1E3A5F;
}
.m-footer-mark svg { width: 32px; height: 32px; }
.m-footer-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 600; font-size: 18px; font-style: italic;
  color: #FFFFFF;
  margin: 0 0 4px;
  line-height: 1.2;
}
.m-footer-tag {
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1E3A5F;
  margin: 0 0 10px;
}
.m-footer-lede {
  font-size: 12.5px; line-height: 1.52;
  color: rgba(255,255,255,0.50);
  max-width: 34ch;
  margin: 0;
}

/* Link columns */
.m-footer-col { display: flex; flex-direction: column; }
.m-footer-heading {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  color: #1E3A5F;
  margin: 0 0 11px;
}
.m-footer-col ul {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px;
}
.m-footer-col li { line-height: 1.4; }
.m-footer-col .m-muted {
  color: rgba(255,255,255,0.35); font-size: 12px;
}

/* Base strip (copy + legal) */
.m-footer-base {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 14px 0 18px;
}
.m-footer-base-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.40);
}
.m-footer-copy { margin: 0; }
.m-footer-legal {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.m-footer-legal a { color: rgba(255,255,255,0.40); }
.m-footer-legal a:hover { color: #FFFFFF; }
.m-footer-legal span { color: rgba(255,255,255,0.20); }

/* Responsive: tablet collapses brand + 3 cols into 2x2; mobile stacks. */
@media (max-width: 980px) {
  .m-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .m-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .m-footer { padding-top: 36px; margin-top: 36px; }
  .m-footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 32px;
  }
  .m-footer-base-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

[dir="rtl"] .m-footer-lede { max-width: 38ch; }


/* Forms */
.m-form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.m-form-label {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #2A4A6A;
}
.m-form-input, input[type="email"], input[type="password"], input[type="text"], textarea {
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.30);
  border-radius: 14px;
  font: inherit; color: #0C0E1A;
  transition: border-color 160ms ease, background 160ms ease;
}
.m-form-input:focus, input:focus, textarea:focus {
  outline: 0; border-color: #1E3A5F;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(30, 58, 95,0.10);
}
.m-form-error {
  background: rgba(138,58,46,0.08);
  border: 1px solid rgba(138,58,46,0.30);
  color: #8A3A2E;
  padding: 12px 16px; border-radius: 14px;
  font-size: 13px; margin-bottom: 16px;
}


/* Reveal-on-scroll */
.m-reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; }
.m-reveal.is-in { opacity: 1; transform: translateY(0); }


/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(30, 58, 95,0.55);
  border-radius: 6px;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================================
   Editorial layer - restrained atelier flourishes.
   One per page maximum for display-xxl and running-head; one fold-rule
   per major section break. If you reach for a second, you're redesigning.
   See /docs/design-system/TOKENS.md#editorial-layer.
   ======================================================================= */

/* Display XXL - page-opening moment only */
.m-display-xxl {
  font-family: 'Cormorant Garamond', 'Playfair Display', 'Tajawal', serif;
  font-weight: 700;
  font-size: var(--m-display-xxl-size, clamp(34px, 4.5vw, 56px));
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--m-ink);
  margin: 0 0 20px;
}
.m-display-xxl em,
.m-display-xxl i { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--m-champagne-deep); }

/* Running head: small Cormorant italic at the very top of
       long-form pages. Editorial book-open convention. */
.m-running-head {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--m-ink-50);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: 0.01em;
}
.m-running-head::before,
.m-running-head::after {
  content: '*';
  display: inline-block;
  margin: 0 14px;
  color: var(--m-champagne);
  transform: translateY(-2px);
}

/* Section numeral: I / II / III above a section eyebrow */
.m-section-numeral {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: var(--m-champagne);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1;
}
.m-section-numeral::before {
  content: '*';
  font-style: italic;
  font-size: 14px;
  color: var(--m-champagne-deep);
  letter-spacing: 0;
}

/* Fold rule: hairline divider with champagne notch echoing the
       Milvus origami mark. Use between major sections. */
.m-fold-rule {
  position: relative;
  height: 1px;
  background: var(--m-fold-rule-color);
  margin: 48px 0;
  border: 0;
  overflow: visible;
}
.m-fold-rule::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: var(--m-fold-notch-size);
  height: var(--m-fold-notch-size);
  background: var(--m-fold-notch-color);
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--m-ivory);
  box-shadow: 0 0 0 1px var(--m-fold-rule-color);
}

/* Marginalia: desktop vertical channel with markers,
       reserved for architect-voice content on /me. */
.m-marginalia {
  position: relative;
  padding-left: 28px;
}
[dir="rtl"] .m-marginalia { padding-left: 0; padding-right: 28px; }
.m-marginalia::before {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px; left: 10px;
  width: 1px;
  background: var(--m-line-gold-soft);
}
[dir="rtl"] .m-marginalia::before { left: auto; right: 10px; }
.m-marginalia::after {
  content: '|';
  position: absolute;
  top: 0; left: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  line-height: 1;
  color: var(--m-champagne);
  background: var(--m-ivory);
  padding: 2px 0;
}
[dir="rtl"] .m-marginalia::after { left: auto; right: 4px; }
@media (max-width: 720px) {
  /* Collapse the marginalia on narrow viewports - the marker already
     lives in the memory card itself on mobile. */
  .m-marginalia { padding-left: 0; padding-right: 0; }
  .m-marginalia::before, .m-marginalia::after { display: none; }
}

/* Ink settle: headline settles into its resting tracking.
       Applied via `.m-ink-settle` on first-paint display titles. */
@keyframes m-ink-settle {
  0%   { letter-spacing: 0.04em; opacity: 0; transform: translateY(4px); }
  100% { letter-spacing: normal; opacity: 1; transform: translateY(0); }
}
.m-display-xl.m-ink-settle,
.m-display-xxl.m-ink-settle {
  animation: m-ink-settle 680ms var(--m-motion-settle, cubic-bezier(0.16,1,0.3,1)) both;
}
.m-display-xxl.m-ink-settle {
  /* The display-xxl keeps its negative tracking as the resting state. */
  animation-name: m-ink-settle-xxl;
}
@keyframes m-ink-settle-xxl {
  0%   { letter-spacing: 0.035em; opacity: 0; transform: translateY(6px); }
  100% { letter-spacing: var(--m-display-xxl-tracking, -0.015em); opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .m-display-xl.m-ink-settle,
  .m-display-xxl.m-ink-settle { animation: none; letter-spacing: inherit; opacity: 1; transform: none; }
}

/* =========================================================================
   Marketing editorial pages (journeys, destinations, philosophy, journal, inquire)
   ========================================================================== */
.m-body { color: #0C0E1A; }
.m-muted { color: #6B7280; }
.m-body {
  font-size: 14px;
  line-height: 1.72;
  color: #3A3F6E;
  margin: 0 0 12px;
}

.m-btn-primary {
  background: #0C0E1A;
  color: #FFFFFF;
  border: 1px solid #0C0E1A;
}
.m-btn-primary:hover {
  background: #1A1D3A;
  border-color: #1A1D3A;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(12,14,26,0.14);
}

.m-intro {
  position: relative;
  overflow: hidden;
  padding: 74px 0 48px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 68%, rgba(255,255,255,0.65) 100%);
  border-bottom: 1px solid rgba(30, 58, 95,0.12);
}
.m-intro::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(30, 58, 95,0.14) 0%, rgba(30, 58, 95,0.03) 55%, transparent 72%);
  pointer-events: none;
}
[dir="rtl"] .m-intro::before {
  right: auto;
  left: -120px;
}
.m-intro-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 26px;
  align-items: end;
}
.m-intro-copy .m-display-xl,
.m-intro-copy .m-display-xxl { margin-bottom: 14px; }
.m-intro-copy .m-lede {
  margin: 0;
  max-width: 740px;
}
.m-intro-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.m-intro-facts {
  display: grid;
  gap: 10px;
}
.m-intro-fact {
  background: rgba(255,255,255,0.64);
  border: 1px solid rgba(30, 58, 95,0.24);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(2px);
}
.m-intro-fact strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  color: #0C0E1A;
}
.m-intro-fact span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #2A4A6A;
}

.m-collection-head {
  max-width: 760px;
  margin: 0 0 30px;
}
.m-collection-head .m-eyebrow {
  margin-bottom: 10px;
  display: inline-block;
}
.m-collection-head .m-display-lg {
  margin: 0 0 10px;
}
.m-collection-head .m-muted {
  margin: 0;
  line-height: 1.66;
}

.m-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
}

/* Journeys */
.m-journeys { padding-top: 56px; }
.m-journeys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.m-journey-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.m-journey-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30, 58, 95,0.35);
  box-shadow: 0 18px 40px rgba(12,14,26,0.10);
}
.m-journey-cover {
  min-height: 180px;
  position: relative;
  overflow: hidden;
}
.m-journey-card[data-theme="desert"] .m-journey-cover {
  background: linear-gradient(130deg, #A66A2C 0%, #7A4D21 100%);
}
.m-journey-card[data-theme="heritage"] .m-journey-cover {
  background: linear-gradient(130deg, #2A4A6A 0%, #4D3520 100%);
}
.m-journey-card[data-theme="coast"] .m-journey-cover {
  background: linear-gradient(130deg, #3E6B7D 0%, #1F3E53 100%);
}
.m-journey-card[data-theme="mountain"] .m-journey-cover {
  background: linear-gradient(130deg, #3A3F6E 0%, #0C0E1A 100%);
}
.m-journey-card[data-theme="city"] .m-journey-cover {
  background: linear-gradient(130deg, #142A47 0%, #2B4730 100%);
}
.m-journey-card[data-theme="culinary"] .m-journey-cover {
  background: linear-gradient(130deg, #8A3A2E 0%, #4D2019 100%);
}
.m-journey-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,14,26,0.10) 0%, rgba(12,14,26,0.40) 100%);
  pointer-events: none;
}
.m-journey-cover-ornament {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 50%;
  z-index: 1;
}
[dir="rtl"] .m-journey-cover-ornament {
  right: auto;
  left: 14px;
}
.m-journey-days {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  color: #FFFFFF;
}
[dir="rtl"] .m-journey-days {
  left: auto;
  right: 16px;
}
.m-journey-days-num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 0.88;
}
.m-journey-days-label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.m-journey-body { padding: 20px; }
.m-journey-body .m-display-sm { margin: 0 0 10px; }
.m-journey-body .m-body { margin-bottom: 10px; }
.m-journey-moment {
  margin: 0 0 7px;
  font-size: 13px;
  color: #0C0E1A;
  font-weight: 500;
}
.m-journey-fit {
  margin: 0 0 14px;
  font-size: 12px;
  color: #2A4A6A;
}

/* Destination atlas */
.m-region {
  margin-top: 52px;
}
.m-region:first-child { margin-top: 0; }
.m-region-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}
.m-region-title { margin: 0 0 8px; }
.m-region-note { margin: 0; max-width: 700px; }
.m-destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.m-destination-card {
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  background: #FFFFFF;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.m-destination-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 58, 95,0.35);
  box-shadow: 0 16px 36px rgba(12,14,26,0.09);
}
.m-destination-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 238px;
  padding: 18px;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.m-destination-glow {
  position: absolute;
  inset: 0;
  opacity: 0.92;
  pointer-events: none;
}
.m-destination-card[data-theme="desert"] .m-destination-glow {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF3E0 100%);
}
.m-destination-card[data-theme="heritage"] .m-destination-glow {
  background: linear-gradient(160deg, #FFFFFF 0%, #F0E8D4 100%);
}
.m-destination-card[data-theme="coast"] .m-destination-glow {
  background: linear-gradient(160deg, #FFFFFF 0%, #E0F2FE 100%);
}
.m-destination-card[data-theme="culinary"] .m-destination-glow {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF1F0 100%);
}
.m-destination-card[data-theme="mountain"] .m-destination-glow {
  background: linear-gradient(160deg, #FFFFFF 0%, #F0E8D4 100%);
}
.m-destination-card[data-theme="city"] .m-destination-glow {
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF3F8 100%);
}
.m-destination-country,
.m-destination-name,
.m-destination-note,
.m-destination-tags,
.m-destination-arrow { position: relative; z-index: 1; }
.m-destination-country {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-destination-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: #0C0E1A;
}
.m-destination-note {
  font-size: 13px;
  line-height: 1.58;
  color: #3A3F6E;
  margin-top: 2px;
}
.m-destination-tags {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-destination-tags span {
  width: fit-content;
  max-width: 100%;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6B7280;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  padding: 4px 8px;
  background: #FAFAFA;
}
.m-destination-arrow {
  margin-top: 4px;
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(30, 58, 95,0.34);
  color: #2A4A6A;
}

/* Journal */
.m-journal-feature { padding-top: 42px; padding-bottom: 16px; }
.m-journal-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
}
.m-journal-feature-image {
  min-height: 270px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92);
}
.m-journal-feature-body {
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-journal-feature-body .m-display-lg {
  margin: 0;
  font-size: clamp(30px, 3vw, 38px);
}
.m-journal-feature-body .m-body { margin: 0; }

.m-journal-preview { padding-top: 24px; }
.m-journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.m-journal-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.m-journal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 58, 95,0.35);
  box-shadow: 0 16px 36px rgba(12,14,26,0.09);
}
.m-journal-cover {
  min-height: 176px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.m-journal-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,14,26,0.10) 0%, rgba(12,14,26,0.50) 100%);
}
.m-journal-cover-ornament {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 50%;
  z-index: 1;
}
[dir="rtl"] .m-journal-cover-ornament {
  left: auto;
  right: 16px;
}
.m-journal-meta,
.m-journal-headline,
.m-journal-dek,
.m-journal-card .m-btn-link {
  padding-left: 16px;
  padding-right: 16px;
}
.m-journal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-journal-headline {
  margin: 8px 0 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.015em;
  line-height: 1.16;
}
.m-journal-dek {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.64;
}

/* Philosophy */
.m-philosophy-promises { padding-top: 46px; }
.m-promises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.m-promise-card {
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 14px;
  padding: 18px;
}
.m-promise-card h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.08;
}
.m-promise-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: #3A3F6E;
}
.m-philosophy-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 28px;
  align-items: start;
}
.m-philosophy-lead .m-display-lg { margin: 6px 0 0; }
.m-philosophy-body .m-lede { margin: 0 0 14px; }
.m-philosophy-body .m-body { margin: 0 0 10px; }
.m-bulleted {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
.m-bulleted li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.62;
  color: #3A3F6E;
}
[dir="rtl"] .m-bulleted li {
  padding-left: 0;
  padding-right: 16px;
}
.m-bulleted li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1E3A5F;
}
[dir="rtl"] .m-bulleted li::before {
  left: auto;
  right: 2px;
}

.m-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.m-pillar {
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 14px;
  padding: 18px;
}
.m-pillar-num {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-pillar-title {
  margin: 8px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.07;
}
.m-pillar-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: #3A3F6E;
}

.m-composition { padding-top: 38px; }
.m-composition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.m-composition-step {
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 14px;
  padding: 16px;
  background: #FFFFFF;
}
.m-composition-step span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-composition-step h3 {
  margin: 8px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.m-composition-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #3A3F6E;
}

.m-shell-narrow { max-width: 840px; margin: 0 auto; }
.m-quote {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1A1F5A 0%, #0C0E1A 100%);
  color: #FFFFFF;
  padding: 80px 0;
  margin-top: 30px;
}
.m-quote-grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(30, 58, 95,0.30) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(30, 58, 95,0.16) 0%, transparent 46%);
}
.m-quote-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.m-quote-mark {
  display: block;
  font-size: 84px;
  line-height: 0.82;
  color: #E8C574;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 10px;
}
.m-quote-text {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.42;
  color: #FFFFFF;
}
.m-italic { font-style: italic; }
.m-quote-attrib {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.m-quote-rule {
  width: 36px;
  height: 1px;
  background: rgba(155,170,245,0.55);
}
.m-quote-name {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.90);
}
.m-quote-role {
  margin: 1px 0 0;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #E8C574;
}

/* Inquire */
.m-inquire-flow { padding-top: 34px; padding-bottom: 10px; }
.m-inquire-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.m-inquire-flow-step {
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 14px;
  padding: 16px;
}
.m-inquire-flow-step span {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-inquire-flow-step h3 {
  margin: 8px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
.m-inquire-flow-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: #3A3F6E;
}

.m-inquire-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 24px;
  align-items: start;
}
.m-inquire-aside {
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 14px;
  padding: 20px;
  position: sticky;
  top: 96px;
}
.m-inquire-aside .m-display-sm { margin: 0 0 8px; }
.m-inquire-aside .m-body { margin-bottom: 14px; }
.m-inquire-facts {
  margin: 0;
  display: grid;
  gap: 10px;
}
.m-inquire-facts dt {
  margin: 0;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-inquire-facts dd {
  margin: 3px 0 0;
  font-size: 14px;
  color: #0C0E1A;
}
.m-inquire-contact {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-form {
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.22);
  border-radius: 16px;
  padding: 22px;
}
.m-form-alert {
  border: 1px solid rgba(20, 42, 71,0.34);
  background: rgba(20, 42, 71,0.11);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.m-form-alert-title {
  margin: 0 0 3px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 22px;
}
.m-form-alert-body {
  margin: 0;
  font-size: 13px;
  color: #3A3F6E;
}
.m-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.m-field { margin-bottom: 14px; }
.m-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.m-vision-count {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2A4A6A;
}
.m-field-input,
.m-field-select,
.m-field-textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(30, 58, 95,0.30);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  color: #0C0E1A;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.m-field-input:focus,
.m-field-select:focus,
.m-field-textarea:focus {
  outline: 0;
  border-color: #1E3A5F;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(30, 58, 95,0.10);
}
.m-field-textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.58;
}
.m-vision-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}
.m-vision-prompt {
  border: 1px solid rgba(30, 58, 95,0.30);
  background: #FFFFFF;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  color: #3A3F6E;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.m-vision-prompt:hover {
  border-color: #1E3A5F;
  color: #0C0E1A;
  background: #FFFFFF;
}
.m-form-submit {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.m-form-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

/* ===== Shared page-hero trust row ===== */
/* Used on journeys, philosophy, destinations, journal hero strips */
.page-hero-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(42,74,106,0.10);
  font-size: 13px;
  color: rgba(42,74,106,0.65);
}
.pht-item strong {
  color: #1A3550;
  font-weight: 600;
}
.pht-sep {
  color: rgba(42,74,106,0.22);
  font-size: 11px;
}

/* Shared CTA */
.m-cta {
  padding-top: 62px;
  padding-bottom: 72px;
}
.m-cta-inner {
  text-align: center;
  border: 1px solid rgba(30, 58, 95,0.18);
  border-radius: 20px;
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF3F8 100%);
  padding: 32px;
}
.m-cta-title { margin: 0 0 10px; }
.m-cta-lede {
  margin: 0 auto;
  max-width: 760px;
}
.m-cta-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.m-cta-trust {
  margin: 14px auto 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(107,114,128,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .m-intro-inner,
  .m-philosophy-grid,
  .m-inquire-grid {
    grid-template-columns: 1fr;
  }
  .m-intro-facts {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .m-intro-fact {
    min-height: 90px;
  }
  .m-section-head,
  .m-region-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .m-journal-feature-card {
    grid-template-columns: 1fr;
  }
  .m-inquire-aside {
    position: static;
  }
}

@media (max-width: 720px) {
  .m-intro {
    padding-top: 62px;
    padding-bottom: 34px;
  }
  .m-intro-actions {
    width: 100%;
  }
  .m-intro-actions .m-btn {
    width: 100%;
    justify-content: center;
  }
  .m-form-row {
    grid-template-columns: 1fr;
  }
  .m-cta-inner {
    padding: 24px 18px;
  }
}


/* =========================================================================
   Marketing Hero System  (mh-*)
   -----------------------------------------------------------------------
   Unified full-bleed image hero used by Journal, Philosophy, Destinations,
   Journeys, and Design-your-trip. Home is excluded — its hero is complete.

   Palette derived from /images/hero.jpg (Santorini editorial):
     Navy  #1a3850  ·  Azure  #3d7ca8  ·  Sand  #e5d9c8
     Cream #f7f2eb  ·  Gold   #1E3A5F  ·  Sage  #7a9e82
   ======================================================================= */

/* ================================================================
   MH-HERO — canonical hero banner system
   Every marketing page uses exactly these dimensions.
   Changing this block affects ALL pages simultaneously.
   ================================================================ */

.mh-hero {
  position: relative;
  height: 360px;           /* FIXED — same on every page, no exceptions */
  display: flex;
  align-items: flex-end;
  background: url('/images/hero.jpg') center 32% / cover no-repeat;
  overflow: hidden;
}

/* Per-page focal points (image only — NO height overrides) */
.mh-hero--journal      { background-image: url('/assets/img/field-notes-hero-new.jpg');  background-position: center 50%; }

/* Journal hero — strong left overlay so white text reads on the bright stone photo */
.mh-hero--journal .mh-overlay {
  background:
    linear-gradient(105deg, rgba(8,18,36,0.72) 0%, rgba(8,18,36,0.42) 45%, rgba(8,18,36,0.12) 100%),
    linear-gradient(to top, rgba(8,18,36,0.30) 0%, transparent 50%);
}
.mh-hero--journal .mh-eyebrow {
  color: rgba(248,228,175,0.85);
  text-shadow: 0 1px 8px rgba(8,18,36,0.5);
}
.mh-hero--journal .mh-rule {
  background: rgba(201,163,84,0.55);
}
.mh-hero--journal .mh-headline {
  text-shadow: 0 2px 18px rgba(8,18,36,0.65);
}
.mh-hero--journal .mh-sub {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 12px rgba(8,18,36,0.55);
}
.mh-hero--philosophy   { background-image: url('/assets/img/how-we-work-hero-new.jpg'); background-position: center 50%; }

/* Philosophy hero — left-side dark gradient so text reads on the bright green landscape */
.mh-hero--philosophy .mh-overlay {
  background:
    linear-gradient(105deg, rgba(8,18,36,0.70) 0%, rgba(8,18,36,0.40) 48%, rgba(8,18,36,0.10) 100%),
    linear-gradient(to top, rgba(8,18,36,0.28) 0%, transparent 50%);
}
.mh-hero--philosophy .mh-eyebrow {
  color: rgba(248,228,175,0.85);
  text-shadow: 0 1px 8px rgba(8,18,36,0.5);
}
.mh-hero--philosophy .mh-rule {
  background: rgba(201,163,84,0.55);
}
.mh-hero--philosophy .mh-headline {
  text-shadow: 0 2px 18px rgba(8,18,36,0.65);
}
.mh-hero--philosophy .mh-sub {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 12px rgba(8,18,36,0.55);
}

.mh-hero--destinations { background-image: url('/assets/img/ai_dest.jpg');       background-position: center 50%; }

/* Destinations hero — left gradient over bright snowy landscape */
.mh-hero--destinations .mh-overlay {
  background:
    linear-gradient(105deg, rgba(8,18,36,0.72) 0%, rgba(8,18,36,0.42) 48%, rgba(8,18,36,0.10) 100%),
    linear-gradient(to top, rgba(8,18,36,0.30) 0%, transparent 50%);
}
.mh-hero--destinations .mh-eyebrow {
  color: rgba(248,228,175,0.85);
  text-shadow: 0 1px 8px rgba(8,18,36,0.5);
}
.mh-hero--destinations .mh-rule {
  background: rgba(201,163,84,0.55);
}
.mh-hero--destinations .mh-headline {
  text-shadow: 0 2px 18px rgba(8,18,36,0.65);
}
.mh-hero--destinations .mh-sub {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 12px rgba(8,18,36,0.55);
}

.mh-hero--journeys     { background-image: url('/assets/img/ai_journeys.jpg');   background-position: center 50%; }

/* ── Video Hero ──
   Video heroes keep the underlying background-image as a fallback so the
   hero is never blank: it shows during download, while autoplay is blocked
   (some browsers / power-saving modes), or if the file fails for any
   reason. The video sits on top once it starts and covers the image. */
.mh-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  z-index: 0;
  pointer-events: none;
  background-color: transparent;
  /* Fade in when playback starts so we don't flash from poster→video */
  opacity: 0;
  transition: opacity 320ms ease-out;
}
.mh-video-bg.is-playing { opacity: 1; }
.mh-hero--video .mh-overlay,
.mh-hero--video .mh-vignette,
.mh-hero--video .m-shell { position: relative; z-index: 1; }

/* Video heroes get a stronger, full-frame overlay because video frames
   can be any brightness — bright skies/horizons would otherwise wash out
   the white headline. The gradient pulls darkness into the upper-left
   (where eyebrow + headline live) and at the bottom (under the sub). */
.mh-hero--video .mh-overlay {
  background:
    linear-gradient(135deg, rgba(8, 16, 30, 0.55) 0%, rgba(8, 16, 30, 0.18) 45%, rgba(8, 16, 30, 0.10) 100%),
    linear-gradient(to top, rgba(8, 16, 30, 0.42) 0%, rgba(8, 16, 30, 0.08) 55%, transparent 100%);
}
[dir="rtl"] .mh-hero--video .mh-overlay {
  background:
    linear-gradient(225deg, rgba(8, 16, 30, 0.55) 0%, rgba(8, 16, 30, 0.18) 45%, rgba(8, 16, 30, 0.10) 100%),
    linear-gradient(to top, rgba(8, 16, 30, 0.42) 0%, rgba(8, 16, 30, 0.08) 55%, transparent 100%);
}
.mh-hero--video .mh-vignette { display: none; }
.mh-hero--design       { background-image: url('/assets/img/design-trip-hero.jpg'); background-position: center 50%; }

/* ── Full-bleed hero pages: pull the hero up so the transparent sticky
      header floats over the image instead of sitting above it. The
      --m-header-h variable is set live by the layout JS. ── */
body.home-page .m-main,
body.journal-page .m-main,
body.philosophy-page .m-main,
body.journeys-page .m-main,
body.destinations-page .m-main,
body.design-page .m-main {
    margin-top: calc(-1 * var(--m-header-h, 88px));
}

/* Welcome strip (logged-in clients) sits between header and main —
   keep it transparent over the hero so the photo continues unbroken.
   When the user scrolls past the hero, .is-scrolled re-establishes the
   cream-blur header and the strip's own colors take over below it. */
body.journal-page .m-welcome,
body.philosophy-page .m-welcome,
body.journeys-page .m-welcome,
body.destinations-page .m-welcome,
body.design-page .m-welcome {
    position: absolute;
    left: 0; right: 0;
    top: var(--m-header-h, 88px);
    z-index: 6;
    background: transparent !important;
    border-bottom: 0 !important;
}
/* Pull text/CTA inside the strip up so it reads over the photo. */
body.journal-page .m-welcome .m-welcome-headline,
body.philosophy-page .m-welcome .m-welcome-headline,
body.journeys-page .m-welcome .m-welcome-headline,
body.destinations-page .m-welcome .m-welcome-headline,
body.design-page .m-welcome .m-welcome-headline { color: #FFFFFF; }
body.journal-page .m-welcome .m-welcome-body,
body.philosophy-page .m-welcome .m-welcome-body,
body.journeys-page .m-welcome .m-welcome-body,
body.destinations-page .m-welcome .m-welcome-body,
body.design-page .m-welcome .m-welcome-body { color: rgba(255, 255, 255, 0.85); }
body.journal-page .m-welcome .m-welcome-cta,
body.philosophy-page .m-welcome .m-welcome-cta,
body.journeys-page .m-welcome .m-welcome-cta,
body.destinations-page .m-welcome .m-welcome-cta,
body.design-page .m-welcome .m-welcome-cta { color: #FFFFFF; }
body.journal-page .mh-hero,
body.philosophy-page .mh-hero,
body.journeys-page .mh-hero,
body.destinations-page .mh-hero,
body.design-page .mh-hero {
    height: calc(360px + var(--m-header-h, 88px));
    padding-top: var(--m-header-h, 88px);
    box-sizing: border-box;
}
/* Header chrome on full-bleed hero pages: same navy ink as the avatar
   gradient (#1A3550 / #1E3A5F) so it reads as part of the brand mark
   rather than an inverted overlay. No gradient over the image — the
   bar stays fully transparent and the photo shows through whole. */
body.home-page .m-header:not(.is-scrolled) .m-brand-name,
body.journal-page .m-header:not(.is-scrolled) .m-brand-name,
body.philosophy-page .m-header:not(.is-scrolled) .m-brand-name,
body.journeys-page .m-header:not(.is-scrolled) .m-brand-name,
body.destinations-page .m-header:not(.is-scrolled) .m-brand-name,
body.design-page .m-header:not(.is-scrolled) .m-brand-name { color: #FFFFFF; }
body.home-page .m-header:not(.is-scrolled) .m-brand-tag,
body.journal-page .m-header:not(.is-scrolled) .m-brand-tag,
body.philosophy-page .m-header:not(.is-scrolled) .m-brand-tag,
body.journeys-page .m-header:not(.is-scrolled) .m-brand-tag,
body.destinations-page .m-header:not(.is-scrolled) .m-brand-tag,
body.design-page .m-header:not(.is-scrolled) .m-brand-tag { color: rgba(255, 255, 255, 0.85); }
body.home-page .m-header:not(.is-scrolled) .m-nav-link,
body.journal-page .m-header:not(.is-scrolled) .m-nav-link,
body.philosophy-page .m-header:not(.is-scrolled) .m-nav-link,
body.journeys-page .m-header:not(.is-scrolled) .m-nav-link,
body.destinations-page .m-header:not(.is-scrolled) .m-nav-link,
body.design-page .m-header:not(.is-scrolled) .m-nav-link { color: #FFFFFF; }
body.home-page .m-header:not(.is-scrolled) .m-nav-link:hover,
body.home-page .m-header:not(.is-scrolled) .m-nav-link.is-active,
body.journal-page .m-header:not(.is-scrolled) .m-nav-link:hover,
body.journal-page .m-header:not(.is-scrolled) .m-nav-link.is-active,
body.philosophy-page .m-header:not(.is-scrolled) .m-nav-link:hover,
body.philosophy-page .m-header:not(.is-scrolled) .m-nav-link.is-active,
body.journeys-page .m-header:not(.is-scrolled) .m-nav-link:hover,
body.journeys-page .m-header:not(.is-scrolled) .m-nav-link.is-active,
body.destinations-page .m-header:not(.is-scrolled) .m-nav-link:hover,
body.destinations-page .m-header:not(.is-scrolled) .m-nav-link.is-active,
body.design-page .m-header:not(.is-scrolled) .m-nav-link:hover,
body.design-page .m-header:not(.is-scrolled) .m-nav-link.is-active { color: #FFFFFF !important; }
body.home-page .m-header:not(.is-scrolled) .m-nav-locale,
body.journal-page .m-header:not(.is-scrolled) .m-nav-locale,
body.philosophy-page .m-header:not(.is-scrolled) .m-nav-locale,
body.journeys-page .m-header:not(.is-scrolled) .m-nav-locale,
body.destinations-page .m-header:not(.is-scrolled) .m-nav-locale,
body.design-page .m-header:not(.is-scrolled) .m-nav-locale {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.45);
}
body.home-page .m-header:not(.is-scrolled) .m-nav-toggle span,
body.journal-page .m-header:not(.is-scrolled) .m-nav-toggle span,
body.philosophy-page .m-header:not(.is-scrolled) .m-nav-toggle span,
body.journeys-page .m-header:not(.is-scrolled) .m-nav-toggle span,
body.destinations-page .m-header:not(.is-scrolled) .m-nav-toggle span,
body.design-page .m-header:not(.is-scrolled) .m-nav-toggle span { background: #FFFFFF !important; }
body.home-page .m-header:not(.is-scrolled) .m-nav-signin,
body.journal-page .m-header:not(.is-scrolled) .m-nav-signin,
body.philosophy-page .m-header:not(.is-scrolled) .m-nav-signin,
body.journeys-page .m-header:not(.is-scrolled) .m-nav-signin,
body.destinations-page .m-header:not(.is-scrolled) .m-nav-signin,
body.design-page .m-header:not(.is-scrolled) .m-nav-signin { color: #FFFFFF; }

/* Home page: subtle top gradient so white nav links stay readable over bright skies */
body.home-page .m-header:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 100%);
}

/* ── Overlay ── */
.mh-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Bottom vignette ──
   Very gentle fade only at the very bottom of the hero. Tuned so the
   image's own colors stay intact across the upper 70% of the frame —
   the soft tint only kicks in right where the text rests, and even
   there it's light enough that snow stays snow and sky stays sky.
   Combined with the per-line text-shadow on .mh-headline/.mh-sub the
   copy reads cleanly on any photo without dimming it. */
.mh-vignette {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 22, 38, 0.28) 0%,
    rgba(10, 22, 38, 0.08) 55%,
    transparent 100%
  );
}

/* ── Hero text body — text sits directly on the photo, no glass card ── */
.mh-body {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-bottom: 24px;
  margin-left: 0;
  margin-right: auto;
  padding: 0;
  text-align: start;
}

[dir="rtl"] .mh-body {
  margin-left: auto;
  margin-right: 0;
}

/* Hero text hugs the left edge of the viewport (not the centered shell) */
.mh-hero .m-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline-start: max(24px, 2vw);
  padding-inline-end: max(24px, 2vw);
}

/* Gold eyebrow */
.mh-eyebrow {
  display: block;
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: #1E3A5F;
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
}

/* Thin gold rule below eyebrow */
.mh-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(201, 163, 84, 0.6);
  margin-bottom: 16px;
}

/* Norelli / Cormorant italic headline — capped so it never blows out the card */
.mh-headline {
  font-family: 'Norelli', 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin: 0 0 12px;
  text-align: start;
  text-shadow: 0 2px 14px rgba(10, 22, 38, 0.55);
}
.mh-headline strong {
  font-style: normal;
  font-weight: 600;
}
.mh-headline em {
  font-style: normal;
  color: #ffffff;
  font-weight: inherit;
}
[dir="rtl"] .mh-headline {
  font-family: 'Tajawal', 'Noto Naskh Arabic', sans-serif;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.28;
}

/* Sub-text */
.mh-sub {
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.58;
  margin: 0;
  text-align: start;
  text-shadow: 0 1px 10px rgba(10, 22, 38, 0.5);
}

/* Pill strip — small frosted trust/metadata chips */
.mh-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.mh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(247, 242, 235, 0.20);
  background: rgba(26, 56, 80, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: rgba(247, 242, 235, 0.82);
  white-space: nowrap;
}
.mh-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1E3A5F;
  flex-shrink: 0;
}

/* ── Responsive — unified across all pages ── */
@media (max-width: 900px) {
  .mh-hero { height: 400px; }
  .mh-body { max-width: 480px; }
}
@media (max-width: 680px) {
  .mh-hero { height: 360px; }
  .mh-body {
    padding: 32px 54px 32px max(24px, 4vw);
    max-width: 100%;
    max-height: 240px;
    /* Scaled-down wing-tip polygon — proportions preserved */
    clip-path: polygon(
      0 0,
      calc(100% - 44px) 0,
      calc(100% - 14px) 18%,
      100%               35%,
      calc(100% - 30px) 100%,
      0 100%
    );
  }
  [dir="rtl"] .mh-body {
    clip-path: polygon(
      44px 0, 100% 0, 100% 100%, 30px 100%, 0 35%, 14px 18%
    );
    padding: 32px max(24px, 4vw) 32px 54px;
  }
  .mh-headline { font-size: 24px; }
  .mh-sub { font-size: 13px; }
  .mh-pills { gap: 6px; }
  .mh-pill { font-size: 10px; padding: 4px 10px; }
}


/* Shared CTA button — used by every mh-hero across the marketing pages. */
.jh-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #3D6A93 0%, #1E3A5F 100%); color: #FFFFFF;
  font-family: 'Inter', sans-serif; font-size: 13px;
  font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(30, 58, 95,0.36);
  transition: background 240ms cubic-bezier(0.16,1,0.3,1),
              transform 240ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 240ms cubic-bezier(0.16,1,0.3,1);
}
.jh-cta:hover {
  background: linear-gradient(135deg, #1E3A5F 0%, #142A47 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(194,106,102,0.46);
}


/* =========================================================================
   2026 Vitality Layer
   -----------------------------------------------------------------------
   Adds the coral pink accent system, lifted hover states, scroll-reveal
   motion, and white-canvas rhythm. Appended at the bottom so it overrides
   any earlier rules without rewriting the legacy cascade.
   ===================================================================== */

/* Coral CTA family ------------------------------------------------------ */
.m-btn-primary,
.m-btn-coral {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3D6A93 0%, #1E3A5F 100%);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 15px;
  border: 0; cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(30, 58, 95, 0.32);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms ease;
}
.m-btn-primary:hover,
.m-btn-coral:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(194, 106, 102, 0.42);
  background: linear-gradient(135deg, #1E3A5F 0%, #142A47 100%);
}
.m-btn-primary:active,
.m-btn-coral:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(194, 106, 102, 0.28);
}

/* Outline button (works on white) -------------------------------------- */
.m-btn-outline-coral {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #142A47;
  border: 1.5px solid #1E3A5F;
  font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-btn-outline-coral:hover {
  background: #EEF3F8;
  color: #142A47;
  border-color: #142A47;
  transform: translateY(-1px);
}

/* Section utilities — alternating rhythm on a white canvas ------------- */
.m-section { padding: 96px 0; background: #FFFFFF; }
.m-section--tight { padding: 64px 0; }
.m-section--coral-glow {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF3F8 50%, #FFFFFF 100%);
}
.m-section--soft {
  background: #FFFFFF;
}

/* Eyebrow refresh — coral, more confident ------------------------------ */
.m-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: #1E3A5F;
  margin-bottom: 18px;
}
.m-eyebrow::before {
  content: ""; display: inline-block;
  width: 24px; height: 1.5px; background: #1E3A5F;
  vertical-align: middle; margin-inline-end: 12px;
  transform: translateY(-3px);
}

/* Card lift — works on .m-card, .me-card, anything that wants warmth --- */
.m-card,
.me-card,
.m-destination-card,
.m-journey-card,
.m-trip-card {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms ease;
}
.m-card:hover,
.me-card:hover,
.m-destination-card:hover,
.m-journey-card:hover,
.m-trip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(12, 14, 26, 0.16),
              0 4px 12px rgba(30, 58, 95, 0.10);
}

/* Link underline animation --------------------------------------------- */
a.m-link,
.m-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 280ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease;
  color: #142A47;
  font-weight: 500;
}
a.m-link:hover,
.m-link:hover { background-size: 100% 1.5px; color: #1E3A5F; }

/* Active nav indicator: replace under-line with coral dot -------------- */
.m-nav-link.is-active {
  position: relative;
  color: #0C0E1A !important;
  border-bottom: 0 !important;
}
.m-nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C9484E;
  box-shadow: 0 0 0 3px rgba(201, 72, 78, 0.18);
}

/* Image polish: warmer, slightly more saturated ------------------------ */
.m-hero img,
.m-card img,
.m-destination-card img,
.m-journey-card img {
  filter: saturate(1.08) contrast(1.02);
  transition: filter 320ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-card:hover img,
.m-destination-card:hover img,
.m-journey-card:hover img {
  filter: saturate(1.18) contrast(1.04);
  transform: scale(1.03);
}

/* Reveal-on-scroll — slightly more generous for "alive" feel ----------- */
.m-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.m-reveal[data-delay="1"].is-in { transition-delay: 80ms; }
.m-reveal[data-delay="2"].is-in { transition-delay: 160ms; }
.m-reveal[data-delay="3"].is-in { transition-delay: 240ms; }
.m-reveal[data-delay="4"].is-in { transition-delay: 320ms; }

/* Focus ring — coral, accessible --------------------------------------- */
:focus-visible {
  outline: 2px solid #1E3A5F;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hero italic word — make it sing -------------------------------------- */
.m-hero-title em,
.m-display em,
h1 em,
h2 em {
  color: #1E3A5F;
  font-style: italic;
  position: relative;
  display: inline-block;
}

/* Accessibility: respect reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .m-card,
  .me-card,
  .m-destination-card,
  .m-journey-card,
  .m-trip-card,
  .m-btn-primary,
  .m-btn-outline-coral,
  .m-hero img,
  .m-card img,
  .m-destination-card img,
  .m-journey-card img,
  .m-reveal {
    transition: none !important;
    transform: none !important;
  }
  .m-reveal { opacity: 1; }
}