@import url('logo.css?v=20260608-lockup-align');

/* Logo lockup — row layout so icon sits left of wordmark (not stacked) */
.site-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}

.site-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  line-height: 1;
}

.site-brand > .flex.flex-col {
  flex: 0 1 auto;
  min-width: 0;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Services dropdown */
.services-nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* Main menu links — same height for Services, Process, and siblings */
nav .hidden.md\:flex {
  align-items: center;
}

nav .hidden.md\:flex > a.font-label-mono:not(.bg-gradient-to-r),
.services-nav-group > a.font-label-mono:first-child {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
  line-height: 1.4;
}

nav .hidden.md\:flex > a.font-label-mono.border-b-2,
.services-nav-group > a.font-label-mono.border-b-2:first-child {
  border-bottom-color: #00f0ff;
}

nav,
nav .hidden.md\:flex,
.services-nav-group {
  overflow: visible;
}

/* ───────────────────────────────────────────────────────────────
   Fluid desktop top-nav (≥768px), shared sitewide.

   Previously the brand and Contact CTA were absolutely positioned at a
   fixed side offset while the link cluster was centred across the full
   width, so on narrow desktop/tablet widths (≈768–1150px) the centred
   links slid under the brand and CTA and the text overlapped.

   Now the brand sits in normal flex flow (it can never overlap the
   links) and the link cluster is centred in the space that remains,
   clear of a right gutter reserved for the Contact CTA. The side inset,
   gutter, inter-link gap and link font-size all scale continuously via
   clamp(). The Contact CTA stays pinned to the right edge so the same
   rules work whether the markup places it as a direct nav child or
   nested at the end of the link cluster (both variants exist sitewide).
   The apps page overrides the gutter in surette-data-systems-apps.css
   (its CTA is a separate fixed overlay rather than a nav child).
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  nav.fixed.top-0.w-full {
    /* Edge inset; tightens as the viewport narrows, reaches the
       original 4rem by standard desktop widths (~1280px). */
    --dm-nav-side-offset: clamp(1.25rem, 5vw, 4rem);
    /* Right gutter held open for the pinned Contact CTA so the centred
       link cluster can never slide underneath it. */
    --dm-nav-contact-reserve: 10.5rem;
    justify-content: flex-start !important;
    padding-left: var(--dm-nav-side-offset) !important;
    padding-right: calc(var(--dm-nav-side-offset) + var(--dm-nav-contact-reserve)) !important;
    column-gap: clamp(0.6rem, 1.6vw, 1.5rem);
  }

  /* Brand back into the flex flow (was position:absolute). */
  nav.fixed.top-0.w-full > .site-brand {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
  }

  /* Link cluster centres between the brand and the reserved gutter; its
     internal spacing tightens fluidly. */
  nav.fixed.top-0.w-full > .hidden.md\:flex {
    margin-inline: auto;
    gap: clamp(0.55rem, 1.5vw, 2.5rem) !important;
    min-width: 0;
  }

  /* Link text eases down a little on narrow widths to buy room. */
  nav.fixed.top-0.w-full > .hidden.md\:flex > a.font-label-mono,
  nav.fixed.top-0.w-full > .hidden.md\:flex .services-nav-group > a,
  nav.fixed.top-0.w-full > .hidden.md\:flex .lang-switch {
    font-size: clamp(0.78rem, 0.66rem + 0.42vw, 0.875rem);
  }

  /* Contact CTA pinned to the right edge. Two selectors cover both DOM
     variants: a direct nav child, and a child nested at the end of the
     link cluster. Visual styling (size, colour, font) is preserved. */
  nav.fixed.top-0.w-full > a.bg-gradient-to-r,
  nav.fixed.top-0.w-full > .hidden.md\:flex > a.bg-gradient-to-r {
    position: absolute;
    right: var(--dm-nav-side-offset);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.225rem;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.18);
  }

  nav.fixed.top-0.w-full > a.bg-gradient-to-r:hover,
  nav.fixed.top-0.w-full > .hidden.md\:flex > a.bg-gradient-to-r:hover {
    transform: translateY(-50%) scale(1.05);
  }

  nav.fixed.top-0.w-full > a.bg-gradient-to-r:active,
  nav.fixed.top-0.w-full > .hidden.md\:flex > a.bg-gradient-to-r:active {
    transform: translateY(-50%) scale(0.95);
  }
}

/* Tight band: below ≈880px there isn't room for the CTA alongside the
   full link row. Drop the CTA and reclaim its gutter so the links keep
   one clean, non-overlapping row down to the mobile breakpoint (Contact
   stays reachable from the footer, and from the bottom nav below 768px). */
