/* ============================================================
   Midnyte — shared site shell
   Header, navigation, footer and page grain. Loaded by every page
   so the whole site reads as one thing. Namespaced .mn-* so it can
   never collide with a page's own styles.
   ============================================================ */

.mn-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.mn-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(22px, 6vw, 120px);
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mn-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; min-height: 44px; }
.mn-brand img { height: 19px; flex-shrink: 0; width: auto; display: block; filter: brightness(0) invert(1);
  opacity: 0.95; transition: opacity 0.3s; }
.mn-brand:hover img { opacity: 1; }

.mn-nav {
  display: flex; align-items: center; border-radius: 50px; padding: 6px 8px; max-width: 100%;
  /* NOT overflow-x:auto — that computes overflow-y to `auto` as well and would
     clip the services panel at the edge of the pill. Three items always fit. */
  overflow: visible; flex-wrap: wrap; justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.035) 100%);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.mn-nav::-webkit-scrollbar { display: none; }
.mn-nav > a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 20px; border-radius: 40px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(245,245,245,0.7); white-space: nowrap; text-decoration: none;
  line-height: 1.15; transition: background 0.3s, color 0.3s;
}
.mn-nav > a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mn-nav > a.mn-on { background: rgba(255,255,255,0.12); color: #fff; }

.mn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; min-height: 44px; border-radius: 50px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; line-height: 1.15;
  background: linear-gradient(180deg, #ffffff, #e4ddff); color: #050505; border: 1px solid transparent;
  transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1), box-shadow 0.4s;
}
.mn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(100,60,255,0.28); color: #050505; }

/* ---------- footer ---------- */
.mn-footer {
  position: relative; padding: clamp(34px,4vw,46px) clamp(22px,6vw,120px) clamp(40px,4vw,56px);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.mn-footer-rule {
  position: absolute; top: 0; left: clamp(22px,6vw,120px); right: clamp(22px,6vw,120px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,120,255,0.45), rgba(255,255,255,0.12), transparent);
}
.mn-foot { max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.mn-foot nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  font-size: 13px; font-weight: 500; color: rgba(245,245,245,0.55); }
.mn-foot nav a { display: inline-block; min-height: 44px; line-height: 44px; color: inherit;
  text-decoration: none; overflow-wrap: anywhere; transition: color 0.3s; }
