/* ==========================================================================
   AEOLUS ENGINEERING — Design System
   Theme: Air / Wind motion, engineering precision, modern industrial
   ========================================================================== */

:root{
  /* Brand palette — deep aerospace navy + kinetic teal/cyan + energy amber */
  --navy-950:#050a14;
  --navy-900:#070f1f;
  --navy-800:#0c1830;
  --navy-700:#101c38;
  --navy-600:#16233f;
  --ink:#0a1222;

  --cyan-400:#3fe0e0;
  --cyan-300:#7bf0e8;
  --blue-500:#2f6bff;
  --blue-600:#1a4fe0;
  --amber-400:#ffb347;
  --amber-500:#ff8a3d;

  --white:#ffffff;
  --off-white:#f6f8fc;
  --mist:#eef2f9;
  --slate-500:#5b6b8c;
  --slate-600:#4a5975;
  --slate-300:#c4cede;

  --grad-primary: linear-gradient(120deg, var(--blue-600) 0%, var(--cyan-400) 100%);
  --grad-warm: linear-gradient(120deg, var(--amber-500) 0%, var(--amber-400) 100%);
  --grad-hero: radial-gradient(circle at 20% 20%, rgba(63,224,224,0.18), transparent 45%),
               radial-gradient(circle at 80% 0%, rgba(47,107,255,0.25), transparent 40%),
               radial-gradient(circle at 50% 100%, rgba(255,138,61,0.10), transparent 45%),
               linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  --grad-text: linear-gradient(90deg, var(--cyan-300), var(--blue-500));

  --shadow-sm: 0 2px 10px rgba(10,18,34,0.06);
  --shadow-md: 0 12px 32px rgba(10,18,34,0.10);
  --shadow-lg: 0 24px 60px rgba(10,18,34,0.16);
  --shadow-glow: 0 0 0 1px rgba(63,224,224,0.15), 0 20px 60px rgba(47,107,255,0.25);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --ff-head: 'Poppins', 'Segoe UI', sans-serif;
  --ff-body: 'Inter', 'Segoe UI', sans-serif;

  --container: 1180px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);

  /* Chrome above the hero, used to size it to exactly one viewport.
     The +1px on each accounts for its bottom border. */
  --header-h: 73px;
  --strip-h: 54px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* Base type/spacing scale is tuned down slightly on laptop-and-up screens —
   at the browser's true 100% zoom the previous 16px root made hero text and
   section padding read oversized (it only looked right at ~80% zoom). */
@media (min-width:1024px){
  html{font-size:15px;}
}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.18;font-weight:600;letter-spacing:-0.01em;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}

::selection{background:var(--cyan-400);color:var(--navy-950);}

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--blue-600);
  background:rgba(47,107,255,0.08);
  border:1px solid rgba(47,107,255,0.18);
  padding:7px 16px 7px 12px;border-radius:var(--radius-full);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-primary);box-shadow:0 0 0 4px rgba(47,107,255,0.12);}
.eyebrow.on-dark{color:var(--cyan-300);background:rgba(63,224,224,0.08);border-color:rgba(63,224,224,0.25);}

.section{padding:84px 0;position:relative;}
.section-tight{padding:60px 0;}
@media (max-width:900px){
  .section{padding:64px 0;}
  .section-tight{padding:48px 0;}
}

/* Section sized to fill most of a viewport, content vertically centred.
   Only above 1000px — below that the two-column split stacks and needs to
   grow past 80vh. */
@media (min-width:1000px){
  .section-80{min-height:80vh;display:flex;align-items:center;}
  .section-80 > .container{width:100%;}
  /* Keep the media column inside the 80vh box rather than driving it taller. */
  .section-80 .img-ph,
  .section-80 .split-photo{aspect-ratio:auto;height:62vh;min-height:0;}
}

.section-head{max-width:680px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,2.9vw,2.3rem);margin-bottom:12px;color:var(--navy-950);}
.section-head p{font-size:1.02rem;color:var(--slate-500);}
.section-head.on-dark h2{color:var(--white);}
.section-head.on-dark p{color:var(--slate-300);}

.text-gradient{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:var(--radius-full);
  font-weight:600;font-size:0.98rem;white-space:nowrap;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  position:relative;
}
.btn-primary{
  background:var(--grad-primary);color:var(--white);
  box-shadow:0 10px 30px rgba(47,107,255,0.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(47,107,255,0.45);}
.btn-ghost{
  background:rgba(255,255,255,0.06);color:var(--white);
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,0.14);transform:translateY(-3px);}
.btn-outline{
  background:transparent;color:var(--navy-950);border:1.5px solid var(--slate-300);
}
.btn-outline:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-3px);}
.btn-sm{padding:11px 22px;font-size:0.88rem;}
.btn svg{width:18px;height:18px;transition:transform var(--transition);}
.btn:hover svg{transform:translateX(4px);}

.pill-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue-600);font-size:0.95rem;}
.pill-link svg{width:16px;height:16px;transition:transform var(--transition);}
.pill-link:hover svg{transform:translateX(4px);}

