/* ===================================================================
   travee+ front door — "Meridian".

   White paper and one cyan (#25A8CB), the brand's two colours and no
   third. Depth comes from hairlines, cyan-tinted washes and line-art
   SVG rather than from a dark ground — with one solid cyan band at the
   middle of the page, so the colour takes the floor once instead of
   only ever trimming an edge.

   Instrument Serif for display, Outfit for text; both are already
   loaded by partials/site.php, so this sheet adds no font request.

   Scoped to .mn (the page's own <main>), plus two masthead rules under
   body.page-alliance, so landing.css and the ten interior alliance
   pages are untouched.
   =================================================================== */

.mn {
  --cyan:    #25A8CB;
  --cyan-d:  #17819F;   /* the text-safe cyan on white */
  --cyan-w:  #F2FAFD;   /* the tinted band */
  --cyan-w2: #E4F4F9;   /* one step deeper, for hairlines on tint */
  --ink:     #0B1015;
  --ink-2:   #4C5860;
  --ink-3:   #8A959C;
  --paper:   #FFFFFF;
  --line:    #E3EAEE;
  --line-2:  #D2E3EA;

  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --text: 'Outfit', ui-sans-serif, system-ui, sans-serif;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
}

/* ------------------------------------------------------------- masthead --
   The hero's cyan wash runs up behind the bar, so the bar is transparent until
   landing.js marks it .stuck (>12px). Both are white, so nothing else changes:
   this only stops a hard white edge cutting across the wash. */
body.page-alliance .mn-hero { margin-top: -70px; }
body.page-alliance .tv-nav:not(.stuck) { background: transparent; backdrop-filter: none; }

/* ------------------------------------------------------------ primitives -- */
.mn .mn-h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.9rem, 7.2vw, 6rem); line-height: .96;
  letter-spacing: -.02em; margin: 0; color: var(--ink);
}
.mn .mn-h1.sm { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.mn .mn-h1 em, .mn .mn-h2 em { font-style: italic; color: var(--cyan); }
.mn .mn-h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 3.9vw, 3.3rem); line-height: 1.04;
  letter-spacing: -.015em; margin: 0; color: var(--ink);
}

.mn .mn-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan-d);
}
.mn .mn-eyebrow i { display: block; width: 26px; height: 1px; background: currentColor; opacity: .8; }
.mn .mn-eyebrow.on-cyan { color: rgba(255,255,255,.9); }

.mn .mn-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: var(--ink-2); margin: 0; max-width: 62ch;
}
.mn .mn-sub { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }

.mn .mn-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--text); font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .22s, border-color .22s, color .22s;
}
.mn .mn-btn i { font-size: .78em; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.mn .mn-btn:hover { transform: translateY(-2px); }
.mn .mn-btn:hover i { transform: translateX(3px); }
.mn .mn-btn-solid {
  background: var(--cyan); color: #fff;
  box-shadow: 0 12px 28px -12px rgba(37,168,203,.75);
}
.mn .mn-btn-solid:hover { background: var(--cyan-d); box-shadow: 0 18px 38px -14px rgba(37,168,203,.85); }
.mn .mn-btn-line { color: var(--ink); border-color: var(--line-2); background: #fff; }
.mn .mn-btn-line:hover { border-color: var(--cyan); color: var(--cyan-d); }
.mn .mn-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.mn .mn-sec { position: relative; padding: clamp(72px, 9vw, 130px) 0; }
.mn .mn-head { max-width: 640px; margin: 0 0 clamp(34px, 4vw, 56px); }
.mn .mn-head.wide { max-width: 760px; }
.mn .mn-head .mn-h2 { margin-top: 14px; }
.mn .mn-head .mn-sub { margin-top: 16px; }

/* Scroll reveal — landing.js adds .in. The `.js` guard is what keeps the page
   readable when that script never arrives. */
.js .mn .tv-up { opacity: 0; transform: translateY(18px); }
.js .mn .tv-up.in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms),
              transform .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) { .js .mn .tv-up { opacity: 1; transform: none; } }

