/* ==========================================================================
   HEADER & NAVIGATION
   --------------------------------------------------------------------------
   - Top utility bar (phone / email) that retracts on scroll
   - Fixed header: transparent at top, frosted glass + progress bar once moved
   - Desktop nav: glass capsule, a gliding "magic pill" behind the hovered or
     focused link, each link lifting 2px, active page keeping a glowing dot
   - Services mega-dropdown
   - Mobile: full-screen overlay revealed by a circular clip-path
   ========================================================================== */

/* --- Utility bar --------------------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-header) + 1);
  height: 38px;
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border);
  transition:
    margin-top var(--dur) var(--ease-out),
    visibility 0s linear var(--dur),
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}
.topbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.topbar a { display: inline-flex; align-items: center; gap: .4rem; transition: color var(--dur); }
.topbar a:hover { color: var(--c-primary-2); }
.topbar .icon { width: 14px; height: 14px; color: var(--c-primary); }
.topbar__tag { margin-right: auto; }

/* Retract once the page moves so the header sits flush at the top.
   Uses margin-top + visibility rather than transform/opacity, because the
   page-load entrance rule below is more specific and would override those. */
.is-scrolled .topbar {
  margin-top: -38px;
  visibility: hidden;
  pointer-events: none;
}

/* --- Shell --------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 38px 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition:
    inset-block-start var(--dur) var(--ease-out),
    height var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform .9s var(--ease-out),
    opacity .9s var(--ease-out);
}

.is-scrolled .site-header {
  inset-block-start: 0;
  height: 66px;
  background-color: rgb(5 11 22 / .72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--c-border);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / .8);
}

/* Page-load entrance */
.js .site-header,
.js .topbar            { transform: translateY(-100%); opacity: 0; }
.js .is-loaded .site-header,
.js .is-loaded .topbar { transform: none; opacity: 1; }

.header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
}

/* Scroll progress line */
.header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  opacity: 0;
  transition: opacity var(--dur);
}
.is-scrolled .header__progress { opacity: 1; }

/* --- Logo ---------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border-radius: var(--r-sm);
}
.logo__mark {
  width: 58px;
  height: 58px;
  object-fit: contain;
  transition: transform .7s var(--ease-spring);
  filter: drop-shadow(0 0 14px rgb(43 163 207 / .45));
}
.logo:hover .logo__mark { transform: rotate(-12deg) scale(1.08); }
.logo__text  { display: grid; line-height: 1.05; }
.logo__name  { font-size: 1.9rem; font-weight: 900; letter-spacing: -.025em; }
.logo__name b { font-weight: 700; color: var(--c-primary-2); }
.logo__sub   {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

/* --- Desktop nav --------------------------------------------------------- */
.nav { justify-self: center; }

.nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: .1rem;
  padding: .35rem;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .035);
  border: 1px solid var(--c-border);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.nav__link {
  position: relative;
  z-index: 1;                       /* above the indicator */
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .85rem;
  border-radius: var(--r-full);
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.nav__link .icon { width: .85em; height: .85em; transition: transform var(--dur) var(--ease-out); }

/* Colour shift + 2px lift on hover/focus */
.nav__link:hover,
.nav__link:focus-visible { color: var(--c-text); transform: translateY(-2px); }
.nav__link:focus-visible { outline-offset: 2px; }

/* Active page: bright text + glowing dot, which survives the pill moving
   to whichever link the pointer is over */
.nav__link[aria-current] { color: var(--c-text); }
.nav__link[aria-current]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 8px 1px var(--c-accent);
}

/* The gliding glow pill — JS writes --ind-x / --ind-w */
.nav__indicator {
  position: absolute;
  z-index: 0;
  top: .35rem;
  left: 0;
  height: calc(100% - .7rem);
  width: var(--ind-w, 0px);
  transform: translateX(var(--ind-x, 0px));
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgb(43 163 207 / .34), rgb(0 229 255 / .16));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 0 24px -4px rgb(43 163 207 / .8);
  opacity: 0;
  pointer-events: none;
  list-style: none;
  transition:
    transform .5s var(--ease-out),
    width .5s var(--ease-out),
    opacity var(--dur) var(--ease-out);
}
.nav__indicator.is-ready { opacity: 1; }