/* ---------- Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-40px);}
[data-reveal="left"].is-visible{transform:translateX(0);}
[data-reveal="right"]{transform:translateX(40px);}
[data-reveal="right"].is-visible{transform:translateX(0);}
[data-reveal="scale"]{transform:scale(0.92);}
[data-reveal="scale"].is-visible{transform:scale(1);}

/* stagger children */
[data-reveal-group] > *{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);}
[data-reveal-group].is-visible > *{opacity:1;transform:translateY(0);}
[data-reveal-group].is-visible > *:nth-child(1){transition-delay:.05s}
[data-reveal-group].is-visible > *:nth-child(2){transition-delay:.12s}
[data-reveal-group].is-visible > *:nth-child(3){transition-delay:.19s}
[data-reveal-group].is-visible > *:nth-child(4){transition-delay:.26s}
[data-reveal-group].is-visible > *:nth-child(5){transition-delay:.33s}
[data-reveal-group].is-visible > *:nth-child(6){transition-delay:.40s}

/* ---------- Image placeholders (content team will replace) ---------- */
.img-ph{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  background:
    linear-gradient(135deg, rgba(47,107,255,0.10), rgba(63,224,224,0.10)),
    repeating-linear-gradient(45deg, rgba(10,18,34,0.04) 0 2px, transparent 2px 14px);
  border:1.5px dashed rgba(47,107,255,0.35);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  min-height:220px;color:var(--slate-500);text-align:center;padding:20px;
}
.img-ph svg{width:34px;height:34px;color:var(--blue-500);opacity:0.7;}
.img-ph span{font-size:0.82rem;font-weight:600;letter-spacing:0.03em;color:var(--slate-500);}
.img-ph.square{aspect-ratio:1/1;}
.img-ph.wide{aspect-ratio:16/9;}
.img-ph.portrait{aspect-ratio:3/4;}
.img-ph.hero-ph{min-height:340px;border-radius:var(--radius-lg);}
.img-ph.logo-ph{min-height:64px;border-radius:10px;border-width:1px;}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:box-shadow var(--transition), padding var(--transition);
}
/* The frosted-glass fill lives on a pseudo-element rather than directly on
   .site-header. backdrop-filter on the header itself would create a new
   containing block for its position:fixed descendants (the mobile nav
   drawer), trapping it inside the header instead of covering the viewport. */
/* Near-black on the left, easing to a lighter navy on the right: gives the
   logo a solid dark ground to sit on while keeping the bar from reading as a
   flat black slab. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(0,0,0,0.94) 0%,
    rgba(0,0,0,0.90) 28%,
    rgba(6,12,24,0.82) 55%,
    rgba(12,24,48,0.72) 100%);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.site-header.scrolled{box-shadow:0 12px 30px rgba(0,0,0,0.25);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height var(--transition);}
.site-header.scrolled .container{height:62px;}

/* Company logo — original artwork as supplied, on a transparent ground. */
.brand{
  display:inline-flex;align-items:center;flex-shrink:0;
  transition:opacity var(--transition);
}
.brand:hover{opacity:0.85;}
.brand img{
  height:46px;width:auto;display:block;object-fit:contain;
  transition:height var(--transition);
}
.site-header.scrolled .brand img{height:40px;}
@media (max-width:600px){
  .brand img{height:36px;}
}
.site-footer .brand{margin-bottom:18px;}
.site-footer .brand img{height:52px;}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{
  color:rgba(255,255,255,0.82);font-weight:500;font-size:0.94rem;
  padding:10px 16px;border-radius:var(--radius-full);position:relative;
  transition:color var(--transition), background var(--transition);
}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
.main-nav a.active{color:#fff;background:rgba(255,255,255,0.1);}
/* The nav also carries a CTA button for the mobile drawer — hidden on desktop,
   where .header-actions shows its own. */
.main-nav .btn{display:none;}
.header-actions{display:flex;align-items:center;gap:14px;}
.header-actions .btn{display:none;}
@media (min-width:1100px){ .header-actions .btn{display:inline-flex;} }

.nav-toggle{
  display:none;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,0.08);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;flex-shrink:0;
}
.nav-toggle span{width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s, opacity .3s;}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1099px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);height:100vh;
    background:var(--navy-950);flex-direction:column;align-items:stretch;
    padding:100px 26px 40px;gap:6px;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 60px rgba(0,0,0,0.35);
    overflow:hidden;isolation:isolate;
  }

  /* Drifting aurora glow behind the drawer — brand cyan/blue, kept low
     opacity so the links stay the focus. */
  .main-nav::before{
    content:"";position:absolute;inset:-30% -60%;z-index:-2;
    background:
      radial-gradient(circle at 30% 20%, rgba(63,224,224,0.20), transparent 45%),
      radial-gradient(circle at 75% 55%, rgba(47,107,255,0.24), transparent 48%),
      radial-gradient(circle at 45% 90%, rgba(255,138,61,0.10), transparent 45%);
    animation:navAurora 18s ease-in-out infinite;
  }
  /* Fine dot grid, matching the hero's texture. */
  .main-nav::after{
    content:"";position:absolute;inset:0;z-index:-1;opacity:0.35;
    background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size:22px 22px;
    mask-image:radial-gradient(ellipse 80% 60% at 70% 30%, black 30%, transparent 85%);
  }
  @keyframes navAurora{
    0%,100%{transform:translate3d(0,0,0) scale(1);}
    33%    {transform:translate3d(6%,-4%,0) scale(1.12);}
    66%    {transform:translate3d(-5%,5%,0) scale(1.06);}
  }

  .main-nav.open{transform:translateX(0);}
  .main-nav a{padding:15px 18px;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,0.06);border-radius:10px;}
  .main-nav .btn{display:inline-flex;margin-top:16px;}
  .nav-toggle{display:flex;}

  /* Links slide in one after another once the drawer lands. */
  .main-nav > *{opacity:0;transform:translateX(24px);}
  .main-nav.open > *{animation:navItemIn .5s cubic-bezier(.4,0,.2,1) forwards;}
  .main-nav.open > *:nth-child(1){animation-delay:.16s;}
  .main-nav.open > *:nth-child(2){animation-delay:.22s;}
  .main-nav.open > *:nth-child(3){animation-delay:.28s;}
  .main-nav.open > *:nth-child(4){animation-delay:.34s;}
  .main-nav.open > *:nth-child(5){animation-delay:.40s;}
  .main-nav.open > *:nth-child(6){animation-delay:.46s;}
  .main-nav.open > *:nth-child(7){animation-delay:.52s;}
  @keyframes navItemIn{to{opacity:1;transform:translateX(0);}}

  /* Cyan wipe that sweeps across a link on tap/hover. */
  .main-nav a{position:relative;overflow:hidden;}
  .main-nav a::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg, rgba(63,224,224,0.18), rgba(47,107,255,0.14));
    transform:translateX(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .main-nav a:hover::before,
  .main-nav a:active::before{transform:translateX(0);}

  @media (prefers-reduced-motion: reduce){
    .main-nav::before{animation:none;}
    .main-nav > *,
    .main-nav.open > *{opacity:1;transform:none;animation:none;}
    .main-nav a::before{transition:none;}
  }
}
.nav-backdrop{position:fixed;inset:0;background:rgba(5,10,20,0.6);backdrop-filter:blur(3px);z-index:150;opacity:0;pointer-events:none;transition:opacity .35s;}
.nav-backdrop.open{opacity:1;pointer-events:auto;}

