/* =========================================================================
   AABCO ENGINEERING — DESIGN SYSTEM
   Type:  Manrope (display/headings)  +  Inter (body/UI)
   Motif: engineering-drawing conventions — corner ticks, leader lines,
          dashed toolpaths, crosshair reticles — used structurally, not
          as decoration.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

/* ---------- Tokens ------------------------------------------------------ */
:root{
  --ink:        #060a12;
  --navy-0:     #080e1a;
  --navy-1:     #0c1526;
  --navy-2:     #101c33;
  --navy-3:     #152443;
  --line:       rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);

  --blue:       #2f6fed;
  --blue-bright:#6fa8ff;
  --blue-dim:   #1c3d84;
  --green:      #45cf92;

  --paper:      #f3f5f9;
  --paper-2:    #e7ebf2;
  --white:      #ffffff;

  --text-ink:   #0b1220;
  --slate:      #8fa0bd;
  --slate-2:    #64789c;
  --slate-on-light: #57647d;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;

  --shadow-deep: 0 30px 70px -30px rgba(3,6,14,.65);
  --shadow-card: 0 26px 54px -26px rgba(4,8,18,.55);
  --shadow-glow: 0 22px 48px -20px rgba(47,111,237,.35);

  --ease: cubic-bezier(.16,.84,.36,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --header-h: 86px;

  /* Aliases kept for backward-compatibility with older markup/CSS that
     referenced these names directly (they were previously undefined,
     which silently broke the gallery caption card + progress dots). */
  --radius-lg: var(--r-lg);
  --f-head: 'Manrope', sans-serif;
  --navy-line: rgba(255,255,255,.22);
  --blue-2: var(--blue-bright);
  --blue-glow: rgba(111,168,255,.6);
}

/* ---------- Reset --------------------------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
.tilt{ transition:transform .45s var(--ease-soft), box-shadow .4s ease; will-change:transform; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
svg{ display:block; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:720px){ .container{ padding:0 20px; } }

h1,h2,h3,h4{ font-family:'Manrope',sans-serif; font-weight:800; line-height:1.12; margin:0; letter-spacing:-.01em; color:inherit; }
p{ margin:0; }

.display{ font-size:clamp(2.5rem,5.6vw,4.5rem); color:var(--white); }
.h1{ font-size:clamp(2.1rem,4.2vw,3.1rem); color:var(--white); }
.h2{ font-size:clamp(1.55rem,2.7vw,2.2rem); }
section .h2{ color:var(--text-ink); }
.section--dark .h2, .quality .h2{ color:var(--white); }
.lede{ font-size:1.14rem; line-height:1.65; color:var(--slate); max-width:52ch; }
section:not(.section--dark):not(.quality) .lede{ color:var(--slate-on-light); }

/* Eyebrow / drawing-callout label -----------------------------------------*/
.label{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.86rem;
  letter-spacing:.01em; margin:0 0 14px; color:var(--blue-bright);
}
.label::before{
  content:''; width:16px; height:9px; flex:none;
  border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
}
.label--on-light{ color:var(--blue); }
.label--dark{ color:var(--blue-bright); }

.tail{ max-width:38ch; color:var(--slate-2); }
.section--dark .tail, .quality .tail{ color:var(--slate); }

/* ---------- Buttons -------------------------------------------------------*/
.btn{
  --mx:0px; --my:0px;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-sm);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.96rem;
  transform:translate(var(--mx),var(--my));
  transition:transform .25s var(--ease-soft), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue-bright),var(--blue));
  color:#04070d; box-shadow:var(--shadow-glow);
}
.btn-primary::after{
  content:'→'; display:inline-block; transition:transform .3s var(--ease);
}
.btn-primary:hover::after{ transform:translateX(5px); }
.btn-primary:hover{ box-shadow:0 26px 56px -16px rgba(47,111,237,.55); }
.btn-outline-light{
  border:1.5px solid var(--line-strong); color:var(--white); background:rgba(255,255,255,.02);
}
.btn-outline-light:hover{ background:rgba(255,255,255,.08); border-color:var(--blue-bright); }
.btn-block{ width:100%; justify-content:center; }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.92rem;
  color:var(--blue); padding-bottom:2px; border-bottom:1.5px solid transparent;
  transition:border-color .25s ease, gap .25s ease;
}
.btn-ghost::after{ content:'→'; transition:transform .25s var(--ease); }
.btn-ghost:hover{ border-color:currentColor; }
.btn-ghost:hover::after{ transform:translateX(4px); }
.btn-ghost.on-dark{ color:var(--blue-bright); }

/* =====================  PRELOADER  ======================================*/
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader-inner{ text-align:center; }
.preloader-track{
  position:relative; width:280px; height:3px; margin:0 auto 26px;
  background:var(--line-strong); border-radius:2px; overflow:visible;
}
.preloader-track::before{
  content:''; position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright));
  border-radius:2px; animation:track-fill 1.8s var(--ease) infinite;
}
.preloader-plane{
  position:absolute; top:50%; left:0; width:30px; height:30px;
  transform:translate(-50%,-50%) rotate(90deg); color:var(--blue-bright);
  animation:plane-fly 1.8s var(--ease) infinite;
}
.preloader-plane svg{ width:100%; height:100%; fill:currentColor; filter:drop-shadow(0 0 8px rgba(47,111,237,.55)); }
@keyframes track-fill{ 0%{ width:0%; } 60%{ width:100%; } 100%{ width:100%; } }
@keyframes plane-fly{ 0%{ left:0%; opacity:0; } 8%{ opacity:1; } 60%{ left:100%; opacity:1;} 100%{ left:100%; opacity:0; } }
.preloader-word{
  font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:.28em;
  font-size:1.15rem; color:#fff; margin:0;
}
.preloader-word span{ color:var(--blue-bright); }
.preloader-sub{
  margin:8px 0 0; font-size:.82rem; color:var(--slate); font-style:italic;
  letter-spacing:.03em;
}
body.is-loaded .preloader{ opacity:0; visibility:hidden; pointer-events:none; }

/* =====================  CUSTOM CURSOR  ===================================*/
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--blue-bright); }
.cursor-ring{
  width:38px; height:38px; border:1.4px solid rgba(111,168,255,.55);
  transition:width .25s var(--ease-soft), height .25s var(--ease-soft), border-color .25s ease, background .25s ease;
}
.cursor-ring.is-active{ width:64px; height:64px; background:rgba(111,168,255,.08); border-color:var(--blue-bright); }
@media (pointer:coarse), (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%; z-index:1200;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transition:width .1s linear;
}

/* =====================  HEADER / NAV  ====================================*/
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0; transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  padding:13px 0; background:rgba(6,10,18,.72); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line); box-shadow:0 18px 40px -24px rgba(0,0,0,.6);
}
.logo{ flex:none; transition:transform .3s var(--ease-soft); }
.logo:hover{ transform:scale(1.03); }
.logo img{ height:40px; width:auto; transition:height .3s ease; }