/* No-JS fallback */
html:not(.js) .nav__indicator { display: none; }
html:not(.js) .nav__link:hover { background: var(--c-surface-2); }

/* --- Services dropdown --------------------------------------------------- */
.nav__item--has-menu { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  width: min(560px, 80vw);
  padding: .6rem;
  translate: -50% 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  border-radius: var(--r-lg);
  background: rgb(8 17 31 / .92);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}
.nav__item--has-menu:hover .dropdown,
.nav__item--has-menu:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}
.nav__item--has-menu:hover .nav__link .icon,
.nav__item--has-menu:focus-within .nav__link .icon { transform: rotate(180deg); }

/* Hover bridge so the pointer can cross the gap into the panel */
.nav__item--has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1rem;
}

.dropdown__link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border-radius: var(--r-md);
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: background-color var(--dur), color var(--dur), transform var(--dur) var(--ease-out);
}
.dropdown__link:hover,
.dropdown__link:focus-visible {
  background: rgb(43 163 207 / .12);
  color: var(--c-text);
  transform: translateX(3px);
}
.dropdown__link .icon { width: 18px; height: 18px; color: var(--c-primary-2); }

/* --- Right-hand actions -------------------------------------------------- */
.header__actions { justify-self: end; display: flex; align-items: center; gap: .75rem; }

/* --- Burger -------------------------------------------------------------- */
.menu-toggle {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
  transition: background-color var(--dur), transform var(--dur) var(--ease-spring);
}
.menu-toggle:hover  { background: var(--c-surface-2); }
.menu-toggle:active { transform: scale(.94); }

.menu-toggle__bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--ease-out);
}
.menu-toggle__bar:nth-child(1) { transform: translateY(-4px); }
.menu-toggle__bar:nth-child(2) { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { transform: rotate(-45deg); }

/* --- Mobile overlay ------------------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(5 11 22 / .9);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  clip-path: circle(0px at var(--origin-x, calc(100% - 44px)) var(--origin-y, 38px));
  visibility: hidden;
  transition: clip-path .7s var(--ease-in-out), visibility 0s linear .7s;
}
.mobile-menu.is-open {
  clip-path: circle(150vmax at var(--origin-x, calc(100% - 44px)) var(--origin-y, 38px));
  visibility: visible;
  transition: clip-path .7s var(--ease-in-out), visibility 0s;
}

.mobile-menu__glow {
  position: absolute;
  inset: auto -25% -35% auto;
  width: 85vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(43 163 207 / .3), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}

.mobile-menu__list { display: grid; gap: .1rem; }

.mobile-menu__link,
.mobile-menu__footer {
  --d: 0ms;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .5s var(--ease-out) var(--d),
    transform .7s var(--ease-out) var(--d),
    color var(--dur) var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__link,
.mobile-menu.is-open .mobile-menu__footer {
  --d: calc(200ms + var(--i, 0) * 60ms);
  opacity: 1;
  transform: none;
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .25rem 0;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
}
.mobile-menu__link small {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-subtle);
  font-variant-numeric: tabular-nums;
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible { color: var(--c-text); }
.mobile-menu__link[aria-current] span {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: .9rem;
  color: var(--c-text-subtle);
  font-size: var(--fs-sm);
}
.mobile-menu__footer a { display: inline-flex; align-items: center; gap: .5rem; }
.mobile-menu__footer .icon { width: 15px; height: 15px; color: var(--c-primary); }

/* While the overlay is open the header goes clear so the two read as one */
.menu-open { overflow: hidden; }
.menu-open .site-header {
  background-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.menu-open .header__progress { opacity: 0; }

/* --- Breakpoints --------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav, .header__cta { display: none; }
  .menu-toggle       { display: block; }
  .header__inner     { grid-template-columns: 1fr auto; }
}
@media (min-width: 1101px) {
  .mobile-menu { display: none; }
}
@media (max-width: 640px) {
  .topbar__tag, .topbar__mail { display: none; }
  .topbar__inner { justify-content: center; }
}