/* ==========================================================================
   Banner slider — sits directly under the nav on the home page.
   Sized so the sticky header + banner together fill exactly one viewport.
   Three slides crossfade on a slow loop; no controls by design.
   ========================================================================== */
.banner{
  position:relative;
  height:calc(100svh - var(--header-h));
  min-height:420px;
  overflow:hidden;
  background:var(--navy-950);
}
.banner-slides{position:absolute;inset:0;}
.banner-slide{
  position:absolute;inset:0;
  opacity:0;
  animation:bannerFade 21s cubic-bezier(.45,0,.2,1) infinite;
}
.banner-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  /* Slow drift keeps a still photograph from reading as frozen. */
  animation:bannerDrift 21s ease-in-out infinite;
}
/* Dark scrim so the caption stays legible over any photograph. */
.banner-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(5,10,20,0.86) 0%, rgba(5,10,20,0.62) 42%, rgba(5,10,20,0.22) 75%, rgba(5,10,20,0.35) 100%);
}
.banner-slide:nth-child(1),
.banner-slide:nth-child(1) img{animation-delay:0s;}
.banner-slide:nth-child(2),
.banner-slide:nth-child(2) img{animation-delay:7s;}
.banner-slide:nth-child(3),
.banner-slide:nth-child(3) img{animation-delay:14s;}

@keyframes bannerFade{
  0%      {opacity:0;}
  3%      {opacity:1;}
  30.3%   {opacity:1;}
  33.3%   {opacity:0;}
  100%    {opacity:0;}
}
@keyframes bannerDrift{
  0%      {transform:scale(1.06);}
  33.3%   {transform:scale(1.13);}
  100%    {transform:scale(1.06);}
}

.banner-caption{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
}
.banner-caption .container{width:100%;}
.banner-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.74rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--cyan-300);
  background:rgba(63,224,224,0.10);border:1px solid rgba(63,224,224,0.28);
  padding:7px 16px;border-radius:var(--radius-full);margin-bottom:18px;
  backdrop-filter:blur(6px);
}
.banner-caption h2{
  font-size:clamp(1.75rem,3.6vw,3rem);color:#fff;max-width:16ch;margin-bottom:16px;line-height:1.14;
}
.banner-caption p{
  font-size:clamp(0.95rem,1.35vw,1.1rem);color:var(--slate-300);max-width:52ch;
}
/* Caption text rides in with its slide. */
.banner-slide .banner-eyebrow,
.banner-slide .banner-caption h2,
.banner-slide .banner-caption p{
  animation:bannerTextIn 21s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:inherit;
}
.banner-slide:nth-child(1) .banner-caption *{animation-delay:0s;}
.banner-slide:nth-child(2) .banner-caption *{animation-delay:7s;}
.banner-slide:nth-child(3) .banner-caption *{animation-delay:14s;}
@keyframes bannerTextIn{
  0%    {opacity:0;transform:translateY(22px);}
  6%    {opacity:1;transform:translateY(0);}
  30.3% {opacity:1;transform:translateY(0);}
  33.3% {opacity:0;transform:translateY(-12px);}
  100%  {opacity:0;transform:translateY(-12px);}
}

