/* =========================================================
   Western Ark — Shared Stylesheet
   Design tokens live at the top; every color/spacing choice
   downstream derives from these.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800&display=swap');

:root{
  /* ---- Color: Western Ark blue system ---- */
  --blue-900:#0A1E42;      /* deepest navy — header/footer, hero overlay */
  --blue-800:#0F2C5C;
  --blue-700:#12417A;      /* headline blue on light bg */
  --blue-600:#0B63C9;      /* primary brand blue — CTAs, links, accents */
  --blue-500:#2E90E5;      /* hover / lighter interactive blue */
  --blue-100:#E7F1FC;      /* faint blue tint for card fills */
  --gray-50:#F5F6F7;       /* section background */
  --gray-100:#EEF0F2;
  --gray-200:#E1E4E8;      /* hairline dividers */
  --gray-400:#9AA3AD;
  --gray-500:#6B7480;      /* secondary / muted text */
  --gray-700:#3C4550;
  --ink:#161B22;           /* primary text, near-black */
  --white:#FFFFFF;
  --gold:#C9962C;          /* single warm accent — used sparingly for emphasis */

  /* ---- Type ---- */
  --font-base: "Nunito Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* ---- Layout ---- */
  --container: 1180px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(10,30,66,0.06), 0 8px 24px -12px rgba(10,30,66,0.18);
  --shadow-hover: 0 10px 30px -10px rgba(10,30,66,0.28);
  --header-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--blue-600);
  outline-offset:3px;
}

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

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* ---------------------------------------------------------
   Typography scale
   --------------------------------------------------------- */
h1,h2,h3,h4{
  font-weight:600;
  color:var(--blue-900);
  line-height:1.15;
  margin:0 0 16px;
  letter-spacing:-0.01em;
}
p{ margin:0 0 16px; color:var(--gray-700); font-size:0.98rem; }
h1{ font-size:clamp(1.95rem, 3vw, 3rem); font-weight:600; letter-spacing:-0.03em; }
h2{ font-size:clamp(1.45rem, 2.15vw, 2rem); }
h3{ font-size:1.08rem; }
h4{ font-size:0.95rem; }
.lede{ font-size:1.04rem; color:var(--gray-700); font-weight:400; line-height:1.6; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--blue-600);
  display:inline-block;
}

.section{ padding:88px 0; }
.section--tight{ padding:64px 0; }
.section--alt{ background:var(--gray-50); }
.section--navy{ background:var(--blue-900); color:var(--white); }
.section--navy h2, .section--navy h3{ color:var(--white); }
.section--navy p{ color:#CDE4FA; }

.section-head{
  max-width:720px;
  margin:0 0 48px;
}
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }

.divider{
  height:1px;
  background:var(--gray-200);
  border:0;
  margin:0;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:var(--radius-sm);
  font-size:0.95rem;
  font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue-600); color:var(--white); }
.btn-primary:hover{ background:var(--blue-500); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,0.55); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,0.12); border-color:var(--white); }
.btn-outline-dark{ background:transparent; border-color:var(--blue-600); color:var(--blue-600); }
.btn-outline-dark:hover{ background:var(--blue-100); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:0.85rem; }

