/* About uses the same shared navigation/header styles as Homepage.
   Deliberately no page-specific header overrides here. */
/* TEKMILA About page — approved About master mock-up. Scoped to .about-page.
   The homepage's visual design remains unchanged. */
.about-page{background:#fbfcff;color:#0b192b;overflow-x:clip}

.about-hero{height:clamp(355px,34.3vw,515px);background:#06263d;position:relative;isolation:isolate;overflow:hidden;color:#fff}
.about-hero-photo{position:absolute;z-index:-2;inset:0 0 0 auto;width:65%;background:url('../assets/images/about-hero-hd-v2.webp') center center / cover no-repeat}
.about-hero-overlay{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#062338 0%,#062338 28%,rgba(6,35,56,.96) 34%,rgba(6,35,56,.76) 42%,rgba(6,35,56,.24) 52%,rgba(6,35,56,0) 63%)}
.about-hero-content{max-width:1410px;width:calc(100% - clamp(64px,11.7vw,180px));margin:auto;padding-top:clamp(26px,3vw,44px);position:relative;z-index:1}
.about-breadcrumb{display:flex;gap:15px;align-items:center;font-size:clamp(13px,1.02vw,16px);margin-bottom:clamp(25px,3.6vw,50px);line-height:1.4}
.about-breadcrumb a:hover{text-decoration:underline}
.about-breadcrumb span[aria-hidden]{font-weight:800;font-size:23px}
.about-hero h1{margin:0 0 14px;letter-spacing:-2px;font-weight:850;line-height:1.05;font-size:clamp(43px,4.7vw,72px);max-width:720px}
.about-hero h1 em,.about-core h2 em,.about-why h2 em,.about-cta h2 em{font-style:normal;color:#b9f500}
.about-hero p{font-size:clamp(14px,1.17vw,19px);line-height:1.5;max-width:500px;}
.about-hero p{margin:0 0 clamp(21px,2.6vw,34px)}
.about-hero-button{height:46px;padding:0 20px;border-radius:8px;font-size:14px;background:#06273b7a;gap:17px}
.about-hero-button:hover{background:rgba(255,255,255,.15)}
.about-section-container{max-width:1410px;width:calc(100% - clamp(56px,8.6vw,130px));margin:0 auto}
.about-section-kicker{font-size:clamp(11px,.92vw,14px);letter-spacing:1px;font-weight:850;display:flex;align-items:center;gap:10px;margin-bottom:7px}
.about-section-kicker>span{display:inline-block;width:29px;height:5px;background:#bbf700;border-radius:1px}
.about-core{padding:clamp(22px,2.6vw,37px) 0 clamp(25px,3vw,44px)}
.about-core h2{font-weight:850;font-size:clamp(29px,2.9vw,44px);letter-spacing:-1.25px;margin:0 0 clamp(17px,2vw,30px);line-height:1.14}
.about-core h2 em,.about-why h2 em{color:#63c515}
.about-cap-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.9vw,14px)}
.about-page .about-cap-card{height:auto;aspect-ratio:1.02;background-position:center;background-size:100% 100%;border-radius:12px;overflow:hidden;box-shadow:0 7px 15px rgba(4,34,57,.1);cursor:pointer}
.about-page .about-cap-card::after{display:none!important}
.about-page .about-cap-card:hover{transform:translateY(-4px)}
.about-cap-arrow{position:absolute;bottom:13px;right:10px;width:20px;height:20px;color:#fff;filter:drop-shadow(0 1px 3px #001d38)}
.about-cap-arrow svg{height:100%;width:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.about-why{padding:clamp(25px,3vw,40px) 0 26px;background:#fff}
.about-why-layout{display:grid;grid-template-columns:32% minmax(0,1fr);gap:clamp(27px,2.1vw,38px);border-top:1px solid #e2eaf1;padding-top:clamp(19px,2.1vw,32px)}
.about-why-copy{padding:0 13px 0 0;position:relative}
.about-why-copy::after{content:'';height:83%;width:1px;background:#b1c3d4;position:absolute;top:12%;right:-12px}
.about-why h2{font-size:clamp(31px,3vw,46px);letter-spacing:-1.5px;line-height:1.11;margin:0 0 14px;font-weight:850}
.about-why h2 em{display:block}
.about-why-copy>p{max-width:400px;font-size:clamp(13px,1.12vw,16px);line-height:1.45;margin:0 0 19px}
.about-learn{height:43px!important;min-width:0!important;padding:0 17px!important;gap:15px;border-radius:7px;font-size:13px;white-space:nowrap;background:#fff}
.about-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,.85vw,14px);align-items:stretch}
.about-proof-card{overflow:hidden;position:relative;border-radius:12px;background:linear-gradient(150deg,#fff 0%,#fafcff 100%);box-shadow:0 6px 18px rgba(17,54,80,.13);min-width:0;display:flex;flex-direction:column}
.about-proof-card>img{display:block;width:100%;height:clamp(96px,10.3vw,150px);object-fit:cover;object-position:center;}
.about-proof-body{position:relative;flex:1;padding:clamp(19px,1.9vw,28px) clamp(11px,1.3vw,18px) 17px}
.about-proof-icon{display:flex;justify-content:center;align-items:center;background:#e9fac2;color:#204f14;width:39px;height:39px;border-radius:9px;position:absolute;top:-20px;left:14px}
.about-proof-icon svg{height:24px;width:24px}
.about-proof-card h3{font-size:clamp(13px,1.17vw,18px);line-height:1.17;letter-spacing:-.35px;margin:0 0 8px;font-weight:820}
.about-proof-card p{font-size:clamp(11px,1vw,15px);line-height:1.32;margin:0;color:#192e44}
.about-page .about-credentials{max-width:1410px;width:calc(100% - clamp(60px,8.6vw,140px));min-height:112px;margin:auto;padding:22px 0 26px;border-top:1px solid #e4edf4;border-bottom:0}
.about-page .about-credentials .credential{min-width:0}
.about-page .about-credentials .client-trust{min-width:0}
.about-cta{margin-top:9px!important;margin-bottom:24px!important;max-width:1480px;min-height:158px;background:#06283f!important}
.about-cta::before{width:55%!important;opacity:1;background-image:linear-gradient(90deg,#06283f 0%,rgba(6,40,63,.72) 26%,rgba(6,40,63,.06) 70%),url('../assets/images/cta-refinery-clear-v9.webp')!important}
.about-cta-icon{width:74px;height:74px;flex:0 0 74px;display:flex;align-items:center;justify-content:center;color:#bdfb00;border:1px solid #9add00;border-radius:13px}
.about-cta-icon svg{width:55px;height:55px}
.about-cta .cta-copy{max-width:630px;padding-left:28px;border-left:1px solid #b2d4ed80}
.about-cta h2 em{color:#baf600}
.about-cta .cta-button{margin-left:auto}
.about-page .site-footer{background:#fff!important;color:#0a1c2c}
.about-page .site-footer::before{display:none!important}
.about-page .footer-inner{max-width:1410px;width:calc(100% - clamp(60px,10vw,150px));padding:32px 0 34px;grid-template-columns:29% 17% 26% 28%}
.about-page .footer-inner>div{padding:0 24px}
.about-page .footer-inner>div:first-child{padding-left:0}
.about-page .footer-inner>div:last-child{padding-right:0}
.about-page .footer-company img{width:195px}
.about-page .footer-description{font-size:13px}
.about-page .footer-links a{font-size:13px}
.about-page .footer-bottom{padding:20px max(28px,calc((100vw - 1410px)/2));min-height:70px}
.about-page .site-footer h3{font-size:14px}
@media(max-width:1250px){
 
 
 
 .about-page .about-credentials .credential{padding-left:4px;padding-right:14px}
 .about-page .about-credentials .client-trust{min-width:0}
 .about-cta .cta-copy{padding-left:20px}
}
@media(max-width:1050px){
 
 
 
 
 
 
 
 
 .about-hero h1{font-size:47px}
 .about-page .about-cap-card{border-radius:9px}
 .about-why-layout{grid-template-columns:31% 1fr;gap:30px}
 .about-why-copy::after{right:-15px}
 .about-proof-body{padding:23px 11px 12px}
 .about-page .about-credentials{width:calc(100% - 80px)}
 .about-page .footer-inner{width:calc(100% - 88px)}
 .about-page .footer-inner>div{padding:0 18px}
}
@media(max-width:850px){
 
 
 
 
 
 
 
 .about-hero{height:420px}
 .about-hero-photo{width:100%;opacity:.72;background-position:61% center}
 .about-hero-overlay{background:linear-gradient(90deg,#062338 0%,#062338ed 38%,#06233890 67%,#06233840 100%)}
 .about-hero-content{width:calc(100% - 70px);padding-top:40px}
 .about-hero h1{font-size:54px}
 .about-hero p{max-width:470px;font-size:17px}
 .about-cap-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .about-page .about-cap-card{aspect-ratio:1.12}
 .about-why-layout{grid-template-columns:1fr;gap:24px}
 .about-why-copy::after{display:none}
 .about-why-copy{max-width:650px}
 .about-why h2{font-size:38px}
 .about-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
 .about-proof-card>img{height:175px}
 .about-proof-card h3{font-size:18px}
 .about-proof-card p{font-size:14px}
 .about-page .about-credentials{width:calc(100% - 54px)}
 .about-cta{margin-top:8px!important}
 .about-cta-icon{display:none}
 .about-cta .cta-copy{padding-left:0;border-left:0}
 .about-page .footer-inner{width:calc(100% - 56px);grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
 .about-page .footer-inner>div{border:0!important;padding:0}
}
@media(max-width:600px){
 
 .about-hero{height:470px}
 .about-hero-content{width:calc(100% - 36px);padding-top:28px}
 .about-breadcrumb{font-size:13px;margin-bottom:55px}
 .about-hero h1{font-size:clamp(40px,9.7vw,50px);letter-spacing:-1.6px}
 .about-hero p{font-size:15.5px;max-width:355px;line-height:1.55}
 .about-hero-photo{width:100%;opacity:.57;background-position:57% center}
 .about-hero-overlay{background:linear-gradient(90deg,#062338ee 0%,#062338cc 65%,#06233868 100%),linear-gradient(0deg,#062338aa 0%,transparent 32%)}
 .about-hero-button{height:44px}
 .about-section-container{width:calc(100% - 32px)}
 .about-core{padding:30px 0}
 .about-core h2{font-size:31px;margin-bottom:18px}
 .about-cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .about-page .about-cap-card{aspect-ratio:1.05;min-height:0}
 .about-cap-arrow{bottom:9px;right:8px}
 .about-why{padding:10px 0 25px}
 .about-why-layout{padding-top:24px}
 .about-why h2{font-size:35px}
 .about-why-copy>p{font-size:14px}
 .about-proof-grid{gap:11px}
 .about-proof-card>img{height:115px}
 .about-proof-body{padding:23px 10px 14px}
 .about-proof-icon{left:10px;width:36px;height:36px}
 .about-proof-card h3{font-size:15px}
 .about-proof-card p{font-size:12px}
 .about-page .about-credentials{width:calc(100% - 32px);padding-top:25px}
 .about-cta{width:calc(100% - 32px);margin:2px auto 24px!important;min-height:215px;padding:24px 21px!important}
 .about-cta .cta-button{margin-left:0}
 .about-page .footer-inner{width:calc(100% - 36px);padding-top:31px;row-gap:20px}
 .about-page .footer-bottom{padding:20px 18px 26px}
}
@media(max-width:380px){
 
 
 .about-hero h1{font-size:38px}
 .about-proof-card>img{height:100px}
 .about-page .footer-inner{grid-template-columns:1fr}
}
/* Reference fidelity adjustments: retain text-bearing, full-size division visuals. */
.about-page .about-cap-card.tile-electrical{background-image:url('../assets/images/division-electrical.webp')!important}
.about-page .about-cap-card.tile-automation{background-image:url('../assets/images/division-automation.webp')!important}
.about-page .about-cap-card.tile-solar{background-image:url('../assets/images/division-solar.webp')!important}
.about-page .about-cap-card.tile-civil{background-image:url('../assets/images/division-civil.webp')!important}
.about-page .about-cap-card.tile-mechanical{background-image:url('../assets/images/division-mechanical.webp')!important}
.about-page .about-cap-card.tile-digital{background-image:url('../assets/images/division-digital.webp')!important}
.about-page .about-cap-card{background-position:center center!important;background-size:100% 100%!important}
/* The proof tiles should keep the compact image/card proportions of the approved mockup. */
.about-proof-grid{align-self:start}
.about-proof-card{min-height:210px}
@media(min-width:851px) and (max-width:1150px){
 
 
 
 
 
 
 
 
 
 
 .about-page .about-credentials{display:grid;grid-template-columns:18% 19% 28% 35%;gap:0;align-items:center;min-height:104px}
 .about-page .about-credentials .credential{display:flex;width:auto;border-right:1px solid #bacbd8;padding:0 13px;gap:8px}
 .about-page .about-credentials .credential:first-child{padding-left:0}
 .about-page .about-credentials .credential-icon{width:39px;height:39px;flex:0 0 39px;margin:0}
 .about-page .about-credentials .credential strong{font-size:29px;white-space:nowrap}
 .about-page .about-credentials .credential span{font-size:11px}
 .about-page .about-credentials .client-trust{display:flex;flex-direction:column;border:0;min-width:0;flex:none;padding:0 0 0 16px;margin:0}
 .about-page .about-credentials .client-trust>span{font-size:11px}
 .about-page .about-credentials .client-logos{width:100%;max-width:315px;height:auto}
 .about-proof-card{min-height:210px}
 .about-proof-body{padding-bottom:12px}
}
@media(max-width:850px){
 .about-proof-card{min-height:0}
}
@media(max-width:600px){
 .about-proof-card{min-height:180px}
}
@media(min-width:851px){}
@media(min-width:851px) and (max-width:1150px){
 .about-why h2{font-size:28px;letter-spacing:-.75px;line-height:1.15}
 .about-why-layout{grid-template-columns:32% minmax(0,1fr)}
}
/* Single approved caption: tight hierarchy beneath the breadcrumb, no second heading. */
@media(min-width:851px){
 .about-breadcrumb{margin-bottom:clamp(23px,2.45vw,38px)}
 .about-hero p{max-width:clamp(400px,32vw,500px);font-size:clamp(15px,1.16vw,18px)}
}

/* The extended intro needs a little extra vertical room on intermediate desktop widths. */
@media (min-width:851px) and (max-width:1150px) {
  .about-hero { height: 430px; }
}

/* v2 — Quality-first, compact Why TEKMILA cards. No other section modified. */
@media (min-width:1151px) {
  .about-why-layout {grid-template-columns:minmax(0,36%) minmax(0,1fr);gap:26px;}
  .about-why h2 {font-size:clamp(32px,2.75vw,42px);line-height:1.11;}
  .about-why-copy>p {font-size:clamp(14px,1vw,16px);line-height:1.42;margin-bottom:16px;}
  .about-proof-card {min-height:0;}
  .about-proof-card>img {height:clamp(125px,9.7vw,148px);object-fit:cover;}
  .about-proof-body {padding:23px 12px 14px;}
  .about-proof-card h3 {font-size:clamp(13px,1.1vw,17px);margin-bottom:6px;}
  .about-proof-card p {font-size:clamp(11px,.96vw,14px);line-height:1.35;}
  .about-why {padding-bottom:18px;}
  .about-why-layout {padding-top:22px;}
}
@media (min-width:851px) and (max-width:1150px) {
  .about-proof-card {min-height:0;}
  .about-proof-card>img {height:clamp(102px,10vw,127px);}
  .about-proof-body {padding:22px 10px 12px;}
  .about-why {padding-bottom:17px;}
}
@media (max-width:850px) {
  .about-proof-card {min-height:0;}
  .about-proof-card>img {height:clamp(116px,23vw,172px);}
}
@media (max-width:420px) {
  .about-proof-card>img {height:118px;}
}