/* Shared nav takeover lock-in across all pages */
:root {
  --nav-pill-top: 22px;
  --nav-pill-height: 58px;
  --menu-shell-top: 94px;
  --menu-shell-side: 40px;
  --menu-shell-bottom: 28px;
}

.nav-pill {
  position: fixed;
  top: var(--nav-pill-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(605px, calc(100% - 44px));
  height: var(--nav-pill-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 7px 16px;
  border-radius: 24px;
  background: rgba(160, 0, 0, 0.65);
  border: 0;
  box-shadow: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.95s cubic-bezier(0.22, 1, 0.36, 1), width 0.95s cubic-bezier(0.22, 1, 0.36, 1), height 0.95s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.95s cubic-bezier(0.22, 1, 0.36, 1), padding 0.95s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

body.is-loaded .nav-pill {
  opacity: 1;
  transform: translate(-50%, 0);
}

.nav-pill .pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-pill .pill-btn img {
  height: 44px;
  width: auto;
  filter: brightness(0) saturate(100%);
}

.nav-pill .pill-btn.menu img {
  height: 29px;
}

.nav-pill .pill-btn.build img {
  height: 50px;
}

.nav-pill .pill-btn.build .email {
  height: 34px;
}

.nav-pill .logo {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.nav-pill .logo img {
  width: 112px;
  filter: none;
}

.nav-pill .right {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
}

.nav-pill .pill-btn.build {
  gap: 10px;
  position: relative;
  justify-content: flex-end;
  min-width: 220px;
}

.nav-pill .pill-btn.build .build-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  order: 2;
  z-index: 2;
}

.nav-pill .pill-btn.build .build-text {
  order: 1;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.nav-pill .pill-btn.build:hover .build-text,
.nav-pill .pill-btn.build:focus-within .build-text {
  opacity: 1;
  transform: translateX(0);
}

.menu-open-trigger {
  gap: 8px;
  position: relative;
  z-index: 3;
}

.menu-open-trigger .menu-default,
.menu-open-trigger .menu-close {
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-open-trigger .menu-close {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu-open-trigger .menu-close-x {
  height: 24px !important;
}

.menu-open-trigger .menu-close-text {
  height: 20px !important;
}

.menu-shell {
  position: fixed !important;
  inset: var(--menu-shell-top) var(--menu-shell-side) var(--menu-shell-bottom) var(--menu-shell-side) !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
  overflow: visible !important;
  z-index: 101;
}

.menu-hero {
  position: absolute !important;
  inset: 0 !important;
  display: grid;
  place-items: center;
  padding: 0;
}

.menu-hero-mask {
  position: relative;
  width: clamp(620px, 61vw, 1080px) !important;
  max-height: calc(100vh - 180px) !important;
  aspect-ratio: 0.68 / 1 !important;
  -webkit-mask-image: url("../images/brush.svg");
  mask-image: url("../images/brush.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  transform: translateY(12px) scale(0.96) !important;
  overflow: hidden;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-hero-mask .mask-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.menu-main-links a,
.menu-case-title,
.menu-case-links a {
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, background 0.3s ease;
}

/* Base state: ALL links (including .is-active) hidden and 10px left
   This overrides inline .is-active styles that set translateX(2px) */
.menu-main-links a,
.menu-main-links a.is-active,
.menu-main-links a:hover,
.menu-main-links a:focus-visible,
.menu-case-title,
.menu-case-links a,
.menu-case-links a.is-active,
.menu-case-links a:hover,
.menu-case-links a:focus-visible {
  opacity: 0 !important;
  transform: translateX(-10px) !important;
}

/* When menu is OPENING: reinforce that every link starts at -10px and opacity 0 */
body.menu-opening .menu-main-links a,
body.menu-opening .menu-main-links a.is-active,
body.menu-opening .menu-case-title,
body.menu-opening .menu-case-links a,
body.menu-opening .menu-case-links a.is-active {
  opacity: 0 !important;
  transform: translateX(-10px) !important;
}

.menu-overlay-fill {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #a00000;
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

body.menu-opening,
body.menu-open {
  overflow: hidden;
}

body.menu-opening .nav-pill {
  top: 22px;
  width: 100vw;
  height: 58px;
  border-radius: 24px;
  padding: 7px 40px;
  background: #a00000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  grid-template-columns: 1fr auto 1fr;
}

body.menu-open .nav-pill {
  top: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  padding: 24px 40px 16px;
  align-content: start;
  background: #a00000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  row-gap: 10px;
}

body.menu-opening .menu-overlay-fill {
  transform: scaleY(0);
  opacity: 0;
}

body.menu-open .menu-overlay-fill {
  transform: scaleY(1);
  opacity: 1;
}

body.menu-opening .menu-open-trigger .menu-default,
body.menu-open .menu-open-trigger .menu-default {
  opacity: 0;
  transform: translateX(10px);
}

body.menu-opening .menu-open-trigger .menu-close,
body.menu-open .menu-open-trigger .menu-close {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

body.menu-opening .nav-pill .right,
body.menu-open .nav-pill .right {
  transform: none;
  padding-right: 100px;
  transition: padding-right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shell only becomes visible when menu is fully open */
body.menu-open .menu-shell {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Keep shell hidden during opening phase */
body.menu-opening .menu-shell {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
}

/* When menu is OPEN: links animate to final position */
body.menu-open .menu-main-links a,
body.menu-open .menu-case-title,
body.menu-open .menu-case-links a {
  opacity: 0.7 !important;
  transform: translateX(0) !important;
  transition-delay: 0s !important;
}

/* Ensure links stay hidden during opening phase */
body.menu-opening .menu-main-links a,
body.menu-opening .menu-case-title,
body.menu-opening .menu-case-links a {
  opacity: 0 !important;
  transform: translateX(-10px) !important;
}

body.menu-open .menu-main-links a:hover,
body.menu-open .menu-main-links a:focus-visible,
body.menu-open .menu-main-links a.is-active,
body.menu-open .menu-case-links a:hover,
body.menu-open .menu-case-links a:focus-visible,
body.menu-open .menu-case-links a.is-active {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

body.menu-open .menu-case-title {
  transform: translateX(0) !important;
}

.menu-left,
.menu-main-links,
.menu-case-links {
  position: relative;
  left: 0 !important;
}

body.menu-open .menu-hero-mask {
  opacity: 1 !important;
  transform: translateY(12px) scale(1) !important;
  transition-delay: 0.375s;
}

/* Stagger: next link starts when previous is ~halfway (0.45s duration → 0.225s between starts, 25% faster) */
body.menu-open .menu-main-links a:nth-child(1) { transition-delay: 0s !important; }
body.menu-open .menu-main-links a:nth-child(2) { transition-delay: 0.225s !important; }
body.menu-open .menu-main-links a:nth-child(3) { transition-delay: 0.45s !important; }
body.menu-open .menu-main-links a:nth-child(4) { transition-delay: 0.675s !important; }
body.menu-open .menu-case-title { transition-delay: 0.9s !important; }
body.menu-open .menu-case-links a:nth-child(1)  { transition-delay: 1.125s !important; }
body.menu-open .menu-case-links a:nth-child(2)  { transition-delay: 1.35s !important; }
body.menu-open .menu-case-links a:nth-child(3)  { transition-delay: 1.575s !important; }
body.menu-open .menu-case-links a:nth-child(4)  { transition-delay: 1.8s !important; }
body.menu-open .menu-case-links a:nth-child(5)  { transition-delay: 2.025s !important; }
body.menu-open .menu-case-links a:nth-child(6)  { transition-delay: 2.25s !important; }
body.menu-open .menu-case-links a:nth-child(7)  { transition-delay: 2.475s !important; }
body.menu-open .menu-case-links a:nth-child(8)  { transition-delay: 2.7s !important; }
body.menu-open .menu-case-links a:nth-child(9)  { transition-delay: 2.925s !important; }
body.menu-open .menu-case-links a:nth-child(10) { transition-delay: 3.15s !important; }

body.menu-open .menu-main-links:hover a:not(:hover):not(.is-active) { opacity: 0.25 !important; }
body.menu-open .menu-case-links:hover a:not(:hover):not(.is-active) { opacity: 0.25 !important; }

/* ═══════════════════════════════════════════════════════
   CLOSING — reverse build: links slide left + fade,
   shell fades, overlay collapses, pill shrinks to bar
   ═══════════════════════════════════════════════════════ */
body.menu-closing {
  overflow: hidden;
}

body.menu-closing .nav-pill {
  top: 22px;
  width: 100vw;
  height: 58px;
  border-radius: 24px;
  padding: 7px 40px;
  background: #a00000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  grid-template-columns: 1fr auto 1fr;
}

body.menu-closing .nav-pill .right {
  padding-right: 100px;
  transition: padding-right 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.menu-closing .menu-shell {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.menu-closing .menu-main-links a,
body.menu-closing .menu-case-title,
body.menu-closing .menu-case-links a {
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Reverse stagger: last link closes first */
body.menu-closing .menu-case-links a:nth-child(10) { transition-delay: 0s !important; }
body.menu-closing .menu-case-links a:nth-child(9)  { transition-delay: 0.04s !important; }
body.menu-closing .menu-case-links a:nth-child(8)  { transition-delay: 0.08s !important; }
body.menu-closing .menu-case-links a:nth-child(7)  { transition-delay: 0.12s !important; }
body.menu-closing .menu-case-links a:nth-child(6)  { transition-delay: 0.16s !important; }
body.menu-closing .menu-case-links a:nth-child(5)  { transition-delay: 0.2s !important; }
body.menu-closing .menu-case-links a:nth-child(4)  { transition-delay: 0.24s !important; }
body.menu-closing .menu-case-links a:nth-child(3)  { transition-delay: 0.28s !important; }
body.menu-closing .menu-case-links a:nth-child(2)  { transition-delay: 0.32s !important; }
body.menu-closing .menu-case-links a:nth-child(1)  { transition-delay: 0.36s !important; }
body.menu-closing .menu-case-title { transition-delay: 0.4s !important; }
body.menu-closing .menu-main-links a:nth-child(4) { transition-delay: 0.44s !important; }
body.menu-closing .menu-main-links a:nth-child(3) { transition-delay: 0.48s !important; }
body.menu-closing .menu-main-links a:nth-child(2) { transition-delay: 0.52s !important; }
body.menu-closing .menu-main-links a:nth-child(1) { transition-delay: 0.56s !important; }

body.menu-closing .menu-hero-mask {
  opacity: 0 !important;
  transform: translateY(12px) scale(0.97) !important;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.menu-closing .menu-overlay-fill {
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

body.menu-closing .menu-open-trigger .menu-default {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.25s;
}

body.menu-closing .menu-open-trigger .menu-close {
  opacity: 0;
  transform: translateY(-50%) translateX(-10px);
  transition-delay: 0s;
}

.pre-footer {
  padding: 20px 0 24px;
  width: min(1600px, calc(100% - 100px));
  margin-left: 100px;
  margin-right: 40px;
}

.pre-footer-links {
  display: grid;
  gap: 8px;
  width: max-content;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}

.footer {
  background: #a00000;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  padding: 28px 0;
}

.footer-inner {
  width: min(1600px, calc(100% - 100px));
  margin-left: 100px;
  margin-right: 40px;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: end;
  justify-content: flex-start;
  gap: 24px;
}

.footer-brand img {
  width: 84px;
  filter: brightness(0) saturate(100%);
}

.footer-brand small {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.8);
}

.footer-nav {
  display: grid;
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.85);
}

@media (max-width: 980px) {
  /* Keep menu | logo | email all in one row */
  .nav-pill {
    grid-template-columns: 1fr auto 1fr;
    padding: 7px 12px;
    gap: 0;
    width: min(605px, calc(100% - 32px));
  }

  /* Logo stays in the center column — no reordering */
  .nav-pill .logo {
    order: 0;
    grid-column: auto;
  }

  .nav-pill .logo img {
    width: 88px;
  }

  .nav-pill .right {
    justify-content: flex-end;
  }

  /* Compact build button — hide the "Let's Build" text, keep email icon */
  .nav-pill .pill-btn.build {
    min-width: auto;
    gap: 0;
  }

  .nav-pill .pill-btn.build .build-text {
    display: none;
  }

  .nav-pill .pill-btn.menu img {
    height: 24px;
  }

  .nav-pill .pill-btn.build .email {
    height: 29px;
  }

  .menu-shell {
    inset: 84px 20px 20px 20px !important;
    overflow-y: auto !important;
  }

  .menu-left {
    width: 100%;
    padding-top: 10px;
    gap: 14px;
  }

  .menu-main-links a {
    font-size: clamp(22px, 8vw, 32px);
  }

  .menu-case-links a {
    font-size: 18px;
    min-height: 28px;
  }

  .menu-hero,
  .menu-hero-mask {
    display: none !important;
  }

  .pre-footer,
  .footer-inner {
    width: 92vw;
    margin: 0 auto;
  }

  .footer {
    padding: 28px 0;
  }

  /* Logo full-width on top, then two nav columns side by side below */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 20px 24px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
  }

  .footer-nav {
    grid-column: auto;
    grid-row: 2;
    text-align: left;
    justify-items: start;
    font-size: 18px;
    gap: 14px;
    line-height: 1.6;
  }

  /* Social links in pre-footer — double size, generous tap targets */
  .pre-footer-links {
    font-size: 22px;
    gap: 18px;
    line-height: 1.5;
  }

  .pre-footer-links a {
    display: block;
    padding: 6px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── Mobile menu takeover: email stays flush right ── */
  body.menu-opening .nav-pill .right,
  body.menu-open .nav-pill .right,
  body.menu-closing .nav-pill .right {
    padding-right: 0;
    justify-content: flex-end;
  }

  /* ── Mobile menu takeover: X close button aligns with link list ── */
  /* Shell on mobile: inset 84px 20px 20px 20px, so links start 20px from left.
     Move the close button to match that left edge. */
  body.menu-open .menu-open-trigger .menu-close,
  body.menu-opening .menu-open-trigger .menu-close {
    position: fixed;
    left: 20px;
    top: 28px;
    transform: none;
  }

  body.menu-closing .menu-open-trigger .menu-close {
    position: fixed;
    left: 20px;
    top: 28px;
    transform: translateX(-10px);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   ROLLOVER RESPONSE FIX — 2026-08-26
   The entrance stagger sets transition-delay up to 3.15s on
   every menu link. Because that delay applies to ALL of the
   element's transitions, hover inherited it: the rollover
   could sit idle for up to three seconds before responding,
   while the hero image swapped instantly. That mismatch is
   what read as "the image hard-cuts, the button lags."
   Below: kill the delay once the menu is settled, and make
   the hover response fast and deliberate.
   ═══════════════════════════════════════════════════════ */

/* Once the menu is open and the entrance has played, no link
   should carry an entrance delay into its hover response. */
body.menu-open.menu-settled .menu-main-links a,
body.menu-open.menu-settled .menu-case-links a,
body.menu-open.menu-settled .menu-case-title {
  transition-delay: 0s !important;
  transition-duration: 0.16s, 0.16s, 0.16s !important;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Hover/focus always responds immediately, never on the stagger clock. */
body.menu-open .menu-main-links a:hover,
body.menu-open .menu-main-links a:focus-visible,
body.menu-open .menu-case-links a:hover,
body.menu-open .menu-case-links a:focus-visible {
  transition-delay: 0s !important;
  transition-duration: 0.16s !important;
}

/* Sibling dimming only after the user has actually moved the pointer
   inside the menu. Stops every link from appearing to "load lit, then
   drop to off" when the menu opens underneath a resting cursor. */
body.menu-open .menu-main-links:hover a:not(:hover):not(.is-active),
body.menu-open .menu-case-links:hover a:not(:hover):not(.is-active) {
  opacity: 1 !important;
}
body.menu-open.pointer-active .menu-main-links:hover a:not(:hover):not(.is-active),
body.menu-open.pointer-active .menu-case-links:hover a:not(:hover):not(.is-active) {
  opacity: 0.25 !important;
}

/* Hero image crossfades instead of hard-cutting, so it reads as a
   deliberate change rather than a jump cut against the type. */
.menu-hero-mask img,
.menu-hero img {
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.menu-hero-mask img.is-swapping,
.menu-hero img.is-swapping {
  opacity: 0;
}

/* Touch devices: no sticky hover states. */
@media (hover: none) {
  body.menu-open .menu-main-links:hover a:not(:hover):not(.is-active),
  body.menu-open .menu-case-links:hover a:not(:hover):not(.is-active) {
    opacity: 1 !important;
  }
}