/* ==========================================================================
   Site header: logo, floating glass nav pill, services mega menu,
   CTA button, and the mobile full-screen nav overlay.
   Desktop mega-menu width/collapse is finished off with a small JS
   assist in scripts/main.js (see openMegaMenu/closeMegaMenu) because
   animating from an intrinsic ("fit-content") width to a fixed one
   isn't reliably tweenable in CSS alone.

   Sticky architecture: only the floating nav pill (.nav-shell) and its
   mobile stand-in (.hamburger) are pinned to the viewport (position:
   fixed). .site-header itself is position:absolute — anchored to the
   top of the document, not the viewport — so it scrolls away with the
   page exactly like ordinary content, carrying the logo and CTA button
   with it. Both position:fixed children still escape it correctly
   because .site-header has no transform/filter/will-change, which
   would otherwise create a containing block for them.
   ========================================================================== */

.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--header-h);
  z-index: var(--z-header);
}

.site-header__bar {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
}

/* ---- Logo ---- */
.logo {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.45rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Logo (image variant) ---- clamp() scales the mark fluidly with the
   viewport instead of jumping at breakpoints, staying comfortably inside
   the fixed var(--header-h) at every size. */
.logo--image {
  display: inline-flex;
  align-items: center;
}

.logo__img {
  display: block;
  height: clamp(75px, 6vw, 120px);
  width: auto;
}

/* ---- Nav shell (the glass pill that morphs into the mega menu) ----
   Deliberately left out of grid placement: it's fixed to the viewport,
   centered independently of however wide the logo or CTA end up being
   (the math below just needs left:50% + translateX(-50%), the same as
   when this was position:absolute against the full-width header bar —
   the header bar and the viewport share the same width/edges, so the
   centering math is identical either way). */
.nav-shell {
  position: fixed;
  left: 50%;
  top: calc((var(--header-h) - 3rem) / 2);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  /* align-items:center (not the flex-column default of stretch) so
     .nav-links sizes itself to its own content instead of stretching to
     match whatever width nav-shell currently has — that stretch was
     making measureClosedWidth() in main.js circular (it would just read
     nav-shell's existing width back). .mega-menu sets an explicit
     width:100% of its own, so it's unaffected by this and still tracks
     nav-shell's animated width as intended. Width itself is owned
     entirely by scripts/main.js (see measureClosedWidth/measureOpenWidth). */
  align-items: center;
  background-color: var(--color-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nav);
  overflow: hidden;
  z-index: var(--z-header);
  transition:
    width var(--duration-base) var(--ease-signature),
    border-radius var(--duration-base) var(--ease-signature),
    box-shadow var(--duration-base) var(--ease-signature);
}

.nav-shell.is-open {
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.375rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-signature),
    color var(--duration-fast) var(--ease-signature);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  background-color: var(--color-pill-hover);
}

.nav-link.is-active {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* ---- Mega menu (services) ---- */
.mega-menu {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  opacity: 0;
  transition:
    grid-template-rows var(--duration-base) var(--ease-signature),
    opacity var(--duration-base) var(--ease-signature);
}

.nav-shell.is-open .mega-menu {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mega-menu__inner {
  min-height: 0;
  overflow: hidden;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-6);
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-line);
  margin-inline: var(--space-3);
  transform: translateY(-10px);
  transition: transform var(--duration-base) var(--ease-signature);
}

.nav-shell.is-open .mega-menu__grid {
  transform: translateY(0);
}

.mega-menu__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 12.5rem;
  transition: transform var(--duration-fast) var(--ease-signature);
}

.mega-menu__item:hover,
.mega-menu__item:focus-visible {
  transform: translateX(4px);
}

.mega-menu__title {
  font-size: var(--fs-mega-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-signature);
}

.mega-menu__item:hover .mega-menu__title,
.mega-menu__item:focus-visible .mega-menu__title {
  color: var(--color-blue);
}

.mega-menu__desc {
  font-size: var(--fs-mega-desc);
  color: var(--color-ink-soft);
  transition: color var(--duration-fast) var(--ease-signature);
}

