/* ============================================================
   Whiteshield — mobile / responsive layer  (shared, all pages)
   Adds a full-screen overlay nav ≤1080px + responsive refinements.
   Loads AFTER the page's inline <style> blocks, so equal-specificity
   rules win by cascade order; !important reserved for a few overrides.
   ============================================================ */

/* ---------- hamburger button ---------- */
.ws-burger{
  display:none;                 /* shown ≤1080 */
  position:relative;
  width:44px; height:44px;
  margin-left:auto;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  background:none; border:0; padding:0; cursor:pointer;
  color:#fff;                   /* dark-nav default */
  -webkit-tap-highlight-color:transparent;
}
.nav--light .ws-burger{ color:#102434; }
.ws-burger span{
  display:block; width:24px; height:2px;
  background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .2s ease;
}
.ws-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ws-burger.is-open span:nth-child(2){ opacity:0; }
.ws-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- full-screen overlay menu ---------- */
.ws-mnav{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column;
  padding:18px 26px 30px;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(36,182,209,0.14), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(20,58,98,0.30), transparent 60%),
    #021825;
  color:#fff;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.ws-mnav::before{                       /* faint dotted field, echoes the hero */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(150,182,212,0.16) 1px, transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 12%, #000 6%, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 60% at 70% 12%, #000 6%, transparent 70%);
  opacity:.5;
}
.ws-mnav.open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .32s ease, transform .32s ease, visibility 0s;
}
.ws-mnav > *{ position:relative; z-index:1; }

.ws-mnav-head{
  display:flex; align-items:center; justify-content:space-between;
  height:60px; flex:0 0 auto;
}
.ws-mnav-logo img{ height:28px; width:auto; display:block; }
.ws-mnav-close{
  width:44px; height:44px; position:relative;
  background:none; border:0; padding:0; cursor:pointer; color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.ws-mnav-close span{
  position:absolute; left:50%; top:50%; width:24px; height:2px;
  background:currentColor; border-radius:2px;
}
.ws-mnav-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.ws-mnav-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }

/* link list */
.ws-mnav-links{
  display:flex; flex-direction:column;
  margin-top:18px; flex:1 1 auto;
}
.ws-mnav-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  font-family:var(--serif, "Source Serif 4", Georgia, serif);
  font-weight:500;
  font-size:clamp(23px, 6.4vw, 32px);
  letter-spacing:-0.01em;
  color:#fff;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.10);
  opacity:0; transform:translateX(-14px);
  transition:opacity .45s ease, transform .45s ease, color .2s ease;
}
.ws-mnav-link.active{ color:var(--turq, #24B6D1); }
.ws-mnav-link .ws-ext{ font-style:normal; font-size:.62em; color:rgba(255,255,255,0.45); }
.ws-mnav.open .ws-mnav-link{ opacity:1; transform:none; }
.ws-mnav.open .ws-mnav-link:nth-child(1){ transition-delay:.06s; }
.ws-mnav.open .ws-mnav-link:nth-child(2){ transition-delay:.10s; }
.ws-mnav.open .ws-mnav-link:nth-child(3){ transition-delay:.14s; }
.ws-mnav.open .ws-mnav-link:nth-child(4){ transition-delay:.18s; }
.ws-mnav.open .ws-mnav-link:nth-child(5){ transition-delay:.22s; }
.ws-mnav.open .ws-mnav-link:nth-child(6){ transition-delay:.26s; }
.ws-mnav.open .ws-mnav-link:nth-child(7){ transition-delay:.30s; }
.ws-mnav.open .ws-mnav-link:nth-child(8){ transition-delay:.34s; }
.ws-mnav.open .ws-mnav-link:nth-child(9){ transition-delay:.38s; }

/* dropdown group inside the overlay (e.g. Technology) */
.ws-mnav-group-label{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.42);
  padding:16px 0 4px; border-bottom:1px solid rgba(255,255,255,0.10);
  opacity:0; transform:translateX(-14px);
  transition:opacity .45s ease, transform .45s ease;
}
.ws-mnav.open .ws-mnav-group-label{ opacity:1; transform:none; transition-delay:.10s; }
.ws-mnav-link.sub{
  font-size:clamp(18px, 5vw, 24px);
  font-weight:500;
  padding-left:18px;
  color:rgba(255,255,255,0.88);
}

/* contact CTA */
.ws-mnav-foot{ flex:0 0 auto; padding-top:22px; }
.ws-mnav-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  font-family:var(--mono, "IBM Plex Mono", monospace);
  font-size:14px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:#021825; background:var(--turq, #24B6D1);
  padding:18px 24px;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease .4s, transform .4s ease .4s, filter .2s ease;
}
.ws-mnav.open .ws-mnav-cta{ opacity:1; transform:none; }
.ws-mnav-cta span{ transition:transform .2s ease; }
.ws-mnav-cta:active span{ transform:translateX(3px); }

body.ws-noscroll{ overflow:hidden !important; }

@media (prefers-reduced-motion: reduce){
  .ws-mnav, .ws-mnav-link, .ws-mnav-cta, .ws-burger span{ transition-duration:.001s !important; }
  .ws-mnav-link, .ws-mnav-cta{ transform:none !important; }
}

/* ============================================================
   Responsive layout refinements
   ============================================================ */

@media (max-width:1080px){
  .nav-links{ display:none !important; }   /* desktop inline links → overlay */
  .ws-burger{ display:flex; }
}
@media (min-width:1081px){
  .ws-burger{ display:none !important; }
  .ws-mnav{ display:none !important; }
}

/* tablet / large-phone */
@media (max-width:760px){
  html, body{ overflow-x:hidden; }
  img, video, canvas, svg, table, iframe{ max-width:100%; }

  section{ padding-top:64px; padding-bottom:64px; }

  .hero{ min-height:auto; }
  .hero-content{ padding-top:118px; padding-bottom:54px; }
  .phero{ min-height:auto; }
  .phero .wrap{ padding-top:118px; }

  .head-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .head-row .all-link{ white-space:normal; }

  /* tighter floating-nav pill on phones */
  .nav{ padding:12px 16px; }
  .nav-inner{ padding-left:18px; padding-right:10px; }

  .foot-base{ flex-direction:column; align-items:flex-start; }
}

/* small phone */
@media (max-width:430px){
  .wrap{ padding:0 20px; }
  .strip-inner, .strip-inner.cols-3{ grid-template-columns:1fr !important; }
  .sstat{ padding:30px 24px; }
  .ws-mnav{ padding:16px 20px 26px; }
}