@media (max-width:900px){
  .banner{height:calc(100svh - var(--header-h));min-height:380px;}
  .banner-slide::after{
    background:linear-gradient(180deg, rgba(5,10,20,0.55) 0%, rgba(5,10,20,0.70) 55%, rgba(5,10,20,0.88) 100%);
  }
  .banner-caption{align-items:flex-end;padding-bottom:min(9vh,64px);}
  .banner-caption h2{max-width:100%;}
  .banner-caption p{max-width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .banner-slide,
  .banner-slide img,
  .banner-slide .banner-caption *{animation:none;}
  .banner-slide{opacity:0;}
  .banner-slide.is-active{opacity:1;}
  .banner-slide img{transform:none;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;background:var(--grad-hero);color:#fff;
  padding:118px 0 90px;overflow:hidden;isolation:isolate;
}
/* On desktop the top bar, nav, hero and the strip below it together fill
   exactly one viewport. Below 1000px the hero grid stacks, so it is left to
   grow naturally instead of being squeezed. */
@media (min-width:1000px){
  .hero{
    min-height:calc(100vh - var(--header-h) - var(--strip-h));
    padding:40px 0;display:flex;align-items:center;
  }
  .hero > .container{width:100%;}
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0.5;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 90%);
}
.hero-wind{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.hero-wind svg{position:absolute;opacity:0.55;}
.hero-wind .w1{top:12%;left:-5%;width:60%;animation:driftX 18s ease-in-out infinite;}
.hero-wind .w2{bottom:8%;right:-8%;width:55%;animation:driftX 22s ease-in-out infinite reverse;}
.hero-wind .w3{top:55%;left:38%;width:40%;animation:driftX 26s ease-in-out infinite;opacity:0.3;}
@keyframes driftX{0%,100%{transform:translateX(0) translateY(0);}50%{transform:translateX(30px) translateY(-14px);}}

.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:46px;align-items:center;}
.hero-copy h1{font-size:clamp(2.1rem,3.8vw,3.05rem);color:#fff;margin-bottom:18px;}
.hero-copy h1 em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-copy p{font-size:1.05rem;color:var(--slate-300);max-width:520px;margin-bottom:28px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:42px;}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:28px;}
.hero-stats .stat b{display:block;font-family:var(--ff-head);font-size:1.6rem;color:#fff;font-weight:700;}
.hero-stats .stat span{font-size:0.82rem;color:var(--slate-300);}
.hero-visual{position:relative;}
.hero-visual .img-ph{border:1.5px dashed rgba(255,255,255,0.3);background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(63,224,224,0.08));color:var(--slate-300);}
.hero-visual .img-ph svg{color:var(--cyan-300);}
.hero-visual .img-ph span{color:var(--slate-300);}

/* Single hero photograph, matching the framing used elsewhere. */
.hero-photo{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  aspect-ratio:4/3.1;box-shadow:var(--shadow-lg);background:var(--navy-900);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}

.hero-badge{
  position:absolute;top:-16px;right:-16px;background:var(--white);color:var(--navy-950);
  padding:13px 17px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:11px;max-width:225px;z-index:2;
}
.hero-badge .ic{width:42px;height:42px;border-radius:12px;background:var(--grad-warm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-badge .ic svg{width:22px;height:22px;color:#fff;}
.hero-badge b{display:block;font-size:0.95rem;}
.hero-badge span{font-size:0.78rem;color:var(--slate-500);}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .hero-badge{display:none;}
  .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:22px;}
}
@media (max-width:560px){
  .hero{padding:104px 0 64px;}
  .hero-actions .btn{width:100%;}
}

/* Scrolling capability strip directly beneath the hero. */
.marquee-wrap{
  background:var(--navy-900);height:var(--strip-h);display:flex;align-items:center;
  overflow:hidden;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);
}
.marquee{display:flex;width:max-content;animation:marquee 42s linear infinite;}
.marquee:hover{animation-play-state:paused;}
.marquee-track{display:flex;align-items:center;}
.strip-item{
  display:inline-flex;align-items:center;white-space:nowrap;flex-shrink:0;
  color:var(--slate-300);font-size:0.82rem;font-weight:500;letter-spacing:0.04em;
  padding:0 26px;
}
/* Diamond separator between items. */
.strip-item::after{
  content:"";width:5px;height:5px;margin-left:26px;flex-shrink:0;
  background:var(--cyan-400);opacity:0.55;transform:rotate(45deg);
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .marquee{animation:none;} }

/* ==========================================================================
   Policy / value cards (Mission, Vision, Quality, OH&S)
   ========================================================================== */
.policy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.policy-card{
  background:var(--off-white);border-radius:var(--radius-md);padding:26px 22px;
  border:1px solid rgba(10,18,34,0.06);
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  position:relative;overflow:hidden;
}
.policy-card::after{content:"";position:absolute;inset:auto -40% -40% auto;width:140px;height:140px;border-radius:50%;background:var(--grad-primary);opacity:0;transition:opacity var(--transition);filter:blur(30px);}
.policy-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);background:var(--white);}
.policy-card:hover::after{opacity:0.15;}
.policy-card .num{font-family:var(--ff-head);font-size:0.78rem;font-weight:700;color:var(--blue-600);opacity:0.5;margin-bottom:14px;}
.policy-card .icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 8px 20px rgba(47,107,255,0.28);}
.policy-card .icon-wrap svg{width:22px;height:22px;color:#fff;}
.policy-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--navy-950);}
.policy-card p{font-size:0.89rem;color:var(--slate-500);}
@media (max-width:1000px){.policy-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.policy-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Divisions (Group) — Mechanical / Electrical / Civil
   ========================================================================== */
.division-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.division-card{
  border-radius:var(--radius-lg);padding:30px 26px;color:#fff;position:relative;overflow:hidden;
  min-height:280px;display:flex;flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
}
.division-card:hover{transform:translateY(-10px);}
.division-card.mech{background:linear-gradient(155deg,#0c1830 0%, #1a4fe0 130%);}
.division-card.elec{background:linear-gradient(155deg,#0c1830 0%, #0f7a72 150%);}
.division-card.civil{background:linear-gradient(155deg,#0c1830 0%, #b5581f 150%);}
.division-card .d-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:20px;backdrop-filter:blur(6px);}
.division-card .d-icon svg{width:24px;height:24px;}
.division-card h3{font-size:1.2rem;margin-bottom:10px;}
.division-card p{color:rgba(255,255,255,0.78);font-size:0.9rem;margin-bottom:18px;flex-grow:1;}
.division-card ul{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.division-card li{display:flex;align-items:center;gap:9px;font-size:0.85rem;color:rgba(255,255,255,0.9);}
.division-card li svg{width:14px;height:14px;flex-shrink:0;color:var(--cyan-300);}
.division-card .d-num{position:absolute;top:20px;right:24px;font-family:var(--ff-head);font-size:2.6rem;font-weight:700;color:rgba(255,255,255,0.08);}
@media (max-width:1000px){.division-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats-band{background:var(--ink);position:relative;overflow:hidden;padding:60px 0;}
.stats-band::before{content:"";position:absolute;inset:0;background:var(--grad-hero);opacity:0.9;}
.stats-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stats-grid .stat-item{padding:16px;border-right:1px solid rgba(255,255,255,0.08);}
.stats-grid .stat-item:last-child{border-right:none;}
.stat-item .stat-num{font-family:var(--ff-head);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:4px;}
.stat-item .stat-num span.suffix{color:var(--cyan-300);}
.stat-item .stat-label{color:var(--slate-300);font-size:0.92rem;margin-top:6px;}
@media (max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);}
}

/* ==========================================================================
   Services / capability grid
   ========================================================================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.service-card{
  background:var(--white);border:1px solid rgba(10,18,34,0.07);border-radius:var(--radius-md);
  padding:24px 22px;transition:all var(--transition);position:relative;
}
.service-card:hover{border-color:transparent;box-shadow:var(--shadow-glow);transform:translateY(-6px);}
.service-card .s-icon{width:42px;height:42px;border-radius:12px;background:rgba(47,107,255,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background var(--transition);}
.service-card:hover .s-icon{background:var(--grad-primary);}
.service-card .s-icon svg{width:21px;height:21px;color:var(--blue-600);transition:color var(--transition);}
.service-card:hover .s-icon svg{color:#fff;}
.service-card h3{font-size:1rem;margin-bottom:8px;}
.service-card p{font-size:0.87rem;color:var(--slate-500);}
@media (max-width:1000px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}

/* simple two-col feature (about teaser) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-list{display:flex;flex-direction:column;gap:16px;margin-top:26px;}
.split-list li{display:flex;gap:14px;align-items:flex-start;font-size:0.98rem;color:var(--slate-600);}
.split-list .chk{width:24px;height:24px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.split-list .chk svg{width:13px;height:13px;color:#fff;}
@media (max-width:900px){
  .split, .split.reverse{grid-template-columns:1fr;gap:36px;}
  .split.reverse .split-media{order:0;}
}

/* ==========================================================================
   Industry chips / tags
   ========================================================================== */
.chip-cloud{display:flex;flex-wrap:wrap;gap:14px;}
.chip{
  display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--radius-full);
  background:var(--off-white);border:1px solid rgba(10,18,34,0.06);font-weight:600;font-size:0.94rem;color:var(--navy-950);
  transition:all var(--transition);
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--grad-primary);}
.chip:hover{background:var(--navy-950);color:#fff;transform:translateY(-4px);box-shadow:var(--shadow-md);}

/* Industry focus cards with numbers */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.industry-card{
  background:var(--white);border-radius:var(--radius-md);padding:26px 22px;text-align:left;
  border:1px solid rgba(10,18,34,0.07);transition:all var(--transition);
}
.industry-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.industry-card .i-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,138,61,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.industry-card .i-icon svg{width:22px;height:22px;color:var(--amber-500);}
.industry-card h4{font-size:1rem;}
@media (max-width:1000px){.industry-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.industry-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Testimonials — continuous slow marquee, no controls.
   The track holds two identical sets of cards and shifts by exactly -50%,
   so the loop restarts on a frame that matches the start position.
   ========================================================================== */
.tm-marquee{overflow:hidden;padding:4px 22px 10px;
  /* fade the strip into the section background at both edges */
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* The track must shift by one full set (8 cards + 8 gaps). Half the track is
   8 cards + 7.5 gaps, so add back half a gap. Keep any horizontal padding on
   the wrapper, not here, or it skews that measurement. */
.tm-track{
  --tm-gap:22px;
  display:flex;width:max-content;gap:var(--tm-gap);
  animation:tmScroll 90s linear infinite;
}
.tm-marquee:hover .tm-track{animation-play-state:paused;}
@keyframes tmScroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - var(--tm-gap) / 2));}
}

.tm-card{
  flex:0 0 auto;width:360px;background:var(--white);border-radius:var(--radius-md);
  border:1px solid rgba(10,18,34,0.07);padding:26px 24px 22px;position:relative;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
}
.tm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.tm-quote{
  font-family:var(--ff-head);font-size:3.4rem;line-height:0.7;font-weight:700;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:8px;
}
.tm-card blockquote{font-size:0.94rem;color:var(--slate-600);line-height:1.7;flex-grow:1;}
.tm-card figcaption{margin-top:18px;padding-top:16px;border-top:1px solid rgba(10,18,34,0.08);}
.tm-card figcaption b{display:block;font-family:var(--ff-head);font-size:0.98rem;color:var(--navy-950);}
.tm-card figcaption span{font-size:0.82rem;color:var(--slate-500);}

@media (max-width:560px){
  .tm-card{width:290px;padding:22px 20px 18px;}
  .tm-marquee{padding-inline:16px;}
  .tm-track{--tm-gap:16px;animation-duration:70s;}
}
@media (prefers-reduced-motion: reduce){
  .tm-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
  .tm-card[aria-hidden="true"]{display:none;}
}

/* ==========================================================================
   Request a Quote page
   ========================================================================== */
.quote-promise{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:26px;}
.quote-promise span{
  display:inline-flex;align-items:center;gap:9px;font-size:0.86rem;color:var(--slate-300);
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  padding:9px 16px;border-radius:var(--radius-full);backdrop-filter:blur(6px);
}
.quote-promise svg{width:16px;height:16px;color:var(--cyan-300);flex-shrink:0;}

.quote-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.q-step{
  background:var(--off-white);border:1px solid rgba(10,18,34,0.06);
  border-radius:var(--radius-md);padding:22px 20px;position:relative;
  transition:transform var(--transition), box-shadow var(--transition);
}
.q-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.q-step-num{
  font-family:var(--ff-head);font-size:0.76rem;font-weight:700;letter-spacing:0.1em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:8px;
}
.q-step h4{font-size:1rem;margin-bottom:6px;color:var(--navy-950);}
.q-step p{font-size:0.87rem;color:var(--slate-500);}
@media (max-width:800px){.quote-steps{grid-template-columns:1fr;}}

.quote-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:start;}
@media (max-width:1000px){.quote-layout{grid-template-columns:1fr;}}

.quote-form-card{
  background:var(--white);border:1px solid rgba(10,18,34,0.08);
  border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
/* Brand gradient hairline along the top edge. */
.quote-form-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-primary);
}
@media (max-width:560px){.quote-form-card{padding:24px 20px;}}

.q-block{padding-bottom:26px;margin-bottom:26px;border-bottom:1px dashed rgba(10,18,34,0.12);}
.q-block:last-of-type{border-bottom:none;padding-bottom:6px;margin-bottom:18px;}
.q-block-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.q-badge{
  width:30px;height:30px;border-radius:50%;background:var(--grad-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--ff-head);font-weight:700;font-size:0.86rem;
  box-shadow:0 6px 16px rgba(47,107,255,0.3);
}
.q-block-head h3{font-size:1.06rem;color:var(--navy-950);margin-bottom:2px;}
.q-block-head p{font-size:0.85rem;color:var(--slate-500);}

/* Scope selection — checkboxes presented as toggle pills. */
.scope-chips{display:flex;flex-wrap:wrap;gap:10px;}
.scope-chip{position:relative;cursor:pointer;}
.scope-chip input{position:absolute;opacity:0;width:0;height:0;}
.scope-chip span{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-full);
  background:var(--off-white);border:1.5px solid rgba(10,18,34,0.10);
  font-size:0.87rem;font-weight:600;color:var(--slate-600);
  transition:all var(--transition);user-select:none;
}
.scope-chip span::before{
  content:"";width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(10,18,34,0.2);transition:all var(--transition);
}
.scope-chip:hover span{border-color:var(--blue-500);color:var(--blue-600);}
.scope-chip input:checked + span{
  background:var(--grad-primary);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(47,107,255,0.3);
}
.scope-chip input:checked + span::before{
  background:#fff;border-color:#fff;
  box-shadow:inset 0 0 0 3px var(--blue-600);
}
.scope-chip input:focus-visible + span{outline:2px solid var(--blue-500);outline-offset:2px;}

