/* =========================================================================
   NETWET — RESPONSIVE PATCH LAYER
   This file adds responsive behaviour ON TOP of the original page's own
   inline styles. It changes NOTHING at desktop width (>=1025px) except
   where explicitly scoped to a max-width query — the original design's
   exact colours, spacing, gradients and typography are untouched.
   Breakpoints: mobile <=640px, tablet 641-1024px, desktop >=1025px.
   ========================================================================= */

/* Never allow horizontal scroll, at any width (fallback net, not the fix) */
html, body { overflow-x: hidden; max-width: 100%; }
#nw-shell { overflow-x: hidden; }
img, svg, canvas, iframe, table { max-width: 100%; }

/* ---------- Tap targets: 44x44 minimum on real controls ---------- */
.nw-hamburger, .nw-drawer-close, .nw-drawer a, .nw-drawer button,
#nw-shell nav a, #nw-shell form button, #nw-shell form input[type="submit"] {
  min-height: 44px;
}

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

/* ---------- Hamburger + mobile drawer (new — hidden on desktop) ---------- */
.nw-hamburger { display: none; }
.nw-drawer { display: none; }

@media (max-width: 1024px) {
  #nw-shell { min-width: 0 !important; }

  /* Hide the original desktop nav-link row + its mega/company/resources
     panels (they're 1200px/760px absolute panels — meant for a desktop
     viewport) and the desktop "Let's Talk" button; the drawer below
     replaces all of it with equivalent links. */
  .nw-navbar > div:nth-of-type(1),   /* the nav-links row */
  .nw-navbar > a:last-of-type {      /* desktop CTA button, if present */
    display: none !important;
  }
  .nw-hamburger {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff;
  }
  .nw-hamburger svg { display: block; }
  .nw-hamburger .nw-icon-close { display: none; }
  .nw-hamburger[aria-expanded="true"] .nw-icon-open { display: none; }
  .nw-hamburger[aria-expanded="true"] .nw-icon-close { display: block; }

  .nw-drawer {
    display: block;
    position: fixed; inset: 0; z-index: 999;
    visibility: hidden;
  }
  .nw-drawer[data-open="true"] { visibility: visible; }
  .nw-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(2,7,15,.72);
    opacity: 0; transition: opacity .3s ease;
  }
  .nw-drawer[data-open="true"] .nw-drawer-backdrop { opacity: 1; }
  .nw-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(360px, 86vw);
    background: linear-gradient(180deg,#04101f,#02070f);
    border-left: 1px solid rgba(34,211,238,.14);
    padding: 16px 16px 28px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .nw-drawer[data-open="true"] .nw-drawer-panel { transform: translateX(0); }
  .nw-drawer-close {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #fff;
    margin-left: auto;
  }
  .nw-drawer a { color: #c2d4e2; text-decoration: none; }
  .nw-drawer-link {
    display: flex; align-items: center; min-height: 44px;
    padding: 10px 6px; font-size: 15px; font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nw-accordion-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 10px 6px; background: transparent; border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #c2d4e2; font-size: 15px; font-weight: 500; font-family: inherit;
  }
  .nw-accordion-trigger[aria-expanded="true"] { color: #22d3ee; }
  .nw-accordion-trigger .chev { transition: transform .25s ease; }
  .nw-accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .nw-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
  .nw-accordion-panel[data-open="true"] { grid-template-rows: 1fr; }
  .nw-accordion-panel > div { overflow: hidden; }
  .nw-accordion-item {
    display: block; min-height: 44px; padding: 9px 6px 9px 16px; font-size: 13.5px; color: #9db4c8;
  }
  .nw-drawer-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin-top: 16px; padding: 12px 18px; border-radius: 22px;
    background: linear-gradient(95deg,#28d7ef,#0b8fc0); color: #022331!important; font-weight: 600; font-size: 14px;
  }
}

/* ---------- Desktop-only mega panels must never affect tablet/mobile flow ---------- */
@media (max-width: 1024px) {
  .nw-menu > div:nth-of-type(1) { display: none !important; }
}

/* ---------- Grid collapsing (auto-tagged via data-nw-cols) ----------
   Using display:flex (not grid-template-columns:1fr) so that any
   decorative child already hidden via display:none (e.g. the Process
   section's connector arrows, below) is cleanly skipped instead of
   leaving an orphaned empty track that misaligns the remaining items. */
@media (max-width: 640px) {
  [data-nw-cols] { display: flex !important; flex-direction: column !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  [data-nw-cols="2"] { display: flex !important; flex-direction: column !important; }
  [data-nw-cols] { display: flex !important; flex-wrap: wrap !important; }
  [data-nw-cols]:not([data-nw-cols="2"]) > * { flex: 1 1 260px !important; }
}

/* Process section: hide the decorative connector arrows below desktop —
   they only make sense between fixed-width columns in a single row.
   Uses a stable class (added at build time) rather than an inline-style
   substring match, since JS touching .style on these elements (the
   reveal-stagger delay) rewrites the whole style attribute and would
   silently break a [style*="..."] selector. */
@media (max-width: 1024px) {
  .nw-process-arrow { display: none !important; }
}

/* ---------- Process section: numbered badge + responsive card treatment ---------- */
.process-step-icon { position: relative; }
.process-step-num {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(95deg, #28d7ef, #0b8fc0);
  color: #022331;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(21, 169, 209, .45);
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Once the (now correctly hidden) arrows stop taking a flex slot, the
     5 steps wrap into a tidy 3+2 — give each a light card treatment so
     they read as a set rather than text floating in empty space. */
  .process-step {
    padding: 22px 16px 24px !important;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    transition: transform .3s ease, border-color .3s ease;
  }
  .process-step:hover {
    transform: translateY(-4px);
    border-color: rgba(34,211,238,.3);
  }
}

@media (max-width: 640px) {
  /* A centered, fully-stacked block per step leaves large empty margins
     either side of a narrow column of text. A left-aligned row with a
     connecting line reads as an intentional timeline instead. */
  .process-grid { gap: 0; }
  .process-step {
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding: 0 4px 32px !important;
    position: relative;
  }
  .process-step-icon { grid-row: 1 / 3; grid-column: 1; }
  .process-step-title { grid-column: 2; grid-row: 1; margin-top: 0 !important; padding-top: 10px; }
  .process-step-desc {
    grid-column: 2; grid-row: 2;
    margin: 8px 0 0 0 !important;
    max-width: none !important;
    text-align: left !important;
  }
  .process-step:last-child { padding-bottom: 4px !important; }
  .process-step::before {
    content: "";
    position: absolute;
    left: 37px;
    top: 76px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(34,211,238,.35), rgba(34,211,238,.05));
  }
  .process-step:last-child::before { display: none; }
}


/* Newsletter: the email input has a hard-coded 250px width and its
   parent row doesn't wrap — both overflow a phone screen. */
@media (max-width: 640px) {
  input[style*="width:250px"] { width: 100% !important; }
  #nw-shell div[style*="display:flex;gap:10px"] { flex-wrap: wrap !important; width: 100% !important; }
  #nw-shell div[style*="display:flex;gap:10px"] > button { width: 100% !important; }
}

/* ---------- Wide fixed-px elements (auto-tagged .nw-fluid) ---------- */
@media (max-width: 1024px) {
  .nw-fluid { max-width: 100% !important; }
  /* Perfect circles (orbit rings etc.) must keep width==height as they
     shrink, or capping just the width would squash them into ovals. */
  .nw-fluid[style*="border-radius:50%"] { height: auto !important; aspect-ratio: 1 / 1 !important; }
}

/* ---------- Section horizontal padding: original uses "padding:0 40px"
   (or "16px 40px" for the nav) sized for >=1280px containers; scale it
   down precisely on that exact property so phones/tablets aren't
   crushed against the edge. Matches the exact padding declaration only
   — NOT any inline style that merely contains "40px" elsewhere, which
   would risk touching unrelated properties (e.g. margins) on elements
   that were never meant to get padding. ---------- */
@media (max-width: 1024px) {
  #nw-shell [style*="padding:16px 40px"],
  #nw-shell [style*="padding: 16px 40px"] { padding: 14px 18px !important; }
}
@media (max-width: 640px) {
  #nw-shell [style*="padding:0 40px"],
  #nw-shell [style*="padding: 0 40px"] { padding-left: 18px !important; padding-right: 18px !important; }
  #nw-shell [style*="0 auto;padding:0 40px"] { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  #nw-shell [style*="padding:0 40px"],
  #nw-shell [style*="padding: 0 40px"] { padding-left: 28px !important; padding-right: 28px !important; }
}

/* ---------- Hero stat bar: 2x2 grid on mobile (not a 4-row stack) ---------- */
@media (max-width: 640px) {
  [data-nw-cols].nw-stat-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .nw-stat-bar > div { border-right: 1px solid rgba(120,170,200,.13) !important; padding: 14px 6px !important; }
  .nw-stat-bar > div:nth-child(2n) { border-right: 0 !important; }
  .nw-stat-bar > div:nth-child(-n+2) { border-bottom: 1px solid rgba(120,170,200,.13) !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  [data-nw-cols].nw-stat-bar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
  .nw-stat-bar > div { border-right: 1px solid rgba(120,170,200,.13) !important; }
  .nw-stat-bar > div:nth-child(2n) { border-right: 0 !important; }
  .nw-stat-bar > div:nth-child(-n+2) { border-bottom: 1px solid rgba(120,170,200,.13) !important; }
}

/* ---------- Industries carousel: dot buttons are visually a thin 4px
   pill, well under the 44x44 tap-target minimum — enlarge the invisible
   hit area without changing how they look. ---------- */
button[data-ind-dot] { position: relative; }
button[data-ind-dot]::after {
  content: "";
  position: absolute;
  top: -18px; bottom: -18px; left: -10px; right: -10px;
}


/* ---------- Orbit stage / large fixed-height decorative sections:
   scale their height down so they don't dominate a phone screen.
   (Their internal absolutely-positioned children are already flagged
   .nw-fluid where they had hard px widths; this just shrinks the stage.) */
@media (max-width: 1024px) {
  #nw-shell [style*="height:700px"] { height: 60vw !important; min-height: 360px !important; }
}