/* ---------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:3000;
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--gray-200);
  height:var(--header-h);
}
.site-header .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:0;
  font-weight:700;
  font-size:1rem;
  color:var(--blue-900);
  letter-spacing:-0.01em;
}
.brand-mark{
  width:184px; height:48px;
  background:url('../assets/wa-logo-blue.png') center / contain no-repeat;
  flex:none;
}
.brand > span:last-child{ display:none; }
.brand small{
  display:block;
  font-weight:400;
  font-size:0.62rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--gray-500);
}

.nav-primary{ display:flex; align-items:center; gap:2px; }
.nav-primary > li{ position:relative; }
.nav-link{
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 16px;
  font-size:0.92rem;
  font-weight:600;
  color:var(--blue-900);
  border-radius:var(--radius-sm);
  transition:color 0.15s ease, background 0.15s ease;
}
.nav-link:hover, .nav-link:focus-visible{ color:var(--blue-600); background:var(--blue-100); }
.nav-primary > li.is-active > .nav-link{ color:var(--blue-600); }
.caret{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform 0.18s ease; }
.has-dropdown:hover .caret{ transform:rotate(225deg); margin-top:2px; }

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:300px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  color:var(--blue-900);
}
.dropdown li a span.sub{ font-size:0.78rem; color:var(--gray-500); font-weight:400; }
.dropdown li a:hover{ background:var(--blue-100); color:var(--blue-600); }
.dropdown .dropdown-group-label{
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gray-400); padding:10px 14px 4px;
}
.dropdown .dropdown-divider{ height:1px; background:var(--gray-200); margin:6px 4px; }

/* ---- Mega menu (Services / Products) ---- */
.mega{
  position:absolute;
  top:100%;
  left:50%;
  min-width:760px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hover);
  padding:20px;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 6px);
  transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index:3100;
}
.mega--sm{ min-width:460px; }
.mega--lg{ min-width:920px; }
.has-mega:hover .mega,
.has-mega:focus-within .mega{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.mega-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 220px;
  gap:4px 20px;
}
.mega--sm .mega-inner{ grid-template-columns:1fr 200px; }
.mega--lg .mega-inner{ grid-template-columns:repeat(3, minmax(0,1fr)) 230px; }
.mega-col{ display:flex; flex-direction:column; gap:2px; }
.mega-link{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:8px 8px;
  border-radius:var(--radius-sm);
  color:var(--blue-900);
}
.mega-link:hover, .mega-link:focus-visible{ background:var(--blue-100); color:var(--blue-600); }
.mega-link-icon{
  flex:none;
  width:32px; height:32px;
  border-radius:9px;
  background:var(--blue-100);
  color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
}
.mega-link-icon:not(:has(svg)){
  font-size:0.67rem;
  font-weight:700;
  letter-spacing:-0.04em;
}
.mega-link-icon svg{ width:17px; height:17px; }
.mega-link:hover .mega-link-icon{ background:var(--blue-600); color:var(--white); }
.mega-link-text{ display:flex; flex-direction:column; gap:2px; padding-top:2px; }
.mega-link-text strong{ font-size:0.9rem; line-height:1.25; }
.mega-link-text .sub{ font-size:0.74rem; color:var(--gray-500); font-weight:400; line-height:1.25; }
.mega-spotlight{
  background:linear-gradient(160deg, var(--blue-900), var(--blue-700));
  border-radius:var(--radius-md);
  align-self:start;
  padding:18px;
  color:var(--white);
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:flex-start;
  min-width:0;
}
.mega-spotlight-eyebrow{ font-size:0.68rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:#BFDBFE; }
.mega-spotlight h4{ font-size:1.02rem; margin:0; color:var(--white); line-height:1.3; }
.mega-spotlight p{ font-size:0.78rem; color:rgba(255,255,255,0.82); margin:0 0 4px; line-height:1.35; }
.mega-spotlight .btn{
  align-self:stretch;
  width:100%;
  white-space:normal;
  text-align:center;
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-sm);
  background:var(--white);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

.header-actions .btn-primary .short{
  display:none;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(46,144,229,0.30), transparent 60%),
    linear-gradient(180deg, var(--blue-900) 0%, #123661 100%);
  color:var(--white);
  overflow:hidden;
  padding:96px 0 110px;
  isolation:isolate;
}

.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:-28%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%, rgba(90,190,255,0.20), transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(46,144,229,0.18), transparent 20%),
    radial-gradient(circle at 72% 78%, rgba(46,144,229,0.16), transparent 26%);
  opacity:0.88;
  transform:translate3d(0,0,0);
  animation:hero-sweep 26s ease-in-out infinite alternate;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,0.14) 0 3px, transparent 4px),
    radial-gradient(circle at 24% 62%, rgba(255,255,255,0.10) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,0.12) 0 3px, transparent 4px),
    radial-gradient(circle at 96% 55%, rgba(255,255,255,0.08) 0 2px, transparent 3px);
  pointer-events:none;
  animation:hero-dots-drift 18s ease-in-out infinite alternate;
}

