/* ============================================================
   VERDIONA ENGINEERING — site styles
   ============================================================ */

:root{
  --navy:#0F2742;
  --navy-deep:#0A1B2E;
  --navy-soft:#1B3A5C;
  --green:#2F8F3E;
  --green-dark:#25752F;
  --green-bright:#4FAE1F;
  --teal:#0E8FA3;
  --ink:#233043;
  --muted:#5A6A7D;
  --line:#E2E8EF;
  --bg:#FFFFFF;
  --bg-tint:#F4F7FA;
  --shadow-sm:0 1px 2px rgba(15,39,66,.06), 0 4px 14px rgba(15,39,66,.06);
  --shadow-md:0 8px 30px rgba(15,39,66,.10);
  --wrap:1240px;
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,h4{
  font-family:"Archivo","Inter",sans-serif;
  color:var(--navy);
  margin:0;
  line-height:1.08;
  letter-spacing:-.01em;
}

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; flex:0 0 auto;
  font-family:"Inter",sans-serif; font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--green)}
.btn-ghost:hover{background:rgba(47,143,62,.08)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:3px solid var(--teal); outline-offset:3px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:0 2px 18px rgba(15,39,66,.10)}
.header-inner{display:flex; align-items:center; gap:22px; height:100px}
.logo img{height:64px; width:auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:21px}
.nav a{
  font-size:14.5px; font-weight:500; color:var(--navy); padding:6px 0;
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.nav a:hover{color:var(--green)}
.nav a.active{border-bottom-color:var(--green)}
.nav a.header-cta{margin-left:2px; padding:11px 18px; font-size:13.5px; color:#fff; border-bottom:0}
.nav a.header-cta:hover{color:#fff}
.nav-toggle{
  display:none; margin-left:auto; background:none; border:0; padding:8px;
  cursor:pointer;
}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; background:#fff; overflow:hidden}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:stretch; gap:0;
}
.hero-copy{padding:60px 30px 52px 0; align-self:center}
.hero h1{
  font-size:clamp(33px,3.95vw,49px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.015em;
}
.hero-sub{
  margin:18px 0 0; font-size:clamp(14.5px,1.12vw,16px); color:var(--navy-soft); font-weight:500;
}
.hero-sub .dot{color:var(--green-bright); margin:0 6px}
.rule{width:78px; height:3px; background:var(--teal); margin:26px 0 22px; border-radius:2px}
.hero-statement{
  margin:0; max-width:33em; font-size:clamp(15.5px,1.3vw,18px); line-height:1.55;
  color:var(--muted); font-weight:400;
}
.tagline{
  margin:22px 0 26px; font-family:"Archivo",sans-serif; font-weight:700;
  font-size:clamp(18px,1.95vw,26px); letter-spacing:.1em; color:var(--navy);
  text-transform:uppercase;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero-media{position:relative; min-height:420px}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:38% center}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.65) 12%,rgba(255,255,255,0) 34%);
}