/* Light-background form fields.
   The base .form-group rules are built for the dark contact card (white text
   on a translucent field). These must out-specify them, not just follow them —
   `.quote-form-card .form-group input` (0,2,1) beats `.form-group input`
   (0,1,1) regardless of source order. */
.quote-form-card .form-group label{color:var(--slate-600);font-size:0.84rem;}
.quote-form-card .form-group input,
.quote-form-card .form-group select,
.quote-form-card .form-group textarea{
  background:var(--white);
  border:1.5px solid #cbd5e6;
  color:var(--ink);
  border-radius:10px;
}
.quote-form-card .form-group input::placeholder,
.quote-form-card .form-group textarea::placeholder{color:#8d9ab5;}
.quote-form-card .form-group input:hover,
.quote-form-card .form-group select:hover,
.quote-form-card .form-group textarea:hover{border-color:#9fb0cd;}
.quote-form-card .form-group input:focus,
.quote-form-card .form-group select:focus,
.quote-form-card .form-group textarea:focus{
  outline:none;
  border-color:var(--blue-500);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(47,107,255,0.14);
}
/* Native dropdown list — inherits the control's colour otherwise, which on a
   light control leaves white-on-white options. */
.quote-form-card .form-group select option{color:var(--ink);background:var(--white);}

/* Custom chevron; the native one is near-invisible on a light control. */
.quote-form-card .form-group select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:42px;
  cursor:pointer;
}
.btn-block{width:100%;}
.q-consent{font-size:0.78rem;color:var(--slate-500);text-align:center;margin-top:12px;}

/* Sidebar */
.quote-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px;}
@media (max-width:1000px){.quote-aside{position:static;}}
.q-aside-card{
  background:var(--white);border:1px solid rgba(10,18,34,0.08);
  border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);
}
.q-aside-card h3{font-size:1.05rem;margin-bottom:6px;color:var(--navy-950);}
.q-aside-card > p{font-size:0.87rem;color:var(--slate-500);margin-bottom:16px;}

