/* ======================
   Root Variables / Base
====================== */
:root{
  --brand:#FDB813;      /* Amber */
  --black:#0A0A0A;
  --white:#FFFFFF;

  --font-heading:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;

  --border:#EAEAEA;
  --container:1200px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:64px;

  --header-h:96px;     /* Bigger brand presence */
  --ease:220ms ease;
  --shadow-1:0 2px 10px rgba(0,0,0,.06);
  --shadow-2:0 10px 30px rgba(0,0,0,.12);
}

*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; background:var(--white); }
body{
  font-family:var(--font-body);
  color:var(--black);
  line-height:1.6;
}

img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{
  font-family:var(--font-heading);
  margin:0 0 var(--space-3);
  line-height:1.25;
}
p{ margin:0 0 var(--space-3); }

.container{ width:92%; max-width:var(--container); margin:0 auto; }
.section{ padding:calc(var(--space-6) + var(--space-3)) 0 var(--space-6); border-top:1px solid var(--border); background:var(--white); }
.band{ background:#111; color:var(--white); padding:var(--space-5) 0; }

/* Skip link */
.skip-link{
  position:absolute; left:0; top:-40px; background:var(--brand); color:var(--white);
  padding:var(--space-2) var(--space-3); z-index:10000;
}
.skip-link:focus{ top:0; }

/* ======================
   Header / Nav
====================== */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  background:var(--white); border-bottom:1px solid var(--border); z-index:9999;
  box-shadow:var(--shadow-1);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:var(--space-3); color:var(--black); }
.brand-logo{
  width:56px; height:56px; object-fit:contain;
}
.brand-text{ font-size:1.2rem; font-weight:700; }
.brand-text strong{ font-weight:700; }

.site-nav{ display:none; }
.site-nav ul{ list-style:none; display:flex; gap:var(--space-4); margin:0; padding:0; }
.site-nav a{
  color:var(--black); font-weight:600; padding:6px 2px; position:relative;
}
.site-nav a:hover{ color:var(--brand); }
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transition:background var(--ease);
}
.site-nav a:hover::after{ background:var(--brand); }
.quote-link{ color:var(--brand); text-transform:uppercase; }

.hamburger{
  display:inline-grid; place-items:center; width:42px; height:42px;
  background:transparent; border:0; font-size:1.25rem; cursor:pointer;
}

/* Mobile menu */
.mobile-menu{
  position:fixed; top:var(--header-h); left:0; right:0; background:var(--white);
  display:none; border-top:1px solid var(--border); box-shadow:var(--shadow-2);
}
.mobile-menu .mobile-close{
  position:absolute; top:10px; right:10px; background:transparent; border:0; font-size:1.25rem; cursor:pointer;
}
.mobile-menu ul{
  list-style:none; margin:0; padding:var(--space-6) var(--space-3) var(--space-4);
  display:grid; gap:var(--space-3);
}
.mobile-menu a{ color:var(--black); font-weight:700; display:flex; align-items:center; gap:10px; }

/* Adjust body for fixed header */
main{ padding-top:var(--header-h); }

/* ======================
   Buttons / Chips
====================== */
.btn, .btn-outline, .btn.dark, .btn-outline.dark{
  text-transform:uppercase; font-weight:800; letter-spacing:0.02em;
  padding:12px 20px; border:0; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  box-shadow:var(--shadow-1);
}
.btn{ background:var(--brand); color:var(--black); }
.btn:hover{ box-shadow:var(--shadow-2); text-decoration:none; }
.btn-outline{
  background:transparent; color:var(--white); border:2px solid var(--white);
}
.btn-outline.dark{
  color:var(--black); border-color:var(--black);
}
.btn.dark{
  background:var(--brand); color:var(--black);
}
.chip{
  display:inline-block; padding:6px 10px; border:1px solid var(--brand); color:var(--brand); background:#fff;
  font-size:0.85rem;
}