/* Layer 1 — slow-drifting circuit/contour lines, echoing the logo's
   circuit-board + topographic shield motif */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-bg svg{
  position:absolute;
  top:50%; left:50%;
  width:1500px;
  max-width:none;
  height:auto;
  transform:translate(-50%,-50%);
  opacity:0.55;
  transform-origin:50% 50%;
  animation:hero-drift 34s ease-in-out infinite;
}
.hero-bg .contour{
  fill:none;
  stroke:rgba(255,255,255,0.10);
  stroke-width:1.4;
}
.hero-bg .contour.alt{ stroke:rgba(90,190,255,0.16); }
.hero-bg .node{ fill:rgba(90,190,255,0.5); }
.hero-bg .node.dim{ fill:rgba(255,255,255,0.35); }
.hero-bg .wire{
  fill:none;
  stroke:rgba(255,255,255,0.14);
  stroke-width:1.2;
  stroke-dasharray:3 7;
}
.hero-bg .wire,
.hero-bg .node{ display:none; }

/* Layer 2 — soft moving light washes for depth */
.hero-glow{
  position:absolute;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(560px 360px at 20% 20%, rgba(46,144,229,0.35), transparent 65%),
    radial-gradient(620px 420px at 85% 75%, rgba(90,190,255,0.16), transparent 60%);
  animation:hero-glow-move 22s ease-in-out infinite alternate;
}
.hero-grid{ position:relative; z-index:1; }

