/* ═══════════════════════════════════════════════
   Loading screen
   ═══════════════════════════════════════════════ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0b0b0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.loader-text {
  display: flex;
  overflow: hidden;
}

.loader-text span {
  display: inline-block;
  font: 700 clamp(80px, 14vw, 150px)/1 Oswald, Impact, sans-serif;
  color: #f4efe4;
  letter-spacing: -0.03em;
  transform: translateY(110%);
  will-change: transform;
}

.loader-dot {
  color: #d4652a;
}

.loader-sub {
  font: 500 clamp(12px, 2vw, 18px) Oswald, Impact, sans-serif;
  letter-spacing: 0.35em;
  color: #f4efe4;
  opacity: 0;
}

/* Hide ancillary elements behind loader; .page stays opacity:1
   so the LCP image paints immediately (behind the opaque overlay). */
body:has(.loader) .skip,
body:has(.loader) .contact-dock {
  opacity: 0;
}


/* ═══════════════════════════════════════════════
   Resizable navbar + floating dropdown cards
   ═══════════════════════════════════════════════ */

/* ─── Base: full-width fixed bar ─── */
.site-header.nav-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 80px;
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: none;
  transition:
    max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4vw;
  height: 100%;
}

/* ─── Scrolled: floating pill ─── */
.nav-shell.compact {
  top: 10px;
  height: 56px;
  max-width: 960px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(244, 239, 228, 0.07);
  border-bottom-color: rgba(244, 239, 228, 0.07);
  background: rgba(11, 11, 11, 0.75);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(244, 239, 228, 0.03) inset;
}

.nav-shell.compact .nav-inner {
  padding: 0 12px 0 24px;
}

/* Logo */
.nav-shell .site-logo {
  width: 80px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.nav-shell.compact .site-logo {
  width: 60px;
}

/* Nav items tighten in pill */
.nav-shell.compact #primary-nav {
  gap: 22px;
  font-size: 11px;
}

.nav-shell.compact .nav-trigger {
  font-size: 11px;
  padding: 12px 0;
}

/* CTA pill button */
.nav-shell.compact #primary-nav .nav-cta {
  padding: 7px 14px;
  gap: 16px;
  border-radius: 999px;
  font-size: 11px;
}

/* CTA button — orange, stands out from nav */
#primary-nav .nav-cta {
  border-radius: 8px;
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}
#primary-nav .nav-cta:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--black);
}

/* Animation panel — rounded card */
.animation-panel {
  border-radius: 14px;
  overflow: hidden;
}

/* Hero — GSAP controls animations, disable CSS transitions */
.row-arrow {
  transition: none !important;
}

.scene {
  transition: none !important;
}

.panel-head {
  overflow: hidden;
}

#panel-title {
  will-change: transform, opacity;
}

/* Page offset for fixed header */
.page {
  padding-top: 80px;
}

html {
  scroll-padding-top: 100px;
}


/* ═══════════════════════════════════════════════
   Floating dropdown cards (replaces full-width mega-panels)
   ═══════════════════════════════════════════════ */

.nav-item {
  position: relative !important;
}

.mega-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 12px);
  width: max-content;
  border-radius: 16px;
  background: var(--champagne);
  color: var(--black);
  border: none;
  border-top: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  padding: 30px 34px 24px;
  max-height: 80vh;
  display: grid;
  align-items: start;
}

/* Orange accent line at top */
.mega-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  border-radius: 16px 16px 0 0;
}

/* Invisible hover bridge — covers the gap between trigger and dropdown */
.mega-panel::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Services dropdown — 3 columns */
.services-mega {
  display: grid;
  min-width: 680px;
  max-width: 760px;
  grid-template-columns: 1fr 1.4fr 0.85fr;
  gap: 24px;
}

/* Projects dropdown — 3 cards */
.projects-mega {
  display: grid;
  min-width: 580px;
  max-width: 660px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* CPaaS dropdown — 3 columns */
.cpaas-mega {
  display: grid;
  min-width: 700px;
  max-width: 820px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* White Label dropdown — 3 columns */
.wl-mega {
  display: grid;
  min-width: 720px;
  max-width: 860px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Industries dropdown — 3 columns */
.industries-mega {
  display: grid;
  min-width: 680px;
  max-width: 780px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Locations dropdown — 4 columns */
.locations-mega {
  display: grid;
  min-width: 760px;
  max-width: 920px;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Category label headers inside mega panels — large Oswald style */
.mega-cat-label {
  display: block !important;
  font-family: Oswald, Impact, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #ad4500 !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Section headers (BUILD / MARKET / AUTOMATE) */
.mega-panel > div > span:not(.mega-cat-label) {
  color: #ad4500 !important;
  letter-spacing: 0.08em;
  margin-bottom: 10px !important;
}

/* Links inside dropdowns */
.mega-panel a {
  color: var(--black) !important;
  border-bottom-color: rgba(11, 11, 11, 0.12) !important;
  padding: 10px 8px !important;
  border-radius: 8px;
  transition: background 0.2s;
}

.mega-panel a:hover {
  background: rgba(11, 11, 11, 0.05);
}

.mega-panel a:after {
  display: none !important;
}

.mega-panel small {
  color: #615845 !important;
}

/* "Explore all" / "View all" link at bottom */
.mega-panel .mega-all {
  color: #615845 !important;
  font-size: 11px !important;
  border-top: 1px solid rgba(11, 11, 11, 0.1);
  border-bottom: none !important;
  margin-top: 8px;
  padding-top: 14px !important;
  border-radius: 0;
}

.mega-panel .mega-all:hover {
  color: #ad4500 !important;
  background: none;
}

/* Project images in dropdown */
.projects-mega img {
  border-radius: 8px;
}

.projects-mega strong {
  color: var(--black);
  font-size: 13px !important;
}


/* ─── Compact pill: dropdown adjustments ─── */
.nav-shell.compact .mega-panel {
  top: calc(100% + 12px);
  border-radius: 16px;
}


/* ═══════════════════════════════════════════════
   Tablet
   ═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nav-shell.compact {
    max-width: 840px;
  }

  .nav-shell.compact #primary-nav {
    gap: 16px;
  }

  .nav-shell.compact .nav-inner {
    padding: 0 8px 0 18px;
  }

  .services-mega {
    min-width: 580px;
    max-width: 640px;
  }

  .projects-mega {
    min-width: 500px;
    max-width: 560px;
  }
}


/* ═══════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════ */
@media (max-width: 760px) {
  .site-header.nav-shell,
  .nav-shell.compact {
    top: 0;
    height: 64px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    background: rgba(11, 11, 11, 0.95);
  }

  .nav-inner,
  .nav-shell.compact .nav-inner {
    padding: 0 5vw;
  }

  .nav-shell .site-logo,
  .nav-shell.compact .site-logo {
    width: 68px;
  }

  #primary-nav {
    top: 64px !important;
  }

  /* Mobile dropdowns revert to inline */
  .nav-item {
    position: static !important;
  }

  .mega-panel,
  .nav-shell.compact .mega-panel {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    min-width: 0;
    max-width: none;
    border-radius: 12px;
    box-shadow: none;
    border: none;
    background: var(--champagne);
    color: var(--black);
    padding: 18px;
    margin: 8px 0;
    max-height: none;
  }

  .mega-panel::before {
    display: none;
  }

  .services-mega,
  .projects-mega {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }

  .page {
    padding-top: 64px;
  }

  html {
    scroll-padding-top: 74px;
  }
}




/* Hero enquiry — in-place success state */
.hero-enquiry-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  color: var(--champagne);
  letter-spacing: -.02em;
}
.hero-enquiry-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}