.nav-primary{ display:flex; align-items:center; gap:2px; }
.nav-primary > a:not(.btn){
  position:relative; padding:10px 16px; font-weight:600; font-size:.95rem; color:var(--slate);
  transition:color .25s ease;
}
.nav-primary > a:not(.btn)::after{
  content:''; position:absolute; left:16px; right:16px; bottom:5px; height:1.5px;
  background:var(--blue-bright); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-primary > a:not(.btn):hover, .nav-primary > a.is-active:not(.btn){ color:var(--white); }
.nav-primary > a:not(.btn):hover::after, .nav-primary > a.is-active:not(.btn)::after{ transform:scaleX(1); }
.nav-primary > a.btn{ margin-left:10px; padding:11px 22px; font-size:.9rem; }
.header-actions{ display:none; align-items:center; gap:14px; }
.header-actions .btn{ display:none; }

.nav-item-dropdown{ position:relative; }
.dd-trigger{
  display:flex; align-items:center; gap:7px; padding:10px 16px;
  font-weight:600; font-size:.95rem; color:var(--slate); transition:color .25s ease;
}
.dd-trigger svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; transition:transform .3s var(--ease); }
.nav-item-dropdown:hover .dd-trigger, .dd-trigger[aria-expanded="true"]{ color:var(--white); }
.nav-item-dropdown:hover .dd-trigger svg, .dd-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }

.nav-item-dropdown{
  /* Extends the hoverable hit-area straight down to the panel so moving
     the mouse from the trigger to the menu never crosses a dead zone. */
  padding-bottom:22px;
  margin-bottom:-22px;
}
.dropdown-panel{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,8px);
  width:560px;
  max-width:80vw;
  padding:14px;
  border-radius:var(--r-md);
  background:rgba(10,16,29,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-deep);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-item-dropdown:hover .dropdown-panel,
.nav-item-dropdown.is-open .dropdown-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.dropdown-panel a{
  display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--r-sm);
  transition:background .25s ease, transform .25s ease; opacity:0; transform:translateY(6px);
}
.nav-item-dropdown:hover .dropdown-panel a, .nav-item-dropdown.is-open .dropdown-panel a{ opacity:1; transform:translateY(0); }
.dropdown-panel a:nth-child(1){ transition-delay:.03s; } .dropdown-panel a:nth-child(2){ transition-delay:.07s; }
.dropdown-panel a:nth-child(3){ transition-delay:.11s; } .dropdown-panel a:nth-child(4){ transition-delay:.15s; }
.dropdown-panel a:hover{ background:rgba(111,168,255,.1); }
.dd-icon{
  flex:none; width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(111,168,255,.18),rgba(47,111,237,.1)); border:1px solid var(--line);
}
.dd-icon svg{ width:18px; height:18px; fill:none; stroke:var(--blue-bright); stroke-width:1.6; }
.dd-text{ display:flex; flex-direction:column; gap:3px; font-weight:700; color:var(--white); font-size:.94rem; }
.dd-text small{ font-weight:500; color:var(--slate); font-size:.78rem; }
.dd-view-all{
  grid-column:1/-1; justify-content:center; text-align:center;
  font-weight:700; font-size:.86rem; letter-spacing:.02em; color:var(--blue-bright);
  border-top:1px solid var(--line); margin-top:6px; padding-top:16px !important;
}
.dd-view-all:hover{ color:#fff; background:transparent !important; }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:42px; height:42px; gap:5px; flex:none;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:''; display:block; width:22px; height:2px; background:var(--white);
  transition:transform .3s var(--ease), opacity .3s ease;
}
.nav-toggle[aria-expanded="true"]::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span{ opacity:0; }
.nav-toggle[aria-expanded="true"]::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:980px){
  .nav-primary{
    position:fixed; top:0; right:0; height:100vh; width:min(380px,86vw);
    background:#0b0f18; z-index:1001;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:110px 26px 40px; transform:translateX(100%); transition:transform .45s var(--ease);
    overflow-y:auto; border-left:1px solid var(--line);
  }
  .nav-primary.is-open{ transform:translateX(0); }
  .nav-primary > a:not(.btn){ padding:16px 4px; border-bottom:1px solid var(--line); }
  .nav-primary > a.btn{ margin:20px 4px 0; text-align:center; justify-content:center; }
  .nav-item-dropdown{ border-bottom:1px solid var(--line); padding-bottom:0; margin-bottom:0; }
  .dd-trigger{ width:100%; justify-content:space-between; padding:16px 4px; }
  .dropdown-panel{
    position:static; width:auto; max-width:none; transform:none; grid-template-columns:1fr;
    opacity:1; visibility:visible; pointer-events:auto; background:transparent; border:0; backdrop-filter:none;
    box-shadow:none; padding:0 0 10px; display:none;
  }
  .nav-item-dropdown.is-open .dropdown-panel{ display:grid; }
  .dropdown-panel a{ opacity:1; transform:none; padding:10px 4px; }
  .header-actions{ display:flex; }
  .header-actions .btn{ display:inline-flex; padding:10px 16px; font-size:.85rem; }
  .nav-primary > a.btn{ display:none; }
}
@media (min-width:981px){ .header-actions .nav-toggle{ display:none; } }

/* =====================  HERO (home)  =====================================*/
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:radial-gradient(ellipse at 20% 0%,var(--navy-2),var(--ink) 62%);
  overflow:hidden; padding-top:var(--header-h);
}
.hero-media{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:flex-end; }
.hero-blueprint{ width:min(62vw,900px); height:auto; opacity:.9; will-change:transform; }
.bp-gear-spin{ animation:spin 34s linear infinite; transform-origin:450px 470px; }
.bp-ring-slow{ animation:spin 90s linear infinite; }
.bp-ring-rev{ animation:spin-rev 70s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
.bp-toolpath{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.6s var(--ease) .4s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.bp-toolpath-dot circle:first-child{ opacity:0; animation:dot-in .4s ease 3s forwards; }
.bp-toolpath-dot circle:last-child{ opacity:0; animation:dot-in .4s ease 3s forwards, ping 2.2s ease 3.4s infinite; transform-origin:700px 250px; }
@keyframes dot-in{ to{ opacity:1; } }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.1); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .bp-gear-spin,.bp-ring-slow,.bp-ring-rev,.bp-toolpath-dot circle:last-child{ animation:none; } }

.hero-grid-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(111,168,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,168,255,.055) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black 30%, transparent 78%);
}
.hero .container{ position:relative; z-index:2; }
.hero-content{ max-width:680px; }
.hero-content .label{ color:var(--blue-bright); }
.hero-content h1{ margin:6px 0 14px; }
.tagline-script{
  display:inline-block; font-family:'Manrope',sans-serif; font-style:italic; font-weight:700;
  color:var(--green); font-size:1.2rem; margin-bottom:20px; position:relative; padding-left:2px;
}
.hero-content .lede{ margin-bottom:34px; }
.hero-ctas{ margin-bottom:52px; }