@keyframes hero-drift{
  0%   { transform:translate(-50%,-50%) scale(1.03) rotate(-0.7deg) skewX(-0.8deg); }
  25%  { transform:translate(-47%,-53%) scale(1.07) rotate(0.8deg) skewX(1.1deg); }
  50%  { transform:translate(-51%,-48%) scale(1.04) rotate(-0.2deg) skewX(-0.9deg); }
  75%  { transform:translate(-48%,-51%) scale(1.08) rotate(0.7deg) skewX(0.9deg); }
  100% { transform:translate(-50%,-50%) scale(1.03) rotate(-0.7deg) skewX(-0.8deg); }
}
@keyframes hero-glow-move{
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(-3%,2%) scale(1.06); }
}
@keyframes hero-sweep{
  0%   { transform:translate3d(-1.5%, -1%, 0) scale(1); }
  50%  { transform:translate3d(1.25%, 1.5%, 0) scale(1.04); }
  100% { transform:translate3d(-0.5%, 0.75%, 0) scale(1.02); }
}
@keyframes hero-dots-drift{
  0%   { background-position:0 0, 0 0, 0 0, 0 0; }
  100% { background-position:16px 10px, -12px 8px, 8px -6px, 0 0; }
}
@keyframes hero-float{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(2.5%, -1.5%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg svg, .hero-glow, .hero::before, .hero::after, .page-hero::before{ animation:none; }
}
@media (max-width:760px){
  .hero-bg svg{ width:1100px; opacity:0.36; animation-duration:38s; }
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:#6FD3FF;
  margin-bottom:18px;
}
.hero h1{ color:var(--white); margin-bottom:20px; }
.hero .lede{ color:#D8E8FB; max-width:540px; margin-bottom:34px; font-size:1.06rem; }
.hero-actions{
  display:flex;
  gap:16px;
  row-gap:16px;
  flex-wrap:wrap;
  margin-top:24px;
}
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
  color:#AFC9E7;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.hero-proof span{
  padding-right:10px;
  border-right:1px solid rgba(255,255,255,0.22);
}
.hero-proof span:last-child{ border-right:0; }

.hero-panel{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-lg);
  padding:28px;
  backdrop-filter:blur(6px);
}
.hero-panel-row{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 4px;
}
.hero-panel-row + .hero-panel-row{ border-top:1px solid rgba(255,255,255,0.12); }
.hero-icon{
  flex:none; width:38px; height:38px; border-radius:8px;
  background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
}
.hero-panel-row h4{ color:var(--white); margin:0 0 4px; font-size:0.98rem; }
.hero-panel-row p{ color:#CDE4FA; margin:0; font-size:0.88rem; }
.manufacturing-map{
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(7,25,56,0.28);
}
.map-label{
  color:#8EDBFF;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.13em;
  text-transform:uppercase;
  margin-bottom:28px;
}
.process-track{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.process-track::before{
  content:"";
  position:absolute;
  left:11%;
  right:11%;
  top:21px;
  height:1px;
  background:linear-gradient(90deg, rgba(111,211,255,0.2), rgba(111,211,255,0.9), rgba(111,211,255,0.2));
}
.process-node{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
}
.process-node span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border-radius:50%;
  background:var(--blue-700);
  border:1px solid rgba(142,219,255,0.8);
  box-shadow:0 0 0 7px rgba(46,144,229,0.12);
  color:#8EDBFF;
  font-size:0.7rem;
  font-weight:700;
}
.process-node strong{ color:var(--white); font-size:0.88rem; margin-top:8px; }
.process-node small{ color:#AFC9E7; font-size:0.7rem; line-height:1.3; }
.map-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.12);
  color:#CDE4FA;
  font-size:0.75rem;
  text-align:center;
}
.map-dot{ width:7px; height:7px; background:#6FD3FF; border-radius:50%; box-shadow:0 0 0 4px rgba(111,211,255,0.14); }

.page-hero{
  position:relative;
  background:
    radial-gradient(900px 380px at 85% -10%, rgba(46,144,229,0.28), transparent 60%),
    linear-gradient(180deg, var(--blue-900) 0%, #123661 100%);
  color:var(--white);
  padding:70px 0 64px;
  overflow:hidden;
  isolation:isolate;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(700px 300px at 15% 20%, rgba(90,190,255,0.10), transparent 60%),
    radial-gradient(900px 320px at 90% 65%, rgba(46,144,229,0.12), transparent 55%);
  animation:hero-float 20s ease-in-out infinite alternate;
}
.page-hero .eyebrow{ color:#6FD3FF; }
.page-hero .eyebrow::before{ background:#6FD3FF; }
.page-hero h1{ color:var(--white); margin-bottom:14px; }
.page-hero .lede{ color:#D8E8FB; max-width:640px; margin:0 0 28px; }
.page-hero .hero-actions{ margin-top:0; }

/* ---------------------------------------------------------
   Stat strip / highlights
   --------------------------------------------------------- */
.stat-strip{
  background:var(--gray-50);
  padding:44px 0;
  border-bottom:1px solid var(--gray-200);
}
.stat-strip .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.stat{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  text-align:left;
  box-shadow:var(--shadow-card);
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--blue-100); }
.stat-icon{
  width:42px; height:42px;
  border-radius:11px;
  background:var(--blue-100);
  color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.stat-icon svg{ width:22px; height:22px; }
.stat strong{
  display:block;
  font-size:1.28rem;
  font-weight:800;
  color:var(--blue-900);
  letter-spacing:-0.01em;
  margin-bottom:4px;
}
.stat span{
  display:block;
  font-size:0.85rem;
  color:var(--gray-500);
  line-height:1.4;
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }

.card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:var(--shadow-card);
  transition:box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  height:100%;
}
.card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-3px); border-color:#CFE3FA; }
.card-icon{
  width:46px; height:46px;
  border-radius:10px;
  background:var(--blue-100);
  color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.card-icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:8px; font-size:1.15rem; }
.card p{ margin-bottom:0; font-size:0.95rem; }
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px;
  font-weight:600;
  font-size:0.88rem;
  color:var(--blue-600);
}
.card-link .arrow{ transition:transform 0.15s ease; }
.card:hover .card-link .arrow{ transform:translateX(3px); }
.service-tile{ position:relative; display:block; color:inherit; }
.service-tile .tile-number,
.tile-number{
  display:block;
  color:var(--blue-600);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.tile-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:10px;
  background:var(--blue-100);
  color:var(--blue-600);
  margin-bottom:16px;
}
.tile-icon svg{ width:22px; height:22px; }
.service-tile h3{ max-width:230px; }
.industry-list{
  border-top:1px solid var(--gray-200);
}
.industry-list a{
  display:grid;
  grid-template-columns:44px 1fr 20px;
  align-items:center;
  gap:16px;
  padding:19px 0;
  border-bottom:1px solid var(--gray-200);
  transition:transform 0.18s ease, color 0.18s ease;
}
.industry-list a:hover{ transform:translateX(5px); color:var(--blue-600); }
.industry-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  color:var(--blue-600);
  background:var(--blue-100);
  font-weight:700;
}
.industry-icon svg{ width:19px; height:19px; }
.industry-list strong{ display:block; color:var(--blue-900); font-size:1rem; }
.industry-list small{ display:block; color:var(--gray-500); font-size:0.83rem; line-height:1.4; margin-top:3px; }
.industry-list b{ color:var(--blue-600); font-size:1.25rem; font-weight:400; }

/* flow connector shown between top-level cards on wide screens,
   underscoring the "information flows across services" idea */
.flow-row{ position:relative; }
.flow-row .grid-3{ position:relative; z-index:1; }
.flow-row .grid-4{ position:relative; z-index:1; }
.flow-row .grid-5{ position:relative; z-index:1; }
.flow-row::before{
  content:"";
  position:absolute;
  top:23px; left:16.6%; right:16.6%;
  height:2px;
  background:repeating-linear-gradient(90deg, var(--gray-200) 0 8px, transparent 8px 14px);
  z-index:0;
}
.flow-row:has(.grid-4)::before{
  left:12.5%; right:12.5%;
}
.flow-row:has(.grid-5)::before{
  left:10%; right:10%;
}

.check-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0;
  font-size:0.95rem;
  color:var(--gray-700);
}
.check-list li::before{
  content:"";
  flex:none;
  width:18px; height:18px;
  margin-top:2px;
  border-radius:50%;
  background:var(--blue-100);
  border:1.5px solid var(--blue-600);
  position:relative;
}
.check-list li::after{
  content:"";
  position:absolute;
  margin-left:5.5px;
  margin-top:6px;
  width:3px; height:7px;
  border-right:2px solid var(--blue-600);
  border-bottom:2px solid var(--blue-600);
  transform:rotate(40deg);
}