/* ---------- stats strip ---------- */
.stats{position:relative; margin-top:-46px; z-index:5}
.stats-card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-md); display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);
}
.stat{display:flex; align-items:center; gap:16px; padding:26px 24px; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-icon{
  flex:0 0 54px; height:54px; width:54px; border-radius:50%;
  border:1.5px solid rgba(14,143,163,.35); display:grid; place-items:center; color:var(--teal);
}
.stat-num{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:34px; color:var(--navy); line-height:1}
.stat-label{display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:6px; font-weight:600}
.stat-note{font-size:15.5px; color:var(--navy); font-weight:500; line-height:1.45}

/* ---------- section frame ---------- */
.section{padding:88px 0}
.section-tint{background:var(--bg-tint)}
.section-dark{background:var(--navy-deep); color:#D8E2EC}
.section-dark h2,.section-dark h3{color:#fff}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin:0 0 12px;
}
.section-dark .eyebrow{color:var(--green-bright)}
.section-head{max-width:760px; margin-bottom:44px}
.section-head h2,.h2-lg{font-size:clamp(28px,3.3vw,40px); font-weight:800; text-transform:uppercase}
.section-head p{margin:14px 0 0; font-size:17px; color:var(--muted)}
.section-dark .section-head p{color:#A9BCCE}

/* ---------- service cards ---------- */
.services{padding-top:56px}
.service-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.service{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(47,143,62,.4)}
.service-thumb{height:132px; background:var(--bg-tint)}
.service-thumb img{width:100%; height:100%; object-fit:cover}
.service-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
.service-icon{
  width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center; margin-bottom:14px;
}
.service h3{font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:1.25}
.service p{margin:10px 0 0; font-size:14.5px; color:var(--muted)}
.service .arrow{
  margin-top:auto; padding-top:16px; color:var(--green); font-size:20px; line-height:1;
  transition:transform .2s ease; display:inline-block;
}
.service:hover .arrow{transform:translateX(5px)}
.badge-india{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(15,39,66,.92); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:20px;
}

/* ---------- process ---------- */
.process{padding:52px 0 88px}
.process-track{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.step{position:relative; padding-right:14px}
.step::after{
  content:""; position:absolute; right:-2px; top:14px; width:9px; height:9px;
  border-top:2px solid var(--line); border-right:2px solid var(--line);
  transform:rotate(45deg);
}
.step:last-child::after{display:none}
.step-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.step-num{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--teal);
  color:var(--teal); font-size:14px; font-weight:700; display:grid; place-items:center;
  font-family:"Archivo",sans-serif;
}
.step-name{font-family:"Archivo",sans-serif; font-weight:800; font-size:14px; letter-spacing:.07em; text-transform:uppercase; color:var(--navy)}
.step p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:stretch}
.about-media{display:flex}
.about-media img{border-radius:10px; box-shadow:var(--shadow-md); width:100%; height:100%; object-fit:cover; max-height:620px}
.about-copy p{color:var(--muted); font-size:16.5px}
.pill-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.pill-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink)}
.tick{
  flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:rgba(47,143,62,.12);
  color:var(--green); display:grid; place-items:center; margin-top:2px;
}
.serves{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
.serves strong{color:var(--navy); display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px}

/* ---------- capabilities ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.cap{
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.cap:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.cap-img{height:150px; overflow:hidden}
.cap-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.cap:hover .cap-img img{transform:scale(1.05)}
.cap-body{padding:22px}
.cap-no{
  font-family:"Archivo",sans-serif; font-weight:800; font-size:13px; color:var(--green);
  letter-spacing:.1em;
}
.cap h3{font-size:17px; font-weight:800; text-transform:uppercase; margin:6px 0 10px}
.cap p{margin:0 0 14px; font-size:14.5px; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0}
.tags li{
  font-size:12px; font-weight:600; color:var(--navy-soft); background:var(--bg-tint);
  border:1px solid var(--line); border-radius:20px; padding:4px 11px;
}

/* ---------- manufacturing (India) ---------- */
.mfg{background:var(--navy-deep); color:#CFDCE8; position:relative; overflow:hidden}
.mfg h2,.mfg h3{color:#fff}
.mfg-banner{height:220px; position:relative}
.mfg-banner img{width:100%; height:100%; object-fit:cover; opacity:.55}
.mfg-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,27,46,.35) 0%,var(--navy-deep) 92%);
}
.mfg-inner{padding:0 0 88px; margin-top:-38px; position:relative; z-index:2}
.mfg-lead{display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:start}
.mfg-lead h2{font-size:clamp(28px,3.3vw,40px); font-weight:800; text-transform:uppercase}
.mfg-lead p{color:#A9BCCE; font-size:16.5px}
.mfg-flow{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
}
.mfg-flow span{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:7px 14px; border-radius:20px}
.mfg-flow i{color:var(--green-bright); font-style:normal}
.mfg-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:44px}
.mfg-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:22px;
}
.mfg-card h4{font-family:"Archivo",sans-serif; color:#fff; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px}
.mfg-card p{margin:0; font-size:14.5px; color:#A9BCCE}
.mfg-side{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:26px;
}
.mfg-side h4{font-family:"Archivo",sans-serif; color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px}
.mfg-side ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.mfg-side li{display:flex; gap:11px; font-size:15px; color:#CFDCE8}
.mfg-side .tick{background:rgba(79,174,31,.16); color:var(--green-bright)}

/* ---------- industries ---------- */
.ind-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.ind-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; list-style:none; margin:0; padding:0}
.ind-list li{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px;
  font-weight:600; color:var(--navy); font-size:15px; box-shadow:var(--shadow-sm);
}
.ind-list li small{display:block; font-weight:400; color:var(--muted); font-size:13px; margin-top:4px}
.ind-media img{border-radius:10px; box-shadow:var(--shadow-md)}

/* ---------- projects ---------- */
.proj-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.proj{
  border:1px solid rgba(255,255,255,.13); border-radius:10px; padding:26px;
  background:rgba(255,255,255,.04);
}
.proj .k{
  font-family:"Archivo",sans-serif; font-weight:800; font-size:30px; color:#fff; line-height:1;
}
.proj h3{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin:12px 0 8px}
.proj p{margin:0; font-size:14.5px; color:#A9BCCE}
.locations{
  margin-top:34px; display:flex; flex-wrap:wrap; gap:10px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}
.locations span{border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:7px 15px; color:#fff}

/* ---------- contact ---------- */
.contact{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.contact-bg{position:absolute; inset:0}
.contact-bg img{width:100%; height:100%; object-fit:cover; opacity:.28}
.contact-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--navy) 20%,rgba(15,39,66,.72) 100%)}
.contact-inner{position:relative; z-index:2; padding:84px 0; display:grid; grid-template-columns:1.05fr 1fr; gap:56px}
.contact h2{color:#fff; font-size:clamp(28px,3.3vw,40px); font-weight:800; text-transform:uppercase}
.contact-lead{color:#C6D5E4; font-size:17px; margin:16px 0 28px}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.contact-list li{display:flex; gap:14px; align-items:flex-start}
.ci{
  flex:0 0 40px; width:40px; height:40px; border-radius:8px; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:var(--green-bright);
}
.contact-list b{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#95AEC6; font-weight:700}
.contact-list a,.contact-list p{margin:2px 0 0; color:#fff; font-size:16px}
.contact-list a{display:inline-block}
.contact-list a:hover{color:var(--green-bright)}
.contact-list .cc{font-size:12.5px; color:#95AEC6; letter-spacing:.06em; text-transform:uppercase; margin-left:6px}
.form{
  background:#fff; border-radius:12px; padding:30px; box-shadow:var(--shadow-md); color:var(--ink);
}
.form h3{font-size:19px; font-weight:800; text-transform:uppercase; margin-bottom:6px}
.form .hint{font-size:14px; color:var(--muted); margin:0 0 20px}
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  font-family:inherit; font-size:15px; color:var(--ink); background:#fff; transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--green)}
.field textarea{resize:vertical; min-height:96px}
.form .btn{width:100%}
.form-note{font-size:12.5px; color:var(--muted); margin:12px 0 0; text-align:center}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:#8FA5BB; padding:52px 0 28px; font-size:14.5px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo{background:#fff; border-radius:8px; padding:12px 16px; display:inline-block}
.footer-logo img{height:36px}
.site-footer h5{
  font-family:"Archivo",sans-serif; color:#fff; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 14px;
}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.site-footer a:hover{color:var(--green-bright)}
.footer-blurb{margin:18px 0 0; max-width:330px}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; padding-top:22px; font-size:13px; flex-wrap:wrap}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1150px) and (min-width:901px){
  .logo img{height:52px}
  .header-inner{height:88px; gap:16px}
  .nav{gap:17px}
  .nav a{font-size:14px}
  .nav a.header-cta{padding:10px 15px; font-size:13px}
}
@media (max-width:1080px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-track{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
  .step:nth-child(3)::after{display:none}
  .cap-grid,.mfg-cards,.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2){border-right:0}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:0}
}
@media (max-width:900px){
  .header-inner{height:88px}
  .logo img{height:56px}
  .nav{
    position:fixed; inset:88px 0 auto 0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:8px 24px 24px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md); display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line)}
  .nav a.active{border-bottom-color:var(--line); color:var(--green)}
  .nav a.header-cta{margin:16px 0 0; border-bottom:0}
  .nav-toggle{display:block}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:44px 0 34px; order:2}
  .hero-media{order:1; min-height:280px; height:44vw; max-height:380px}
  .hero-media::after{background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.9) 100%)}
  .stats{margin-top:0}
  .about-grid,.mfg-lead,.ind-grid,.contact-inner{grid-template-columns:1fr; gap:34px}
  .about-media{order:2}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:60px 0}
  .service-grid,.cap-grid,.mfg-cards,.proj-grid,.ind-list,.stats-card{grid-template-columns:1fr}
  .process-track{grid-template-columns:1fr; gap:20px}
  .step::after{display:none}
  .stat{border-right:0; border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .footer-grid{grid-template-columns:1fr}
  .contact-inner{padding:58px 0}
  .hero-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}