/* ================================================
   HOLO PULSE LOADER
   ================================================ */

@keyframes holo-spin         { to { transform: rotate(360deg); } }
@keyframes holo-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes holo-pulse        { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes holo-glow-pulse   { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

#holo-pulse-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #030303;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity 0.45s ease;
}

#holo-pulse-loader.holo-hiding {
  opacity: 0;
  pointer-events: none;
}

.holo-relative {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.holo-glow {
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.1);
  filter: blur(28px);
  border-radius: 50%;
  transform: scale(1.5);
  animation: holo-glow-pulse 2s ease-in-out infinite;
}

.holo-crosshair {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.2;
  pointer-events: none;
}

.holo-line-v {
  position: absolute;
  width: 1px;
  height: 64px;
  background: #3b82f6;
}

.holo-line-h {
  position: absolute;
  height: 1px;
  width: 64px;
  background: #3b82f6;
}

.holo-ring-outer {
  position: relative;
  padding: 8px;
  border: 1px dashed rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  animation: holo-spin 2s linear infinite;
}

.holo-ring-inner {
  width: 56px;
  height: 56px;
  border: 1px dashed rgba(96, 165, 250, 0.4);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: holo-spin-reverse 1.2s linear infinite;
}

.holo-center {
  position: relative;
  z-index: 10;
  padding: 4px;
  background: #030303;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 15px -5px #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.holo-center svg {
  display: block;
  width: 16px;
  height: 16px;
  color: #3b82f6;
  stroke: currentColor;
  animation: holo-pulse 2s ease-in-out infinite;
}

.holo-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
}

.holo-dot-top    { top: 0;    left: 50%; transform: translate(-50%, -50%); }
.holo-dot-bottom { bottom: 0; left: 50%; transform: translate(-50%,  50%); }
.holo-dot-left   { left: 0;   top:  50%; transform: translate(-50%, -50%); }
.holo-dot-right  { right: 0;  top:  50%; transform: translate( 50%, -50%); }

.holo-label {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.3em;
  color: #3b82f6;
  text-transform: uppercase;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  #holo-pulse-loader { transition: none; }
  .holo-ring-outer,
  .holo-ring-inner,
  .holo-glow,
  .holo-center svg { animation: none !important; }
}

/* Prevent flash of unstyled content on Firefox */
@-moz-document url-prefix() {
  body { font-synthesis: none; }
}

:root {
  --focus-ring: 2px solid var(--accent);
  --full-vh: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-wrap: break-word;
}

img,
canvas,
svg,
video {
  max-width: 100%;
  /* Prevent iOS tap highlight on media elements */
  -webkit-tap-highlight-color: transparent;
}

/* Fallback for browsers that don't support aspect-ratio (Safari < 15, Chrome < 88) */
@supports not (aspect-ratio: 1) {
  .overview-visual,
  .office-visual,
  .story-img-wrap,
  .split-image {
    position: relative;
    padding-top: 62.5%; /* 16:10 fallback */
    height: 0;
    overflow: hidden;
  }
  .overview-visual > *,
  .office-visual > *,
  .story-img-wrap > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Smooth momentum scrolling on iOS */
.mobile-menu {
  -webkit-overflow-scrolling: touch;
}

nav,
.mobile-menu,
.glass-card {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav,
  .mobile-menu,
  .glass-card {
    background: rgba(3, 3, 3, 0.94) !important;
  }
}

@supports not (mix-blend-mode: difference) {
  #cursor-outer {
    mix-blend-mode: normal !important;
    background: rgba(3, 3, 3, 0.25);
  }
}

body.touch-device,
body.touch-device * {
  cursor: auto !important;
}

