:root{--green:#167a39;--dark:#20262b;--muted:#66717a;--light:#f4f7f5;--line:#dce4df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--dark);background:#fff}.top{height:88px;display:flex;align-items:center;gap:30px;padding:10px 5vw;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid #eee}.brand img{width:155px;height:66px;object-fit:contain}.top nav{display:flex;gap:28px;margin-left:auto}.top nav a{text-decoration:none;color:var(--dark);font-size:14px}.top nav a:hover{color:var(--green)}.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:14px 22px;border-radius:5px;font-weight:700;border:1px solid var(--green)}.btn.small{padding:11px 16px;font-size:13px}.btn.outline{background:transparent;color:var(--green)}.menu{display:none;margin-left:auto;border:0;background:none;font-size:25px}.hero{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(120deg,#f7faf8,#eef4f1)}.hero-copy{padding:90px 5vw 70px 7vw;z-index:2}.eyebrow,.section-head>span{font-size:12px;letter-spacing:4px;color:#607069;font-weight:700}.hero h1{font-size:54px;line-height:1.02;margin:18px 0 12px}.hero h1 em{font-style:normal;color:var(--green)}.hero h2{font-size:23px;color:var(--green);margin:0 0 18px}.hero p{font-size:18px;line-height:1.6;max-width:700px}.disciplines{font-size:13px;letter-spacing:1.5px;line-height:2.2;margin:20px 0}.disciplines b{color:var(--green);padding:0 6px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.hero-art{position:relative;overflow:hidden;background:linear-gradient(145deg,#e8eeeb,#b8c9c0)}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(22,122,57,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(22,122,57,.12) 1px,transparent 1px);background-size:40px 40px;transform:perspective(600px) rotateY(-8deg) scale(1.15)}.hero-art:before,.hero-art:after{content:"";position:absolute;background:#fff;border:12px solid #d9e0dc;box-shadow:0 20px 50px #61756a55}.hero-art:before{width:45%;height:48%;left:13%;top:20%;transform:skewY(-8deg)}.hero-art:after{width:38%;height:60%;right:7%;top:11%;transform:skewY(7deg)}.panel{position:absolute;right:6%;bottom:10%;width:58%;padding:28px;background:#17231fdd;color:#fff;border-left:5px solid var(--green)}.panel span,.panel strong,.panel small{display:block}.panel strong{font-size:28px;margin:6px 0 12px}.services{padding:80px 6vw}.section-head{text-align:center;max-width:760px;margin:0 auto 40px}.section-head h2{font-size:36px;margin:12px 0}.section-head p{color:var(--muted);line-height:1.6}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1200px;margin:auto}.cards article{padding:28px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:.2s}.cards article:hover{transform:translateY(-4px);box-shadow:0 12px 30px #22332a12}.cards i{font-style:normal;font-size:30px;color:var(--green)}.cards h3{font-size:17px}.cards p{font-size:14px;color:var(--muted);line-height:1.55}.about{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:90px 7vw;background:var(--light)}.about h2,.project h2{font-size:38px;margin:12px 0}.about p,.project p{color:var(--muted);font-size:16px;line-height:1.7}.ticks{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:30px;color:#355045}.drawing{min-height:360px;position:relative;border:1px solid #afc1b7;background:repeating-linear-gradient(0deg,transparent,transparent 29px,#c9d6cf 30px),repeating-linear-gradient(90deg,transparent,transparent 29px,#c9d6cf 30px)}.line{position:absolute;height:6px;background:var(--green);transform-origin:left}.l1{width:70%;left:10%;top:25%;transform:rotate(18deg)}.l2{width:60%;left:20%;top:55%;transform:rotate(-14deg)}.l3{width:45%;left:34%;top:74%;transform:rotate(8deg)}.stamp{position:absolute;right:7%;bottom:8%;border:3px solid var(--green);color:var(--green);padding:14px;text-align:center;font-size:30px;font-weight:800}.stamp small{font-size:9px}.project{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;padding:90px 7vw}.project h3{color:var(--green);font-size:22px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{border:1px solid #bdd0c4;padding:7px 11px;border-radius:20px;font-size:12px}.project-visual{min-height:380px;background:linear-gradient(135deg,#e4ebe7,#a9beb2);padding:35px}.plan{height:100%;border:2px solid #fff;background:linear-gradient(120deg,#ffffffdd,#ffffff88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:36px;font-weight:800;color:#274238;letter-spacing:2px}.plan small{font-size:11px;margin-top:15px;color:var(--green)}.experience{padding:80px 7vw;background:#f8faf9}.metrics{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics div{text-align:center;padding:30px;border-right:1px solid var(--line)}.metrics div:last-child{border:0}.metrics strong,.metrics span{display:block}.metrics strong{font-size:30px;color:var(--green)}.metrics span{font-size:13px;margin-top:7px}.cta{text-align:center;padding:75px 7vw;background:#18241f;color:#fff}.cta>span{letter-spacing:3px;font-size:11px;color:#9dc5ad}.cta h2{font-size:38px;margin:14px}.cta p{color:#cad5cf}.cta .actions{justify-content:center}.btn.light{border-color:#fff;color:#fff}.cta small{display:block;margin-top:18px;color:#93a49b}footer{display:flex;align-items:center;gap:22px;padding:28px 6vw}footer img{width:110px;height:60px;object-fit:contain}footer div span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.domain{margin-left:auto;color:var(--green);font-weight:700}@media(max-width:900px){.top nav,.top>.btn{display:none}.menu{display:block}.top.open nav{display:flex;position:absolute;top:88px;left:0;right:0;flex-direction:column;background:#fff;padding:25px 7vw;border-bottom:1px solid #ddd}.hero,.about,.project{grid-template-columns:1fr}.hero-art{min-height:420px}.hero h1{font-size:42px}.cards{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.project{padding-top:65px}}@media(max-width:560px){.top{height:78px}.brand img{width:130px}.top.open nav{top:78px}.hero-copy{padding:65px 7vw}.hero h1{font-size:35px}.hero h2{font-size:19px}.cards{grid-template-columns:1fr}.services,.about,.project,.experience{padding:60px 6vw}.about h2,.project h2,.section-head h2,.cta h2{font-size:30px}.ticks{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metrics div{padding:22px 10px}footer{align-items:flex-start;flex-wrap:wrap}.domain{margin-left:0;width:100%}}

/* STC safe responsive refinements */
@media (min-width:901px){
  .cards article{padding:30px 26px;min-height:210px}
  .cards i{display:block;margin-bottom:14px;font-size:32px}
  .cards article:nth-child(1) i{color:#2f9ec4}
  .cards article:nth-child(2) i{color:#d94b3d}
  .cards article:nth-child(3) i{color:#2f8f62}
  .cards article:nth-child(4) i{color:#2f9ec4}
  .cards article:nth-child(5) i{color:#33899a}
  .cards article:nth-child(6) i{color:#d94b3d}
  .cards article:nth-child(7) i{color:#66717a}
  .cards article:nth-child(8) i{color:#4f806b}
}
@media (max-width:900px){
  .project>*{min-width:0}
  .project h2,.project h3,.project p{max-width:100%;overflow-wrap:anywhere}
  .project-visual{width:100%;box-sizing:border-box}
}
@media (max-width:560px){
  .project h2{font-size:28px;line-height:1.12}
  .project h3{font-size:20px;line-height:1.25}
  .project p{font-size:15px;line-height:1.65}
  .project-visual{min-height:300px;padding:24px}
  .plan{font-size:27px;letter-spacing:1px}
  .plan small{font-size:9px;line-height:1.4}
}

/* Featured project — real Bzebdine basement ventilation drawing */
.project-visual.project-drawing{background:#f4f7f5;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.project-drawing img{display:block;width:100%;height:340px;object-fit:contain;background:#fff;border:1px solid #dce4df}
.project-drawing span{font-size:11px;font-weight:700;letter-spacing:1.4px;color:#167a39;text-align:center}
@media(max-width:900px){.project-drawing img{height:auto;max-height:560px}.project-visual.project-drawing{padding:18px}}
@media(max-width:560px){.project-visual.project-drawing{min-height:0;padding:14px}.project-drawing img{height:auto;max-height:none}.project-drawing span{font-size:10px;letter-spacing:.8px}}

/* Featured project drawing enlargement */
.project-visual.project-drawing{padding:16px}
.drawing-open{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.project-drawing .drawing-open img{display:block;width:100%;height:370px;object-fit:contain;border:1px solid #dce4df;background:#fff}
.drawing-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(15,22,19,.92);display:none;align-items:center;justify-content:center;padding:24px}
.drawing-lightbox.open{display:flex}
.drawing-lightbox img{display:block;max-width:96vw;max-height:92vh;width:auto;height:auto;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lightbox-close{position:fixed;top:18px;right:22px;width:46px;height:46px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:34px;line-height:40px;cursor:pointer}
@media(max-width:900px){.project-visual.project-drawing{padding:14px}.project-drawing .drawing-open img{height:auto;max-height:620px}}
@media(max-width:560px){.project-drawing .drawing-open img{height:auto;max-height:none}.drawing-lightbox{padding:10px}.lightbox-close{top:12px;right:12px}}

/* Bzebdine project drawing gallery */
.project-visual.project-gallery{background:#f4f7f5;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.gallery-stage{background:#fff;border:1px solid #dce4df;min-height:370px;display:flex;align-items:center;justify-content:center}
.gallery-open{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.gallery-open img{display:block;width:100%;height:370px;object-fit:contain;background:#fff}
.gallery-meta{display:grid;grid-template-columns:42px 1fr 42px;gap:10px;align-items:center;text-align:center}
.gallery-meta>div{min-width:0}.gallery-title{display:block;color:#274238;font-size:13px;line-height:1.35}.gallery-count{display:block;margin-top:4px;color:#167a39;font-size:10px;font-weight:700;letter-spacing:1px}
.gallery-prev,.gallery-next{width:42px;height:38px;border:1px solid #bdd0c4;border-radius:5px;background:#fff;color:#167a39;font-size:28px;line-height:30px;cursor:pointer}
.gallery-prev:hover,.gallery-next:hover{background:#edf5f0}
.gallery-dots{display:flex;justify-content:center;gap:7px}.gallery-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#bdc9c2;cursor:pointer}.gallery-dot.active{background:#167a39}
@media(max-width:900px){.project-visual.project-gallery{padding:14px}.gallery-stage{min-height:0}.gallery-open img{height:auto;max-height:620px}}
@media(max-width:560px){.gallery-open img{height:auto;max-height:none}.gallery-title{font-size:12px}.gallery-count{font-size:9px;letter-spacing:.6px}.gallery-meta{grid-template-columns:38px 1fr 38px}.gallery-prev,.gallery-next{width:38px;height:36px}}


/* v8 portfolio gallery visibility refinements */
@media (min-width:901px){
  .project{grid-template-columns:.82fr 1.18fr;gap:44px}
  .gallery-stage{min-height:480px}
  .gallery-open img{height:480px}
}

/* Final STC website refinements */
.hero-art{background:#dfe8e3}.hero-photos{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .85fr;gap:6px}.hero-photos img{width:100%;height:100%;object-fit:cover}.hero-art:before,.hero-art:after,.hero-art .grid{display:none}.panel{z-index:2;width:66%;background:rgba(20,39,32,.92)}.panel small{line-height:1.5}.service-card{cursor:pointer;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.service-card:hover,.service-card:focus{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,55,43,.10);border-color:#b7d1c0;outline:none}.learn{display:block;margin-top:14px;color:var(--green);font-size:12px;font-weight:700}.about-photo{position:relative;min-height:430px;overflow:hidden;background:#e8eeeb}.about-photo>img{width:100%;height:100%;min-height:430px;object-fit:cover;display:block}.about-logo{position:absolute;right:7%;bottom:7%;background:rgba(255,255,255,.95);padding:14px 18px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.16)}.about-logo img{display:block;width:155px;height:auto}.metrics span{color:#4e5b55;font-weight:600}.contact-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}.contact-actions .btn{min-width:145px}.btn.whatsapp{background:#128c4a;border-color:#128c4a;color:#fff}.contact-details{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:20px;color:#dce8e1;font-size:14px}footer img{width:145px;height:72px}footer div span{font-size:13px;color:#53615a;line-height:1.45}
.service-modal{position:fixed;inset:0;z-index:1200;background:rgba(10,18,15,.82);display:none;align-items:center;justify-content:center;padding:28px}.service-modal.open{display:flex}.service-dialog{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;width:min(1040px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.service-close{position:absolute;right:14px;top:12px;z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:rgba(17,35,28,.88);color:#fff;font-size:30px;cursor:pointer}.service-visual{min-height:520px;background:#e7eeea}.service-visual img{width:100%;height:100%;object-fit:cover;display:block}.service-content{padding:52px 46px}.service-content h2{font-size:38px;margin:12px 0}.service-intro{color:var(--muted);font-size:16px;line-height:1.65}.service-content h3{margin:28px 0 12px}.service-list{padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;list-style:none}.service-list li{position:relative;padding-left:22px;line-height:1.45;font-size:14px}.service-list li:before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}.service-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
@media(max-width:900px){.hero-photos{grid-template-columns:1fr 1fr}.about-photo{min-height:360px}.service-dialog{grid-template-columns:1fr}.service-visual{min-height:260px;max-height:320px}.service-content{padding:38px 30px}.service-list{grid-template-columns:1fr}}
@media(max-width:560px){.hero-art{min-height:460px}.hero-photos{grid-template-columns:1fr 1fr}.panel{width:86%;right:7%;bottom:7%;padding:20px}.panel strong{font-size:23px}.about-photo,.about-photo>img{min-height:300px}.about-logo img{width:120px}.service-modal{padding:10px}.service-content{padding:32px 22px}.service-content h2{font-size:30px}.contact-actions{flex-direction:column;align-items:stretch}.contact-actions .btn{text-align:center}.contact-details{gap:10px;flex-direction:column}footer img{width:135px}}

/* Final desktop header/contact refinements */
.wa-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:5px;border:2px solid currentColor;border-radius:50%;font-size:0;vertical-align:-3px;position:relative}
.wa-icon:after{content:'☎';font-size:11px;line-height:1;transform:rotate(-18deg)}
.contact-details a{color:#dce8e1;text-decoration:none}.contact-details a:hover{text-decoration:underline}.contact-details .contact-phone{color:#79d39b;font-weight:700}
@media (min-width:901px){
  .top{gap:24px;padding-left:4vw;padding-right:4vw}
  .top .brand{width:340px;flex:0 0 340px;display:flex;align-items:center;justify-content:center}
  .top .brand img{width:205px;height:72px;object-fit:contain}
  .top nav{margin-left:0;flex:1;justify-content:flex-end;gap:24px}
  footer img{width:175px;height:90px}
}

/* Desktop header logo — centered only inside the left company area; navigation remains on the right */
@media (min-width:901px){
  .top{display:grid;grid-template-columns:340px 1fr auto;align-items:center;column-gap:24px}
  .top .brand{width:340px;justify-self:stretch;display:flex;align-items:center;justify-content:center}
  .top .brand img{width:205px;height:72px;object-fit:contain}
  .top nav{margin-left:0;justify-self:end;display:flex;justify-content:flex-end;gap:24px}
  .top>.btn{justify-self:end}
}

/* QA correction: desktop header logo visibility/position and About logo */
@media (min-width:901px){
  .top{display:flex;background:#fff;gap:22px;padding:8px 4vw}
  .top .brand{width:auto;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:230px}
  .top .brand img{width:235px;height:70px;object-fit:contain}
  .top nav{flex:0 0 auto;margin-left:0;display:flex;justify-content:flex-end;gap:22px}
  .top>.btn{flex:0 0 auto}
  .about-logo{right:4%;bottom:4%;padding:9px 12px;background:rgba(255,255,255,.94)}
  .about-logo img{width:135px;height:auto}
}

/* Combined correction: single HD hero visual + HD service imagery */
.hero-art{background:#dfe8e3}.hero-composite{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.hero-art>.panel,.hero-art>.hero-photos{display:none!important}
@media(max-width:900px){.hero-composite{min-height:420px;object-fit:cover}}
@media(max-width:560px){.hero-composite{min-height:460px;object-fit:cover}}


/* FINAL QA — hero, About logo and contact responsiveness */
.hero-art>.hero-photos{display:grid!important}
.hero-art>.panel{display:block!important;right:5%;bottom:8%;width:62%;max-width:520px;padding:24px 26px;overflow:hidden}
.hero-art>.panel strong{font-size:27px;line-height:1.08;white-space:normal}
.hero-art>.panel small{font-size:12px;line-height:1.45;white-space:normal}
.hero-composite{display:none!important}
.about-logo{right:3%!important;bottom:3%!important;padding:7px 9px!important;border-radius:3px!important}
.about-logo img{width:105px!important;height:auto!important}
@media (min-width:901px) and (max-width:1180px){
 .top{gap:14px;padding-left:2.5vw;padding-right:2.5vw}
 .top .brand{min-width:190px}.top .brand img{width:205px}
 .top nav{gap:16px}.top nav a{font-size:13px}.btn.small{padding:10px 12px;font-size:12px}
 .contact-actions{gap:8px}.contact-actions .btn{min-width:0;padding:13px 16px;font-size:13px}
 .cta h2{font-size:34px}.cta{padding-left:4vw;padding-right:4vw;overflow:hidden}
}
@media(max-width:900px){
 .hero-art>.panel{width:82%;right:6%;bottom:6%;max-width:none;padding:20px}
 .hero-art>.panel strong{font-size:23px}
 .about-logo img{width:100px!important}
}
@media(max-width:560px){
 .hero-art>.panel{width:86%;right:7%;bottom:7%}
 .about-logo img{width:90px!important}
}

/* FINAL repair: clean hero source and WhatsApp icon */
.wa-icon{display:inline-flex!important;align-items:center;justify-content:center;width:20px!important;height:20px!important;margin-right:7px!important;border:0!important;border-radius:0!important;vertical-align:-4px!important;position:static!important}
.wa-icon:after{content:none!important}
.wa-icon svg{display:block;width:20px;height:20px;fill:currentColor}
.btn.whatsapp{display:inline-flex;align-items:center;justify-content:center}