.mega-menu__item:hover .mega-menu__desc,
.mega-menu__item:focus-visible .mega-menu__desc {
  color: var(--color-blue);
}

.mega-menu__arrow {
  display: inline-block;
}

/* ---- CTA button ---- */
.cta-button {
  grid-column: 3;
  justify-self: end;
  position: relative;
  isolation: isolate;
  display: none;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 28%, transparent);
  overflow: hidden;
  transition:
    transform var(--duration-fast) var(--ease-signature),
    box-shadow var(--duration-fast) var(--ease-signature);
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--color-accent) 36%, transparent);
}

/* ---- Ghost/outline variant: used for the header CTA on service pages
   (see service-page.css), which show an outlined pill instead of the
   solid-fill button used everywhere else. Same shape/motion, just a
   transparent fill with an accent-colored border and text. ---- */
.cta-button--ghost {
  background-color: var(--color-white);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  box-shadow: none;
  padding: 0.3125rem 0.3125rem 0.3125rem 1.1875rem;
}

.cta-button--ghost:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.cta-button--ghost::before {
  display: none;
}

.cta-button--ghost .cta-button__icon {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.cta-button::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 45%;
  height: 220%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: rotate(20deg);
  animation: cta-shimmer 3.4s var(--ease-signature) infinite;
}

@keyframes cta-shimmer {
  0% {
    left: -60%;
  }
  55%,
  100% {
    left: 130%;
  }
}

.cta-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
}

.cta-button__icon svg {
  width: 1rem;
  height: 1rem;
}

/* ---- Hamburger (mobile trigger) ----
   Fixed to the viewport for the same reason as .nav-shell above: it's
   mobile's stand-in for "the navigation," so it has to stay reachable
   while scrolling even though .site-header (and the logo) scroll away. */
.hamburger {
  position: fixed;
  top: calc((var(--header-h) - 44px) / 2);
  right: var(--edge-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  z-index: var(--z-header);
}

.hamburger span {
  width: 20px;
  height: 2px;
  background-color: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-signature), opacity var(--duration-fast) var(--ease-signature);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile full-screen nav overlay ---- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay);
  background-color: var(--color-overlay-bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-signature), visibility 0s linear var(--duration-base);
}

.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-signature);
}

.mobile-nav__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--edge-pad);
  flex-shrink: 0;
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.mobile-nav__screens {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.mobile-nav__screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--edge-pad) var(--space-6);
  overflow-y: auto;
  transition: transform var(--duration-base) var(--ease-signature), opacity var(--duration-base) var(--ease-signature);
}

.mobile-nav__screen--main {
  transform: translateX(0);
  opacity: 1;
}

.mobile-nav__screen--services {
  transform: translateX(100%);
  opacity: 0;
}

.mobile-nav.is-services .mobile-nav__screen--main {
  transform: translateX(-100%);
  opacity: 0;
}

.mobile-nav.is-services .mobile-nav__screen--services {
  transform: translateX(0);
  opacity: 1;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: 1.375rem;
  font-weight: var(--fw-medium);
  text-align: left;
  width: 100%;
}

.mobile-nav__link.is-active {
  color: var(--color-blue);
}

.mobile-nav__link svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-blue);
}

.mobile-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-bottom: var(--space-3);
  font-weight: var(--fw-medium);
  color: var(--color-ink-soft);
}

.mobile-nav__back svg {
  width: 1.125rem;
  height: 1.125rem;
}

.mobile-nav__service-list {
  display: flex;
  flex-direction: column;
}

.mobile-nav__service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  transition: color var(--duration-fast) var(--ease-signature);
}

.mobile-nav__service-row:hover,
.mobile-nav__service-row:focus-visible {
  color: var(--color-blue);
}

.mobile-nav__service-row span {
  color: var(--color-blue);
}

.cta-button--mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  padding: 0.875rem 1.5rem;
  align-self: stretch;
}