body.menu-open {
  overflow: hidden;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.hamburger {
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;        /* removes 300ms tap delay */
  -webkit-tap-highlight-color: transparent;
}

/* body.touch-device * sets cursor:auto !important (specificity 0,0,1,1).
   This strips cursor:pointer from the hamburger <div>, which breaks click
   events on iOS Safari — divs only fire clicks when cursor:pointer is set.
   Override with higher specificity (0,0,2,1). */
body.touch-device .hamburger {
  cursor: pointer !important;
}

.mobile-menu {
  position: fixed;
  top: calc(1.5rem + 72px + var(--safe-top));
  left: max(1rem, calc(1rem + var(--safe-left)));
  right: max(1rem, calc(1rem + var(--safe-right)));
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: rgba(3, 3, 3, 0.96);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu a {
  display: block;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  background: rgba(250, 250, 250, 0.03);
}

.mobile-menu a.active {
  background: rgba(79, 70, 229, 0.16);
}

.mobile-menu .mobile-menu-cta {
  background: var(--accent);
  color: white;
  text-align: center;
}

#hero,
.split-outer,
.split-left {
  min-height: var(--full-vh);
}

#hero,
.split-left {
  height: var(--full-vh);
}

body.touch-device #service-preview {
  display: none !important;
}

body.no-webgl #webgl-canvas {
  display: none !important;
}

body.no-webgl #hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.18), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(7, 7, 12, 0.98), rgba(3, 3, 3, 1));
}

body.touch-device .service-item,
body.touch-device .social-link,
body.touch-device .form-submit,
body.touch-device .cta-mega,
body.touch-device .nav-cta,
body.touch-device .hamburger {
  cursor: pointer !important;
}

@media (max-width: 768px) {
  nav {
    width: calc(100% - 2rem - var(--safe-left) - var(--safe-right)) !important;
    top: calc(1rem + var(--safe-top)) !important;
    padding: 0.9rem 1rem !important;
  }

  .page-hero,
  #hero,
  #contact-main,
  footer,
  .container {
    scroll-margin-top: calc(84px + var(--safe-top));
  }

  .service-item {
    grid-template-columns: 60px 1fr auto !important;
  }

  .service-item .svc-meta {
    display: flex !important;
    justify-self: end;
  }

  .service-item .svc-tags {
    display: none;
  }

  .process-arrow {
    display: block !important;
  }

  .split-left {
    position: static !important;
    top: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 2rem !important;
    height: auto !important;
  }
}

@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  #cursor-outer,
  #cursor-inner {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  /* Increase hamburger touch target to iOS/Android minimum (44×44px) */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #cursor-outer,
  #cursor-inner {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  #page-transition,
  #service-preview,
  #distort-canvas,
  #webgl-canvas {
    transition: none !important;
    animation: none !important;
  }
}

/* --- TECH PILLS VISIBILITY FIX ---
   GSAP's gsap.from() with immediateRender:true sets opacity:0 inline immediately.
   If ScrollTrigger doesn't fire (e.g. layout shifts from late-loading fonts),
   pills stay invisible. This !important override ensures they're always visible. */
.tech-pill {
  opacity: 1 !important;
}

/* ================================
   REVEAL / HOVER REVEAL PRIMITIVES
   (used across pages consistently)
   ================================ */

:root {
  --reveal-duration: 900ms;
  --reveal-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --reveal-distance: 18px;
}

/* Base reveal: start hidden */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

/* When in viewport */
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: reveal from left/right */
.reveal.from-left {
  transform: translateX(-var(--reveal-distance));
}
.reveal.from-right {
  transform: translateX(var(--reveal-distance));
}
.reveal.from-left.in,
.reveal.from-right.in {
  transform: translateX(0);
}

/* Slow fades (no movement) */
.reveal.fade-only {
  transform: none;
}
.reveal.fade-only {
  transition-property: opacity;
}

/* Hover reveal helpers (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .reveal-hover {
    position: relative;
    overflow: hidden;
  }

  .reveal-hover .hover-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 350ms ease, transform 450ms ease;
    pointer-events: none;
  }

  .reveal-hover:hover .hover-reveal {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .reveal-hover .hover-reveal-replace {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 350ms ease, transform 450ms ease;
    pointer-events: none;
  }

  .reveal-hover:hover .hover-reveal-replace {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

/* Respect reduced motion: never hide content */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================
   GLOBAL SECTION BLEND EFFECT
   ================================================ */
/* Remove hard top & bottom borders for a true seamless blend down the entire page (except footer) */
.page-hero,
#hero,
section,
.cta-band,
.section,
.marquee-wrap {
  border-top: none !important;
  border-bottom: none !important;
}

