:root{
  --navy:#14314D;
  --navy-deep:#0C2038;
  --gold:#F5A623;
  --whatsapp:#25D366;
  --text:#1F2A33;
  --dim:#5C6B78;
  --line:#E7ECEF;
  --paper:#FAFBFC;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif; color:var(--text); background:#fff;}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; color:var(--navy);}
a{color:inherit;}
img{max-width:100%; display:block;}
svg{width:20px; height:20px;}

/* ---------- topbar ---------- */
.topbar{background:var(--navy-deep); color:#fff; font-size:0.85rem;}
.topbar-inner{max-width:1300px; margin:0 auto; padding:9px 6vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.topbar-left{display:flex; align-items:center; gap:6px; color:#C9D3DA;}
.topbar-left svg{width:14px; height:14px;}
.topbar-right{display:flex; align-items:center; gap:18px;}
.topbar-right a{text-decoration:none; color:#fff; display:flex; align-items:center; gap:6px; font-weight:500;}
.topbar-right a svg{width:14px; height:14px;}
.wa-pill{background:var(--whatsapp); padding:6px 14px; border-radius:20px; font-size:0.82rem;}
.social{display:flex; gap:10px;}
.social a{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:0.8rem;}

/* ---------- header ---------- */
.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.header-inner{max-width:1300px; margin:0 auto; padding:14px 6vw; display:flex; justify-content:space-between; align-items:center;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-logo{height:46px; width:auto; display:block;}
.footer-mark{height:44px; width:auto; display:block;}
.brand-text strong{display:block; color:var(--navy); font-size:1.05rem; letter-spacing:0.02em;}
.brand-text small{display:block; color:var(--dim); font-size:0.72rem;}
.main-nav{display:flex; align-items:center; gap:30px;}
.nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:var(--text);
  font-weight:500; font-size:0.95rem;
  padding:8px 0; border:0; line-height:1.2;
}
.nav-link:hover, .nav-link:focus, .nav-link:active, .nav-link:visited{text-decoration:none;}
/* the underline is a pseudo-element so it never inherits link text-decoration
   and never overlaps the dropdown caret */
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 0.18s ease;
}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{color:var(--navy);}
.nav-link.active::after{transform:scaleX(1);}
.nav-link .caret{width:11px; height:11px; margin-top:1px; transition:transform 0.18s ease;}
.dropdown:hover .nav-link .caret{transform:rotate(180deg);}
.dropdown{position:relative; padding-bottom:2px;}
.dropdown-menu{display:none; position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(20,49,77,0.12); padding:10px; min-width:220px;}
.dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{display:flex; align-items:center; gap:10px; padding:9px 10px; text-decoration:none; color:var(--text); border-radius:6px; font-size:0.9rem;}
.dropdown-menu a:hover{background:var(--paper);}
.dd-icon svg{width:18px; height:18px;}

/* ---------- hero ---------- */
.hero{max-width:1300px; margin:0 auto; padding:60px 6vw; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;}
.hero-kicker{color:#2F80ED; font-weight:700; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:12px;}
.hero .eyebrow{color:#131B22; font-weight:600; font-size:1.45rem; line-height:1.2;}
.hero .accent{color:#2F80ED;}
.hero h1{font-size:clamp(2.6rem,5.4vw,4rem); font-weight:700; color:#131B22; line-height:1.05; margin-top:2px;}
.services-line{margin-top:16px; font-weight:600; color:var(--navy); font-size:1.05rem; line-height:1.5;}
.hero-desc{margin-top:16px; color:var(--dim); max-width:48ch; line-height:1.6;}
.hero-cta{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:14px 24px; border-radius:8px; font-weight:600; font-size:0.95rem; line-height:1.2;}
.btn-gold{background:var(--gold); color:#20200E;}
.btn-outline{border:1.5px solid var(--line); color:var(--navy); background:#fff;}
.btn-whatsapp{background:var(--whatsapp); color:#fff;}
.hero-photo{position:relative; border-radius:16px; overflow:hidden;}
.hero-photo img{width:100%; height:440px; object-fit:cover;}
/* the "Cool Homes / Safe Homes / Happy Families" line is part of the hero
   photo itself, so no HTML overlay is needed here */
.hero-photo img{object-fit:cover; object-position:center;}

/* ---------- trust bar ---------- */
.trust-bar{background:#F5F8FA; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:center; gap:50px; flex-wrap:wrap; padding:20px 6vw; font-weight:600; font-size:0.92rem; color:var(--navy);}
.trust-bar div{display:flex; align-items:center; gap:8px;}
.trust-bar .ic{color:var(--navy);}
.trust-bar svg{width:18px; height:18px;}

/* ---------- services section ---------- */
.services-section{max-width:1300px; margin:0 auto; padding:70px 6vw; text-align:center;}
.section-eyebrow{color:var(--gold); font-weight:600; letter-spacing:0.08em; font-size:0.85rem; text-transform:uppercase;}
.services-section h2, .projects-section h2{font-size:2rem; margin-top:10px;}
.section-sub{color:var(--dim); margin-top:8px; margin-bottom:40px;}

.service-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; text-align:left; margin-top:30px;}
.service-card{border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff; transition:box-shadow 0.2s ease;}
.service-card:hover{box-shadow:0 14px 30px rgba(20,49,77,0.1);}
.service-card-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.service-card-head h3{font-size:1.02rem; color:var(--text);}
.service-card-photo{border-radius:8px; overflow:hidden; height:110px; margin-bottom:12px;}
.service-card-photo img{width:100%; height:100%; object-fit:cover;}
.service-card p{color:var(--dim); font-size:0.86rem; line-height:1.5; min-height:44px;}
.view-link{display:inline-block; margin-top:10px; color:#2E6DA4; text-decoration:none; font-weight:600; font-size:0.86rem;}

/* ---------- stats band ---------- */
.stats-band{background:var(--navy); color:#fff; display:flex; justify-content:center; gap:60px; flex-wrap:wrap; padding:34px 6vw;}
.stats-band div{text-align:center;}
.stats-band strong{display:block; font-family:'Poppins',sans-serif; font-size:1.5rem; color:var(--gold);}
.stats-band span{font-size:0.85rem; color:#C9D3DA;}

/* ---------- projects ---------- */
.projects-section{max-width:1300px; margin:0 auto; padding:70px 6vw; text-align:center;}
.projects-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px; text-align:left;}
.project-card{border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.project-card img{width:100%; height:150px; object-fit:cover;}
.project-card span{display:block; padding:12px 14px; font-weight:600; font-size:0.92rem; color:var(--navy);}
.project-card small{display:block; font-weight:400; color:var(--dim); font-size:0.78rem; margin-top:2px;}

/* ---------- cta band ---------- */
.cta-band{background:#EAF6EF; border:1px solid #CDEBD6; margin:0 6vw 70px; border-radius:12px; padding:26px 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.cta-band strong{display:block; color:var(--navy); font-size:1.05rem;}
.cta-band span{color:var(--dim); font-size:0.9rem;}

/* ---------- page banner (service detail / about / contact) ---------- */
.page-banner{background-size:cover; background-position:center; padding:70px 6vw; color:#fff;}
.page-banner-inner{max-width:1300px; margin:0 auto;}
.crumb{font-size:0.85rem; color:#D7E2EA; margin-bottom:14px;}
.crumb a{text-decoration:none; color:#D7E2EA;}
.page-banner h1{color:#fff; font-size:2.2rem; display:flex; align-items:center; gap:12px;}
.banner-icon{background:#fff; border-radius:10px; padding:8px; display:flex;}
.banner-icon svg{width:26px; height:26px;}
.page-banner p{margin-top:12px; max-width:60ch; color:#DCE6EC;}

.detail-intro{max-width:1300px; margin:0 auto; padding:40px 6vw 10px; color:var(--dim); line-height:1.7; font-size:1.02rem;}

/* ---------- sub-service grid on detail pages ---------- */
.subservice-section{max-width:1300px; margin:0 auto; padding:20px 6vw 60px;}
.subservice-section h2{font-size:1.5rem;}
.subservice-section .underline{display:block; width:50px; height:3px; margin:10px 0 30px;}
.subservice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.subservice-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;}
.subservice-photo{height:170px; overflow:hidden;}
.subservice-photo img{width:100%; height:100%; object-fit:cover;}
.subservice-card h3{font-size:1rem; padding:16px 16px 6px;}
.subservice-card p{padding:0 16px 18px; color:var(--dim); font-size:0.88rem; line-height:1.5;}

.need-service-band{max-width:1300px; margin:0 6vw 40px; border:1.5px solid #ddd; border-left-width:5px; border-radius:10px; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; background:#F7FAFC;}
.need-service-band strong{display:block; color:var(--navy);}
.need-service-band span{color:var(--dim); font-size:0.9rem;}

.other-services{max-width:1300px; margin:0 auto; padding:0 6vw 70px;}
.other-services h3{font-size:1.1rem; margin-bottom:18px;}
.other-services-row{display:flex; gap:16px; flex-wrap:wrap;}
.other-services-row a{display:flex; align-items:center; gap:8px; text-decoration:none; border:1px solid var(--line); padding:10px 16px; border-radius:30px; font-weight:600; font-size:0.88rem;}
.other-services-row a svg{width:18px; height:18px;}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:#C9D3DA;}
.footer-inner{max-width:1300px; margin:0 auto; padding:60px 6vw; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px;}
.footer-col h4{color:#fff; font-size:0.95rem; margin-bottom:16px;}
.footer-col a, .footer-col span{display:flex; align-items:center; gap:8px; text-decoration:none; color:#AEBBC5; font-size:0.88rem; padding:5px 0;}
.footer-col a:hover{color:#fff;}
.footer-col svg{width:15px; height:15px;}
.site-footer .brand-text strong{color:#fff;}
.site-footer .brand-icon{background:rgba(255,255,255,0.08); color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1); padding:18px 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8rem; color:#8A99A5;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .subservice-grid{grid-template-columns:1fr 1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .main-nav{display:none;}
}
@media (max-width:600px){
  .service-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .subservice-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .topbar-right{gap:10px;}
}

/* ---------- sub-service fallback list ----------
   Used on service detail pages for trades that don't yet have a unique
   photo per sub-service. Keeps the page looking intentional instead of
   repeating the same image five times. */
.subservice-list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.subservice-row{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px;
  padding:20px; background:#fff;
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.subservice-row:hover{box-shadow:0 12px 26px rgba(20,49,77,0.09); transform:translateY(-2px);}
.row-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.row-icon svg{width:21px; height:21px;}
.subservice-row h3{font-size:1rem; margin-bottom:5px;}
.subservice-row p{color:var(--dim); font-size:0.88rem; line-height:1.5;}

@media (max-width:1000px){
  .subservice-list{grid-template-columns:1fr;}
}