/* ================================================================= hero == */
.mn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(52% 60% at 78% 22%, rgba(37,168,203,.10), transparent 70%),
    linear-gradient(180deg, #FBFDFE 0%, var(--paper) 60%);
  padding: clamp(150px, 17vw, 220px) 0 0;
}
.mn-atlas {
  position: absolute; inset: -8% -2% auto; height: 118%; z-index: 0;
  pointer-events: none;
  /* Fade the artwork out under the text column — line-art behind a paragraph
     costs more legibility than it adds atmosphere. */
  mask-image: linear-gradient(100deg, transparent 22%, #000 52%);
  -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 52%);
}
.mn-atlas svg { width: 100%; height: 100%; display: block; }
.mn-atlas .mn-grid { stroke-width: 1; opacity: .22; }
.mn-atlas .mn-lanes path {
  stroke-dasharray: 6 10; opacity: .55;
  animation: mn-travel 9s linear infinite;
}
.mn-atlas .mn-lanes path:nth-child(2) { animation-duration: 12s; animation-delay: -3s; }
.mn-atlas .mn-lanes path:nth-child(3) { animation-duration: 15s; animation-delay: -6s; }
.mn-atlas .mn-lanes path:nth-child(4) { animation-duration: 11s; animation-delay: -1.5s; }
@keyframes mn-travel { to { stroke-dashoffset: -320; } }
.mn-atlas .mn-ports circle { animation: mn-pulse 3.6s ease-in-out infinite; }
.mn-atlas .mn-ports circle:nth-child(2) { animation-delay: .7s; }
.mn-atlas .mn-ports circle:nth-child(3) { animation-delay: 1.4s; }
.mn-atlas .mn-ports circle:nth-child(4) { animation-delay: 2.1s; }
.mn-atlas .mn-ports circle:nth-child(5) { animation-delay: 2.8s; }
@keyframes mn-pulse { 0%,100% { opacity: .3 } 50% { opacity: .95 } }
@media (prefers-reduced-motion: reduce) {
  .mn-atlas .mn-lanes path, .mn-atlas .mn-ports circle { animation: none; }
}

.mn-hero-in { position: relative; z-index: 2; padding-bottom: clamp(76px, 9vw, 120px); }
.mn-hero-in > * { animation: mn-rise .9s cubic-bezier(.2,.8,.2,1) backwards; }
.mn-hero-in > :nth-child(1) { animation-delay: .05s; }
.mn-hero-in > :nth-child(2) { animation-delay: .14s; }
.mn-hero-in > :nth-child(3) { animation-delay: .26s; }
.mn-hero-in > :nth-child(4) { animation-delay: .38s; }
@keyframes mn-rise { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { .mn-hero-in > * { animation: none; } }

.mn-hero .mn-h1 { margin: 22px 0 0; max-width: 15ch; }
.mn-hero .mn-lede { margin-top: 26px; }
.mn-hero .mn-cta-row { margin-top: 38px; }

/* ---- the founding-markets board --------------------------------- */
.mn-board {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
}
.mn-board ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.mn-board li + li { border-left: 1px solid var(--line); }
.mn-board a { display: block; padding: 22px 20px; text-decoration: none; color: inherit; transition: background .25s; }
.mn-board a:hover { background: var(--cyan-w); }
.mn-flag { font-size: 1.15rem; line-height: 1; }
.mn-board b { display: block; margin-top: 10px; font-size: .96rem; font-weight: 600; letter-spacing: -.005em; }
.mn-board-sub {
  display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-board li.open .mn-board-sub { color: var(--cyan-d); font-weight: 600; }

/* ====================================================== founding markets == */
.mn-markets { background: var(--cyan-w); border-top: 1px solid var(--line); }
.mn-market-grid {
  display: grid; gap: 1px; background: var(--cyan-w2);
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--cyan-w2); border-radius: 16px; overflow: hidden;
}
.mn-market {
  position: relative; display: block; padding: 30px 24px 26px;
  background: var(--paper); text-decoration: none; color: inherit;
  transition: box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
/* The cyan edge is drawn, not a border, so it can wipe in from the left
   without the card resizing by a pixel on hover. */
.mn-market::before {
  content: ''; position: absolute; left: 0; right: 100%; top: 0; height: 3px;
  background: var(--cyan); transition: right .4s cubic-bezier(.2,.8,.2,1);
}
.mn-market:hover { box-shadow: 0 18px 40px -22px rgba(23,129,159,.55); z-index: 1; }
.mn-market:hover::before { right: 0; }
.mn-market-no { font-family: var(--display); font-size: .95rem; color: var(--cyan); letter-spacing: .06em; }
.mn-market-flag { display: block; font-size: 1.6rem; line-height: 1; margin: 14px 0 12px; }
.mn-market h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.42rem; line-height: 1.15;
  margin: 0; letter-spacing: -.01em;
}
.mn-market-rep { margin: 8px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.mn-market-city { margin: 14px 0 0; font-size: .78rem; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.mn-market-city i { font-size: .72em; color: var(--cyan); }
.mn-market-go {
  position: absolute; right: 22px; bottom: 22px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--cyan); font-size: .7rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mn-market:hover .mn-market-go { opacity: 1; transform: none; }
.mn-market.open { background: linear-gradient(180deg, var(--cyan-w), var(--paper)); }
.mn-market.open .mn-market-rep { color: var(--cyan-d); font-weight: 600; }

/* ========================================================== what we do == */
.mn-do { background: var(--paper); }
.mn-do-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.mn-do-cell {
  position: relative; padding: 34px 32px 32px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .3s;
}
.mn-do-cell:hover { background: var(--cyan-w); }
.mn-do-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--cyan-w); color: var(--cyan-d); font-size: 1.05rem;
  transition: background .3s, color .3s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.mn-do-cell:hover .mn-do-icon { background: var(--cyan); color: #fff; transform: translateY(-3px); }
.mn-do-no {
  position: absolute; top: 32px; right: 30px;
  font-family: var(--display); font-size: 1.05rem; color: var(--line-2); transition: color .3s;
}
.mn-do-cell:hover .mn-do-no { color: var(--cyan); }
.mn-do-cell h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15;
  margin: 18px 0 0; letter-spacing: -.01em;
}
.mn-do-cell p { margin: 10px 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }

/* ========================================================= why travee+ == */
/* The one solid-cyan band. White plus a single colour needs a moment where the
   colour actually takes the floor, or it reads as trim on a white page. */
.mn-why { position: relative; isolation: isolate; overflow: hidden; background: var(--cyan); color: #fff; }
.mn-why-art { position: absolute; inset: 0; z-index: -1; opacity: .16; }
.mn-why-art svg { width: 100%; height: 100%; display: block; }
.mn-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(34px, 5vw, 76px); margin-top: 44px; }
.mn-why-item { padding-top: 30px; border-top: 1px solid rgba(255,255,255,.34); }
.mn-why-no { font-family: var(--display); font-size: 1rem; color: rgba(255,255,255,.75); letter-spacing: .08em; }
.mn-why-item h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.08;
  margin: 16px 0 0; letter-spacing: -.015em; color: #fff;
}
.mn-why-item p { margin: 18px 0 0; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.92); }

