/* ======================================================================================================================
   Shared nav (21 Oct 2026, preview): ONE header for all 17 pages of ecomlanders-site-preview (the homepage and the 16 seo
   pages). The markup is identical on every page; only the relative path prefix and aria-current differ. Loaded after the
   page's own CSS (the homepage's inline styles, assets/site.css), so it wins over the old .nav-links rules, which no longer
   match anything (the old links list, its sliding highlight and the old phone menu script are retired; see assets/nav.js).
   Desktop (901 and up): four dropdown triggers (Services, Case studies, Resources, Company) and the Book a call pill. Each
   trigger opens a mega menu: a flat solid grey panel, ALL CAPS grey group labels, item title plus one line grey description.
   The hover highlight is the homepage's v26 sliding highlight, reused as is: one 8px rectangle at white 5.5%, sliding and
   resizing in 220ms cubic-bezier(.33, 1, .68, 1), fading in and out in 150ms ease-out. The one lime touch is a 6px square
   riding on the highlight inside the menus (non text).
   Phones and tablets (900 and under): the menu button opens the same four groups as an accordion under the nav, plus Book a call.
   Flat panels only: no outlines, borders, gradients, shadows or glows (the focus-visible outline for keyboard users is the
   only ring, the nav's existing 2px one).
   ====================================================================================================================== */
.mm { --mm-ease: cubic-bezier(.33, 1, .68, 1); --mm-panel: #1e1e1e; --mm-hov: rgba(255, 255, 255, .055); --mm-lime: #A3E635;
  --mm-t1: var(--text, #f5f5f3); --mm-t2: rgba(245, 245, 243, .62); --mm-t3: rgba(245, 245, 243, .5); font-family: var(--sans, "Inter Display", Inter, system-ui, sans-serif); }
.mm ul { margin: 0; padding: 0; list-style: none; }
.mm-bk { display: none; }

/* ---------- the sliding highlight (homepage v26 values, verbatim) */
.mm-hl { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; border-radius: 8px; background: var(--mm-hov);
  pointer-events: none; opacity: 0; will-change: transform, width;
  transition: opacity 150ms ease-out, transform 220ms var(--mm-ease), width 220ms var(--mm-ease), height 220ms var(--mm-ease); }
.mm-hl.still { transition: opacity 150ms ease-out; }

@media (min-width: 901px) {
  .mm { align-self: stretch; display: flex; }
  .mm-top { position: relative; isolation: isolate; display: flex; align-items: center; gap: 0; }
  @media (min-width: 1101px) { .mm-top { gap: 8px; } }
  .mm-i { align-self: stretch; display: flex; align-items: center; }

  /* top level: the homepage's nav type (15px, 500, secondary grey), 8 by 12 hit box, 8px corners */
  .mm-t { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--mm-t2); cursor: pointer; white-space: nowrap;
    transition: color 200ms var(--mm-ease); }
  .mm-t:hover, .mm-t[aria-expanded="true"], .mm-t[aria-current] { color: var(--mm-t1); }
  .mm-t:focus-visible { outline: 2px solid var(--text, #f5f5f3); outline-offset: 2px; }
  .mm-ch { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    opacity: .7; transition: transform 220ms var(--mm-ease); }
  .mm-t[aria-expanded="true"] .mm-ch { transform: rotate(180deg); }
  .mm-free { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08);
    color: rgba(245, 245, 243, .72); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; }

  /* the panel: positioned under the nav by nav.js (left), never in the flow, so opening it shifts nothing */
  .mm-p { position: absolute; top: calc(100% + 8px); left: var(--mm-x, 0px); z-index: 2; width: max-content; padding: 8px; border-radius: 12px; background: var(--mm-panel);
    visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 150ms ease-out, transform 200ms var(--mm-ease), visibility 0s linear 150ms; }
  .mm-p::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 9px; }   /* invisible bridge over the 8px gap */
  .mm-i.open > .mm-p { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 200ms var(--mm-ease), transform 200ms var(--mm-ease), visibility 0s; }
  .mm.sw .mm-p { transition: none !important; transform: none; }   /* switching menus: the next one is simply there */
  .mm-in { position: relative; isolation: isolate; display: grid; grid-auto-flow: column; column-gap: 8px; }
  .mm-g { display: grid; align-content: start; }
  .mm-g2 { grid-template-columns: repeat(2, 296px); }
  .mm-g1 { grid-template-columns: 296px; }
  .mm-wide .mm-g1 { grid-template-columns: 256px; }
  .mm-col { min-width: 0; }

  .mm-k { margin: 0; padding: 12px 16px 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-t3); }
  .mm-a { position: relative; z-index: 1; display: block; padding: 12px 40px 12px 16px; border-radius: 8px; color: var(--mm-t1); text-decoration: none; }
  .mm-a:focus-visible { outline: 2px solid var(--text, #f5f5f3); outline-offset: -2px; }
  .mm-n { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--mm-t1); }
  .mm-d { display: block; margin-top: 2px; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--mm-t3); transition: color 200ms var(--mm-ease); }
  a.mm-a:hover .mm-d, a.mm-a:focus-visible .mm-d { color: var(--mm-t2); }
  .mm-hl::after { content: ""; position: absolute; right: 16px; top: 21px; width: 6px; height: 6px; border-radius: 1px; background: var(--mm-lime); }
  .mm-top > .mm-hl::after { content: none; }
}
/* the Soon tag (planned pages): a quiet grey pill on a non link row */
.mm-soon { cursor: default; }
.mm-soon .mm-n { color: var(--mm-t2); }
.mm-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: var(--mm-t3); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }

/* ---------- 901 to 1100: the Services menu stacks its overview over the two service columns so it fits */
@media (min-width: 901px) and (max-width: 1100px) {
  .mm-in.mm-wide { grid-auto-flow: row; }
}

/* ---------- reduced motion: no movement, the highlight lands in place, panels fade only */
@media (prefers-reduced-motion: reduce) {
  .mm-hl, .mm-hl.still { transition: opacity 150ms ease-out; }
  .mm-p, .mm-i.open > .mm-p { transform: none !important; }
  .mm-ch { transition: none !important; }
}

/* ---------- phones and tablets (900 and under): the menu button opens the four groups as an accordion under the nav */
@media (max-width: 900px) {
  /* The sticky glass header flickers and jumps on iPhone when scrolling back up (Safari's toolbar expanding repaints the
     blur under a sticky element, and drops sticky elements during fast scrolls). On phones the header is fixed, solid and on
     its own layer, so it holds still on every page. */
  header.nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: #0b0b0b; -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  body { padding-top: var(--hdr, 64px); }   /* the fixed header no longer takes space; nav.js sets --hdr to its real height */
  header.nav .nav-in { grid-template-columns: 1fr auto auto; column-gap: 8px; }
  .mm { position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); z-index: 2; display: none; margin: 0;
    max-height: calc(100vh - var(--navh, 64px)); max-height: calc(100dvh - var(--navh, 64px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter, 24px) 24px; border: 1px solid var(--ln, #1e1e1e); border-top: 0; box-shadow: inset 0 1px 0 var(--ln, #1e1e1e);
    background: #0b0b0b; color: var(--mm-t1); }
  header.nav.mo .mm { display: block; }
  .mm-hl { display: none; }
  .mm-i + .mm-i { box-shadow: inset 0 1px 0 var(--ln, #1e1e1e); }
  .mm-t { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--mm-t1); text-align: left; cursor: pointer; }
  .mm-t:focus-visible { outline: 2px solid var(--text, #f5f5f3); outline-offset: -2px; }
  .mm-ch { width: 16px; height: 16px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    opacity: .7; transition: transform 260ms var(--ease, cubic-bezier(.33, 1, .68, 1)); }
  .mm-t[aria-expanded="true"] .mm-ch { transform: rotate(180deg); }
  .mm-free { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08);
    color: rgba(245, 245, 243, .72); font-size: 14px; font-weight: 500; line-height: 20px; }
  /* the section: a 0fr to 1fr row, so it opens to its own height; closed, its links are hidden from Tab */
  .mm-p { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 260ms var(--ease, cubic-bezier(.33, 1, .68, 1)), visibility 0s linear 260ms; }
  .mm-i.open > .mm-p { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 260ms var(--ease, cubic-bezier(.33, 1, .68, 1)), visibility 0s; }
  .mm-in { min-height: 0; overflow: hidden; display: grid; gap: 8px; }
  .mm-i.open .mm-in { padding-bottom: 16px; }
  .mm-col + .mm-col { margin-top: 8px; }
  .mm-k { margin: 0; padding: 8px 0; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-t3); }
  .mm-g { display: grid; gap: 0; }
  .mm-a { display: block; padding: 10px 0; color: var(--mm-t1); text-decoration: none; }
  .mm-a:focus-visible { outline: 2px solid var(--text, #f5f5f3); outline-offset: 2px; border-radius: 4px; }
  .mm-n { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
  .mm-d { display: block; font-size: 16px; line-height: 24px; color: var(--mm-t3); }
  a.mm-a[aria-current="page"] .mm-n::after { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--mm-lime); }
  .mm-bk { display: block; padding-top: 16px; box-shadow: inset 0 1px 0 var(--ln, #1e1e1e); }
  /* the nav pill's own look (raised grey, white on hover), phone sized */
  .mm-cta { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: var(--raised, #1a1a1a);
    color: rgba(245, 245, 243, .85); font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color 200ms var(--mm-ease), color 200ms var(--mm-ease); }
  .mm-cta:hover, .mm-cta:active { background: #f5f5f3; color: #0b0b0b; }
  .mm-cta:focus-visible { outline: 2px solid var(--text, #f5f5f3); outline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    header.nav.mo .mm { animation: mmWipe 280ms var(--ease, cubic-bezier(.33, 1, .68, 1)) both; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mm-p, .mm-i.open > .mm-p { transition: none; }
  }
}
@keyframes mmWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }   /* the v110 solid wipe down from the nav */

/* v110 QA, kept: the page behind holds still while the phone menu is open (the scrollbar's width is kept, so nothing shifts) */
html.nav-lock { overflow: hidden; }
html.nav-lock body { padding-right: var(--nav-sbw, 0px); }

/* light / dark switch (Nav.astro, nav.js): a round button the height of Book a call, left of it. The icon shows the mode
   you switch to (sun on dark, moon on light) and turns as it swaps. */
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* the same height, fill and text colour as Book a call beside it: 36px on desktops, 44px on phones and tablets */
.nav-th { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; align-self: center; padding: 0; border: 0; border-radius: 999px;
  background: #1a1a1a; color: rgba(245, 245, 243, .85); cursor: pointer; transition: background-color 200ms ease-out, color 200ms ease-out; }
.nav-th:hover { background: #222222; color: #f5f5f3; }
.nav-th:focus-visible { outline: 2px solid var(--text, #f5f5f3); outline-offset: 3px; }
.nav-th svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); }
.nav-th .th-moon { opacity: 0; transform: rotate(-40deg) scale(.7); }
html.lt .nav-th .th-sun { opacity: 0; transform: rotate(40deg) scale(.7); }
html.lt .nav-th .th-moon { opacity: 1; transform: none; }
/* the switch eases every colour across together, once */
html.th-x *, html.th-x *::before, html.th-x *::after { transition-property: background-color, color, border-color, fill, stroke, box-shadow !important;
  transition-duration: 320ms !important; transition-timing-function: ease !important; transition-delay: 0s !important; }
@media (max-width: 900px) { .nav-th { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nav-th svg { transition: none; } }

/* menu hidden (SHOW_MENU off in Nav.astro): the theme switch and Book a call sit in the last column, on the right, at every width
   (Ajay, 28 Oct 2026); without the menu they had dropped into the centre column */
header.nav.nav-solo .nav-in > .nav-end { grid-column: -2 / -1; justify-self: end; }