@media (min-width: 768px) and (max-width: 879.98px) {
  nav.fixed.top-0.w-full {
    --dm-nav-contact-reserve: 0rem;
  }

  nav.fixed.top-0.w-full > a.bg-gradient-to-r,
  nav.fixed.top-0.w-full > .hidden.md\:flex > a.bg-gradient-to-r {
    display: none !important;
  }
}

.services-nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.65rem) scale(0.985);
  transform-origin: top left;
  transition:
    opacity 0.36s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.36s;
  pointer-events: none;
  z-index: 80;
}

/* Invisible bridge so hover is not lost between trigger and menu */
.services-nav-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
}

.services-nav-group:hover .services-nav-menu,
.services-nav-group:focus-within .services-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.3s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
  pointer-events: auto;
}

.services-nav-panel {
  background: rgba(8, 10, 14, 0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
  border-radius: 0.75rem;
  padding: 0.65rem 0;
  min-width: 18rem;
  overflow: hidden;
}

.services-nav-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e9192;
}

.services-nav-heading:not(:first-child) {
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.services-nav-heading .material-symbols-outlined,
.services-nav-heading-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #00f0ff !important;
  opacity: 0.78 !important;
  vertical-align: middle !important;
  transform: translateY(0) !important;
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20 !important;
}

.services-nav-panel a {
  display: block;
  padding: 0.625rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #c4c7c7;
  transition: color 0.24s ease, background-color 0.24s ease;
}

.services-nav-panel a:hover {
  color: #00f0ff;
  background: rgba(255, 255, 255, 0.06);
}

.services-nav-panel a.text-electric-cyan {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.06);
}

@media (max-width: 767px) {
  #mobile-menu-btn,
  #mobile-menu-dropdown {
    display: none !important;
  }

  .md\:hidden header {
    height: 4rem;
  }

  .md\:hidden header .lang-switch {
    margin-left: auto;
    padding-right: 0.35rem;
  }

  .md\:hidden > nav.fixed.bottom-0,
  .md\:hidden nav.fixed.bottom-0,
  nav.fixed.bottom-0.md\:hidden {
    top: 4rem !important;
    bottom: auto !important;
    height: 3.05rem !important;
    padding: 0.2rem 0.35rem !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 240, 255, 0.08) !important;
  }

  .md\:hidden nav.fixed.bottom-0 a,
  .md\:hidden nav.fixed.bottom-0 button,
  nav.fixed.bottom-0.md\:hidden a,
  nav.fixed.bottom-0.md\:hidden button {
    min-width: 0;
    flex: 1 1 0;
    height: 100%;
    gap: 0.1rem;
    font-size: 0.62rem;
  }

  .md\:hidden nav.fixed.bottom-0 .material-symbols-outlined,
  nav.fixed.bottom-0.md\:hidden .material-symbols-outlined {
    font-size: 1.15rem !important;
    margin-bottom: 0.05rem !important;
  }

  .md\:hidden nav.fixed.bottom-0 .font-label-caps,
  nav.fixed.bottom-0.md\:hidden .font-label-caps {
    font-size: 0.52rem !important;
    line-height: 1.1 !important;
    margin-top: 0.05rem !important;
    white-space: nowrap;
  }

  .md\:hidden main {
    padding-top: 7.75rem !important;
  }

  .md\:hidden main .hero-headline-band {
    padding-top: clamp(3.2rem, 8vh, 4.4rem) !important;
  }

  .mobile-services-popout {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    top: 7.55rem;
    z-index: 70;
    max-height: min(72vh, 34rem);
    overflow: auto;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    background: rgba(8, 10, 14, 0.94);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72), 0 0 26px rgba(0, 240, 255, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.7rem) scale(0.985);
    transform-origin: top center;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.3s;
  }

  .mobile-services-popout.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
      opacity 0.28s ease,
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
    pointer-events: auto;
  }

  .mobile-services-popout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .mobile-services-popout__group {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.65rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
  }

  .mobile-services-popout__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.8rem 0.45rem;
    color: #00f0ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mobile-services-popout a {
    display: block;
    padding: 0.55rem 0.8rem;
    color: #c4c7c7;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.25;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mobile-services-popout a:active,
  .mobile-services-popout a:hover {
    color: #fff;
    background: rgba(0, 240, 255, 0.08);
  }

  body.has-dm-standard-nav .page {
    padding: 7.75rem 20px 5.5rem !important;
  }

  body.has-dm-standard-nav .app-footer {
    padding-bottom: 2rem !important;
  }
}