/* ===================================================================
   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.

   Set in Google Sans, from assets/css/fonts.css; 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:  #157793;   /* 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;


  background: var(--paper);
  color: var(--ink);
}

/* ------------------------------------------------------------- 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-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-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-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-d); color: #fff;
  box-shadow: 0 12px 28px -12px rgba(37,168,203,.75);
}
.mn .mn-btn-solid:hover { background: #0F6078; 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; }
/* FINITE, not infinite — and this is a performance fix, not a taste one.
   Lighthouse's Speed Index measures when the page stops changing. Four lanes
   animating stroke-dashoffset forever meant it never did: FCP 0.4s and LCP 0.6s
   both scored full marks while Speed Index came in at 12.8s and scored ZERO,
   which was most of the gap between 61 and a good number.
   ONE pass, not six: six was 54 seconds, longer than a Lighthouse trace, so
   the measurement would never have seen the page settle. One pass is 9 to 15
   seconds depending on the lane — still plenty of movement on arrival — and
   then it holds its end state permanently. stroke-dashoffset cannot be
   composited either, so this also stops a repaint that ran forever in a
   background tab. */
.mn-atlas .mn-lanes path {
  stroke-dasharray: 6 10; opacity: .55;
  animation: mn-travel 9s linear 1;
  animation-fill-mode: forwards;
}
.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 2 both; }
.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-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-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-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-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-size: 1rem; color: rgba(255,255,255,.75); letter-spacing: .08em; }
.mn-why-item h3 {
  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-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; }
}