.hero-industries{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.hi-item{
  padding:20px 18px 0; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:6px;
}
.hi-item:first-child{ border-left:0; padding-left:0; }
.hi-item strong{ font-family:'Manrope',sans-serif; font-size:.92rem; color:var(--white); font-weight:700; }
.hi-item span{ font-size:.8rem; color:var(--slate-2); }

.reveal-up{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }
.hero-content .reveal-up:nth-child(1){ transition-delay:.05s; }
.hero-content .reveal-up:nth-child(2){ transition-delay:.15s; }
.hero-content .reveal-up:nth-child(3){ transition-delay:.25s; }
.hero-content .reveal-up:nth-child(4){ transition-delay:.35s; }
.hero-content .reveal-up:nth-child(5){ transition-delay:.45s; }
.hero-content .reveal-up:nth-child(6){ transition-delay:.55s; }

@media (max-width:980px){
  .hero-blueprint{ width:120vw; opacity:.35; }
  .hero-media{ justify-content:center; }
  .hero-industries{ grid-template-columns:repeat(2,1fr); row-gap:20px; }
  .hi-item:nth-child(3){ border-left:0; }
}

/* =====================  SECTION SCAFFOLD  =================================*/
.section{ padding:118px 0; position:relative; }
.section--tight{ padding:96px 0; }
.section--dark{ background:var(--ink); }
.section--panel{ background:var(--navy-1); }
.section--panel .h2, .section--panel h3{ color:var(--white); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:56px; padding-bottom:28px; border-bottom:1px solid var(--paper-2);
}
.section--dark .section-head, .section--panel .section-head{ border-bottom-color:var(--line); }
@media (max-width:760px){ .section{ padding:80px 0; } .section-head{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* Scroll reveal (generic) */
[data-scroll-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
[data-scroll-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* Intro (two-col) */
.intro{ display:grid; grid-template-columns:.85fr 1fr; gap:72px; align-items:center; }
.intro-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:9/11; box-shadow:var(--shadow-card); }
.intro-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.intro-media:hover img{ transform:scale(1.06); }
.intro-media::after{
  content:''; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.35); border-radius:calc(var(--r-lg) - 8px);
  pointer-events:none;
}
.intro-body{ min-width:0; }
.intro-body h2{ margin-bottom:20px; font-size:clamp(1.1rem,4vw,1.9rem); white-space:nowrap; }
.intro-body p{ color:var(--slate-on-light); margin-bottom:16px; max-width:52ch; }
.intro-body .btn-ghost{ margin-top:12px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chip{
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  background:rgba(47,143,239,0.08); border:1px solid rgba(47,143,239,0.24);
  color:var(--blue,#2f8fef); font-size:0.84rem; font-weight:700; letter-spacing:0.01em;
  transition:background .25s ease, transform .25s ease;
}
.chip:hover{ background:rgba(47,143,239,0.16); transform:translateY(-2px); }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-2,#e9edf5); border:1px solid var(--paper-2,#e9edf5); border-radius:14px; overflow:hidden; margin-top:36px; }
.stat{ background:var(--white,#fff); padding:20px 16px; text-align:center; }
.stat strong{ display:flex; align-items:baseline; justify-content:center; gap:2px; font-family:var(--f-head); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; color:var(--ink,#0b1220); }
.stat strong .suffix{ font-size:0.6em; color:var(--blue,#2f8fef); }
.stat span{ display:block; font-size:0.76rem; color:var(--slate-on-light); margin-top:4px; }
@media (max-width:640px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .intro{ grid-template-columns:1fr; gap:36px; } }

/* Card grid (services) ------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cap-card{
  position:relative; padding:34px 26px; border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--navy-2),var(--navy-1));
  border:1px solid var(--line); transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease-soft), border-color .3s ease, box-shadow .4s ease;
}
.cap-card::before,.cap-card::after{
  content:''; position:absolute; width:16px; height:16px; opacity:0; transition:opacity .35s ease;
  border-color:var(--blue-bright);
}
.cap-card::before{ top:12px; left:12px; border-top:1.5px solid; border-left:1.5px solid; }
.cap-card::after{ bottom:12px; right:12px; border-bottom:1.5px solid; border-right:1.5px solid; }
.cap-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-card); }
.cap-card:hover::before,.cap-card:hover::after{ opacity:1; }
.cap-icon{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(111,168,255,.2),rgba(47,111,237,.06)); margin-bottom:24px; border:1px solid var(--line);
}
.cap-icon svg{ width:24px; height:24px; fill:none; stroke:var(--blue-bright); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.cap-card h3{ color:var(--white); font-size:1.18rem; margin-bottom:10px; }
.cap-card p{ color:var(--slate); font-size:.94rem; margin-bottom:22px; }
@media (max-width:980px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }

/* Industry grid ---------------------------------------------------------- */
.industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.industry-card{
  position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:7/9;
  transform-style:preserve-3d; will-change:transform; box-shadow:var(--shadow-card);
}
.industry-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-soft); }
.industry-card:hover img{ transform:scale(1.08); }
.industry-card::before{
  content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,7,14,.92) 8%,rgba(4,7,14,.15) 55%,transparent 80%);
}
.industry-copy{ position:absolute; left:0; right:0; bottom:0; padding:24px 22px; }
.idx{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--blue-bright); margin-bottom:8px; }
.industry-copy h3{ color:var(--white); font-size:1.15rem; margin-bottom:4px; }
.industry-copy p{ color:var(--slate); font-size:.86rem; }
@media (max-width:980px){ .industry-grid{ grid-template-columns:repeat(2,1fr); } }

/* Why grid ---------------------------------------------------------------*/
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.why-item{ background:var(--navy-1); padding:36px 30px; display:flex; gap:18px; transition:background .3s ease; }
.why-item:hover{ background:var(--navy-2); }
.why-icon{
  flex:none; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(111,168,255,.08);
}
.why-icon svg{ width:20px; height:20px; fill:none; stroke:var(--blue-bright); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.why-item h3{ color:var(--white); font-size:1.02rem; margin-bottom:6px; }
.why-item p{ color:var(--slate); font-size:.88rem; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } }

/* Quality section ----------------------------------------------------------*/
.quality{ background:var(--navy-0); overflow:hidden; }
.quality-grid{ display:grid; grid-template-columns:1fr .95fr; gap:70px; align-items:center; }
.quality-list{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.quality-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--slate); font-size:.96rem; }
.quality-list svg{ flex:none; width:19px; height:19px; margin-top:2px; stroke:var(--green); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.quality-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-deep); }
.quality-media img{ width:100%; height:100%; object-fit:cover; }
.quality-callout{
  margin-top:26px; padding:18px 20px; border-left:2px solid var(--blue,#2f8fef);
  background:rgba(47,143,239,0.07); border-radius:0 12px 12px 0;
  color:var(--slate); font-size:0.92rem; line-height:1.6; max-width:46ch;
}
.quality-callout strong{ color:#fff; font-family:var(--f-head); }
.quality-note{ margin-top:16px; padding:14px 18px; border-left:3px solid var(--blue); background:rgba(111,168,255,.06); color:var(--slate-on-light); font-size:.9rem; border-radius:0 8px 8px 0; }
.section--dark .quality-note, .quality .quality-note{ color:var(--slate); }
@media (max-width:900px){ .quality-grid{ grid-template-columns:1fr; gap:36px; } }

/* CTA band -----------------------------------------------------------------*/
.cta-band{
  position:relative; padding:100px 0; text-align:center;
  background:radial-gradient(ellipse at 50% -20%,var(--navy-3),var(--ink) 70%);
  border-top:1px solid var(--line); overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(111,168,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(111,168,255,.05) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 60% 90% at 50% 50%,black,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 50%,black,transparent 80%);
}
.cta-band-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-band .label{ justify-content:center; }
.cta-band h2{ color:var(--white); margin-bottom:16px; }
.cta-band p{ color:var(--slate); margin-bottom:34px; }
.cta-band .btn-row{ justify-content:center; }

/* =====================  COLLAGE SLIDER  ===================================*/
.collage-section{ background:var(--paper); padding-block:clamp(64px,8vw,100px); overflow:hidden; }
.collage-section .section-head{ margin-bottom:clamp(28px,4vw,44px); }
.collage-section .h2,
.collage-section .tail {
  color: var(--ink);
}
.collage-section .label{ color:var(--blue); }
.collage-section .label::before{ background:var(--blue); }
.collage-slider-full{
  position:relative;
  width:100vw;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  height:clamp(520px, 82vh, 920px);
  overflow:hidden;
  background:#fff;
}
.collage-set{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
  transform:scale(1.03);
}

.collage-set.is-active{
  opacity:1;
  visibility:visible;
  position:relative;
  pointer-events:auto;
  transform:scale(1);
}
.collage-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:0;
  height:100%;
}
.collage-grid figure{ margin:0; overflow:hidden; border-radius:0; position:relative; }
.collage-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage-grid figure:hover img{ transform:scale(1.08) !important; transition:transform .6s var(--ease); }
.collage-grid .c1{ grid-column:1 / 3; grid-row:1 / 2; }
.collage-grid .c2{ grid-column:3 / 5; grid-row:1 / 3; }
.collage-grid .c3{ grid-column:5 / 7; grid-row:1 / 2; }
.collage-grid .c4{ grid-column:1 / 2; grid-row:2 / 3; }
.collage-grid .c5{ grid-column:2 / 3; grid-row:2 / 3; }
.collage-grid .c6{ grid-column:5 / 6; grid-row:2 / 3; }
.collage-grid .c7{ grid-column:6 / 7; grid-row:2 / 3; }



/* =====================  MRO-STYLE MOODBOARD GALLERY  =======================
   5 tight flex-columns, thin white gutters, square-cornered photos of
   uneven heights within each column — matches a magazine moodboard
   collage exactly. A rounded white card floats over the centre column. */
.mro-columns{
  display:flex;
  gap:16px;
  height:100%;
  padding:16px;
  box-sizing:border-box;
  background:#fff;
}
.mro-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
  position:relative;
}
.mro-col figure{ margin:0; overflow:hidden; position:relative; min-height:0; border-radius:14px; box-shadow:0 4px 16px -6px rgba(11,18,32,0.18); }
.mro-col figure img{ width:100%; height:100%; object-fit:cover; display:block; filter:blur(1.0px); }
.mro-col figure:hover img{ transform:scale(1.07) !important; transition:transform .6s var(--ease); }
.mro-caption{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; text-align:center; color:var(--ink);
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.75);
  border-radius:22px; padding:30px 46px; min-width:280px; max-width:88%;
  box-shadow:0 30px 60px -14px rgba(11,18,32,0.3);
  pointer-events:none;
}
.mro-caption .script{
  display:block; font-family:'Caveat',cursive; font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.7rem); color:var(--blue-dim); line-height:1.05;
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
}
.mro-caption .sub{
  display:block; margin-top:8px; font-family:var(--f-body); font-weight:700;
  font-size:0.86rem; color:var(--ink-soft); letter-spacing:0.03em;
}

/* Gentle Ken Burns drift on whichever slide is currently active. */
@keyframes gentle-zoom{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
.collage-set.is-active .collage-grid img,
.collage-set.is-active .mro-col img{ animation:gentle-zoom 3.6s var(--ease-soft) forwards; }

/* Single-photo spotlight — used where a division currently has one
   production photo rather than a full gallery set. */
.spotlight-wrap{ position:relative; }
.spotlight-frame{
  position:relative; width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  height:clamp(420px,66vh,760px); overflow:hidden;
}
@keyframes gentle-zoom-loop{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.spotlight-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  animation:gentle-zoom-loop 16s ease-in-out infinite alternate;
}
.spotlight-frame::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,26,44,0.35) 0%, transparent 16%, transparent 78%, rgba(7,11,20,0.55) 100%);
}
.page-indicator{
  display:block; text-align:center; margin-top:16px;
  font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:.16em;
  font-size:.76rem; color:var(--blue);
}
.collage-dots{ display:flex; justify-content:center; gap:10px; margin-top:28px; }
.collage-dots button{ width:9px; height:9px; border-radius:50%; background:var(--paper-2); transition:all .3s var(--ease); padding:0; }
.collage-dots button.is-active{ background:var(--blue); width:30px; border-radius:6px; box-shadow:0 0 14px var(--blue-glow); }
@media (max-width:860px){
  .collage-slider-full{ height:auto; }
  .collage-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,1fr); height:auto; padding-inline:16px; }
  .collage-grid .c1,.collage-grid .c2,.collage-grid .c3,.collage-grid .c4,.collage-grid .c5,.collage-grid .c6,.collage-grid .c7{ grid-column:auto; grid-row:auto; aspect-ratio:1/1; }
  .mro-columns{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; height:auto; padding:12px; background:#fff; }
  .mro-col{ display:contents; }
  .mro-col figure{ aspect-ratio:1/1; flex:none !important; }
  .mro-caption{ position:static; transform:none; margin:16px auto; grid-column:1/-1; width:fit-content; }
  .spotlight-frame{ height:60vh; }
}