/* Blending gradient injected via JS at the bottom of each section */
.section-blend-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* Sits cleanly in padding */
  /* Fallback for older browsers */
  background: 
    linear-gradient(to bottom, transparent 0%, var(--bg) 95%, var(--bg) 100%),
    radial-gradient(ellipse at bottom, rgba(0, 113, 189, 0.12) 0%, transparent 70%);
  /* Modern dynamic glow that perfectly matches the page's specific --accent color */
  background: 
    linear-gradient(to bottom, transparent 0%, var(--bg) 95%, var(--bg) 100%),
    radial-gradient(ellipse at bottom, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1; /* Above video/overlays, but below text (z-index: 2+) */
}

/* Taller blend for hero sections to seamlessly fade video/image backgrounds */
.page-hero .section-blend-bottom,
#hero .section-blend-bottom {
  height: 180px;
}

/* Ensure content always sits above the blend effect */
section > .container,
.section > .container,
.cta-band > .container,
.page-hero > .container,
.split-outer {
  position: relative;
  z-index: 2;
}

.scroll-indicator {
  z-index: 10;
}

/* ── Global Offices Map ── */
#india-offices {
  padding: 6rem 0;
  border-top: 1px solid var(--line);
}

#offices-layout {
  display: flex;
  height: 540px;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  overflow: hidden;
  background: #0a0a0a;
}

#india-map {
  flex: 1;
  min-width: 0;
  height: 540px;
  min-height: 320px;
  background:
    radial-gradient(circle at 30% 35%, rgba(0, 113, 189, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 42%, rgba(0,113,189,0.1)),
    #05070a;
  position: relative;
}

#offices-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(3, 3, 3, 0.85);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.offices-sidebar-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.office-card {
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.office-card:hover,
.office-card.active {
  background: rgba(0, 113, 189, 0.12);
  border-color: rgba(0, 113, 189, 0.4);
}

.office-city {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.office-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(0, 113, 189, 0.2);
  padding: 0.15rem 0.45rem;
  border-radius: 2rem;
  flex-shrink: 0;
}

.office-detail {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Leaflet map: smooth tile fade-in ── */
.leaflet-tile {
  will-change: opacity;
}
/* Leaflet sets opacity 0→1 via JS; shorten the transition for snappier feel */
.leaflet-fade-anim .leaflet-tile-container {
  transition: opacity 0.18s linear !important;
}
/* Canvas renderer doesn't use tile elements — keep the pane composited */
.leaflet-canvas-pane canvas {
  will-change: transform;
  transform: translateZ(0);
}
/* Smooth zoom animation */
.leaflet-zoom-anim .leaflet-zoom-animated {
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Leaflet custom pin */
.map-pin {
  width: 16px;
  height: 16px;
  background: var(--accent, #0071bd);
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,113,189,0.3), 0 2px 8px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.map-pin:hover { transform: scale(1.3); }
.map-pin.active {
  background: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.35), 0 2px 8px rgba(0,0,0,0.6);
  transform: scale(1.2);
}

/* Leaflet popup dark theme */
.leaflet-popup-content-wrapper {
  background: rgba(8, 8, 18, 0.96) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
  color: rgba(255,255,255,0.85) !important;
}
.leaflet-popup-tip-container .leaflet-popup-tip {
  background: rgba(8, 8, 18, 0.96) !important;
}
.leaflet-popup-close-button {
  color: rgba(255,255,255,0.4) !important;
}
.leaflet-popup-close-button:hover {
  color: #fff !important;
}
.popup-city {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 0.2rem;
}
.popup-country {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent, #0071bd);
  margin-left: 0.35rem;
}
.popup-address {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  margin-top: 0.4rem;
}
.popup-phone {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  margin-top: 0.3rem;
}

@media (max-width: 767px) {
  #offices-layout {
    flex-direction: column;
    height: auto;
  }
  #india-map {
    height: 300px;
    min-height: 280px;
  }
  #offices-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 300px;
  }
}

.map-fallback-active {
  overflow: hidden;
}

.map-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 62% 45%, rgba(0, 113, 189, 0.22), transparent 22%),
    radial-gradient(circle at 23% 42%, rgba(255, 255, 255, 0.08), transparent 18%),
    #05070a;
  background-size: 64px 64px, 64px 64px, auto, auto, auto;
}