.q-aside-dark{
  background:var(--grad-hero);border-color:transparent;color:#fff;
  position:relative;overflow:hidden;
}
.q-aside-dark h3{color:#fff;}
.q-aside-dark > p{color:var(--slate-300);}
.q-contact-row{
  display:flex;align-items:center;gap:13px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,0.10);transition:opacity var(--transition);
}
.q-contact-row:hover{opacity:0.82;}
.q-contact-row .ic{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;
}
.q-contact-row .ic svg{width:17px;height:17px;color:var(--cyan-300);}
.q-contact-row b{display:block;font-size:0.94rem;color:#fff;}
.q-contact-row small{font-size:0.76rem;color:var(--slate-300);}
.q-aside-dark .btn{margin-top:18px;}

.q-why{display:flex;flex-direction:column;gap:13px;}
.q-why li{display:flex;gap:11px;align-items:flex-start;font-size:0.88rem;color:var(--slate-600);}
.q-why .chk{
  width:20px;height:20px;border-radius:50%;background:var(--grad-primary);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.q-why .chk svg{width:11px;height:11px;color:#fff;}

.q-aside-cert{display:flex;align-items:center;gap:15px;background:var(--off-white);}
.q-aside-cert b{display:block;font-family:var(--ff-head);font-size:0.94rem;color:var(--navy-950);}
.q-aside-cert span{font-size:0.79rem;color:var(--slate-500);}

/* ==========================================================================
   Certifications
   ========================================================================== */
.cert-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.cert-card{
  display:flex;align-items:center;gap:16px;background:var(--off-white);border-radius:var(--radius-md);
  padding:20px;border:1px solid rgba(10,18,34,0.06);
}
.cert-card .c-badge{width:48px;height:48px;border-radius:50%;background:var(--grad-warm);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 24px rgba(255,138,61,0.32);}
.cert-card .c-badge svg{width:23px;height:23px;color:#fff;}
.cert-card b{display:block;font-size:1.02rem;}
.cert-card span{font-size:0.85rem;color:var(--slate-500);}
@media (max-width:900px){.cert-row{grid-template-columns:1fr;}}

/* ==========================================================================
   Process / timeline steps
   ========================================================================== */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.steps-row::before{content:"";position:absolute;top:28px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg, rgba(47,107,255,0.3) 0 8px, transparent 8px 16px);}
.step-item{text-align:center;padding:0 16px;position:relative;}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--white);border:2px solid var(--blue-500);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--ff-head);font-weight:700;color:var(--blue-600);position:relative;z-index:2;}
.step-item h4{font-size:1.02rem;margin-bottom:8px;}
.step-item p{font-size:0.88rem;color:var(--slate-500);}
@media (max-width:900px){
  .steps-row{grid-template-columns:1fr;gap:36px;}
  .steps-row::before{display:none;}
}