.mn-foot nav a:hover { color: #c3b0ff; }
/* LinkedIn is a mark rather than a word: the other three footer links are
   things you read, this one is a destination you recognise. Sized to the
   44px tap target the rest of the site keeps. */
/* Scoped through .mn-foot nav, not left bare: `.mn-foot nav a` sets
   display:inline-block and line-height:44px, and at (0,2,1) it outranked a
   lone .mn-foot-in — so the glyph sat on the text baseline near the top of a
   44px line box instead of in the middle of it. */
.mn-foot nav a.mn-foot-in {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; line-height: 0; border-radius: 50%;
  color: rgba(245,245,245,0.55); transition: color .3s, background .3s; }
.mn-foot nav a.mn-foot-in svg { width: 19px; height: 19px; display: block; }
.mn-foot nav a.mn-foot-in:hover { color: #c3b0ff; background: rgba(255,255,255,0.05); }
.mn-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  font-size: 13px; font-weight: 300; color: rgba(245,245,245,0.4); }
/* Companies Act 2006 trading disclosures: a UK company has to show its
   registered name, number and office on its website. Set quieter than the
   copyright line because it is a legal requirement, not a message. */
.mn-reg { max-width: 46ch; font-size: 11.5px; line-height: 1.6;
  color: rgba(245,245,245,0.28); }
.mn-copy img { height: 16px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.5; }

/* ---------- mobile menu ----------
   Measured, the header's content is 756px at its widest (Danish, which has the
   longest words) plus gaps and padding. It fits on one row comfortably down to
   about 860px. The old 1230px figure was a guess and a bad one: it dropped the
   nav into its own full-width row for 400px of viewport where nothing was
   wrong, leaving four links marooned in an empty pill under the logo.

   Both breakpoints now sit at 900px — just above where the row genuinely stops
   fitting. With JS the nav collapses behind the disclosure button that
   assets/midnyte-v2.js injects. Without JS there is no .mn-js, the button never
   appears, and the nav falls back to its own row instead — so the navigation is
   never lost either way. */
.mn-menu {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  color: #f5f5f5; -webkit-appearance: none; appearance: none;
  transition: border-color 0.3s, background 0.3s;
}
.mn-menu:hover { border-color: rgba(150,120,255,0.45); background: rgba(255,255,255,0.08); }
.mn-menu-ico { position: relative; display: block; width: 17px; height: 11px; }
.mn-menu-ico::before, .mn-menu-ico::after,
.mn-menu-ico span {
  content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.mn-menu-ico::before { top: 0; }
.mn-menu-ico span { top: 50%; margin-top: -0.75px; }
.mn-menu-ico::after { bottom: 0; }
.mn-header.mn-open .mn-menu-ico::before { transform: translateY(4.75px) rotate(45deg); }
.mn-header.mn-open .mn-menu-ico span { opacity: 0; }
.mn-header.mn-open .mn-menu-ico::after { transform: translateY(-4.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .mn-header { flex-wrap: wrap; }
  .mn-brand { order: 1; margin-right: auto; }
  .mn-lang   { order: 2; }
  .mn-menu   { order: 3; }
  .mn-cta    { order: 4; }
  .mn-nav    { order: 5; width: 100%; justify-content: flex-start; }
}
/* The menu's own copy of the call to action. Hidden everywhere except the
   mobile menu, where it replaces the header pill — see the mobile block.

   Written as `.mn-nav > a.mn-nav-cta` rather than `.mn-nav-cta` because every
   page's inline <style> sets display on `.mn-nav > a`, which at (0,1,1) beats
   a lone class at (0,1,0) — the bare selector lost, and the row showed up in
   the desktop pill as a second "Start a project" next to the real one. */
.mn-nav > a.mn-nav-cta { display: none; }

@media (max-width: 900px) {
  .mn-header.mn-js .mn-menu { display: inline-flex; }

  /* The pill leaves the header on a phone. It was sitting next to the burger,
     which put two competing buttons in a row barely wide enough for one, and
     pushed the logo into the corner. The action is not lost: it is the last
     row of the menu, which is where someone who opened the menu is looking. */
  .mn-header.mn-js .mn-cta { display: none; }

  /* The open menu is a full-screen surface, not a dropdown.
     backdrop-filter on the header establishes a containing block for fixed
     descendants, so the panel would be trapped inside the header row while it
     is applied — it comes off for as long as the menu is open, and the header
     takes a solid background instead so nothing shows through. */
  .mn-header.mn-js.mn-open {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: #08070d; border-bottom-color: transparent;
  }

  .mn-header.mn-js .mn-nav {
    position: fixed; inset: 0; z-index: 55;
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0; margin: 0; border: 0; border-radius: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 96px) clamp(22px, 6vw, 44px)
             calc(env(safe-area-inset-bottom, 0px) + 112px);
    background: #08070d;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow-x: visible; overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .38s cubic-bezier(.16,1,.3,1), visibility .38s;
  }
  .mn-header.mn-js.mn-open .mn-nav { opacity: 1; visibility: visible; pointer-events: auto; }

  /* full-width rows, sized to be read at arm's length rather than tapped precisely */
  .mn-header.mn-js .mn-nav > a {
    width: 100%; min-height: 68px; border-radius: 0; padding: 14px 2px;
    font-size: clamp(25px, 7.2vw, 38px); font-weight: 300; letter-spacing: -0.02em;
    text-transform: none; color: rgba(245,245,245,0.86); white-space: normal;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), color .3s;
  }
  .mn-header.mn-js .mn-nav > a:last-child { border-bottom: 0; }
  .mn-header.mn-js .mn-nav > a:hover { background: transparent; color: #fff; }
  /* the desktop pill background reads as a grey slab at this size — the current
     page is marked by colour and a rule instead */
  .mn-header.mn-js .mn-nav > a.mn-on {
    background: transparent; color: #c3b0ff;
    border-bottom-color: rgba(195,176,255,0.28);
  }

  /* the rows arrive in sequence, which reads as intent rather than a repaint */
  .mn-header.mn-js.mn-open .mn-nav > a { opacity: 1; transform: none; }
  .mn-header.mn-js.mn-open .mn-nav > a:nth-child(1) { transition-delay: .06s; }
  .mn-header.mn-js.mn-open .mn-nav > a:nth-child(2) { transition-delay: .12s; }
  .mn-header.mn-js.mn-open .mn-nav > a:nth-child(3) { transition-delay: .18s; }
  .mn-header.mn-js.mn-open .mn-nav > a:nth-child(4) { transition-delay: .24s; }
  .mn-header.mn-js.mn-open .mn-nav > a:nth-child(5) { transition-delay: .30s; }

  /* The panel is a descendant of the header, so its z-index is resolved inside
     the header's own stacking context — at 55 it paints over its siblings,
     including the button that closes it. Lift the brand and the toggle above it. */
  .mn-header.mn-js.mn-open .mn-brand,
  .mn-header.mn-js.mn-open .mn-menu { position: relative; z-index: 62; }

  /* The action, as the last row of the menu.

     It inherits the row geometry from `.mn-nav > a` above and adds only what
     marks it as the thing to press: the accent colour the site uses for the
     current page, a little more weight, and the arrow the pill carried. It is
     deliberately not a filled button — at this width a white slab across the
     foot of the menu reads as a banner and pulls the eye off the list before
     it has been read.

     Last in the reveal sequence at .42s: the three service rows run to .36s,
     so anything earlier would arrive out of order with what is above it. */
  .mn-header.mn-js .mn-nav > a.mn-nav-cta {
    display: flex !important; align-items: center; gap: 12px;
    margin-top: 10px; border-bottom: 0;
    color: #c3b0ff; font-weight: 400;
  }
  .mn-header.mn-js .mn-nav > a.mn-nav-cta em {
    font-style: normal; font-size: 0.62em; opacity: 0.72;
    transform: translateY(-0.06em);
  }
  .mn-header.mn-js .mn-nav > a.mn-nav-cta:hover,
  .mn-header.mn-js .mn-nav > a.mn-nav-cta:focus-visible { color: #fff; }
  .mn-header.mn-js.mn-open .mn-nav > a.mn-nav-cta { transition-delay: .42s; }

  /* the page behind must not scroll under the overlay */
  body.mn-nav-open { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mn-header.mn-js .mn-nav,
  .mn-header.mn-js .mn-nav > a { transition: opacity .15s linear !important; transform: none !important; }
  .mn-header.mn-js.mn-open .mn-nav > a,
  .mn-header.mn-js.mn-open .mn-nav > a.mn-nav-cta { transition-delay: 0s !important; }
}
@media (max-width: 400px) {
  .mn-header { padding-left: 16px; padding-right: 16px; }
  .mn-footer { padding-left: 16px; padding-right: 16px; }
  .mn-footer-rule { left: 16px; right: 16px; }
}
@media (max-width: 560px) {
  .mn-header { row-gap: 10px; }
  /* With JS the pill is gone from the header entirely and lives in the menu.
     Without it there is no menu to live in, so it stays in the header and is
     tightened to fit — the no-JS header is the only place this still applies. */
  .mn-header:not(.mn-js) .mn-cta { padding: 12px 16px; font-size: 12.5px; }
  /* no JS: keep the scrollable pill from eating the whole screen */
  .mn-header:not(.mn-js) .mn-nav { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .mn-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mn-foot nav { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-cta, .mn-brand img, .mn-nav > a, .mn-menu,
  .mn-menu-ico::before, .mn-menu-ico::after, .mn-menu-ico span { transition: none !important; }
}

/* language / currency switch in the header */
.mn-lang { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-right:10px; padding:8px 13px; min-height:44px; min-width:44px; border-radius:40px;
  border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.03);
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(245,245,245,0.72); text-decoration:none; white-space:nowrap; line-height:1;
  transition:border-color .3s, color .3s, background .3s; }
.mn-lang:hover { border-color:rgba(150,120,255,0.45); color:#fff; background:rgba(255,255,255,0.06); }
@media (max-width: 900px) { .mn-lang { padding:7px 11px; font-size:12px; margin-right:6px; } }

/* ============================================================
   SERVICES DROPDOWN

   The three services used to sit in the nav as three more links, which made a
   six-item bar and said nothing about how they relate. They are three answers
   to one question, so they belong behind one word.

   The trigger is a button, not a link: a nav item that both navigates and
   opens a menu is ambiguous on touch, where the first tap has to mean one or
   the other. /services is reachable from the panel's own footer instead.

   Below 900px the nav becomes a full-screen column and the panel un-collapses
   into it — a hover menu inside a menu is nobody's idea of navigation.
   ============================================================ */
.mn-drop { position: relative; display: inline-flex; }

.mn-drop-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 10px 18px 10px 20px; border: 0; border-radius: 40px; cursor: pointer;
  text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.15; white-space: nowrap;
  color: rgba(245,245,245,0.7); background: transparent;
  -webkit-appearance: none; appearance: none;
  transition: background 0.3s, color 0.3s;
}
.mn-drop-btn:hover, .mn-drop[data-open] .mn-drop-btn { background: rgba(255,255,255,0.06); color: #fff; }
.mn-drop-btn.mn-on { background: rgba(255,255,255,0.12); color: #fff; }
.mn-drop-car {
  width: 7px; height: 7px; border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); opacity: 0.7;
}
.mn-drop[data-open] .mn-drop-car { transform: translateY(1px) rotate(-135deg); }

.mn-drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 60;
  width: min(84vw, 268px); padding: 9px; border-radius: 18px;
  transform: translateX(-50%) translateY(-8px) scale(0.97); transform-origin: 50% 0;
  opacity: 0; pointer-events: none; visibility: hidden;
  background:
    /* the glow follows the cursor: --mx/--my are written by the script */
    radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(150,120,255,0.16), transparent 70%),
    linear-gradient(170deg, rgba(30,27,42,0.96), rgba(14,13,19,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  transition: opacity .26s ease, transform .42s cubic-bezier(0.16,1,0.3,1), visibility 0s .42s;
}
.mn-drop[data-open] .mn-drop-panel {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .26s ease, transform .42s cubic-bezier(0.16,1,0.3,1), visibility 0s;
}
/* the gap between the button and the panel would drop the hover mid-journey */
.mn-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

/* the rail slides to whichever row is under the cursor or the keyboard */
.mn-drop-rail {
  position: absolute; left: 10px; right: 10px; top: 0; z-index: 0;
  border-radius: 14px; background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.07);
  opacity: 0; transform: translateY(0); height: 0;
  transition: transform .38s cubic-bezier(0.16,1,0.3,1), height .38s cubic-bezier(0.16,1,0.3,1), opacity .25s ease;
  pointer-events: none;
}
.mn-drop-panel.is-railed .mn-drop-rail { opacity: 1; }

.mn-drop-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 13px; text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .34s ease, transform .44s cubic-bezier(0.16,1,0.3,1);
}
.mn-drop[data-open] .mn-drop-item { opacity: 1; transform: none; }
.mn-drop[data-open] .mn-drop-item:nth-child(2) { transition-delay: .04s; }
.mn-drop[data-open] .mn-drop-item:nth-child(3) { transition-delay: .09s; }
.mn-drop[data-open] .mn-drop-item:nth-child(4) { transition-delay: .14s; }

.mn-drop-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04); transition: border-color .3s, background .3s, transform .45s cubic-bezier(0.16,1,0.3,1); }
.mn-drop-ico svg { width: 17px; height: 17px; display: block; overflow: visible; }
.mn-drop-item:hover .mn-drop-ico, .mn-drop-item:focus-visible .mn-drop-ico { transform: translateY(-2px) scale(1.04); }

/* the same three words that used to sit in the bar, nothing more */
.mn-drop-t { font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; color: rgba(245,245,245,0.78);
  line-height: 1.2; transition: color .3s; }
.mn-drop-item:hover .mn-drop-t, .mn-drop-item:focus-visible .mn-drop-t { color: #fff; }
.mn-drop-item.mn-on .mn-drop-t { color: #fff; }

/* each service keeps its own colour, which is the one thing the flat nav lost */
.mn-drop-item[data-k="dev"] .mn-drop-ico { color: #7fe3f5; }
.mn-drop-item[data-k="cto"] .mn-drop-ico { color: #ffc978; }
.mn-drop-item[data-k="ven"] .mn-drop-ico { color: #6fe3b0; }
.mn-drop-item[data-k="dev"]:hover .mn-drop-ico { border-color: rgba(127,227,245,0.45); background: rgba(127,227,245,0.10); }
.mn-drop-item[data-k="cto"]:hover .mn-drop-ico { border-color: rgba(255,201,120,0.45); background: rgba(255,201,120,0.10); }
.mn-drop-item[data-k="ven"]:hover .mn-drop-ico { border-color: rgba(111,227,176,0.45); background: rgba(111,227,176,0.10); }

@media (prefers-reduced-motion: reduce) {
  .mn-drop-panel, .mn-drop-item, .mn-drop-rail, .mn-drop-car { transition: none; }
  .mn-drop-item { opacity: 1; transform: none; }
}

/* ---- the light header (the page scrolls onto a pale panel) ---- */
body.ed-hd-light .mn-drop-btn { color: rgba(20,18,28,0.62); }
body.ed-hd-light .mn-drop-btn:hover,
body.ed-hd-light .mn-drop[data-open] .mn-drop-btn { background: rgba(20,18,28,0.07); color: #14121c; }
body.ed-hd-light .mn-drop-btn.mn-on { background: rgba(20,18,28,0.09); color: #14121c; }
/* the panel itself stays dark — it is a surface of its own, not part of the bar */

/* ---- inside the full-screen mobile menu it is not a dropdown at all ----
   A hover menu nested inside a menu is nobody's idea of navigation. The
   trigger disappears, the panel flattens, and the three services become three
   more rows in the same column — indented under a small label so it still
   reads as a group rather than as six flat links. -------------------------- */
@media (max-width: 900px) {
  .mn-header.mn-js .mn-drop { display: block; width: 100%; position: static; }
  .mn-header.mn-js .mn-drop-btn {
    display: flex; width: 100%; min-height: 68px; padding: 14px 2px; border-radius: 0;
    font-size: clamp(25px, 7.2vw, 38px); font-weight: 300; letter-spacing: -0.02em;
    text-transform: none; color: rgba(245,245,245,0.86); background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  }
  .mn-header.mn-js .mn-drop-btn:hover { background: transparent; }
  .mn-header.mn-js .mn-drop-btn.mn-on { background: transparent; color: #c3b0ff;
    border-bottom-color: rgba(195,176,255,0.28); }
  .mn-header.mn-js .mn-drop-car { display: none; }
  .mn-header.mn-js.mn-open .mn-drop-btn { opacity: 1; transform: none; transition-delay: .18s; }

  .mn-header.mn-js .mn-drop-panel {
    position: static; width: auto; padding: 0; border: 0; border-radius: 0;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
  }
  .mn-header.mn-js .mn-drop-panel[hidden] { display: block; }
  .mn-header.mn-js .mn-drop-rail { display: none; }

  /* indented, so they read as the three answers under Services rather than as
     three more top-level destinations */
  .mn-header.mn-js .mn-drop-item {
    width: 100%; min-height: 56px; padding: 10px 2px 10px 18px; border-radius: 0; gap: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  }
  .mn-header.mn-js .mn-drop-ico { width: 34px; height: 34px; }
  .mn-header.mn-js .mn-drop-ico svg { width: 19px; height: 19px; }
  .mn-header.mn-js .mn-drop-t { font-size: clamp(17px, 4.6vw, 21px); font-weight: 300;
    letter-spacing: -0.015em; text-transform: none; color: rgba(245,245,245,0.62); }
  .mn-header.mn-js .mn-drop-item.mn-on .mn-drop-t { color: #c3b0ff; }

  /* they arrive in sequence with the rest of the column */
  .mn-header.mn-js.mn-open .mn-drop-item { opacity: 1; transform: none; }
  .mn-header.mn-js.mn-open .mn-drop-item:nth-of-type(2) { transition-delay: .24s; }
  .mn-header.mn-js.mn-open .mn-drop-item:nth-of-type(3) { transition-delay: .30s; }
  .mn-header.mn-js.mn-open .mn-drop-item:nth-of-type(4) { transition-delay: .36s; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mn-header.mn-js .mn-drop-btn,
  .mn-header.mn-js .mn-drop-item { transition: opacity .15s linear !important; transform: none !important; }
  .mn-header.mn-js.mn-open .mn-drop-btn,
  .mn-header.mn-js.mn-open .mn-drop-item { transition-delay: 0s !important; }
}

/* ---- without the script there is no disclosure to operate, so there is no
        button either: the panel is simply the list it always was ---- */
.mn-header:not(.mn-js) .mn-drop { display: block; width: 100%; position: static; }
.mn-header:not(.mn-js) .mn-drop-btn { display: inline-flex; }
.mn-header:not(.mn-js) .mn-drop-panel {
  position: static; width: auto; padding: 4px 0 0; border: 0; border-radius: 0;
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: none;
}
.mn-header:not(.mn-js) .mn-drop-rail { display: none; }
.mn-header:not(.mn-js) .mn-drop-item { opacity: 1; transform: none; transition: none; }

/* ============================================================
   COOKIE NOTICE

   PECR and the UK GDPR both bite here: analytics storage is not strictly
   necessary, so it needs consent given by a clear affirmative act, and
   refusing has to be exactly as easy as accepting. That is why Accept and
   Decline are the same size, the same weight and side by side — a greyed-out
   "Decline" beside a bright "Accept" is the pattern regulators have been
   fining people for.

   Nothing here is dismissible by scrolling or by clicking away, because that
   is not consent either. The only ways out are the two buttons.
   ============================================================ */
.mn-ck {
  position: fixed; z-index: 95; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(16px, 4vw, 34px) calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 3vw, 28px));
  display: none; pointer-events: none;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.mn-ck.on { display: block; }
.mn-ck-box {
  pointer-events: auto;
  max-width: 940px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(170deg, rgba(28,26,38,0.97), rgba(12,11,17,0.98));
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  transform: translateY(14px); opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.mn-ck.in .mn-ck-box { transform: none; opacity: 1; }
.mn-ck-t { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.65;
  color: rgba(245,245,245,0.68); }
.mn-ck-t b { font-weight: 500; color: #f5f5f5; }
.mn-ck-t a { color: rgba(195,176,255,0.9); text-decoration: none;
  border-bottom: 1px solid rgba(195,176,255,0.35); }
.mn-ck-t a:hover { color: #fff; border-bottom-color: #fff; }
.mn-ck-btns { display: flex; gap: 10px; flex-shrink: 0; }
/* deliberately identical: same padding, same weight, same prominence */
.mn-ck-btns button {
  min-height: 44px; padding: 12px 24px; border-radius: 40px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05);
  color: #f5f5f5; transition: border-color .3s, background .3s, transform .35s cubic-bezier(.16,1,.3,1);
}
.mn-ck-btns button:hover { border-color: rgba(150,120,255,0.55);
  background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.mn-ck-btns button:focus-visible { outline: 2px solid #c3b0ff; outline-offset: 3px; }

@media (max-width: 720px) {
  .mn-ck-box { grid-template-columns: minmax(0, 1fr); }
  .mn-ck-btns button { flex: 1; padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-ck-box { transition: none; transform: none; opacity: 1; }
  .mn-ck-btns button { transition: none; }
}

/* the way back in, once a choice has been made */
.mn-foot-ck { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: inherit;
  min-height: 44px; line-height: 44px; transition: color .3s; }
.mn-foot-ck:hover { color: #c3b0ff; }

/* ============================================================
   TOUCH TARGETS

   The standalone calls to action are set as small-caps text links with a
   hairline under them — 27 to 38px tall, which is right for the design and
   fiddly for a thumb. WCAG 2.5.8 wants 24x24 as a minimum and every platform
   guideline says 44.

   Rather than grow the boxes — which would drop the underline away from the
   text and change a deliberate look — this extends the hit area with a
   pseudo-element centred on the link. The target becomes 44px tall; nothing
   moves and nothing is redrawn. None of these classes uses ::after already.

   Scoped to `pointer: coarse` so it applies to touch, including touch
   laptops, and not to a narrow desktop window where the cursor is precise.
   The type selector (a.x) outranks the page's own .x rule, which matters
   because these are defined in each page's inline <style>, after this file.
   ============================================================ */
@media (pointer: coarse) {
  a.ed-golink, a.ed-svc-go, a.ed-case-go, a.ed-tier-go,
  a.open-intake-trigger, .ed-404-list a {
    position: relative;
  }
  a.ed-golink::after, a.ed-svc-go::after, a.ed-case-go::after,
  a.ed-tier-go::after, a.open-intake-trigger::after, .ed-404-list a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    /* the extension is a hit area, not a thing you can see */
    background: transparent;
  }
}

/* ============================================================
   MASTHEAD WIDTH

   The hero blocks are sized to their own content and centred with auto
   margins. That is what keeps a two-word headline optically centred rather
   than stretched across the grid — but `fit-content` has no upper bound, so
   a headline that is wider than the page does not wrap: the box grows, the
   auto margins collapse to zero, and the line runs off the right edge.

   It showed up on the Danish Fractional CTO page, where "ERFARNE
   BESLUTNINGER" is wider at masthead size than "SENIOR DECISIONS" — 1247px
   against 968px in a 1280px window. It is not a Danish problem though: any
   longer English headline would have done the same, and the fix belongs
   here rather than in a per-locale font size.

   `min-width: 0` lets a flex or grid child actually shrink; without it the
   automatic minimum size keeps the box at its content width and max-width
   is ignored.
   ============================================================ */
.ed-mid, .ed-hero-col, .ed-brief-mid {
  max-width: 100%;
  min-width: 0;
}
/* The headline itself is also sized to its content, so capping the block
   around it is not enough — the h1 simply overflows the block instead. Both
   need the bound, and a word longer than the line then breaks rather than
   sticking out. */
.ed-mid h1, .ed-hero-col h1, .ed-brief-mid h1,
.ed-mid h2, .ed-hero-col h2,
.ed-mid .ed-h1, .ed-hero-col .ed-h1, .ed-brief-mid .ed-brief-h {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---------- paid traffic ----------
   Set by the inline script in every page's head when the URL carries a click
   id. The nav goes; the wordmark and the call to action stay, because the
   point is to remove the exits, not the way forward.

   Declared here rather than inline so it holds at every width — including
   below 900px, where the nav is the burger that assets/midnyte-v2.js injects
   and the header pill has been put away. On paid traffic that trade is
   reversed: the burger goes and the pill comes back, so there is still one
   thing to press. */
html.paid .mn-nav,
html.paid .mn-header.mn-js .mn-menu { display: none !important; }
@media (max-width: 900px) {
  html.paid .mn-header.mn-js .mn-cta { display: inline-flex; }
}