/* ---------------------------------------------------------
   Service detail blocks
   --------------------------------------------------------- */
.service-block{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:start;
  padding:64px 0;
}
.service-block + .service-block{ border-top:1px solid var(--gray-200); }
.service-block-index{
  font-size:0.8rem; font-weight:700; letter-spacing:0.1em; color:var(--blue-600);
  text-transform:uppercase; margin-bottom:10px; display:block;
}
.subservice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.subservice{
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-md);
  padding:22px;
}
.subservice h4{ margin-bottom:6px; }
.subservice p{ font-size:0.9rem; margin-bottom:0; }
.tag{
  display:inline-block;
  font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--blue-600);
  background:var(--blue-100);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:10px;
}

.service-summary{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.service-summary .card{
  padding:24px;
}

.service-detail{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 0.9fr);
  gap:32px;
  align-items:start;
}
.service-callout{
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:26px;
}

.visual-stack{
  display:grid;
  gap:18px;
}
.visual-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:22px;
}
.visual-card h3{ margin-bottom:6px; }
.visual-card p{ margin:0; }

/* ---------------------------------------------------------
   Product cards
   --------------------------------------------------------- */
.product-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  height:100%;
}
.product-media{
  height:150px;
  background:linear-gradient(135deg, var(--blue-900), var(--blue-700));
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.product-media svg{ width:56px; height:56px; color:rgba(255,255,255,0.9); }
.product-body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.product-body h3{ font-size:1.1rem; margin-bottom:8px; }
.product-body p{ font-size:0.92rem; flex:1; }

/* ---------------------------------------------------------
   Timeline (About)
   --------------------------------------------------------- */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:var(--gray-200);
}
.timeline-item{ position:relative; padding-bottom:36px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-32px; top:2px;
  width:14px; height:14px; border-radius:50%;
  background:var(--white); border:3px solid var(--blue-600);
}
.timeline-item h4{ margin-bottom:6px; }
.timeline-item p{ margin-bottom:0; font-size:0.94rem; }