/* =====================  PAGE / SERVICE HERO  ==============================*/
.page-hero, .service-hero{
  position:relative; padding-top:calc(var(--header-h) + 70px); padding-bottom:80px;
  background:var(--ink); overflow:hidden;
}
.page-hero-media{ position:absolute; inset:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.page-hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,18,.5),var(--ink) 92%); }
.page-hero-inner{ position:relative; z-index:1; max-width:760px; }
.page-hero-inner h1{ font-size:clamp(1.15rem,5.4vw,3.3rem); white-space:nowrap; }
.page-hero-inner p:last-child{ color:var(--slate); font-size:1.08rem; margin-top:16px; max-width:56ch; }
.breadcrumb{ font-size:.84rem; color:var(--slate-2); margin-bottom:22px; }
.breadcrumb a{ color:var(--slate-2); transition:color .2s ease; } .breadcrumb a:hover{ color:var(--blue-bright); }

.service-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.service-hero-copy p{ color:var(--slate); font-size:1.08rem; margin:16px 0 26px; max-width:52ch; }
.service-hero-list{ display:flex; flex-direction:column; gap:13px; margin-bottom:8px; }
.service-hero-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--white); font-size:.95rem; font-weight:500; }
.service-hero-list svg{ flex:none; width:18px; height:18px; margin-top:2px; stroke:var(--green); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.service-hero-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:9/11; box-shadow:var(--shadow-deep); }
.service-hero-media img{ width:100%; height:100%; object-fit:cover; }
.service-hero-media::after{ content:''; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.25); border-radius:calc(var(--r-lg) - 6px); pointer-events:none; }
@media (max-width:900px){ .service-hero-grid{ grid-template-columns:1fr; } .service-hero-media{ order:-1; } }