/* ======================
   Cards / Grids
====================== */
.twocol{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.card-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.card{
  border:1px solid var(--border); padding:var(--space-4); background:var(--white);
  box-shadow:var(--shadow-1); transition:transform var(--ease), box-shadow var(--ease);
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.card i{ font-size:28px; color:var(--brand); margin-bottom:var(--space-2); display:block; }

.boxed{ border:1px solid var(--border); padding:var(--space-2); background:var(--white); box-shadow:var(--shadow-1); }

/* Stats */
.stats-row{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
}
.stat-card{
  display:flex; align-items:center; gap:var(--space-3); border:1px solid var(--border); background:#fff; padding:var(--space-3);
  box-shadow:var(--shadow-1);
}
.stat-card i{ font-size:26px; color:var(--brand); }
.stat-card strong{ display:block; font-size:1.1rem; }

/* Why row */
.why-row{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
}
.why-card{ border:1px solid var(--border); padding:var(--space-4); background:#fff; box-shadow:var(--shadow-1); }
.why-card i{ font-size:26px; color:var(--brand); margin-bottom:8px; }

/* Steps */
.steps-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.step{ border:1px solid var(--border); padding:var(--space-4); background:#fff; box-shadow:var(--shadow-1); transition:transform var(--ease); }
.step:hover{ transform:translateY(-2px); }
.step i{ color:var(--brand); font-size:26px; margin-bottom:8px; }

/* Blog */
.blog-grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-3);
}
.post-card{
  border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-1);
  display:grid; grid-template-rows:auto 1fr; transition:transform var(--ease), box-shadow var(--ease);
}
.post-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.post-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.post-body{ padding:var(--space-3); }
.post-body .chip{ margin-bottom:8px; }

/* ======================
   Carousels
====================== */
.carousel{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.carousel-track{ display:flex; transition:transform 420ms ease-in-out; }
.slide{ min-width:100%; position:relative; }
.slide img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.slide-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--space-6) 0; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.05) 60%);
}
.slide-content h1 i{ color:var(--brand); margin-right:8px; }
.slide-content .actions{ margin-top:var(--space-3); }

