/* ============================================================
   Site-wide responsive layer + premium interaction polish.
   Loaded on every page alongside the existing inline styles —
   uses !important + attribute selectors since the page markup
   is entirely inline-styled.
   ============================================================ */

html, body { overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

/* the mobile-menu's cloned "Get in touch" button only shows below 860px
   (see the .site-nav-mobile-cta rule in that media query) — hidden here
   by default so it doesn't duplicate the real header button on desktop. */
.site-nav-mobile-cta { display: none !important; }

/* The header (and its Capabilities/Markets dropdowns) must always render
   above page content below it. Cards use backdrop-filter, which creates
   its own stacking layer — without this, a card positioned right under
   the nav can end up painting over an open dropdown. Pinning the whole
   header to a very high z-index guarantees it always wins. */
.site-header { position: relative !important; z-index: 1000 !important; }

/* ---------- Fluid typography (every page, every breakpoint) ---------- */
h1 { font-size: clamp(28px, 7vw, 64px) !important; line-height: 1.1 !important; }
h2 { font-size: clamp(22px, 4.4vw, 36px) !important; line-height: 1.2 !important; }
h3 { font-size: clamp(16px, 3.2vw, 20px) !important; }

/* ---------- Premium hover polish (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  [style*="backdrop-filter"] {
    transition: transform .35s cubic-bezier(.16,.8,.24,1), box-shadow .35s ease, border-color .35s ease;
  }
  [style*="backdrop-filter"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(0,0,0,0.38);
    border-color: rgba(255,255,255,0.32) !important;
  }
  a { transition: opacity .25s ease, transform .2s ease; }
  a[style*="border-radius:20px"]:hover,
  a[style*="border-radius:24px"]:hover,
  a[style*="border-radius:14px"]:hover {
    transform: translateY(-2px) scale(1.03);
  }

  /* Nav pills/dropdown triggers use backdrop-filter too, but shouldn't lift
     on hover — that shift broke the hover path into the dropdown menu. */
  .site-header [style*="backdrop-filter"]:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ---------- Mobile navigation (hamburger) ---------- */
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  flex-shrink: 0;
}
.site-nav-toggle span,
.site-nav-toggle span::before,
.site-nav-toggle span::after {
  display: block;
  width: 16px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  position: relative;
  transition: transform .25s ease, opacity .25s ease;
}
.site-nav-toggle span::before,
.site-nav-toggle span::after { content: ""; position: absolute; left: 0; }
.site-nav-toggle span::before { top: -5px; }
.site-nav-toggle span::after { top: 5px; }
.site-header.site-nav-open .site-nav-toggle span { background: transparent; }
.site-header.site-nav-open .site-nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
.site-header.site-nav-open .site-nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr auto !important; }
  .site-nav-toggle { display: flex !important; }
  .site-header > a[href*="contact"] { display: none !important; }

  .site-nav-menu {
    position: fixed !important;
    top: 64px;
    left: 12px;
    right: 12px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    background: rgba(6,11,24,0.97) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
    z-index: 999;
    box-sizing: border-box !important;
  }
  .site-header.site-nav-open .site-nav-menu {
    max-height: 70vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    padding: 12px !important;
  }
  .site-nav-menu a,
  .site-nav-menu .nav-drop > span {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }
  .site-nav-menu .nav-drop-menu {
    position: static !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.05) !important;
    margin-top: 4px;
  }
  .site-nav-menu .nav-drop.site-nav-drop-open .nav-drop-menu { display: flex !important; flex-direction: column !important; }

  .site-header a[href*="contact"].site-nav-mobile-cta {
    display: flex !important;
    margin: 6px 4px 2px 4px !important;
    justify-content: center !important;
  }
}

/* ---------- Layout collapse for grids/columns ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  [style*="display:flex;gap:48px"] {
    flex-wrap: wrap !important;
  }
  [style*="padding:80px 32px"] { padding: 48px 20px !important; }
  [style*="padding:56px 32px 32px 32px"] { padding: 36px 20px 24px 20px !important; }
  [style*="padding:24px 32px 80px 32px"] { padding: 20px 20px 48px 20px !important; }
}

@media (max-width: 560px) {
  /* Card/icon grids (stats, industries, certifications, sector cards,
     facility photos, etc.) stay locked at 2 per row on every phone size —
     they never collapse further down to a single column. */
  [style*="width:210px"] { width: calc(50% - 10px) !important; max-width: none !important; }
  [style*="width:280px"] { width: 100% !important; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  [style*="backdrop-filter"], a { transition: none !important; }
}