/* ==========================================================================
   Testimonial / CTA banner
   ========================================================================== */
.cta-banner{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--grad-hero);padding:50px 44px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-banner h2{font-size:clamp(1.4rem,2.6vw,1.9rem);max-width:520px;color:#fff;}
.cta-banner p{color:var(--slate-300);margin-top:10px;max-width:480px;}
.cta-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy-950);color:var(--slate-300);padding-top:68px;position:relative;overflow:hidden;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-brand p{margin:18px 0 22px;font-size:0.92rem;color:var(--slate-300);max-width:300px;}
.footer-social{display:flex;gap:12px;}
.footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.footer-social a:hover{background:var(--grad-primary);transform:translateY(-3px);}
.footer-social svg{width:16px;height:16px;}
.footer-col h4{color:#fff;font-size:0.98rem;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:0.92rem;color:var(--slate-300);transition:color var(--transition);display:inline-flex;align-items:center;gap:8px;}
.footer-col a:hover{color:var(--cyan-300);}
.footer-offices{display:flex;flex-direction:column;gap:18px;}
.footer-office{font-size:0.88rem;}
.footer-office b{display:block;color:#fff;font-size:0.9rem;margin-bottom:4px;}
.footer-office span{color:var(--slate-300);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:26px 0;font-size:0.84rem;color:var(--slate-500);flex-wrap:wrap;gap:12px;}
.footer-bottom-links{display:flex;gap:22px;}
.footer-bottom-links a:hover{color:var(--cyan-300);}
/* Developer credit — picks up the site's brand cyan against the dark footer. */
.credit-link{color:var(--cyan-300);font-weight:600;transition:color var(--transition);}
.credit-link:hover,
.credit-link:focus-visible{color:var(--cyan-400);text-decoration:underline;}
@media (max-width:1000px){
  .footer-top{grid-template-columns:1fr 1fr;row-gap:44px;}
}
@media (max-width:600px){
  .footer-top{grid-template-columns:1fr;}
}

/* back to top */
.back-to-top{
  position:fixed;bottom:28px;right:28px;width:50px;height:50px;border-radius:50%;
  background:var(--grad-primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(47,107,255,0.45);z-index:300;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:all var(--transition);
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top svg{width:20px;height:20px;color:#fff;}
/* The mobile drawer sits above the page — hide the scroll-to-top button
   while it is open so it does not float over the menu. Needs to outrank
   `.back-to-top.show`, hence the `.show` in the selector. */
body.nav-open .back-to-top,
body.nav-open .back-to-top.show{
  opacity:0;pointer-events:none;transform:translateY(12px);visibility:hidden;
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-hero{
  background:var(--grad-hero);color:#fff;padding:118px 0 64px;text-align:center;position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0.5;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 90%);
}
.page-hero .container{position:relative;}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.86rem;color:var(--slate-300);margin-bottom:18px;}
.breadcrumb svg{width:13px;height:13px;}
.page-hero h1{font-size:clamp(1.9rem,3.4vw,2.5rem);color:#fff;margin-bottom:12px;}
.page-hero p{color:var(--slate-300);max-width:600px;margin:0 auto;font-size:1.05rem;}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
@media (max-width:560px){.contact-form-wrap{padding:30px 22px;}}
.contact-card-list{display:flex;flex-direction:column;gap:18px;}
.office-card{
  background:var(--off-white);border:1px solid rgba(10,18,34,0.06);border-radius:var(--radius-md);
  padding:26px;display:flex;gap:18px;transition:all var(--transition);
}
.office-card:hover{background:var(--white);box-shadow:var(--shadow-md);transform:translateY(-4px);}
.office-card .o-icon{width:46px;height:46px;border-radius:12px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.office-card .o-icon svg{width:22px;height:22px;color:#fff;}
.office-card b{display:block;font-size:1rem;margin-bottom:6px;}
.office-card p{font-size:0.88rem;color:var(--slate-500);margin-bottom:6px;}
.office-card a{font-size:0.88rem;color:var(--blue-600);font-weight:600;}

.contact-form-wrap{background:var(--navy-950);border-radius:var(--radius-lg);padding:34px;color:#fff;position:relative;overflow:hidden;}
.contact-form-wrap::before{content:"";position:absolute;inset:0;background:var(--grad-hero);opacity:0.7;}
.contact-form-wrap .form-inner{position:relative;}
.contact-form-wrap h3{color:#fff;font-size:1.4rem;margin-bottom:8px;}
.contact-form-wrap > .form-inner > p{color:var(--slate-300);margin-bottom:30px;font-size:0.94rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
@media (max-width:520px){.form-row{grid-template-columns:1fr;}}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:0.82rem;color:var(--slate-300);font-weight:600;}
.form-group input,.form-group select,.form-group textarea{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:12px;
  padding:14px 16px;color:#fff;font-family:inherit;font-size:0.94rem;transition:all var(--transition);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.35);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--cyan-400);background:rgba(255,255,255,0.1);
  box-shadow:0 0 0 4px rgba(63,224,224,0.15);
}
.form-group textarea{resize:vertical;min-height:120px;}
.contact-form-wrap .btn-primary{width:100%;margin-top:6px;padding:17px 30px;}

.map-embed{margin-top:26px;border-radius:var(--radius-md);overflow:hidden;}

/* Areas of interest — list style */
.aoi-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;}
.aoi-item{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(10,18,34,0.08);}
.aoi-item .a-num{font-family:var(--ff-head);font-weight:700;font-size:1rem;color:var(--blue-500);opacity:0.55;flex-shrink:0;width:32px;}
.aoi-item h4{font-size:1rem;margin-bottom:4px;}
.aoi-item p{font-size:0.86rem;color:var(--slate-500);}
@media (max-width:800px){.aoi-list{grid-template-columns:1fr;}}

/* Capabilities tabs-style groups */
.cap-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cap-group{background:var(--white);border:1px solid rgba(10,18,34,0.07);border-radius:var(--radius-md);padding:24px 22px;}
.cap-group .g-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.cap-group.g-mech .g-icon{background:rgba(47,107,255,0.1);}
.cap-group.g-mech .g-icon svg{color:var(--blue-600);}
.cap-group.g-elec .g-icon{background:rgba(63,224,224,0.14);}
.cap-group.g-elec .g-icon svg{color:#0f9a92;}
.cap-group.g-other .g-icon{background:rgba(255,138,61,0.12);}
.cap-group.g-other .g-icon svg{color:var(--amber-500);}
.cap-group .g-icon svg{width:24px;height:24px;}
.cap-group h3{font-size:1.15rem;margin-bottom:16px;}
.cap-group ul{display:flex;flex-direction:column;gap:11px;}
.cap-group li{display:flex;gap:10px;font-size:0.89rem;color:var(--slate-600);align-items:flex-start;}
.cap-group li svg{width:15px;height:15px;color:var(--blue-500);flex-shrink:0;margin-top:3px;}
@media (max-width:1000px){.cap-groups{grid-template-columns:1fr;}}

/* About timeline */
.about-timeline{position:relative;padding-left:32px;border-left:2px solid rgba(47,107,255,0.2);display:flex;flex-direction:column;gap:36px;}
.about-timeline .t-item{position:relative;}
.about-timeline .t-item::before{content:"";position:absolute;left:-40px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--grad-primary);box-shadow:0 0 0 5px rgba(47,107,255,0.14);}
.about-timeline b{display:block;color:var(--blue-600);font-size:0.85rem;margin-bottom:6px;letter-spacing:0.04em;}
.about-timeline h4{font-size:1.05rem;margin-bottom:6px;}
.about-timeline p{font-size:0.9rem;color:var(--slate-500);}

/* misc */
.divider-fade{height:1px;background:linear-gradient(90deg, transparent, rgba(10,18,34,0.12), transparent);margin:0;}
.bg-mist{background:var(--mist);}
.bg-navy{background:var(--navy-950);color:#fff;}
.text-center{text-align:center;}