/* Transparent, squared controls */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; color:#fff; border:2px solid currentColor; cursor:pointer;
}
.carousel-btn.prev{ left:12px; }
.carousel-btn.next{ right:12px; }
.carousel-btn:hover{ opacity:0.9; }
.carousel-indicators{
  position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:8px;
}
.carousel-indicators .dot{ width:10px; height:10px; border:2px solid #fff; background:transparent; }
.carousel-indicators .dot.is-active{ background:#fff; }

/* ======================
   Horizontal Scrollers
====================== */
.h-scroll{ position:relative; }
.scroll-area{
  display:flex; gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory; padding-left:var(--space-4);
  -webkit-overflow-scrolling:touch;
}
.scroll-area::-webkit-scrollbar{ display:none; }
.scroll-area{ scrollbar-width:none; }
.snap .snap-item{ scroll-snap-align:start; }
.scroll-hint{
  position:absolute; top:0; right:0; bottom:0; width:40px;
  background:linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* Horizontal cards */
.h-card{
  min-width:260px; border:1px solid var(--border); background:#fff; padding:var(--space-4);
  box-shadow:var(--shadow-1); transition:transform var(--ease), box-shadow var(--ease);
}
.h-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.h-card i{ color:var(--brand); font-size:26px; margin-bottom:8px; }

/* Projects row thumbs (6 equal) */
.projects-row .project-thumb{
  min-width:260px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-1);
}
.project-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.project-thumb figcaption{ padding:10px; font-weight:600; }

/* Financing band */
.band-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.band .btn.dark{ box-shadow:none; }

/* ======================
   FAQ
====================== */
.accordion{ border-top:1px solid var(--border); }
.accordion-item{ border-bottom:1px solid var(--border); background:#fff; }
.accordion button{
  width:100%; text-align:left; padding:var(--space-3); background:#fff; border:0;
  font-family:var(--font-heading); font-weight:700; cursor:pointer; display:flex; gap:10px; align-items:center;
}
.accordion .accordion-content{ display:none; padding:0 var(--space-3) var(--space-4); }
.accordion button[aria-expanded="true"] + .accordion-content{ display:block; }

/* ======================
   Contact
====================== */
.contact-list{ list-style:none; padding:0; margin:0 0 var(--space-3); display:grid; gap:8px; }
.contact-list i{ color:var(--brand); width:18px; display:inline-block; margin-right:6px; }

#contact-form{
  display:grid; gap:var(--space-3);
  border:1px solid var(--border); padding:var(--space-4); background:#fff;
  box-shadow:var(--shadow-1);
}
.field label{ display:block; font-weight:700; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; border:1px solid #CFCFCF; padding:10px; font-family:var(--font-body);
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--brand); }

/* ======================
   Footer
====================== */
.site-footer{
  background:#0B0B0B; color:#EDEDED; border-top:1px solid #1E1E1E; margin-top:var(--space-6);
}
.footer-inner{
  display:grid; grid-template-columns:1fr; gap:var(--space-4);
  padding:var(--space-6) 0;
}
.footer-logo{ margin-bottom:10px; }
.site-footer a{ color:#EDEDED; }
.social a{
  margin-right:10px; display:inline-grid; place-items:center; width:36px; height:36px;
  border:1px solid #3A3A3A;
}
.newsletter{ display:flex; gap:var(--space-2); margin-top:var(--space-2); }
.newsletter input{ padding:10px; border:1px solid #3A3A3A; background:#111; color:#fff; }
.tiny{ color:#9E9E9E; font-size:0.85rem; }
.copyright{ border-top:1px solid #1E1E1E; padding:var(--space-3) 0; text-align:center; color:#BDBDBD; }

/* ======================
   Image Modal Viewer
====================== */
.img-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.img-modal.active{ display:block; }
.img-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(2px); }
.img-modal-content{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(92%, 1100px); background:#000; padding:var(--space-3); border:2px solid var(--brand);
  box-shadow:var(--shadow-2);
}
.img-modal-content img{ width:100%; height:auto; display:block; }
.img-modal-close{
  position:absolute; top:8px; right:8px; width:40px; height:40px; border:2px solid #fff; background:transparent; color:#fff; cursor:pointer;
}
.caption{ color:#fff; padding-top:8px; }

/* ======================
   WhatsApp Widget (circular)
====================== */
.whatsapp-widget{ position:fixed; right:20px; bottom:20px; z-index:10001; }
.whatsapp-btn{
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; border:0; cursor:pointer;
  box-shadow:var(--shadow-2); display:grid; place-items:center; font-size:1.6rem;
}
.whatsapp-panel{
  display:none; position:absolute; right:0; bottom:70px; width:300px;
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-2);
}
.wa-header{
  display:flex; align-items:center; gap:10px; padding:10px; background:#F7F7F7; border-bottom:1px solid var(--border);
}
.wa-header i{ color:#25D366; }
.wa-header .wa-close{ margin-left:auto; background:transparent; border:0; cursor:pointer; font-size:1.1rem; }
.wa-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:10px; }
.whatsapp-panel textarea{
  width:calc(100% - 20px); margin:0 10px 10px; height:80px; border:1px solid #CFCFCF; padding:10px; resize:vertical;
}
.whatsapp-panel .btn{ margin:0 10px 10px; width:calc(100% - 20px); }

/* ======================
   Reveals / Page Load
====================== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 420ms ease, transform 420ms ease; }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .carousel-track{ transition:none; }
}

/* ======================
   Responsive
====================== */
@media (min-width:768px){
  .site-nav{ display:block; }
  .hamburger{ display:none; }
  .twocol{ grid-template-columns:1.1fr 0.9fr; }
  .card-row{ grid-template-columns:repeat(3,1fr); }
  .stats-row{ grid-template-columns:repeat(4,1fr); }
  .why-row{ grid-template-columns:repeat(4,1fr); }
  .steps-row{ grid-template-columns:repeat(4,1fr); }
  .blog-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-inner{ grid-template-columns:1.1fr 0.9fr 1fr; }
}






/* ==============================
   Projects Page — Additions
============================== */

/* Wider container for gallery (near full width) */
.container-wide{
  width:96%;
  max-width:1400px;
  margin:0 auto;
}

/* Filter buttons (CSS-only with :has) */
.projects-filters{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--space-3);
}
.projects-filters input[type="radio"]{ position:absolute; left:-9999px; }
.projects-filters label{
  border:1px solid var(--border);
  padding:10px 14px; background:#fff; cursor:pointer; font-weight:700; display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-1);
  transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.projects-filters label:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.projects-filters input:checked + label{ border-color:var(--brand); }

/* Gallery — large items, almost full width */
.projects-gallery{
  display:grid; grid-template-columns:1fr; gap:var(--space-4);
}
.project-item{
  position:relative; background:#000; box-shadow:var(--shadow-1);
  border:1px solid var(--border);
}
.project-item img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
}

/* Classy overlay (blurred, darker, centered white text) */
.p-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0; transition:opacity var(--ease); text-align:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
}
.p-overlay span{
  font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  background:rgba(0,0,0,.35); padding:10px 16px;
}
.project-item:hover .p-overlay, .project-item:focus-within .p-overlay{ opacity:1; }

/* Responsive: two big columns on larger screens to use space */
@media (min-width: 900px){
  .projects-gallery{ grid-template-columns:1fr 1fr; }
}

/* CSS-only filtering using :has() (supported in modern browsers) */
.section:has(.projects-filters #pf-res:checked) ~ .section .projects-gallery .project-item:not([data-cat~="residential"]),
.section:has(.projects-filters #pf-com:checked) ~ .section .projects-gallery .project-item:not([data-cat~="commercial"]),
.section:has(.projects-filters #pf-ind:checked) ~ .section .projects-gallery .project-item:not([data-cat~="industrial"]){
  display:none;
}
/* When "All" is checked, show everything (default). No special rule needed. */

/* Ensure no horizontal scrollbar artifacts */
html, body { overflow-x:hidden; }






/* ==============================
   About Page — Additions
============================== */

/* Leadership grid */
.leadership-grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-3);
}
.leader-card{
  border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-1);
  display:grid; grid-template-columns:100px 1fr; gap:var(--space-3); padding:var(--space-3);
  transition:transform var(--ease), box-shadow var(--ease);
}
.leader-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.leader-card img{
  width:100px; height:100px; object-fit:cover; display:block; border:1px solid var(--border);
}
.leader-body h3{ margin-bottom:6px; }

/* Team horizontal strip (reuses .h-scroll) */
.team-strip .team-photo{
  min-width:260px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-1);
}
.team-strip .team-photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
}
.team-strip .team-photo figcaption{
  padding:10px; font-weight:600;
}

