/* Site menu (see site-menu.js): a dark pill at the top centre that grows into a white card */
.mnav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 70; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.mnav button, .mnav a { font: inherit; }
.mnav-panel a, .mnav-panel button { color: inherit; }
.mnav :focus-visible { outline: 2px solid #D92D20; outline-offset: 3px; }

/* collapsed bar */
.mnav-bar {
  display: flex; align-items: center; gap: 16px; white-space: nowrap; cursor: pointer; border: 0;
  padding: 11px 16px 11px 20px; border-radius: 12px; background: #1d1d1c; color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mnav-bar:hover { transform: translateY(1px); }
.mnav-word { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; }
.mnav-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.mnav-status { font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.62); display: flex; gap: 8px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
.mnav-status .sep { color: rgba(255, 255, 255, 0.35); }
.mnav-burger { width: 16px; height: 10px; position: relative; flex: none; }
.mnav-burger::before, .mnav-burger::after, .mnav-burger i { content: ""; position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 1px; background: #fff; }
.mnav-burger::before { top: 0; } .mnav-burger i { top: 4.2px; } .mnav-burger::after { bottom: 0; }

/* expanded card */
.mnav-panel {
  position: absolute; top: 0; left: 50%; width: min(460px, calc(100vw - 32px)); transform: translateX(-50%);
  background: #fff; color: #1b1a17; border-radius: 22px; padding: 22px 24px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  clip-path: inset(0 30% 86% 30% round 12px); opacity: 0; visibility: hidden;
  transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s ease, visibility 0s 0.5s;
}
.mnav.is-open .mnav-panel { clip-path: inset(0 0 0 0 round 22px); opacity: 1; visibility: visible; transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.15s ease; }
.mnav.is-open .mnav-bar { opacity: 0; pointer-events: none; }
.mnav-top { display: flex; justify-content: space-between; align-items: center; }
.mnav-label { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: #D92D20; }
.mnav-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f0ec; cursor: pointer; display: grid; place-items: center; font-size: 18px; line-height: 1; transition: background 0.2s ease; }
.mnav-close:hover { background: #e4e2dc; }

/* big links with a letter roll on hover */
.mnav-links { list-style: none; margin: 26px 0 0; display: flex; flex-direction: column; gap: 2px; }
.mnav-links a { display: inline-flex; text-decoration: none; font-weight: 800; font-size: clamp(34px, 5.4vw, 44px); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; }
.mnav-links .ch { display: inline-block; height: 1.02em; overflow: hidden; }
.mnav-links .ch > span { display: block; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); transition-delay: calc(var(--k) * 22ms); }
.mnav-links .ch > span + span { color: #D92D20; }
.mnav-links a:hover .ch > span, .mnav-links a:focus-visible .ch > span { transform: translateY(-100%); }
.mnav-links a[aria-current="page"] { color: #D92D20; }
.mnav-links .sp { display: inline-block; width: 0.28em; }

/* stagger the links in as the card opens */
.mnav-links li { opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mnav.is-open .mnav-links li { opacity: 1; transform: none; transition-delay: calc(0.18s + var(--i) * 45ms); }

/* case studies row */
.mnav-sub { margin-top: 22px; }
.mnav-sub p { font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6b675f; margin-bottom: 8px; }
.mnav-sub ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mnav-sub a { display: inline-block; text-decoration: none; font-weight: 600; font-size: 13px; padding: 6px 11px; border-radius: 999px; background: #f1f0ec; transition: background 0.2s ease, color 0.2s ease; }
.mnav-sub a:hover, .mnav-sub a[aria-current] { background: #1b1a17; color: #fff; }

.mnav-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(27, 26, 23, 0.12); display: flex; justify-content: space-between; align-items: center; }
.mnav-time { font-weight: 700; font-size: 15px; color: #D92D20; font-variant-numeric: tabular-nums; }
.mnav-social { display: flex; gap: 6px; }
.mnav-social a { width: 32px; height: 32px; border-radius: 8px; background: #f1f0ec; display: grid; place-items: center; transition: background 0.2s ease, color 0.2s ease; }
.mnav-social a:hover { background: #1b1a17; color: #fff; }
.mnav-social svg { width: 15px; height: 15px; fill: currentColor; }

/* the page behind dims while the menu is open */
.mnav-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(20, 20, 18, 0.28); -webkit-backdrop-filter: grayscale(0.6); backdrop-filter: grayscale(0.6); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.mnav-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

@media (max-width: 820px) {
  .mnav { top: 14px; }
  .mnav-status, .mnav-dot { display: none; }
  .mnav-bar { gap: 12px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav-panel, .mnav.is-open .mnav-panel, .mnav-links li, .mnav.is-open .mnav-links li, .mnav-links .ch > span, .mnav-scrim, .mnav-bar { transition: none; }
}