/* ==================================================== how business moves == */
.mn-flow { background: var(--paper); }
.mn-flow-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.mn-flow-line li { position: relative; padding: 0 14px; }
/* The rail between nodes. .end carries none, so the sequence stops rather than
   trailing off into the gutter. */
.mn-flow-line li:not(.end)::after {
  content: ''; position: absolute; left: calc(50% + 26px); right: calc(-50% + 26px); top: 23px;
  height: 1px; background: linear-gradient(90deg, var(--cyan), var(--line-2));
}
.mn-node {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-2);
  font-family: var(--display); font-size: 1rem; color: var(--cyan-d);
  position: relative; z-index: 1;
  transition: border-color .3s, box-shadow .3s, background .3s, color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mn-flow-line li:hover .mn-node {
  background: var(--cyan); border-color: var(--cyan); color: #fff;
  transform: translateY(-3px); box-shadow: 0 12px 26px -12px rgba(37,168,203,.9);
}
.mn-step { display: block; margin-top: 16px; padding-right: 10px; font-size: .92rem; font-weight: 500; line-height: 1.4; }

/* ============================================================== closing == */
.mn-close {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--paper) 0%, var(--cyan-w) 100%);
  border-top: 1px solid var(--line);
  padding: clamp(86px, 11vw, 150px) 0;
}
.mn-close-art { position: absolute; inset: auto 0 -1px; height: 58%; z-index: -1; opacity: .3; }
.mn-close-art svg { width: 100%; height: 100%; display: block; }
.mn-close-in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mn-close .mn-lede { text-align: center; }
.mn-close .mn-cta-row { justify-content: center; margin-top: 8px; }

/* ================================================================ small == */
@media (max-width: 1080px) {
  .mn-market-grid { grid-template-columns: repeat(3, 1fr); }
  .mn-do-grid     { grid-template-columns: repeat(2, 1fr); }
  .mn-flow-line   { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  /* A rail only makes sense along a row; at a row's end it would point at
     nothing, so every third node drops it. */
  .mn-flow-line li:nth-child(3n)::after { display: none; }
}
@media (max-width: 860px) {
  .mn-board ol { grid-template-columns: repeat(2, 1fr); }
  .mn-board li:nth-child(odd) { border-left: 0; }
  .mn-board li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mn-board li:last-child { grid-column: span 2; }
  .mn-market-grid { grid-template-columns: repeat(2, 1fr); }
  .mn-why-grid    { grid-template-columns: 1fr; }
  /* With no column beside it, the artwork sits behind the copy — so it fades
     from the top instead of from the left, and drops in strength. */
  .mn-atlas {
    mask-image: linear-gradient(180deg, transparent 4%, #000 42%);
    -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 42%);
    opacity: .5;
  }
}
@media (max-width: 620px) {
  /* One column. Two never fitted a phone: the columns are sized by their content
     (flag, country, representative) and bottomed out around 516px inside a 339px
     box, which body{overflow-x:hidden} then clipped — so half the members were
     simply unreachable and the page showed no scrollbar to say so. */
  .mn-board ol { grid-template-columns: 1fr; }
  .mn-board li { border-left: 0; }
  .mn-board li + li { border-top: 1px solid var(--line); }
  .mn-board li:last-child { grid-column: auto; }

  .mn-hero { padding-top: clamp(112px, 26vw, 150px); }
  .mn-market-grid { grid-template-columns: 1fr; }
  .mn-do-grid     { grid-template-columns: 1fr; }
  .mn-flow-line   { grid-template-columns: repeat(2, 1fr); }
  .mn-flow-line li:nth-child(3n)::after { display: block; }
  .mn-flow-line li:nth-child(2n)::after { display: none; }
  .mn .mn-btn { width: 100%; justify-content: center; }
}