.map-fallback::before {
  content: "Global office map";
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.map-fallback-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.86);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.map-fallback-pin::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent, #0071bd);
  box-shadow: 0 0 0 4px rgba(0,113,189,0.25), 0 0 20px rgba(0,113,189,0.5);
  flex: 0 0 auto;
}

.map-fallback-usa { left: 16%; top: 45%; }
.map-fallback-uk { left: 44%; top: 36%; }
.map-fallback-uae { left: 60%; top: 54%; }
.map-fallback-india { left: 66%; top: 57%; }

@media (max-width: 767px) {
  .map-fallback-pin {
    font-size: 0.62rem;
  }

  .map-fallback-usa { left: 9%; top: 45%; }
  .map-fallback-uk { left: 38%; top: 34%; }
  .map-fallback-uae { left: 54%; top: 54%; }
  .map-fallback-india { left: 58%; top: 64%; }
}

/* ================================
   SERVICES MEGA MENU
   ================================ */

.services-mega {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: calc(100% - 3rem);
  max-width: 1400px;
  z-index: 998;
  background: rgba(3, 3, 3, 0.97);
  border: 1px solid rgba(250, 250, 250, 0.07);
  border-radius: 1.5rem;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.services-mega.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.services-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.897);
}

.services-mega-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.5rem 1.25rem;
  background: rgba(3, 3, 3, 0.97);
  transition: background 0.15s ease;
}

.services-mega-col:hover {
  background: rgba(79, 70, 229, 0.06);
}

.services-mega-service {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3da8f5;
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.services-mega-service:hover {
  color: #fff;
}

.services-mega-modules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.services-mega-modules li {
  font-size: 0.75rem;
  color: rgba(250, 250, 250, 0.68);
  line-height: 1.4;
  cursor: default;
  user-select: none;
}

#navbar .nav-links li.mega-active > a {
  color: var(--text) !important;
}

@media (max-width: 768px) {
  .services-mega {
    display: none !important;
  }
}

/* ================================================
   FUTURISTIC MINIMAL NAV — overrides inline styles
   Uses nav#navbar (specificity 0,1,1) which beats
   the inline <style> nav (0,0,1) on every page.
   ================================================ */

nav#navbar {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: none;
  border-bottom: none;
  padding: 0 3rem;
  height: 68px;
  background: rgba(3, 3, 3, 0);
  box-shadow: none;
  z-index: 1000;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Class toggled by JS on scroll */
nav#navbar.nav-scrolled {
  background: rgba(3, 3, 3, 0.84);
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(79, 70, 229, 0.06);
}

/* Links */
nav#navbar .nav-links a {
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(250, 250, 250, 0.72);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

nav#navbar .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

nav#navbar .nav-links a:hover,
nav#navbar .nav-links a.active {
  color: rgba(250, 250, 250, 0.9);
}

nav#navbar .nav-links a:hover::after,
nav#navbar .nav-links a.active::after {
  transform: scaleX(1);
}

/* CTA button — sharp, slide-fill hover */
nav#navbar .nav-cta {
  border-radius: 3px;
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  padding: 0.52rem 1.35rem;
  border: 1px solid rgba(79, 70, 229, 0.42);
  color: rgba(250, 250, 250, 0.6);
  background: transparent;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.28s ease, border-color 0.28s ease;
}

nav#navbar .nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

nav#navbar .nav-cta:hover {
  border-color: var(--accent);
  color: #fff;
  background: transparent;
}

nav#navbar .nav-cta:hover::before {
  transform: translateX(0);
}