/* ---------------------------------------------------------
   CTA band
   --------------------------------------------------------- */
.cta-band{
  background:linear-gradient(120deg, var(--blue-700), var(--blue-900));
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:52px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-band h2{ color:var(--white); margin-bottom:8px; font-size:1.7rem; }
.cta-band p{ color:#D8E8FB; margin:0; }
.cta-band-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------------------------------
   Forms (Contact)
   --------------------------------------------------------- */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.form-field{ margin-bottom:20px; }
.form-field label{
  display:block; font-size:0.85rem; font-weight:600; color:var(--blue-900);
  margin-bottom:7px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-sm);
  font-family:var(--font-base);
  font-size:0.95rem;
  color:var(--ink);
  background:var(--white);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(11,99,201,0.16);
  outline:none;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:0.82rem; color:var(--gray-500); margin-top:6px; }
.form-status{
  margin-top:16px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  background:var(--blue-100);
  color:var(--blue-700);
  font-size:0.88rem;
  font-weight:600;
  display:none;
}
.form-status.is-visible{ display:block; }

.contact-info-card{
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:32px;
}
.contact-info-row{ display:flex; gap:14px; padding:16px 0; }
.contact-info-row + .contact-info-row{ border-top:1px solid var(--gray-200); }
.contact-info-row h4{ margin-bottom:4px; font-size:0.98rem; }
.contact-info-row p{ margin-bottom:0; font-size:0.9rem; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
  background:var(--blue-900);
  color:#AFC3DE;
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;
  gap:28px;
  padding-bottom:40px;
  align-items:start;
}
.footer-brand{ display:flex; align-items:center; gap:10px; color:var(--white); font-weight:700; font-size:1.05rem; margin-bottom:12px; }
.footer-brand .brand-mark{
  width:174px;
  height:44px;
  background-size:contain;
  filter:brightness(0) invert(1);
  opacity:0.96;
}
.footer-logo{
  display:block;
  width:160px;
  height:auto;
  max-width:100%;
  filter:brightness(0) invert(1);
  opacity:0.95;
}
.footer-tagline{ font-size:0.92rem; color:#93AED0; max-width:280px; }
.footer-col h4{
  color:var(--white); font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:16px; font-weight:700;
}
.footer-col li{ margin-bottom:10px; }
.footer-col a{ font-size:0.92rem; color:#AFC3DE; transition:color 0.15s ease; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.82rem; color:#7C93BD;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-panel{ order:-1; }
  .hero-grid .manufacturing-map{ order:2; }
  .service-block{ grid-template-columns:1fr; gap:28px; }
  .service-detail{ grid-template-columns:1fr; }
  .contact-layout{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .service-summary{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .grid-5{ grid-template-columns:1fr 1fr; }
  .flow-row::before{ display:none; }
  .stat-strip .container{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .site-header .container{ gap:10px; }
  .brand{ min-width:0; flex:1 1 auto; }
  .brand-mark{ width:150px; height:42px; }
  .header-actions{ flex:0 0 auto; gap:8px; }
  .nav-toggle{ display:flex; }
  .nav-primary{
    display:flex;
    position:fixed;
    top:var(--header-h);
    left:0; right:0; bottom:0;
    height:calc(100vh - var(--header-h));
    min-height:calc(100dvh - var(--header-h));
    background:linear-gradient(180deg, rgba(10,30,66,0.99), rgba(15,44,92,0.99));
    color:var(--white);
    z-index:4000;
    flex-direction:column;
    align-items:stretch;
    padding:18px 16px 28px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  .nav-primary.is-open{
    display:flex;
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-primary > li{ width:100%; }
  .nav-link{
    width:100%;
    padding:18px 12px;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.10);
    border-radius:0;
    color:var(--white);
    background:transparent;
  }
  .nav-link:hover,
  .nav-link:focus-visible{
    background:rgba(255,255,255,0.10);
    color:var(--white);
  }
  .nav-primary > li.is-active > .nav-link{ color:var(--white); }
  .dropdown li a{ color:var(--white); }
  .dropdown li a span.sub{ color:rgba(255,255,255,0.72); }
  .dropdown .dropdown-group-label{ color:rgba(255,255,255,0.58); }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; border:none; border-radius:12px;
    background:rgba(255,255,255,0.08); margin:0 0 8px; padding:8px 0 8px 14px;
  }
  .has-dropdown.is-expanded .dropdown{ display:block; }
  .has-dropdown.is-expanded .caret{ transform:rotate(225deg); margin-top:2px; }

  /* Mega menu collapses into the same accordion pattern as a normal dropdown */
  .mega{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; border:none; border-radius:12px;
    background:rgba(255,255,255,0.08); margin:0 0 8px; padding:8px;
    min-width:0; width:100%;
  }
  /* Override the desktop centered transform when a touch device keeps :hover alive. */
  .has-mega:hover .mega,
  .has-mega:focus-within .mega{
    position:static;
    transform:none;
  }
  .has-dropdown.is-expanded .mega{ display:block; }
  .mega-inner{ grid-template-columns:1fr !important; gap:0; }
  .mega-link-text strong{ color:var(--white); }
  .mega-link-text .sub{ color:rgba(255,255,255,0.72); }
  .mega-link:hover{ background:rgba(255,255,255,0.10); }
  .mega-link-icon{ background:rgba(255,255,255,0.14); color:var(--white); }
  .mega-spotlight{ margin-top:8px; background:rgba(255,255,255,0.10); }
  .header-actions .btn-primary{ padding:10px 16px; font-size:0.85rem; }
  .header-actions .btn-primary span.long{ display:none; }
  .header-actions .btn-primary span.short{ display:inline; }
  .nav-toggle{
    position:relative;
    z-index:5000;
    display:flex !important;
    flex:0 0 42px;
    visibility:visible;
    opacity:1;
    color:var(--blue-900);
    background:var(--white);
    border-color:var(--blue-600);
  }
  .page-hero{
    padding:58px 0 52px;
  }
  .page-hero h1{
    font-size:clamp(1.9rem, 8vw, 2.5rem);
  }
  .page-hero .lede{
    margin-bottom:24px;
  }
  .page-hero .hero-actions{
    gap:12px;
    margin-top:0;
  }
  .page-hero .btn{
    width:100%;
  }

  .grid-3, .grid-2, .grid-4, .grid-5{ grid-template-columns:1fr; }
  .stat-strip .container{ grid-template-columns:1fr; gap:14px; }
  .subservice-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cta-band{ padding:36px 26px; flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
  .footer-brand{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:8px;
  }
  .footer-logo{
    width:132px;
  }
  .footer-tagline{
    max-width:none;
  }
  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
  }
  .section{ padding:60px 0; }
  .manufacturing-map{ min-height:260px; padding:20px; }
  .process-node strong{ font-size:0.78rem; }
  .process-node small{ font-size:0.62rem; }
  .map-footer{ font-size:0.68rem; }
}