/* Certifications/Partners horizontal strip */
.certs-strip .cert-logo{
  min-width:200px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-1); text-align:center;
  display:grid; grid-template-rows:auto auto; align-content:start;
}
.certs-strip .cert-logo img{
  width:100%; aspect-ratio:1/1; object-fit:contain; padding:16px;
}
.certs-strip .cert-logo figcaption{
  padding:8px 10px; font-weight:600;
}

/* Responsive enhancements */
@media (min-width:768px){
  .leadership-grid{ grid-template-columns:repeat(3, 1fr); }
  .leader-card{ grid-template-columns:1fr; text-align:center; }
  .leader-card img{ width:100%; height:auto; aspect-ratio:1/1; }
}




/* ==============================
   Blog Page — Additions
============================== */

/* Hero posts layout inside the carousel */
.blog-hero .post-slide .post-slide-inner{
  display:grid; grid-template-columns:1fr; gap:var(--space-3);
  background:#fff;
}
.blog-hero .post-slide img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
}
.blog-hero .post-slide .post-slide-body{
  padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.blog-hero .post-slide .post-slide-body h2{
  font-size:1.6rem;
}
.blog-hero .post-meta{
  color:#616161; font-size:0.95rem; display:flex; align-items:center; gap:10px;
}
.blog-hero .btn-outline.dark{
  border-color:var(--black); color:var(--black);
}

/* Larger layout on wider screens */
@media (min-width: 900px){
  .blog-hero .post-slide .post-slide-inner{
    grid-template-columns:1.2fr 0.8fr;
    align-items:stretch;
  }
  .blog-hero .post-slide .post-slide-body{
    justify-content:center;
  }
  .blog-hero .post-slide img{
    height:100%; /* keep full height against text column */
  }
}