/* Mobile — stay edge-to-edge, override the pill rule */
@media (max-width: 768px) {
  nav#navbar {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 1.25rem !important;
    height: 60px !important;
    border-radius: 0 !important;
    transform: none !important;
    /* Always show a background on mobile — transparent nav
       becomes invisible against page content on scroll */
    background: rgba(3, 3, 3, 0.88) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* FIX: On inner pages the inline <style> has .hamburger{display:none} AFTER
     the @media override, so the cascade hides it on mobile. nav#navbar .hamburger
     has higher specificity (0,1,2,0) than .hamburger (0,0,1,0) and wins regardless
     of source order. */
  nav#navbar .hamburger {
    display: flex !important;
  }

  /* Also hide the desktop links/CTA — they're hidden via inline CSS on most pages
     but this ensures consistency across all pages. */
  nav#navbar .nav-links,
  nav#navbar .nav-cta {
    display: none !important;
  }

  /* Keep the nav-scrolled state consistent on mobile */
  nav#navbar.nav-scrolled {
    background: rgba(3, 3, 3, 0.95) !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.6) !important;
  }

  .mobile-menu {
    top: calc(60px + 0.5rem + var(--safe-top)) !important;
  }
}

/* ================================================
   GLOBAL PERFORMANCE & RENDERING QUALITY
   ================================================ */

/* Smooth font rendering across all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* Prevent layout shift — images always block-level with intrinsic size */
img {
  display: block;
  height: auto;
}

/* GPU compositing layers for elements that animate frequently */
.hero-slide,
.expertise-slide,
.mf-card,
#page-transition,
.mobile-menu,
nav#navbar {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Contain painting for off-screen heavy sections */
/* NOTE: #india-offices intentionally excluded — content-visibility:auto causes Leaflet
   to measure a zero-height container (layout is skipped when off-screen), producing a blank map. */
@supports (content-visibility: auto) {
  footer,
  #cta {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
}

/* Ensure videos never overflow their containers */
video {
  max-width: 100%;
  display: block;
}

/* Smoother scrolling for anchor links (not page scroll-behavior) */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Fix: expertise slides snap feedback on touch */
#expertise-slides {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Prevent text selection during scroll-driven animations */
.expertise-slide,
.hero-slide {
  user-select: none;
  -webkit-user-select: none;
}

/* Fix potential z-index stacking for GSAP-pinned sections */
.gsap-marker-start,
.gsap-marker-end {
  display: none !important;
}

/* ================================================
   GLOBAL BUG FIXES & AUDIT IMPROVEMENTS
   ================================================ */

/*
  FIX: Invalid CSS `border-top: none solid var(--line)` across all pages.
  The shorthand value "none solid ..." is invalid (none is not a valid <line-width>),
  so browsers discard the entire property. This rule restores the intended top border
  on the footer bottom bar. Because the inline <style> value is invalid (discarded),
  this stylesheet rule is the only valid declaration and wins without needing !important.
*/
.footer-bottom {
  border-top: 1px solid var(--line);
}

/*
  FIX: cursor:none on .form-submit breaks touch/pointer feedback for real users.
  The page already uses a custom cursor for non-touch devices; submit buttons must
  show a pointer cursor so users know they are clickable. The !important is required
  because the inline <style> on contact.html sets cursor:none with equal specificity
  and comes later in cascade order.
*/
.form-submit {
  cursor: pointer !important;
}

/*
  FIX: cursor:none on .cta-mega in contact.html hides the system cursor on the
  clickable hero CTA link on touch-fallback and assistive devices.
*/
.cta-mega {
  cursor: pointer !important;
}

/*
  FIX: hero h1 white-space:nowrap causes horizontal overflow on narrow viewports.
  Allow wrapping below 640px so text remains readable on phones.
*/
@media (max-width: 640px) {
  .hero-h1 {
    white-space: normal !important;
    word-break: break-word;
  }
}

/*
  FIX: .mf-card-text uses clamp(2rem, 1.3vw, 1.2rem) which is invalid —
  minimum (2rem) is larger than maximum (1.2rem). Browsers apply the minimum
  value (2rem) unconditionally, making the viewport-relative value useless.
  Corrected to clamp(1.2rem, 2.5vw, 2rem) for proper responsive scaling.
*/
.mf-card-text {
  font-size: clamp(1.2rem, 2.5vw, 2rem) !important;
}

/*
  IMPROVEMENT: Tablet breakpoint (769px–1024px) nav spacing.
  Collapse gap slightly so links don't overflow on smaller laptop screens.
*/
@media (min-width: 769px) and (max-width: 1100px) {
  nav#navbar .nav-links {
    gap: 1.4rem;
  }
  nav#navbar {
    padding: 0 1.75rem;
  }
}

