/* ==========================================================================
   Header
   ========================================================================== */
.header {
  --fg: var(--white);
  --scrim: rgb(0 0 0 / 0.72);
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding-inline: clamp(1.25rem, 4vw, 5.5rem);
  color: var(--fg);
  transition: transform 0.7s var(--ease-out), color 0.4s;
}
.header::before {
  content: "";
  position: absolute; inset: 0 0 -30%; z-index: -1;
  background: linear-gradient(var(--scrim) 35%, transparent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.header.is-scrolled::before { opacity: 1; }
.header.is-hidden { transform: translate3d(0, -110%, 0); }
.header.is-light { --fg: var(--black); --scrim: rgb(237 237 237 / 0.85); }

/* logo */
.logo {
  justify-self: start;
  display: inline-flex; align-items: center; gap: clamp(0.35rem, 0.5vw, 0.7rem);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out);
}
.logo__mark { width: clamp(3.8rem, 2rem + 4.4vw, 8.5rem); aspect-ratio: 150 / 80; height: auto; overflow: visible; }
.logo__type { display: grid; line-height: 0.92; }
.logo__name {
  font-size: clamp(1rem, 0.55rem + 1.1vw, 2.25rem);
  font-weight: 800; letter-spacing: 0.01em;
  color: var(--fg); transition: color 0.4s;
}
.logo__sub {
  font-size: clamp(0.62rem, 0.34rem + 0.68vw, 1.38rem);
  font-weight: 600; letter-spacing: 0.035em;
  color: var(--blue);
}
.is-scrolled .logo { transform: scale(0.84); }

/* the orbit dots of the mark drift on hover */
.logo:hover .logo__mark { animation: logo-pulse 1.2s var(--ease-out); }
@keyframes logo-pulse { 40% { transform: rotate(-8deg) scale(1.04); } }

/* centre CTA */
.header__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.8em;
  font-size: clamp(0.8rem, 0.62rem + 0.45vw, 1.3rem);
  font-weight: 500; letter-spacing: 0.01em;
  transition: opacity 0.4s, visibility 0.4s;
}
.header__cta::before, .header__cta::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  transition: transform 0.5s var(--ease-out);
}
.header__cta:hover::before, .header__cta:focus-visible::before { transform: translateX(-6px) scale(1.5); }
.header__cta:hover::after, .header__cta:focus-visible::after { transform: translateX(6px) scale(1.5); }

/* menu toggle */
.menu-toggle {
  justify-self: end;
  display: inline-flex; align-items: center; gap: clamp(0.9rem, 1.4vw, 2.2rem);
  padding: 0.6rem 0;
  color: var(--fg);
  transition: color 0.4s;
}
.menu-toggle__label {
  font-size: clamp(0.78rem, 0.52rem + 0.72vw, 1.75rem);
  font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
  line-height: 1;
}
.menu-toggle__icon {
  position: relative;
  width: clamp(1.75rem, 1.1rem + 1.6vw, 2.9rem);
  height: clamp(0.8rem, 0.6rem + 0.6vw, 1.4rem);
}
.menu-toggle__icon span {
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; margin-top: -0.75px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform 0.7s var(--ease-out);
}
.menu-toggle__icon span:first-child { transform: translateY(-0.3em); }
.menu-toggle__icon span:last-child { transform: translateY(0.3em) scaleX(0.62); transform-origin: 100% 50%; }
.menu-toggle:hover .menu-toggle__icon span:last-child { transform: translateY(0.3em) scaleX(1); }

/* open state */
.menu-open .header { --fg: var(--white); transform: none; }
.menu-open .header::before { opacity: 0; }
.menu-open .header__cta { opacity: 0; visibility: hidden; }
.menu-open .menu-toggle { color: var(--black); }
.menu-open .menu-toggle__icon span:first-child { transform: rotate(45deg) scaleX(0.95); transition-delay: 0.1s; }
.menu-open .menu-toggle__icon span:last-child { transform: rotate(-45deg) scaleX(0.95); transform-origin: 50% 50%; transition-delay: 0.1s; }

@media (max-width: 56.25em) { /* 900px */
  .menu-open .header { --fg: var(--black); }
}
@media (max-width: 48em) { /* 768px */
  .header__cta { display: none; }
  .header { grid-template-columns: 1fr auto; }
}