/* ==========================================================================
   A.S.Techno Green Pvt. Ltd. — stylesheet
   Multi-colour industrial palette: blue (structure), green (eco / brand),
   amber (calls to action), teal + rust (product variety accents).
   ========================================================================== */

:root{
  --paper:#F1EFE9;
  --paper-deep:#E7E2D6;
  --ink:#181B1E;
  --ink-soft:#454B50;
  --steel:#5C646B;
  --line:#D8D2C4;
  --white:#FBFBF9;
  --card-bg:#F6F5EF;

  --blue:#28577E;
  --blue-deep:#122A3D;
  --blue-bright:#4C89B0;

  --green:#2F7A4D;
  --green-deep:#1B4430;
  --green-bright:#57A374;

  --amber:#CC7E2C;
  --amber-bright:#E3A24E;

  --teal:#1E8A83;
  --teal-deep:#0F534E;

  --rust:#B15330;
  --rust-deep:#7C3A20;

  /* legacy aliases so the rest of the file / SVGs stay consistent */
  --forest:var(--blue);
  --forest-deep:var(--blue-deep);
  --forest-bright:var(--blue-bright);
  --brass:var(--amber);
  --brass-bright:var(--amber-bright);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Archivo', 'Arial Narrow', sans-serif;
  font-weight:700;
  line-height:1.08;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- reveal-on-load (single orchestrated entrance) ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- topbar ---------- */
.topbar{background:var(--blue-deep); color:var(--white); font-size:13px; padding:8px 0;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.topbar-links{display:flex; gap:22px; flex-wrap:wrap; opacity:.88;}
.topbar-links a:hover{opacity:.7;}

/* ---------- header ---------- */
header.main{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
header.main.is-scrolled{box-shadow:0 6px 18px rgba(18,42,61,.12);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:24px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:40px; height:40px; flex:none;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-family:'Archivo',sans-serif; font-weight:800; font-size:16.5px; letter-spacing:-0.01em;}
.brand-text span{font-size:11px; color:var(--steel); letter-spacing:.02em;}

nav.primary{display:flex; align-items:center; gap:22px;}
nav.primary a{font-size:14.5px; color:var(--ink-soft); white-space:nowrap; position:relative; padding-bottom:3px;}
nav.primary a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--blue); transition:right .2s ease;}
nav.primary a:hover{color:var(--blue);}
nav.primary a:hover::after{right:0;}

/* ---------- products mega-menu dropdown ---------- */
.nav-dropdown{position:relative;}
.dropdown-trigger{display:inline-flex; align-items:center; gap:6px;}
.dropdown-trigger .caret{width:9px; height:6px; transition:transform .18s ease;}
.nav-dropdown:hover .dropdown-trigger .caret,
.nav-dropdown.open .dropdown-trigger .caret{transform:rotate(180deg);}

.mega-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%);
  width:620px; max-width:80vw;
  background:var(--white); border:1px solid var(--line); box-shadow:0 18px 40px rgba(18,42,61,.16);
  display:grid; grid-template-columns:200px 1fr; gap:0;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:50;
}
.nav-dropdown:hover .mega-menu,
.nav-dropdown.open .mega-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.mega-image{background:var(--paper-deep); border-right:1px solid var(--line); padding:18px; display:flex; align-items:center; justify-content:center;}
.mega-image img{width:100%; height:auto; max-height:200px; object-fit:contain;}
.mega-list{list-style:none; margin:0; padding:10px 0; max-height:340px; overflow-y:auto;}
.mega-list li a{
  display:block; padding:10px 22px; font-size:14px; color:var(--ink-soft); white-space:normal;
}
.mega-list li a::after{display:none;}
.mega-list li a:hover{background:var(--paper-deep); color:var(--blue);}
@media (max-width:1080px){ .mega-menu{width:520px;} }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:var(--white);
  padding:10px 18px; font-size:14px; font-weight:600;
  border:1px solid var(--blue);
}
.nav-cta:hover{background:var(--blue-deep); border-color:var(--blue-deep);}
.menu-toggle{
  display:none; background:none; border:1px solid var(--line); padding:9px 12px; font-size:14px;
  cursor:pointer; color:var(--ink);
}

.mobile-nav{
  display:none; flex-direction:column; background:var(--white); border-bottom:1px solid var(--line);
  padding:6px 0;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:13px 28px; font-size:15px; border-top:1px solid var(--line); color:var(--ink-soft);}
.mobile-nav a:first-child{border-top:none;}

@media (max-width: 1180px){
  nav.primary{display:none;}
  .menu-toggle{display:inline-block;}
  .topbar-links{display:none;}
}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero-slider{position:relative; overflow:hidden; background:var(--blue-deep); color:var(--white);}
.slider-track{position:relative; height:620px;}
@media (max-width:760px){ .slider-track{height:560px;} }

.slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease;
  display:flex; align-items:center;
}
.slide.is-active{opacity:1; visibility:visible; z-index:2;}
.slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(9,20,30,.92) 0%, rgba(9,20,30,.78) 42%, rgba(9,20,30,.4) 78%);
}
.slide-content{position:relative; z-index:1; padding:0 28px; max-width:1180px; margin:0 auto; width:100%;}
.slide-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.03em;
  color:var(--amber-bright); margin-bottom:20px;
}
.slide-eyebrow::before{content:""; width:22px; height:1px; background:var(--amber-bright); display:inline-block;}
.slide h1{font-size:clamp(30px, 4.8vw, 54px); max-width:16ch; color:var(--white);}
.slide-sub{max-width:50ch; font-size:17px; color:#D6DEE4; margin-top:20px;}
.slide-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
}
.btn-brass{background:var(--amber); color:#211202; border-color:var(--amber);}
.btn-brass:hover{background:var(--amber-bright); border-color:var(--amber-bright);}
.btn-outline{border-color:rgba(255,255,255,.4); color:var(--white); background:transparent;}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.08);}