/*
  IMPROVEMENT: Ultra-wide screen containment.
  Prevent the nav from looking detached at ≥1800px.
*/
@media (min-width: 1800px) {
  nav#navbar {
    max-width: 1600px;
    left: 50%;
    transform: translateX(-50%);
  }
  .container {
    max-width: 1600px;
  }
}

/*
  IMPROVEMENT: Print styles — hide nav, animations, cursor elements
  so pages print cleanly.
*/
@media print {
  #cursor-outer,
  #cursor-inner,
  #page-transition,
  #holo-pulse-loader,
  nav,
  .hero-arrow,
  .hero-dots,
  .scroll-indicator,
  .hamburger,
  .mobile-menu {
    display: none !important;
  }

  body {
    cursor: auto !important;
    background: #fff !important;
    color: #000 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/*
  IMPROVEMENT: Better focus-visible ring for keyboard navigation.
  The existing :focus-visible rule is correct; this supplements it with
  a slightly higher-contrast ring color for WCAG AA compliance.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #4da6e0;
  outline-offset: 3px;
  border-radius: 3px;
}

/*
  FIX: Ensure the services floating preview panel never extends beyond
  the right/bottom edge of the viewport on smaller screens.
*/
#service-preview {
  max-width: min(320px, calc(100vw - 2rem));
}

/*
  IMPROVEMENT: Prevent any horizontal scroll bleed from sections with
  will-change or transform that exceed the viewport on iOS Safari.
*/
.manifesto-cards-track {
  -webkit-overflow-scrolling: touch;
}

@media (hover: none), (pointer: coarse) {
  .office-card:hover,
  .office-card.active {
    transform: none;
  }
}

/*
  FIX: iOS Safari sometimes renders backdrop-filter with a flash on first
  paint when the element is off-screen. Force a composite layer to prevent it.
*/
.services-mega {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}