/* Story grid (about) ---------------------------------------------------- */
.story-grid{ display:grid; grid-template-columns:.85fr 1fr; gap:70px; align-items:center; }
.story-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.story-media img{ width:100%; height:100%; object-fit:cover; }
.story-copy p{ color:var(--slate); margin-bottom:16px; max-width:56ch; }
.story-copy em{ color:var(--white); font-style:normal; font-weight:600; }
.milestone-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.milestone{ flex:1; min-width:120px; background:rgba(47,143,239,0.08); border:1px solid rgba(148,163,184,0.16); border-radius:12px; padding:18px 16px; text-align:center; }
.milestone strong{ display:block; font-family:var(--f-head); font-size:1.6rem; font-weight:800; color:#fff; }
.milestone span{ display:block; font-size:0.78rem; color:var(--slate); margin-top:4px; }
@media (max-width:900px){ .story-grid{ grid-template-columns:1fr; gap:34px; } }

/* mv-grid / values-grid ------------------------------------------------- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv-card{
  padding:44px 38px; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--paper-2);
  box-shadow:0 30px 60px -40px rgba(10,20,40,.18); transition:transform .4s var(--ease-soft), box-shadow .4s ease;
}
.mv-card:hover{ transform:translateY(-6px); box-shadow:0 34px 64px -30px rgba(10,20,40,.22); }
.mv-card h3{ font-size:1.3rem; color:var(--blue); margin-bottom:14px; }
.mv-card p{ color:var(--slate-on-light); }
@media (max-width:760px){ .mv-grid{ grid-template-columns:1fr; } }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card{
  padding:32px 24px; border-radius:var(--r-md); background:var(--navy-2); border:1px solid var(--line);
  transform-style:preserve-3d; will-change:transform; transition:transform .5s var(--ease-soft), box-shadow .4s ease;
}
.value-card:hover{ box-shadow:var(--shadow-card); }
.val-icon{ width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(111,168,255,.1); border:1px solid var(--line); margin-bottom:20px; }
.val-icon svg{ width:21px; height:21px; fill:none; stroke:var(--blue-bright); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.value-card h3{ color:var(--white); font-size:1.02rem; margin-bottom:8px; }
.value-card p{ color:var(--slate); font-size:.88rem; }
@media (max-width:980px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }

/* Machine table --------------------------------------------------------- */
.machine-table-wrap{ overflow-x:auto; overflow-y:hidden; border-radius:var(--r-md); border:1px solid var(--paper-2); margin-bottom:36px; }
.machine-table-wrap h3{ padding:22px 24px 4px; margin:0 0 4px !important; }
.section--dark .machine-table-wrap, .section--panel .machine-table-wrap{ border-color:var(--line); }
.machine-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; font-size:.92rem; }
.machine-table thead th{
  text-align:center; padding:16px 20px; font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;
  letter-spacing:.02em; color:var(--white); background:var(--navy-2); position:sticky; top:0;
}
.machine-table thead th:first-child{ border-top-left-radius:var(--r-md); }
.machine-table thead th:last-child{ border-top-right-radius:var(--r-md); }
.machine-table tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--r-md); }
.machine-table tbody tr:last-child td:last-child{ border-bottom-right-radius:var(--r-md); }
.section:not(.section--dark):not(.section--panel) .machine-table thead th{ background:var(--ink); }
.machine-table tbody td{ padding:15px 20px; border-top:1px solid var(--paper-2); color:var(--slate-on-light); text-align:center; }
.section--dark .machine-table tbody td, .section--panel .machine-table tbody td{ border-top-color:var(--line); color:var(--slate); }
.machine-table tbody tr{ transition:background .2s ease; }
.machine-table tbody tr:hover{ background:rgba(47,111,237,.06); }
.m-name{ color:var(--text-ink); font-weight:600; }
.section--dark .m-name, .section--panel .m-name{ color:var(--white); }
.m-cat{ color:var(--blue); font-weight:700; font-size:.82rem; }

/* Awards ------------------------------------------------------------------*/
.award-image{
  width:100%;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--r-md);
  margin-bottom:20px;
}

.award-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
}

.certificate-img{
  cursor:pointer;
  transition:transform .25s ease, opacity .25s ease;
}

.certificate-img:hover{
  transform:scale(1.03);
  opacity:.9;
}

.certificate-viewer{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.certificate-viewer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.certificate-viewer img{
  max-width:95vw;
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.certificate-close{
  position:absolute;
  top:20px;
  right:25px;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease, transform .2s ease;
}

.certificate-close:hover{
  background:rgba(255,255,255,.22);
  transform:scale(1.08);
}

@media(max-width:600px){
  .certificate-viewer{
    padding:20px;
  }

  .certificate-viewer img{
    max-width:96vw;
    max-height:88vh;
  }

  .certificate-close{
    top:12px;
    right:12px;
  }
}

.award-content{
  padding:0 4px 4px;
}

.award-icon{
  margin-bottom:12px;
}
.award-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.award-card{
  position:relative; padding:36px 30px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--paper-2);
  box-shadow:0 30px 60px -42px rgba(10,20,40,.2); transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease-soft), box-shadow .4s ease;
}
.award-card:hover{ box-shadow:0 34px 64px -32px rgba(10,20,40,.24); }
.award-icon{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(47,111,237,.12),rgba(69,207,146,.08)); margin-bottom:22px; }
.award-icon svg{ width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linejoin:round; }
.award-card h3{ font-size:1.05rem; margin-bottom:8px; }
.award-card p{ color:var(--slate-on-light); font-size:.9rem; margin-bottom:18px; }
.badge{
  display:inline-block; padding:6px 13px; border-radius:20px; font-size:.76rem; font-weight:700;
  background:rgba(47,111,237,.1); color:var(--blue); border:1px solid rgba(47,111,237,.22);
}
@media (max-width:980px){ .award-grid{ grid-template-columns:1fr; } }