/* slider controls */
.slider-nav{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:1px solid rgba(255,255,255,.35);
  background:rgba(9,20,30,.35); color:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.slider-nav:hover{background:rgba(9,20,30,.65); border-color:#fff;}
.slider-prev{left:24px;}
.slider-next{right:24px;}
@media (max-width:640px){ .slider-nav{width:36px; height:36px;} .slider-prev{left:12px;} .slider-next{right:12px;} }

.slider-dots{
  position:absolute; z-index:5; bottom:26px; left:0; right:0;
  display:flex; justify-content:center; gap:10px;
}
.slider-dots button{
  width:34px; height:3px; background:rgba(255,255,255,.35); border:none; padding:0; cursor:pointer;
}
.slider-dots button.is-active{background:var(--amber-bright);}

.hero-stats{
  position:relative; z-index:4; background:var(--blue-deep);
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-stats .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:26px 28px;
}
.hero-stats .stat b{display:block; font-family:'Archivo',sans-serif; font-size:24px; font-weight:800; color:var(--white);}
.hero-stats .stat span{font-size:12.5px; color:#A9B7C0;}
.hero-stats .stat:nth-child(1) b{color:var(--amber-bright);}
.hero-stats .stat:nth-child(2) b{color:var(--green-bright);}
.hero-stats .stat:nth-child(3) b{color:var(--blue-bright);}
.hero-stats .stat:nth-child(4) b{color:var(--white);}
@media (max-width:760px){ .hero-stats .wrap{grid-template-columns:repeat(2,1fr); row-gap:20px;} }

/* ---------- social icons (header + footer) ---------- */
.social-icons{display:flex; align-items:center; gap:14px;}
.social-icons a{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--steel); border:1px solid var(--line); flex:none;
}
.social-icons a svg{width:16px; height:16px;}
.social-icons a:hover{color:var(--white); background:var(--blue); border-color:var(--blue);}
.topbar-socials a{width:26px; height:26px; border-color:rgba(255,255,255,.22); color:#AEBBC3;}
.topbar-socials a svg{width:13px; height:13px;}
.topbar-socials a:hover{color:var(--white); background:var(--amber); border-color:var(--amber);}
@media (max-width:1180px){ .topbar-socials{display:none;} }
.footer-socials{margin-top:18px;}
.footer-socials a{border-color:rgba(255,255,255,.2); color:#AEBBC3;}
.footer-socials a:hover{color:var(--white); background:var(--amber); border-color:var(--amber);}

/* ---------- our esteemed clients — auto-scrolling marquee ---------- */
.clients{background:var(--paper-deep); padding:64px 0; overflow:hidden;}
.clients-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.clients-track{
  display:flex; align-items:center; gap:70px; width:max-content;
  animation:clients-scroll 26s linear infinite;
}
.clients-marquee:hover .clients-track{animation-play-state:paused;}
@keyframes clients-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.client-logo-m{
  flex:none; height:110px; width:190px; background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.client-logo-m img{
  max-height:76px; max-width:100%; object-fit:contain;
  filter:grayscale(1); opacity:.75; transition:filter .2s ease, opacity .2s ease;
}
.client-logo-m:hover img{filter:grayscale(0); opacity:1;}
@media (prefers-reduced-motion: reduce){
  .clients-track{animation:none; flex-wrap:wrap; justify-content:center;}
}

/* ---------- section shells ---------- */
section{padding:84px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber); margin-bottom:14px; display:block;}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}
.section-head p{margin-top:16px; color:var(--ink-soft); font-size:16px; max-width:56ch;}

/* ---------- about ---------- */
.about{background:var(--paper-deep);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:64px;}
@media (max-width:880px){ .about-grid{grid-template-columns:1fr;} }
.about-copy p{color:var(--ink-soft); font-size:16px; margin-bottom:16px;}
.about-copy p:last-child{margin-bottom:0;}

.about-gallery{position:relative; height:360px;}
.about-gallery img{
  position:absolute; border:6px solid var(--white); box-shadow:0 10px 30px rgba(18,42,61,.18);
}
.ag-1{width:64%; top:0; left:0; z-index:2;}
.ag-2{width:48%; bottom:0; right:0; z-index:3;}
.ag-3{width:36%; top:14%; right:2%; z-index:1;}
@media (max-width:520px){ .about-gallery{height:300px;} }

.cap-list{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:880px){ .cap-list{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .cap-list{grid-template-columns:1fr;} }
.cap-item{background:var(--white); padding:26px 22px; display:flex; flex-direction:column; gap:14px; border-top:3px solid transparent;}
.cap-item .ci-icon{flex:none; width:32px; height:32px;}
.cap-item h4{font-size:15px; font-weight:700;}
.cap-item p{font-size:13.5px; color:var(--steel);}
.cap-item:nth-child(1){border-top-color:var(--blue);}
.cap-item:nth-child(1) .ci-icon{color:var(--blue);}
.cap-item:nth-child(2){border-top-color:var(--green);}
.cap-item:nth-child(2) .ci-icon{color:var(--green);}
.cap-item:nth-child(3){border-top-color:var(--teal);}
.cap-item:nth-child(3) .ci-icon{color:var(--teal);}
.cap-item:nth-child(4){border-top-color:var(--rust);}
.cap-item:nth-child(4) .ci-icon{color:var(--rust);}

/* ---------- products ---------- */
.products-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.product-card{background:var(--card-bg); color:inherit; display:flex; flex-direction:column; border-top:4px solid var(--blue);}
.product-media{aspect-ratio:4/3; overflow:hidden; background:var(--paper-deep);}
.product-media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.product-card:hover .product-media img{transform:scale(1.05);}
.product-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1;}
.product-card h3{font-size:16px; font-weight:700;}
.product-card p{font-size:13.5px; color:var(--steel); flex:1;}
.product-link{font-size:13px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:7px; margin-top:2px;}
.product-link svg{width:13px; height:13px;}
.product-card:hover .product-link{color:var(--amber);}
/* per-card accent colour, cycling through the palette so the grid reads as multi-colour */
.product-card:nth-child(5n+1){border-top-color:var(--blue);}
.product-card:nth-child(5n+2){border-top-color:var(--green);}
.product-card:nth-child(5n+3){border-top-color:var(--teal);}
.product-card:nth-child(5n+4){border-top-color:var(--amber);}
.product-card:nth-child(5n+5){border-top-color:var(--rust);}

/* ---------- process — connected timeline ---------- */
.process{background:var(--blue-deep); color:var(--white);}
.process .section-head h2, .process .section-head p{color:var(--white);}
.process .section-head p{color:#BFCBD3;}

.timeline{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:22px; padding-top:6px;}
.timeline-line{
  position:absolute; top:34px; left:calc(100%/12); right:calc(100%/12); height:2px;
  background:linear-gradient(90deg, var(--amber-bright), var(--green-bright), var(--blue-bright), var(--amber-bright), var(--green-bright), var(--blue-bright));
  opacity:.4; z-index:0;
}
.timeline-item{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; text-align:left;}
.tl-node{
  width:68px; height:68px; border-radius:50%; background:var(--blue-deep);
  border:2px solid var(--amber-bright); color:var(--amber-bright);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:transform .2s ease;
}
.tl-node svg{width:26px; height:26px;}
.timeline-item:hover .tl-node{transform:translateY(-3px);}
.timeline-item:nth-child(6n+2) .tl-node{border-color:var(--green-bright); color:var(--green-bright);}
.timeline-item:nth-child(6n+3) .tl-node{border-color:var(--blue-bright); color:var(--blue-bright);}
.timeline-item:nth-child(6n+4) .tl-node{border-color:var(--amber-bright); color:var(--amber-bright);}
.timeline-item:nth-child(6n+5) .tl-node{border-color:var(--green-bright); color:var(--green-bright);}
.timeline-item:nth-child(6n+6) .tl-node{border-color:var(--blue-bright); color:var(--blue-bright);}
.tl-num{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#8B99A2; margin-bottom:8px; display:block;}
.timeline-item h4{font-size:15px; font-weight:700; margin-bottom:8px; color:var(--white); min-height:40px;}
.timeline-item p{font-size:13px; color:#AEBBC3;}

@media (max-width:900px){
  .timeline{grid-template-columns:repeat(2,1fr); row-gap:38px;}
  .timeline-line{display:none;}
}
@media (max-width:520px){
  .timeline{grid-template-columns:1fr;}
}

/* ---------- split panels ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }
.split-panel{background:var(--white); padding:44px 40px; border-top:4px solid var(--blue);}
.split-panel.gov{border-top-color:var(--green);}
.split-panel.export{border-top-color:var(--blue);}
.split-panel .sp-badge{width:52px; height:52px; margin-bottom:18px;}
.split-panel .sp-tag{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber); display:block; margin-bottom:16px;}
.split-panel h3{font-size:23px; margin-bottom:14px;}
.split-panel ul{margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:13px;}
.split-panel li{display:flex; gap:12px; font-size:14.5px; color:var(--ink-soft);}
.split-panel li svg{flex:none; width:16px; height:16px; margin-top:3px;}
.split-panel.gov li svg{color:var(--green);}
.split-panel.export li svg{color:var(--blue);}

/* ---------- testimonials ---------- */
.testimonials{background:var(--paper-deep);}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:880px){ .t-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .t-grid{grid-template-columns:1fr;} }
.t-card{background:var(--white); padding:28px 26px; display:flex; flex-direction:column; gap:18px; border-top:3px solid var(--line);}
.t-card:nth-child(1){border-top-color:var(--blue);}
.t-card:nth-child(2){border-top-color:var(--teal);}
.t-card:nth-child(3){border-top-color:var(--rust);}
.t-quote{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
.t-who{font-size:13px; color:var(--steel); border-top:1px solid var(--line); padding-top:14px;}
.t-who strong{display:block; color:var(--ink); font-size:13.5px; font-weight:600;}

/* ---------- contact ---------- */
.contact{padding-top:84px;}
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info{background:var(--blue-deep); color:var(--white); padding:44px 40px;}
.contact-info h3{color:var(--white); font-size:23px; margin-bottom:16px;}
.contact-info p{color:#C4D0D7; font-size:14.5px; margin-bottom:28px;}
.ci-row{display:flex; gap:14px; padding:15px 0; border-top:1px solid rgba(255,255,255,.16);}
.ci-row svg{width:18px; height:18px; flex:none; color:var(--amber-bright); margin-top:2px;}
.ci-row div{font-size:14px;}
.ci-row span{display:block; font-size:11.5px; color:#93A2AB; margin-bottom:2px; font-family:'IBM Plex Mono',monospace;}

.contact-form{background:var(--white); padding:44px 40px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font-size:12.5px; color:var(--steel); font-weight:600;}
.field input, .field select, .field textarea{
  border:1px solid var(--line); background:var(--paper); padding:11px 13px;
  font-family:inherit; font-size:14px; color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue); outline-offset:1px;}
.field.full{grid-column:1/-1;}
.field.error input, .field.error select, .field.error textarea{border-color:var(--rust);}
.field-msg{font-size:12px; color:var(--rust); min-height:14px;}
.form-status{
  margin-top:14px; padding:12px 14px; font-size:13.5px; display:none; border:1px solid var(--line);
}
.form-status.show{display:block;}
.form-status.ok{background:#E7F2EC; border-color:var(--green-bright); color:var(--green-deep);}
.form-status.err{background:#F8E9E2; border-color:var(--rust); color:var(--rust-deep);}
.form-submit[disabled]{opacity:.6; cursor:default;}

/* ---------- footer ---------- */
footer{background:var(--blue-deep); color:#AEBBC3; padding:56px 0 26px; margin-top:0;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.14);}
@media (max-width:720px){ .foot-grid{grid-template-columns:1fr;} }
.foot-grid h4{color:var(--white); font-size:14px; margin-bottom:16px;}
.foot-brand p{font-size:14px; max-width:38ch; margin-top:14px;}
.foot-links{display:flex; flex-direction:column; gap:10px; font-size:14px;}
.foot-links a:hover{color:var(--white);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:12px;}

/* ---------- gallery ---------- */
.gallery{background:var(--paper);}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:200px; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.gallery-item{display:block; overflow:hidden; background:var(--paper-deep);}
.gallery-item.span-2{grid-column:span 2; grid-row:span 1;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.gallery-item:hover img{transform:scale(1.06);}
@media (max-width:880px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;}
  .gallery-item.span-2{grid-column:span 2;}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-item.span-2{grid-column:span 1;}
}

/* ---------- certifications ---------- */
.certifications{background:var(--paper-deep);}
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:880px){ .cert-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cert-grid{grid-template-columns:1fr;} }
.cert-card{background:var(--white); padding:28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;}
.cert-card svg{width:36px; height:36px; color:var(--amber);}
.cert-card h4{font-size:14.5px; font-weight:700; color:var(--ink-soft);}
.cert-card p{font-size:12.5px; color:var(--steel);}
.cert-card:nth-child(4n+1) svg{color:var(--blue);}
.cert-card:nth-child(4n+2) svg{color:var(--green);}
.cert-card:nth-child(4n+3) svg{color:var(--teal);}
.cert-card:nth-child(4n+4) svg{color:var(--amber);}

/* ---------- careers ---------- */
.careers{padding:0;}
.careers-band{
  background:var(--blue-deep); color:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:48px 44px; margin:84px 0;
}
.careers-band .kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber-bright); display:block; margin-bottom:14px;}
.careers-band h2{font-size:clamp(22px,2.8vw,30px); color:var(--white); max-width:26ch;}
.careers-band p{margin-top:14px; color:#C7D2D8; font-size:14.5px; max-width:52ch;}
@media (max-width:720px){ .careers-band{padding:36px 26px;} }
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:44px; height:44px; background:var(--blue); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease; cursor:pointer; border:none;
}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.to-top:hover{background:var(--blue-deep);}

.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* ---------- CMS additions: nav badge + flash banner ---------- */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:4px;
  background:var(--amber); color:#211202; border-radius:9px;
  font-size:10.5px; font-weight:700; font-family:'IBM Plex Mono',monospace;
}
.site-flash{padding:14px 0; font-size:14.5px; text-align:center;}
.site-flash-success{background:#E7F2EC; color:var(--green-deep);}
.site-flash-error{background:#F8E9E2; color:var(--rust-deep);}

/* ---------- inner page hero (non-slider pages) ---------- */
.page-hero{background:var(--blue-deep); color:var(--white); padding:56px 0;}
.page-hero h1{color:var(--white); font-size:clamp(26px,3.6vw,40px);}
.page-hero .crumb{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber-bright); margin-bottom:12px; display:block;}
.page-hero p{margin-top:14px; color:#C7D2D8; max-width:60ch;}

/* ---------- category / product listing ---------- */
.category-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.category-filter a{
  padding:9px 16px; font-size:13.5px; border:1px solid var(--line); color:var(--ink-soft);
}
.category-filter a.is-active, .category-filter a:hover{background:var(--blue); color:var(--white); border-color:var(--blue);}

/* ---------- product detail page ---------- */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;}
@media (max-width:880px){ .product-detail{grid-template-columns:1fr;} }
.pd-gallery-main{border:1px solid var(--line); background:var(--paper-deep); aspect-ratio:4/3; overflow:hidden; margin-bottom:12px;}
.pd-gallery-main img{width:100%; height:100%; object-fit:cover;}
.pd-thumbs{display:flex; gap:10px; flex-wrap:wrap;}
.pd-thumbs button{width:70px; height:56px; padding:0; border:1px solid var(--line); background:var(--white); cursor:pointer; overflow:hidden;}
.pd-thumbs button img{width:100%; height:100%; object-fit:cover;}
.pd-thumbs button.is-active{border-color:var(--blue); border-width:2px;}
.pd-body h1{font-size:clamp(24px,3.2vw,34px); margin-bottom:14px;}
.pd-body .pd-lead{color:var(--ink-soft); font-size:16px; margin-bottom:22px;}
.pd-body .pd-desc{color:var(--ink-soft); font-size:15px; line-height:1.7;}
.pd-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.pd-specs{margin-top:26px; border:1px solid var(--line); border-top:none;}
.pd-specs .spec-row{display:flex; border-top:1px solid var(--line); font-size:14px;}
.pd-specs .spec-row span:first-child{width:40%; padding:10px 14px; background:var(--paper-deep); font-weight:600; color:var(--ink-soft);}
.pd-specs .spec-row span:last-child{padding:10px 14px; color:var(--ink-soft);}
.pd-crumb{font-size:13px; color:var(--steel); margin-bottom:18px;}
.pd-crumb a:hover{color:var(--blue);}

/* ---------- gallery lightbox-free grid (reuse .gallery-grid) ---------- */

/* ---------- careers ---------- */
.opening-card{border:1px solid var(--line); padding:24px 26px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.opening-card h3{font-size:17px; margin-bottom:6px;}
.opening-meta{font-size:13px; color:var(--steel); display:flex; gap:14px; flex-wrap:wrap;}
.no-openings{border:1px dashed var(--line); padding:30px; text-align:center; color:var(--steel);}

/* ---------- generic simple form page (partner/contact) ---------- */
.simple-form{max-width:720px; border:1px solid var(--line); background:var(--white); padding:36px;}
.simple-form .field{margin-bottom:18px;}

/* ---------- 404 ---------- */
.error-404{padding:100px 0; text-align:center;}
.error-404 .code{font-family:'Archivo',sans-serif; font-weight:800; font-size:80px; color:var(--line);}

/* =====================================================================
   UPDATE 3 — coloured Products dropdown, carousel, square gallery,
   WhatsApp pop-up, careers redesign, About split layout
   ===================================================================== */

/* ---------- Products mega-menu (coloured, with side image + sub-categories) ---------- */
nav.primary .mega-menu{
  width:780px; max-width:92vw; grid-template-columns:250px 1fr;
  background:linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  border:none; border-top:4px solid var(--amber);
  box-shadow:0 24px 50px rgba(18,42,61,.35);
}
nav.primary .mega-image{
  background:rgba(255,255,255,.07); border-right:1px solid rgba(255,255,255,.14);
  padding:22px 18px; flex-direction:column; gap:14px; align-items:center; justify-content:center; display:flex;
}
nav.primary .mega-image img{background:var(--paper); border:1px solid rgba(255,255,255,.25); max-height:170px; width:100%; object-fit:contain;}
nav.primary .mega-caption{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--amber-bright); letter-spacing:.04em; text-transform:uppercase;}
nav.primary .mega-cols{padding:14px 10px 16px; max-height:430px; overflow-y:auto;}
nav.primary .mega-all{display:block; padding:6px 16px 12px; font-size:12.5px; font-weight:600; color:var(--amber-bright);}
nav.primary .mega-all::after{display:none;}
nav.primary .mega-list{list-style:none; margin:0; padding:0; column-count:2; column-gap:6px; max-height:none; overflow:visible;}
nav.primary .mega-top{break-inside:avoid; margin-bottom:6px; border-left:3px solid var(--blue-bright);}
nav.primary .mega-top:nth-child(5n+1){border-left-color:var(--blue-bright);}
nav.primary .mega-top:nth-child(5n+2){border-left-color:var(--green-bright);}
nav.primary .mega-top:nth-child(5n+3){border-left-color:#3FC1B8;}
nav.primary .mega-top:nth-child(5n+4){border-left-color:var(--amber-bright);}
nav.primary .mega-top:nth-child(5n+5){border-left-color:#E0784F;}
nav.primary .mega-menu a{display:block; color:#E4EDF3; white-space:normal; padding:8px 14px; font-size:13.5px; line-height:1.3;}
nav.primary .mega-menu a::after{display:none;}
nav.primary .mega-menu a:hover{background:rgba(255,255,255,.12); color:#fff;}
nav.primary .mega-top > a{font-weight:600;}
nav.primary .mega-sub{list-style:none; margin:0 0 4px; padding:0 0 0 12px;}
nav.primary .mega-sub a{font-size:12.5px; font-weight:400; color:#B9CAD6; padding:5px 12px;}
nav.primary .mega-sub a::before{content:"↳ "; color:var(--amber-bright);}

/* ---------- Featured products carousel ---------- */
.carousel{position:relative; padding:0 26px;}
.car-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 2px 10px; scrollbar-width:none;
}
.car-track::-webkit-scrollbar{display:none;}
.car-track .product-card{
  flex:0 0 calc((100% - 54px) / 4); scroll-snap-align:start;
  border:1px solid var(--line); border-top-width:4px;
}
@media (max-width:1000px){ .car-track .product-card{flex-basis:calc((100% - 36px) / 3);} }
@media (max-width:720px){ .car-track .product-card{flex-basis:calc((100% - 18px) / 2);} .carousel{padding:0 8px;} }
@media (max-width:460px){ .car-track .product-card{flex-basis:88%;} }
.car-btn{
  position:absolute; top:calc(50% - 30px); z-index:5; width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:#fff; border:3px solid var(--paper); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(18,42,61,.3);
  transition:background .15s ease, transform .15s ease;
}
.car-btn svg{width:16px; height:16px;}
.car-btn:hover{background:var(--amber); transform:scale(1.06);}
.car-btn[disabled]{opacity:.35; cursor:default; transform:none; background:var(--steel);}
.car-prev{left:-14px;}
.car-next{right:-14px;}
@media (max-width:720px){ .car-prev{left:-4px;} .car-next{right:-4px;} .car-btn{width:38px; height:38px;} }
.car-progress{height:4px; background:var(--line); margin:14px 26px 0; position:relative; border-radius:2px; overflow:hidden;}
.car-progress span{position:absolute; top:0; bottom:0; left:0; width:25%; background:linear-gradient(90deg,var(--blue),var(--amber)); border-radius:2px; transition:left .15s linear, width .15s linear;}

/* ---------- Gallery: square tiles, never stretched ---------- */
.gallery-square{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .gallery-square{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .gallery-square{grid-template-columns:repeat(2,1fr); gap:10px;} }
.gallery-tile{display:block; aspect-ratio:1/1; overflow:hidden; background:var(--paper-deep); border:1px solid var(--line); position:relative;}
.gallery-tile img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s ease;}
.gallery-tile:hover img{transform:scale(1.07);}
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(9,20,30,.93); display:flex; align-items:center; justify-content:center; padding:40px 70px;}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; background:#fff;}
.lb-close{position:absolute; top:16px; right:22px; background:none; border:none; color:#fff; font-size:38px; cursor:pointer; line-height:1;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none; color:#fff; font-size:38px; width:50px; height:64px; cursor:pointer;}
.lb-nav:hover{background:rgba(255,255,255,.25);}
.lb-prev{left:12px;} .lb-next{right:12px;}
.lb-caption{position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#D6DEE4; font-size:14px;}

/* ---------- About page: text + right-hand image ---------- */
.about-split{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; margin-bottom:50px;}
@media (max-width:880px){ .about-split{grid-template-columns:1fr;} }
.about-side-img img{width:100%; border:6px solid var(--white); box-shadow:0 14px 36px rgba(18,42,61,.2); background:var(--paper-deep);}

/* ---------- Floating WhatsApp / call / location + chat pop-up ---------- */
.fab-stack{position:fixed; right:22px; bottom:86px; z-index:70; display:flex; flex-direction:column; gap:12px;}
.fab{width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.28); transition:transform .15s ease;}
.fab:hover{transform:scale(1.08);}
.fab svg{width:24px; height:24px;}
.fab-map{background:var(--rust);}
.fab-call{background:var(--blue);}
.fab-wa{background:#25A35A; width:56px; height:56px; margin-left:-4px;}
.fab-wa svg{width:30px; height:30px;}
.wa-popup{position:fixed; right:92px; bottom:86px; z-index:71; width:290px; background:#fff; box-shadow:0 18px 44px rgba(0,0,0,.3); border-radius:10px; overflow:hidden;}
.wa-popup[hidden]{display:none;}
.wa-head{background:#128C4B; color:#fff; padding:14px 40px 14px 16px; position:relative;}
.wa-head strong{display:block; font-size:14.5px;}
.wa-head span{font-size:12px; opacity:.9;}
.wa-close{position:absolute; top:8px; right:10px; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}
.wa-body{padding:18px 16px; background:#E9E2D6;}
.wa-bubble{background:#fff; padding:10px 13px; border-radius:0 10px 10px 10px; font-size:13.5px; color:#222; display:inline-block; box-shadow:0 1px 2px rgba(0,0,0,.12);}
.wa-start{display:block; text-align:center; background:#25A35A; color:#fff; padding:13px; font-weight:600; font-size:14.5px;}
.wa-start:hover{background:#128C4B;}
@media (max-width:520px){ .wa-popup{right:14px; bottom:160px; width:calc(100% - 28px);} .fab-stack{right:14px;} }

/* footer extras */
.foot-address{font-size:13px; margin-top:14px; max-width:30ch; line-height:1.5;}
.dev-credit{color:var(--amber-bright); font-weight:600;}
.dev-credit:hover{color:#fff; text-decoration:underline;}

/* ---------- Careers page ---------- */
.why-join{padding:56px 0 30px;}
.perk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .perk-grid{grid-template-columns:1fr;} }
.perk{background:var(--white); border:1px solid var(--line); border-top:4px solid var(--blue); padding:28px 26px;}
.perk svg{width:36px; height:36px; margin-bottom:14px; color:var(--blue);}
.perk h3{font-size:17px; margin-bottom:8px;}
.perk p{font-size:14px; color:var(--steel);}
.perk-green{border-top-color:var(--green);} .perk-green svg{color:var(--green);}
.perk-amber{border-top-color:var(--amber);} .perk-amber svg{color:var(--amber);}

.opening-list{display:flex; flex-direction:column; gap:16px;}
.opening-card2{background:var(--white); border:1px solid var(--line); border-left:5px solid var(--blue); padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; transition:box-shadow .2s ease, transform .2s ease;}
.opening-card2:hover{box-shadow:0 12px 28px rgba(18,42,61,.12); transform:translateY(-2px);}
.opening-card2.accent-1{border-left-color:var(--green);} .opening-card2.accent-2{border-left-color:var(--teal);} .opening-card2.accent-3{border-left-color:var(--amber);}
.oc-main{flex:1; min-width:240px;}
.oc-main h3{font-size:19px; margin-bottom:10px;}
.oc-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.tag{background:var(--paper-deep); color:var(--ink-soft); font-size:12px; padding:4px 10px; border-radius:20px; font-weight:500;}
.oc-desc{font-size:13.5px; color:var(--steel); max-width:70ch;}
.no-openings{background:var(--white); border:2px dashed var(--line); padding:38px; text-align:center; color:var(--steel); line-height:1.7;}

.apply-card{display:grid; grid-template-columns:.85fr 1.15fr; box-shadow:0 18px 44px rgba(18,42,61,.14); border:1px solid var(--line);}
@media (max-width:900px){ .apply-card{grid-template-columns:1fr;} }
.apply-side{background:linear-gradient(160deg,var(--blue-deep),var(--blue)); color:#fff; padding:44px 38px;}
.apply-side .kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber-bright); display:block; margin-bottom:14px;}
.apply-side h2{color:#fff; font-size:28px; margin-bottom:14px;}
.apply-side p{color:#C7D8E3; font-size:14.5px; margin-bottom:24px;}
.apply-steps{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:14px;}
.apply-steps li{display:flex; align-items:center; gap:12px; font-size:14.5px; color:#E4EDF3;}
.apply-steps b{width:30px; height:30px; border-radius:50%; background:var(--amber); color:#211202; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;}
.apply-mail{font-size:13px; color:#B9CAD6; border-top:1px solid rgba(255,255,255,.18); padding-top:18px;}
.apply-mail a{color:var(--amber-bright); font-weight:600;}
.apply-form{background:var(--white); padding:40px 38px;}
.apply-form .field input, .apply-form .field select, .apply-form .field textarea{background:var(--paper); border:1px solid var(--line); padding:12px 14px; transition:border-color .15s ease, background .15s ease;}
.apply-form .field input:focus, .apply-form .field select:focus, .apply-form .field textarea:focus{background:#fff; border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(40,87,126,.15);}
.file-drop{display:flex; align-items:center; gap:14px; border:2px dashed var(--line); background:var(--paper); padding:20px 18px; cursor:pointer; color:var(--ink-soft); font-size:14px; transition:border-color .15s ease, background .15s ease;}
.file-drop:hover{border-color:var(--blue); background:#fff;}
.file-drop svg{width:30px; height:30px; color:var(--blue); flex:none;}
.file-drop em{color:var(--steel); font-size:12.5px;}
.btn-lg{padding:15px 30px; font-size:15.5px; margin-top:6px;}

/* =====================================================================
   UPDATE 4 — catalogue content: product detail sections, 5 capabilities,
   certificate cards with images
   ===================================================================== */

/* five (or any number of) capability tiles */
.cap-list{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));}

/* product page: rich intro + feature / advantage / benefit cards */
.pd-desc p{margin:0 0 14px;}
.pd-desc strong{color:var(--ink);}
.pd-sections{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:54px;}
@media (max-width:820px){ .pd-sections{grid-template-columns:1fr;} }
.pd-section{background:var(--white); border:1px solid var(--line); border-top:4px solid var(--blue); padding:26px 28px;}
.pd-section h3{font-size:17px; margin-bottom:14px;}
.pd-section ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.pd-section li{position:relative; padding-left:24px; font-size:14.5px; color:var(--ink-soft); line-height:1.5;}
.pd-section li::before{content:""; position:absolute; left:2px; top:5px; width:11px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg);}
.pd-section li strong{color:var(--ink);}
.pd-section p{font-size:14.5px; color:var(--ink-soft);}
.pd-accent-1{border-top-color:var(--green);} .pd-accent-2{border-top-color:var(--teal);} .pd-accent-3{border-top-color:var(--amber);} .pd-accent-4{border-top-color:var(--rust);}
.pd-accent-1 li::before{border-color:var(--green);} .pd-accent-2 li::before{border-color:var(--teal);}
.pd-accent-3 li::before{border-color:var(--amber);} .pd-accent-4 li::before{border-color:var(--rust);}
.pd-accent-0 li::before{border-color:var(--blue);}
/* a lone final section (odd count) spans the full width */
.pd-sections .pd-section:last-child:nth-child(odd){grid-column:1/-1;}
.pd-sections .pd-section:last-child:nth-child(odd) ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:9px 28px;}

/* certificates */
.cert-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:880px){ .cert-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cert-grid{grid-template-columns:1fr;} }
.cert-card{padding:28px 24px; gap:12px;}
.cert-card .cert-img{height:170px; width:100%; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); padding:8px;}
.cert-card .cert-img img{max-width:100%; max-height:100%; object-fit:contain;}
.cert-card h4{font-size:15.5px; color:var(--ink);}
.cert-card p{font-size:13px; line-height:1.55;}
.cert-foot{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; padding:26px 20px 0; font-size:13.5px; color:var(--steel);}
.cert-foot b{color:var(--ink); margin-right:6px; font-family:'IBM Plex Mono',monospace; font-size:12px;}

/* =====================================================================
   UPDATE 5 — About page: Team / Commitment cards, Vision band, Key Strength strip
   ===================================================================== */

/* two-tone icons */
svg.fi{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
svg.fi .acc{stroke:var(--amber);}
svg.fi .acc-fill{fill:var(--amber); stroke:var(--amber);}

/* round gradient icon badge */
.ico-badge{
  width:84px; height:84px; border-radius:50%; flex:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 25%, var(--green-bright), var(--green) 55%, var(--green-deep));
  box-shadow:0 10px 24px rgba(27,68,48,.35), inset 0 0 0 4px rgba(255,255,255,.18);
}
.ico-badge svg{width:46px; height:46px;}
.ico-badge svg.fi .acc{stroke:var(--amber-bright);}
.ico-badge svg.fi .acc-fill{fill:var(--amber-bright); stroke:var(--amber-bright);}
.ico-lg{width:108px; height:108px;} .ico-lg svg{width:62px; height:62px;}
.ico-sm{width:56px; height:56px; box-shadow:0 0 0 3px rgba(255,255,255,.35);} .ico-sm svg{width:32px; height:32px;}

/* tick lists (green circle + white tick) */
.tick-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.tick-list li{position:relative; padding-left:36px; font-size:15px; color:var(--ink-soft); line-height:1.45;}
.tick-list li::before{
  content:""; position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;
}
.tick-bold li{font-weight:600; color:var(--ink); font-size:15.5px;}

/* Our Team / Our Commitment */
.tc-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media (max-width:820px){ .tc-grid{grid-template-columns:1fr;} }
.tc-card{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:34px 34px 34px; overflow:hidden; box-shadow:0 14px 34px rgba(18,42,61,.08);
}
.tc-card::before{content:""; position:absolute; left:0; top:0; right:0; height:6px; background:linear-gradient(90deg,var(--blue),var(--blue-bright));}
.tc-green::before{background:linear-gradient(90deg,var(--green),var(--green-bright));}
.tc-card::after{content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; background:rgba(40,87,126,.06);}
.tc-green::after{background:rgba(47,122,77,.07);}
.tc-card .ico-badge{margin-bottom:18px; position:relative; z-index:1;}
.tc-blue .ico-badge{background:radial-gradient(circle at 30% 25%, var(--blue-bright), var(--blue) 55%, var(--blue-deep)); box-shadow:0 10px 24px rgba(18,42,61,.35), inset 0 0 0 4px rgba(255,255,255,.18);}
.tc-card h3{font-size:26px; color:var(--green-deep); text-transform:uppercase; letter-spacing:.01em; position:relative; z-index:1;}
.tc-blue h3{color:var(--blue-deep);}
.tc-rule{display:block; width:64px; height:4px; background:var(--amber); margin:12px 0 20px; position:relative; z-index:1;}
.tc-lead{font-size:15.5px; color:var(--ink); margin-bottom:16px; line-height:1.55; position:relative; z-index:1;}
.tc-card .tick-list{position:relative; z-index:1;}
.tc-blue .tick-list li::before{background-color:var(--blue);}

/* Vision + Service Support band */
.vision-band{
  background:linear-gradient(135deg, var(--green-deep) 0%, var(--blue-deep) 100%);
  padding:80px 0 70px; position:relative; overflow:hidden;
}
.vision-band::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(87,163,116,.35), transparent 38%),
    radial-gradient(circle at 90% 85%, rgba(227,162,78,.22), transparent 40%);
}
.vision-band .wrap{position:relative;}
.vp-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;}
@media (max-width:860px){ .vp-grid{grid-template-columns:1fr;} }
.v-panel{background:rgba(255,255,255,.96); border-radius:18px; overflow:hidden; box-shadow:0 24px 50px rgba(0,0,0,.35); display:flex; flex-direction:column;}
.v-head{
  position:relative; padding:18px 34px; color:#fff; font-family:'Archivo',sans-serif; font-weight:800;
  font-size:22px; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%);
  border-bottom:5px solid var(--amber-bright);
  display:flex; align-items:center; gap:16px;
}
.v-head::after{content:""; position:absolute; right:0; top:0; bottom:0; width:70px; background:linear-gradient(115deg, transparent 50%, var(--amber-bright) 51%, var(--amber) 100%);}
.v-head-icon{padding-left:18px;}
.v-body{padding:30px 34px 34px; flex:1;}
.v-body-vision{display:flex; align-items:center; gap:28px;}
@media (max-width:560px){ .v-body-vision{flex-direction:column; text-align:center;} }
.v-body-vision p{font-size:18px; line-height:1.6; color:var(--ink); font-weight:500;}
.vision-closing{
  text-align:center; margin:44px auto 0; max-width:34ch; color:#fff; font-family:'Archivo',sans-serif;
  font-weight:700; font-size:clamp(20px,2.6vw,28px); line-height:1.35;
}
.vision-closing::before, .vision-closing::after{content:""; display:block; width:90px; height:3px; margin:0 auto 18px; background:var(--amber-bright);}
.vision-closing::after{margin:20px auto 0;}

/* Key Strength strip */
.strength-band{
  background:linear-gradient(135deg, var(--green-deep) 0%, var(--blue-deep) 100%);
  padding:56px 0 60px; position:relative;
}
.strength-head{text-align:center; margin-bottom:-22px; position:relative; z-index:2;}
.strength-ribbon{
  display:inline-block; padding:11px 64px; font-family:'Archivo',sans-serif; font-weight:800; font-size:18px; letter-spacing:.12em; color:#211202;
  background:linear-gradient(90deg, var(--amber-bright), var(--amber)); clip-path:polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.strength-panel{
  background:#fff; border-radius:22px; padding:50px 18px 30px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  box-shadow:0 22px 50px rgba(0,0,0,.35);
}
.strength-item{padding:6px 16px 4px; text-align:center; border-right:1px solid var(--line);}
.strength-item:last-child{border-right:none;}
@media (max-width:760px){ .strength-item{border-right:none; border-bottom:1px solid var(--line); padding:22px 10px;} .strength-item:last-child{border-bottom:none;} }
.strength-ico{width:84px; height:84px; margin:0 auto 14px; color:var(--green-deep); display:flex; align-items:center; justify-content:center;}
.strength-ico svg{width:100%; height:100%; stroke-width:1.8;}
.strength-item h4{font-size:13.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--green-deep); margin-bottom:7px; line-height:1.25;}
.strength-item p{font-size:12.5px; color:var(--steel); line-height:1.4;}

/* polish */
.v-head{min-height:92px;}
.ico-badge svg.fi{stroke-width:2.5;}
.ico-badge svg{width:50px; height:50px;}
.ico-lg svg{width:66px; height:66px;} .ico-sm svg{width:34px; height:34px; stroke-width:2.6;}
.strength-ico{border-radius:50%; background:radial-gradient(circle, #E9F1EB 0%, #F6FAF7 62%, #fff 100%); width:92px; height:92px; padding:14px;}
.v-head{height:96px; min-height:0;}
@media (max-width:760px){ .strength-item:nth-last-child(-n+2){border-bottom:none;} }

/* the slider is a <section>; without this the global section padding adds a dead band above and below it */
.hero-slider{padding:0;}

/* =====================================================================
   Visual QA fixes
   ===================================================================== */
.slide h1{max-width:20ch;}
.section-head{max-width:780px;}

/* capability tiles: larger icon in a soft tinted circle */
.cap-item .ci-icon{width:60px; height:60px; padding:13px; border-radius:50%; background:color-mix(in srgb, currentColor 11%, #fff);}
.cap-item .ci-icon *{stroke-width:1.9;}
.cap-item h4{margin-bottom:6px;}

/* Government / Export panels: same gradient icon badge as the About page */
.split-panel .sp-ico{width:68px; height:68px; margin-bottom:20px;}
.split-panel .sp-ico svg{width:38px; height:38px;}
.split-panel.export .sp-ico{background:radial-gradient(circle at 30% 25%, var(--blue-bright), var(--blue) 55%, var(--blue-deep)); box-shadow:0 10px 24px rgba(18,42,61,.35), inset 0 0 0 4px rgba(255,255,255,.18);}

/* product page: category label above the title */
.pd-body .kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber); display:block; margin-bottom:10px; letter-spacing:.03em; text-transform:uppercase;}

/* testimonials: make the quote read as a quote */
.t-quote{font-size:16px; font-weight:600; color:var(--ink); line-height:1.45; letter-spacing:.01em;}
.cap-item:nth-child(n+5){border-top-color:var(--amber);}
.cap-item:nth-child(n+5) .ci-icon{color:var(--amber);}
.client-logo-m img{opacity:.92;}

/* =====================================================================
   Capabilities — colourful animated cards (Home + About)
   ===================================================================== */
.cap-list{gap:22px; background:none; border:none; counter-reset:cap; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}
.cap-list > .cap-item{
  --c1:#4C89B0; --c2:#163049; --glow:rgba(40,87,126,.40);
  position:relative; overflow:hidden; isolation:isolate;
  background:#fff; border:1px solid var(--line); border-top:1px solid var(--line); border-radius:18px;
  padding:36px 24px 30px; gap:18px;
  box-shadow:0 8px 22px rgba(18,42,61,.07);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.cap-list > .cap-item:nth-child(5n+2){--c1:#57A374; --c2:#1B4430; --glow:rgba(47,122,77,.40);}
.cap-list > .cap-item:nth-child(5n+3){--c1:#2FB8AD; --c2:#0F534E; --glow:rgba(30,138,131,.40);}
.cap-list > .cap-item:nth-child(5n+4){--c1:#E58257; --c2:#8A3B1E; --glow:rgba(177,83,48,.40);}
.cap-list > .cap-item:nth-child(5n+5){--c1:#EDB25D; --c2:#A9611B; --glow:rgba(204,126,44,.45);}

/* coloured bar along the top */
.cap-list > .cap-item::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:2; background:linear-gradient(90deg, var(--c1), var(--c2));}
/* soft colour disc in the corner — grows to flood the whole card on hover */
.cap-list > .cap-item::after{
  content:""; position:absolute; z-index:-1; right:-64px; top:-64px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--c1), var(--c2)); opacity:.13;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
/* big faint step number */
.cap-list > .cap-item > div::before{
  counter-increment:cap; content:"0" counter(cap); position:absolute; right:22px; top:26px;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:36px; line-height:1; color:var(--c2); opacity:.14;
  transition:color .4s ease, opacity .4s ease;
}

/* round gradient icon */
.cap-list > .cap-item .ci-icon{
  width:70px; height:70px; padding:17px; border-radius:50%; color:#fff;
  background:linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:0 12px 24px var(--glow), inset 0 0 0 3px rgba(255,255,255,.25);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .4s ease, color .4s ease, box-shadow .4s ease;
  animation:capFloat 4.2s ease-in-out infinite;
}
.cap-list > .cap-item:nth-child(2) .ci-icon{animation-delay:-.8s;}
.cap-list > .cap-item:nth-child(3) .ci-icon{animation-delay:-1.6s;}
.cap-list > .cap-item:nth-child(4) .ci-icon{animation-delay:-2.4s;}
.cap-list > .cap-item:nth-child(5) .ci-icon{animation-delay:-3.2s;}
.cap-list > .cap-item .ci-icon *{stroke-width:2;}

.cap-list > .cap-item h4{font-size:17.5px; margin-bottom:8px; color:var(--ink); transition:color .35s ease;}
.cap-list > .cap-item p{font-size:14px; line-height:1.6; color:var(--steel); transition:color .35s ease;}

/* hover: lift, flood with colour, icon spins to white */
.cap-list > .cap-item:hover{transform:translateY(-12px); box-shadow:0 26px 48px var(--glow); border-color:transparent;}
.cap-list > .cap-item:hover::after{transform:scale(10); opacity:1;}
.cap-list > .cap-item:hover h4{color:#fff;}
.cap-list > .cap-item:hover p{color:rgba(255,255,255,.9);}
.cap-list > .cap-item:hover > div::before{color:#fff; opacity:.3;}
.cap-list > .cap-item:hover .ci-icon{transform:rotate(-10deg) scale(1.12); background:#fff; color:var(--c2); box-shadow:0 12px 26px rgba(0,0,0,.25);}

@keyframes capFloat{0%,100%{translate:0 0;} 50%{translate:0 -5px;}}
@keyframes capIn{from{opacity:0; transform:translateY(38px) scale(.95);} to{opacity:1; transform:none;}}
.cap-list.reveal.in > .cap-item{animation:capIn .75s cubic-bezier(.2,.8,.2,1) backwards;}
.cap-list.reveal.in > .cap-item:nth-child(2){animation-delay:.12s;}
.cap-list.reveal.in > .cap-item:nth-child(3){animation-delay:.24s;}
.cap-list.reveal.in > .cap-item:nth-child(4){animation-delay:.36s;}
.cap-list.reveal.in > .cap-item:nth-child(5){animation-delay:.48s;}
.cap-list.reveal.in > .cap-item:nth-child(n+6){animation-delay:.6s;}
@media (prefers-reduced-motion: reduce){
  .cap-list > .cap-item .ci-icon, .cap-list.reveal.in > .cap-item{animation:none;}
  .cap-list > .cap-item, .cap-list > .cap-item::after{transition:none;}
}