/*
  FIX: On contact.html the form submit button previously had cursor:none
  (fixed above). Also ensure disabled state is visually distinct.
*/
.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/*
  IMPROVEMENT: Reduce motion for scroll-snapping expertise slides.
  When prefers-reduced-motion is active, disable snap and show all slides.
*/
@media (prefers-reduced-motion: reduce) {
  #expertise-slides {
    height: auto !important;
    overflow: visible !important;
  }
  .expertise-slide {
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/*
  IMPROVEMENT: Cap video opacity on low-power devices to spare GPU.
  Detected via the media query (no JS required).
*/
@media (prefers-reduced-motion: reduce) {
  .slide-video,
  .page-hero-video {
    display: none !important;
  }
}

/*
  IMPROVEMENT: Stable line-height for footer links to prevent text
  reflow when font weights change on hover.
*/
.footer-links a {
  line-height: 1.5;
  display: inline-block;
}

/* ================================================
   PAGE HERO HEADING: CENTER ALIGNMENT
   Applies to: services.html, all sub-service pages
   (sap, dynamics, salesforce, servicenow, qa,
   staffing, it-staffing), and contact.html.
   about.html and aixpertz.html are already centered
   via their own inline styles — no changes needed there.
   All other page sections (capabilities, CTA band,
   footer, etc.) are completely unaffected.
   ================================================ */

/* Re-stack .page-hero-inner from horizontal space-between
   to a centered vertical column so the heading sits in
   the middle of the viewport rather than the left half. */
.page-hero .page-hero-inner {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 2rem;
}

/* Eyebrow uses display:flex with a ::before accent line;
   center that row so the line marker + label are symmetric. */
.page-hero .page-eyebrow {
  justify-content: center;
}

/* Page title (used on contact.html as a standalone h1
   and inside .page-hero-inner on all other pages). */
.page-hero .page-title {
  text-align: center;
}

/* Description text: widen max-width now it's centered
   instead of squeezed into the right flex column. */
.page-hero .page-desc {
  max-width: 600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* hero-right (decorative oversized service number + tags
   on sub-service pages): center it in the new column flow. */
.page-hero .hero-right {
  text-align: center;
  align-self: center;
  width: 100%;
}

/* hero-tags inside hero-right: center the pill row. */
.page-hero .hero-tags {
  justify-content: center;
}

/* Mobile: keep centering consistent (inline styles set
   align-items: flex-start at ≤768px — override that). */
@media (max-width: 768px) {
  .page-hero .page-hero-inner {
    align-items: center !important;
  }
  .page-hero .hero-right {
    text-align: center;
  }
}

/* ================================================
   PORTRAIT MODE — Mobile Navigation & Layout
   Ensures the hamburger and mobile menu work
   correctly in both portrait and landscape on all
   phones and tablets.
   ================================================ */

/* Portrait phones: narrow viewport, tall height */
@media (max-width: 768px) and (orientation: portrait) {
  nav#navbar {
    /* Use actual viewport height offset so the nav never overlaps notch */
    top: 0 !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    align-items: flex-end !important;
    padding-bottom: 0 !important;
  }

  .mobile-menu {
    top: calc(60px + env(safe-area-inset-top, 0px) + 0.5rem) !important;
  }

  /* Hero section fills exactly the visual viewport in portrait */
  #hero,
  .split-left,
  .page-hero {
    height: var(--full-vh, 100vh) !important;
    min-height: var(--full-vh, 100vh) !important;
  }
}

/* Landscape phones (short height, wide): keep nav usable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  nav#navbar {
    height: 52px !important;
  }

  /* Mobile menu: scrollable, capped height so it doesn't overflow */
  .mobile-menu {
    top: calc(52px + 0.4rem + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100vh - 52px - 1rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #hero,
  .page-hero {
    height: var(--full-vh, 100vh) !important;
    min-height: var(--full-vh, 100vh) !important;
  }
}

/* ================================================
   CROSS-BROWSER SAFE-AREA & VIEWPORT FIXES
   Ensures the site renders correctly on:
   - iOS Safari (notch, home bar)
   - Android Chrome (dynamic address bar)
   - Samsung Internet
   - Firefox Mobile
   ================================================ */

/* Prevent overscroll bounce from exposing the background colour on iOS */
html {
  overscroll-behavior-y: none;
  /* Older Safari fallback before overscroll-behavior was widely supported */
  -webkit-overflow-scrolling: auto;
}

/* Allow scrolling on the page itself */
body {
  overscroll-behavior-y: auto;
}

/* Safe-area bottom padding for footer so content isn't hidden by home bar */
footer {
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}

/* ================================================
   GLOBAL MAP SECTION SMOOTHNESS
   ================================================ */

/* Prevent the map container from causing layout shifts */
#offices-layout {
  contain: layout style;
}

/* Leaflet attribution — ensure it's always readable */
.leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(0,0,0,0.55) !important;
  color: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.leaflet-control-attribution a {
  color: rgba(255,255,255,0.65) !important;
}

/* Ensure popup renders sharply on retina */
.leaflet-popup-content-wrapper {
  -webkit-font-smoothing: antialiased;
}

/* ================================================
   CROSS-BROWSER TOUCH & INTERACTION FIXES
   ================================================ */

/* Prevent 300ms tap delay on all interactive elements (safe on modern browsers) */
a, button, [role="button"], .hamburger, .office-card, .hero-dot, .hero-arrow {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure the mobile menu is never accidentally cropped on small phones */
.mobile-menu {
  max-height: calc(var(--full-vh, 100vh) - 70px - env(safe-area-inset-top, 0px) - 0.5rem);
  overflow-y: auto;
  z-index: 1001;
}

/* Remove the double-tap zoom on the logo link — harmless on desktop */
.nav-logo, .footer-brand {
  touch-action: manipulation;
}

/* ================================================
   FIREFOX & SAFARI SPECIFIC FIXES
   ================================================ */

/* Firefox: backdrop-filter has been behind a flag — solid fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu {
    background: rgba(3, 3, 3, 0.98) !important;
  }
}

/* Safari 14 and below: gap in flex containers not fully supported */
@supports not (gap: 1rem) {
  .nav-links li + li { margin-left: 2.5rem; }
  .hero-actions > * + * { margin-left: 1rem; }
  .ex-caps > * + * { margin-left: 0.55rem; }
  .footer-links li + li { margin-top: 0.8rem; }
}