/* Products grid ----------------------------------------------------------*/
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.product-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/4;
  transform-style:preserve-3d; will-change:transform; box-shadow:var(--shadow-card);
}
.product-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-soft); }
.product-card:hover img{ transform:scale(1.07); }
.product-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,7,14,.94) 18%,rgba(4,7,14,.25) 55%,transparent 82%); }
.product-copy{ position:absolute; left:0; right:0; bottom:0; padding:32px; }
.product-copy .tag{ display:inline-block; margin-bottom:12px; font-size:.75rem; font-weight:700; letter-spacing:.05em; color:var(--blue-bright); }
.product-copy h3{ color:var(--white); font-size:1.35rem; margin-bottom:10px; }
.product-copy p{ color:var(--slate); font-size:.92rem; margin-bottom:20px; max-width:36ch; }
@media (max-width:760px){ .product-grid{ grid-template-columns:1fr; } }

/* =====================  CONTACT  ==========================================*/
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; margin-bottom:70px; }
.contact-info h2{ margin:14px 0 30px; color:var(--text-ink); }
.contact-info-list{ display:flex; flex-direction:column; gap:22px; margin-bottom:32px; }
.contact-info-item{ display:flex; gap:16px; }
.contact-icon{ flex:none; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(47,111,237,.08); }
.contact-icon svg{ width:20px; height:20px; fill:none; stroke:var(--blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-info-item h4{ font-size:.98rem; margin-bottom:4px; }
.contact-info-item p{ color:var(--slate-on-light); font-size:.92rem; }
.contact-info-item a:hover{ color:var(--blue); }

.whatsapp-cta{
  display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--r-md);
  background:linear-gradient(135deg,#1fae67,#178f54); color:#fff; position:relative; overflow:hidden;
  transition:transform .3s var(--ease-soft), box-shadow .3s ease;
}
.whatsapp-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -18px rgba(23,143,84,.55); }
.whatsapp-cta svg{ width:26px; height:26px; fill:#fff; flex:none; position:relative; z-index:1; }
.whatsapp-cta::before{
  content:''; position:absolute; left:29px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%;
  background:rgba(255,255,255,.5); animation:ping-wa 2.4s ease infinite;
}
@keyframes ping-wa{ 0%{ transform:scale(.9); opacity:.6; } 100%{ transform:scale(2.4); opacity:0; } }
.whatsapp-cta span{ display:flex; flex-direction:column; gap:3px; position:relative; z-index:1; }
.whatsapp-cta span span{ font-weight:400; font-size:.78rem; opacity:.85; }

.form-card{
  position:relative; padding:40px; border-radius:var(--r-lg); background:var(--white);
  border:1px solid var(--paper-2); box-shadow:0 40px 80px -46px rgba(10,20,40,.22);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:20px; position:relative; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; color:var(--text-ink); }
.field input, .field textarea, .field select{
  width:100%; padding:13px 16px; border-radius:var(--r-sm); border:1.5px solid var(--paper-2); background:var(--paper);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; font-size:.95rem;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--blue); background:var(--white); box-shadow:0 0 0 4px rgba(47,111,237,.12); outline:none;
}
.field .error{ display:none; color:#d64545; font-size:.8rem; margin-top:7px; }
.field.has-error input, .field.has-error textarea, .field.has-error select{ border-color:#d64545; }
.field.has-error .error{ display:block; }
.form-note{ font-size:.8rem; color:var(--slate-2); text-align:center; margin-top:16px; }
.form-success{
  display:none; align-items:center; gap:10px; padding:16px 18px; border-radius:var(--r-sm); margin-bottom:22px;
  background:rgba(69,207,146,.12); color:#1c8c5c; font-weight:600; font-size:.92rem;
}
.form-success.is-visible{ display:flex; animation:fade-in .5s ease; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
.map-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); height:380px; filter:grayscale(.15) contrast(1.05); }
.map-frame iframe{ width:100%; height:100%; border:0; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* =====================  FOOTER  ===========================================*/
.site-footer{ background:var(--ink); border-top:1px solid var(--line); padding:80px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; }
.footer-brand p{ color:var(--slate); font-size:.92rem; margin:18px 0 22px; max-width:36ch; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-social svg{ width:16px; height:16px; fill:var(--slate); transition:fill .25s ease; }
.footer-social a:hover{ background:var(--blue); border-color:var(--blue); transform:translateY(-3px); }
.footer-social a:hover svg{ fill:#fff; }
.footer-col h4{ color:var(--white); font-size:.92rem; margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color:var(--slate); font-size:.92rem; transition:color .2s ease, padding-left .2s ease; }
.footer-col a:hover{ color:var(--blue-bright); padding-left:4px; }
.footer-contact li{ display:flex; gap:12px; align-items:flex-start; }
.footer-contact svg{ flex:none; width:17px; height:17px; margin-top:2px; fill:none; stroke:var(--blue-bright); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.footer-contact,
.footer-contact li,
.footer-contact a {
  color: var(--slate);
}

.footer-contact a:hover {
  color: var(--blue-bright);
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding:24px 0; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--slate-2);
}
.footer-bottom a{ transition:color .2s ease; } .footer-bottom a:hover{ color:var(--blue-bright); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; gap:10px; text-align:center; } }


/* =========================================================================
   LIGHT BLUE THEME REFRESH — AABCO ENGINEERING
   A brighter industrial palette chosen to suit the existing blue identity,
   photography and precision-engineering positioning.
   ========================================================================= */
:root{
  --ink:#132540;
  --navy-0:#f8fbff;
  --navy-1:#eef5fc;
  --navy-2:#e2edf9;
  --navy-3:#cfE2f7;
  --line:rgba(21,58,104,.12);
  --line-strong:rgba(21,58,104,.23);
  --blue:#2f6fed;
  --blue-bright:#5b9bff;
  --blue-dim:#2457bf;
  --green:#159565;
  --paper:#f5f8fc;
  --paper-2:#e2e9f2;
  --white:#ffffff;
  --text-ink:#13243f;
  --slate:#52677f;
  --slate-2:#687b92;
  --slate-on-light:#4d6078;
  --ink-soft:#52677f;
  --f-body:'Inter',sans-serif;
  --shadow-deep:0 28px 65px -32px rgba(20,45,82,.28);
  --shadow-card:0 24px 50px -28px rgba(20,45,82,.22);
  --shadow-glow:0 20px 42px -18px rgba(47,111,237,.32);
}
html{ font-size:112.5%; }
body{
  background:linear-gradient(180deg,#fbfdff 0%,var(--paper) 58%,#eef4fb 100%);
  color:var(--text-ink);
}
h1,h2,h3,h4{ color:var(--text-ink); }
.display,.h1{ color:var(--text-ink); }
.h2{ color:var(--text-ink); }
.section .h2{ color:var(--text-ink); }
.lede{ color:var(--slate-on-light); }

/* Buttons */
.btn{ font-size:1.06rem; }
.btn-primary{
  background:linear-gradient(135deg,var(--blue-bright),var(--blue));
  color:#fff;
}
.btn-outline-light{
  border-color:rgba(47,111,237,.5);
  color:var(--blue);
  background:rgba(255,255,255,.48);
}
.btn-outline-light:hover{ background:#fff; border-color:var(--blue); }
.btn-ghost{ font-size:1.03rem; }

/* Loading wordmark: every letter stays white. */
.preloader{ background:#eef4fb; }
.preloader-track{ background:rgba(21,58,104,.22); }
.preloader-plane{ color:#132540; filter:drop-shadow(0 0 10px rgba(47,111,237,.75)); }
.preloader-word{ font-size:1.38rem; color:#132540; }
.preloader-word span{ color:var(--black); }
.preloader-sub{ font-size:.98rem; color:#52677f; }

/* Header */
.site-header{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(21,58,104,.10);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(21,58,104,.14);
}
.site-header .logo img{ height:58px; width:auto; }
.nav-primary > a:not(.btn),.dd-trigger{ color:#4b6079; }
.nav-primary > a:not(.btn):hover,.nav-primary > a.is-active:not(.btn),
.nav-item-dropdown:hover .dd-trigger,.dd-trigger[aria-expanded="true"]{ color:var(--text-ink); }
.nav-primary > a:not(.btn)::after{ background:var(--blue); }
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{ background:var(--text-ink); }
.dropdown-panel{
  background:rgba(255,255,255,.97);
  border-color:rgba(21,58,104,.14);
  box-shadow:0 26px 60px -28px rgba(20,45,82,.28);
}
.dropdown-panel a:hover{ background:rgba(47,111,237,.08); }
.dd-icon{ background:linear-gradient(135deg,rgba(91,155,255,.16),rgba(47,111,237,.08)); border-color:rgba(21,58,104,.12); }
.dd-text{ color:var(--text-ink); }
.dd-text small{ color:var(--slate-2); }
.dd-view-all{ color:var(--blue); border-top-color:rgba(21,58,104,.14); }
.dd-view-all:hover{ color:var(--blue-dim); }

/* Homepage hero */
.hero{
  background:
    radial-gradient(circle at 76% 20%,rgba(91,155,255,.22),transparent 34%),
    linear-gradient(135deg,#fbfdff 0%,#edf5fd 54%,#dceafa 100%);
}
.hero-media{ opacity:.62; }
.hero-blueprint{ opacity:.82; }
.hero-grid-overlay{
  background-image:
    linear-gradient(rgba(47,111,237,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,111,237,.075) 1px,transparent 1px);
}
.hero-content .label{ color:var(--blue); }
.tagline-script{ color:var(--green); font-size:1.34rem; }
.hero-content .lede{ color:var(--slate-on-light); }
.hero-industries{ border-top-color:rgba(21,58,104,.16); }
.hi-item{ border-left-color:rgba(21,58,104,.13); }
.hi-item strong{ color:var(--text-ink); }
.hi-item span{ color:var(--slate-2); }

/* Four-service homepage collage */
.intro-media.service-collage{
  aspect-ratio:4/4.7;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:10px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(21,58,104,.11);
}
.intro-media.service-collage::after{ display:none; }
.intro-media.service-collage img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(21,58,104,.08);
}
.intro-media.service-collage:hover img{ transform:none; }
.intro-media.service-collage img:hover{ transform:scale(1.045); }

/* Shared light sections */
.section--dark,.section--panel,.quality{ background:var(--navy-1); }
.section--dark .h2,.section--panel .h2,.quality .h2,
.section--dark h3,.section--panel h3,.quality h3{ color:var(--text-ink); }
.section--dark .tail,.section--panel .tail,.quality .tail{ color:var(--slate-on-light); }
.section-head{ border-bottom-color:rgba(21,58,104,.12); }

/* Services cards */
.cap-card{
  background:#fff;
  border-color:rgba(21,58,104,.12);
  box-shadow:0 20px 45px -30px rgba(20,45,82,.22);
}
.cap-card:hover{ box-shadow:var(--shadow-card); }
.cap-card::before,.cap-card::after{ border-color:var(--blue); }
.cap-card h3{ color:var(--text-ink); }
.cap-card p{ color:var(--slate-on-light); }

/* Values / reasons grids */
.values-grid,.why-grid{ background:rgba(21,58,104,.12); border-color:rgba(21,58,104,.12); }
.value-card,.why-item{ background:#fff; border-color:rgba(21,58,104,.10); }
.why-item:hover{ background:#f8fbff; }
.value-card h3,.why-item h3{ color:var(--text-ink); }
.value-card p,.why-item p{ color:var(--slate-on-light); }
.why-icon,.val-icon{ background:rgba(47,111,237,.08); border-color:rgba(21,58,104,.12); }

/* Page and service heroes */
.page-hero,.service-hero{
  background:linear-gradient(135deg,#f9fcff 0%,#e9f2fc 62%,#d9e9fa 100%);
}
.page-hero-media img{ opacity:.16; }
.page-hero-media::after{
  background:linear-gradient(180deg,rgba(248,251,255,.48),rgba(238,245,252,.95) 92%);
}
.breadcrumb,.breadcrumb a{ color:var(--slate-2); }
.breadcrumb a:hover{ color:var(--blue); }
.page-hero-inner p:last-child{ color:var(--slate-on-light); }
.service-hero-copy p{ color:var(--slate-on-light); }
.service-hero-list li{ color:var(--text-ink); }
.label--dark{ color:var(--blue); }

/* Collage section headings are centered; explanatory copy is removed in HTML. */
.collage-section{ background:#fff; }
.collage-section .section-head{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-bottom:0;
  margin-bottom:clamp(32px,4vw,48px);
}
.collage-section .section-head > div{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.collage-section .label{ justify-content:center; }
.collage-section .h2{ color:var(--text-ink); }

/* Tables */
.machine-table-wrap{ background:#fff; border-color:rgba(21,58,104,.12); }
.machine-table thead th{ background:var(--blue); color:#fff; }
.machine-table tbody td{ color:var(--slate-on-light); border-top-color:rgba(21,58,104,.10); }
.machine-table tbody tr:hover{ background:rgba(47,111,237,.055); }
.m-name{ color:var(--text-ink); }
.quality-note{
  background:rgba(47,111,237,.06);
  color:var(--slate-on-light);
  border-color:var(--blue);
}

/* CTA */
.cta-band{
  background:linear-gradient(135deg,#eaf3ff 0%,#d9e9fb 100%);
  border-top-color:rgba(21,58,104,.10);
}
.cta-band::before{
  background-image:
    linear-gradient(rgba(47,111,237,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,111,237,.08) 1px,transparent 1px);
}
.cta-band .label{ color:var(--blue); }
.cta-band h2{ color:var(--text-ink); }
.cta-band p{ color:var(--slate-on-light); }

/* Product and industry image overlays remain legible while feeling lighter. */
.industry-card::before,.product-card::before{
  background:linear-gradient(to top,rgba(12,34,68,.90) 8%,rgba(12,34,68,.30) 56%,transparent 82%);
}
.industry-copy p,.product-copy p{ color:#dbe7f7; }
.industry-copy h3,.product-copy h3{ color:#fff; }
.product-copy .tag{ color:#9dc2ff; }

/* Contact */
.contact-info h2{ color:var(--text-ink); }
.contact-info-item p{ color:var(--slate-on-light); }
.contact-icon{ background:rgba(47,111,237,.08); }
.map-frame{ filter:none; }

/* Footer: a softer deep-blue anchor rather than near-black. */
.site-footer{ background:#ffffff; border-top-color:rgba(13,31,56,.12); }
.footer-brand p,.footer-col a,.footer-contact,.footer-contact li,.footer-contact a{ color:#1a3557; }
.footer-col h4{ color:#0d1f38; }
.footer-col a:hover,.footer-contact a:hover{ color:#0a3a75; }
.footer-social a{ border-color:rgba(13,31,56,.25); }
.footer-social svg{ fill:#1a3557; }
.footer-social a:hover{ background:var(--blue); border-color:var(--blue); }
.footer-social a:hover svg{ fill:#fff; }
.footer-bottom{ border-top-color:rgba(13,31,56,.18); color:#1a3557; }
.footer-bottom a:hover{ color:#0a3a75; }
.footer-brand .logo img{ height:72px; width:auto; }

/* Mobile navigation stays light and readable. */
@media (max-width:980px){
  .site-header .logo img{ height:52px; }
  .nav-primary{
    background:#ffffff;
    border-left-color:rgba(21,58,104,.12);
  }
  .nav-primary > a:not(.btn){
    color:#40576f;
    border-bottom-color:rgba(21,58,104,.10);
  }
  .nav-item-dropdown{ border-bottom-color:rgba(21,58,104,.10); }
  .dd-trigger{ color:#40576f; }
  .dropdown-panel{ background:transparent; }
  .dropdown-panel a:hover{ background:rgba(47,111,237,.07); }
  .hero-content h1.display{ white-space:normal; }
}
@media (min-width:981px){
  .hero-content h1.display{
    white-space:nowrap;
    font-size:clamp(2.25rem,4.75vw,4.25rem);
  }
}
@media (max-width:720px){
  .section{ padding:88px 0; }
  .section--tight{ padding:76px 0; }
  .site-header .logo img{ height:48px; }
  .intro-media.service-collage{ aspect-ratio:1/1.08; }
}


/* =========================================================================
   FINAL POLISH PASS — 2026
   1. Homepage 4-service collage: strictly equal tiles
   2. "Our Commitment" / values & why cards: remove grey gap-shade + heavy shadows
   3. Sitewide micro-polish: selection, focus, buttons, cards, mobile
   ========================================================================= */

/* ---- 1. Homepage collage — all four pictures exactly the same size ---- */
.intro-media.service-collage{
  aspect-ratio:1/1;
  grid-template-rows:repeat(2,1fr);
  grid-auto-rows:1fr;
  gap:10px;
  padding:10px;
}
.intro-media.service-collage img{
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:14px;
}
@media (max-width:720px){
  .intro-media.service-collage{ aspect-ratio:1/1; }
}

/* ---- 2. Values ("Our Commitment") & Why grids — no more grey gap shade ---- */
.values-grid{
  background:transparent;
  border:0;
  gap:22px;
}
.value-card{
  background:var(--white);
  border:1px solid rgba(21,58,104,.10);
  border-radius:var(--r-lg);
  box-shadow:0 18px 42px -32px rgba(20,45,82,.28);
  display:flex;
  flex-direction:column;
}
.value-card:hover{
  transform:translateY(-5px);
  border-color:rgba(47,111,237,.38);
  box-shadow:0 28px 52px -30px rgba(20,45,82,.30);
}
.value-card .val-icon{
  background:linear-gradient(135deg,rgba(91,155,255,.16),rgba(47,111,237,.07));
  border-color:rgba(21,58,104,.10);
}
@media (max-width:980px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }

.why-grid{
  background:transparent;
  border:0;
  gap:18px;
}
.why-item{
  border:1px solid rgba(21,58,104,.10);
  border-radius:var(--r-md);
  background:var(--white);
  box-shadow:0 14px 34px -28px rgba(20,45,82,.26);
}
.why-item:hover{
  transform:translateY(-3px);
  border-color:rgba(47,111,237,.32);
  box-shadow:0 22px 42px -28px rgba(20,45,82,.28);
}
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } }

/* ---- 3. Sitewide micro-polish ---- */
::selection{ background:rgba(91,155,255,.30); color:var(--text-ink); }

.cap-card, .award-card, .mv-card, .form-card{
  border:1px solid rgba(21,58,104,.10);
}

/* Buttons: crisper, more modern */
.btn{ border-radius:10px; letter-spacing:.01em; }
.btn-primary{
  background:linear-gradient(135deg,var(--blue-bright) 0%,var(--blue) 55%,var(--blue-dim) 100%);
  position:relative; overflow:hidden;
}
.btn-primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn-primary:hover::before{ transform:translateX(120%); }

/* Header: slightly crisper shadow when scrolled */
.site-header.is-scrolled{ box-shadow:0 14px 34px -22px rgba(20,45,82,.35); }

/* Card images: smooth, hardware-accelerated zoom */
.industry-card img, .product-card img, .mro-col img, .collage-grid img{
  will-change:transform;
}

/* Tables: rounded outer corners already handled; soften hover */
.machine-table tbody tr{ transition:background .2s ease; }

/* Footer contact links slightly larger hit area */
.footer-contact a{ display:inline-block; padding:1px 0; }

/* Mobile fine-tuning */
@media (max-width:720px){
  .btn{ white-space:normal; text-align:center; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ justify-content:center; }
  .hero-ctas{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
  .service-hero-media{ aspect-ratio:4/3; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .form-card{ padding:26px 20px; }
  .section-head{ margin-bottom:40px; }
  .page-hero, .service-hero{ padding-bottom:56px; }
  .collage-slider-full{ height:auto; }
  .mro-col figure{ border-radius:10px; }
}
@media (max-width:420px){
  .hero-industries{ grid-template-columns:1fr 1fr; }
  .hi-item:nth-child(3){ border-left:1px solid rgba(21,58,104,.13); }
  .hi-item:nth-child(odd){ border-left:0; padding-left:0; }
  .page-hero-inner h1{ font-size:4.9vw; }
  .intro-body h2{ font-size:4.1vw; }
}


/* ---- About page: full office photograph, no cropping ---- */
.intro-media.intro-media--full{
  aspect-ratio:1110/853;
  background:#fff;
}
.intro-media.intro-media--full img{
  width:100%; height:100%;
  object-fit:contain;
}
@media (max-width:900px){
  .intro-media.intro-media--full{ aspect-ratio:1110/853; }
}


/* ---- About page: give the office photo more space ---- */
.intro--media-big{ grid-template-columns:1.08fr .92fr; gap:56px; }
@media (max-width:900px){
  .intro--media-big{ grid-template-columns:1fr; gap:36px; }
}

/* ---- Homepage hero: AABCO ENGINEERING (M) SDN.BHD. in dark blue-purple ---- */
.hero-content h1.display{ color:#3b2f70; }