:root{
  --ink:#0b2430; --muted:#5b6b74; --brand:#0a7ea7; --cta:#ff7f70;
  --bg:#f6fbfd; --max:1100px; --header-h:72px;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.wrap{max-width:var(--max);margin:0 auto;padding:2rem}

/* HEADER: transparent over hero, becomes solid after scroll */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; z-index:50;
  background:transparent; box-shadow:none; transition:background .25s, box-shadow .25s;
}
.site-header .header-inner{width:100%; max-width:var(--max); margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:600; color:#fff}
.logo{width:48px; height:48px}
.site-header nav a{margin-left:1rem; text-decoration:none; color:#fff}      /* white over hero */
.site-header nav a.btn{background:#fff; color:#0b2430; padding:.5rem .8rem; border-radius:10px}

/* Solid state after hero */
.site-header.solid{background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08)}
.site-header.solid .brand{color:var(--ink)}
.site-header.solid nav a{color:var(--ink)}
.site-header.solid nav a.btn{background:var(--brand); color:#fff}

/* HERO fills the top and shows behind the header */
.hero{
  background-image:url('assets/hero.jpg');
  background-size:cover; background-position:center;
  position:relative; min-height:78vh;
}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient( to bottom, rgba(0,0,0,.35), rgba(0,0,0,.25) 40%, rgba(0,0,0,.0) 80% );}
.hero .hero-overlay{
  position:relative; z-index:1; max-width:900px; margin:0 auto;
  padding:calc(var(--header-h) + 3rem) 1rem 3rem; text-align:center; color:#fff;
}
.hero h1{font-size:3rem; line-height:1.1; margin:0 0 1rem}
.hero p{opacity:.95; margin:0 0 1.5rem}
.cta{display:inline-block; background:var(--cta); color:#fff; padding:.75rem 1.25rem; border-radius:12px; text-decoration:none; font-weight:600}
.cta.outline{background:#fff; color:var(--ink); border:2px solid #e8edf0}

/* WHAT WE DO and rest */
.what-we-do{background:#f0f7fb; border-top:1px solid #e8edf0; border-bottom:1px solid #e8edf0}
.what-we-do h2{text-align:center; margin:0 0 1rem}
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-top:1rem}
.pillars article{background:#fff; border-radius:14px; padding:1rem; box-shadow:0 1px 4px rgba(0,0,0,.05); text-align:center}
.pillars .icon{width:72px;height:72px;border-radius:50%;background:#e8f4fb;margin:.5rem auto;display:grid;place-items:center}
.pillars .icon img{width:42px;height:42px}
.pillars h3{margin:.3rem 0 .2rem}
.pillars p{color:var(--muted); font-size:.95rem}

.our-work .work-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.our-work img{width:100%; border-radius:12px; box-shadow:0 6px 16px rgba(2,8,20,.15)}
.center{text-align:center}

.testimonials{padding:3rem 0}
blockquote{max-width:820px; margin:1rem auto 0; background:#fff; padding:1.2rem 1.5rem; border-left:4px solid var(--brand); border-radius:12px; color:#13333f}
blockquote span{display:block; margin-top:.6rem; color:var(--muted); font-size:.95rem}

.site-footer{background:#08222d;color:#cdeaf2;margin-top:2rem}
.footer-inner{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.copy{text-align:center;margin:0;padding:1rem 0;color:#9fd0dc}

/* keep content from hiding under fixed header when not on hero */
section:not(.hero){scroll-margin-top:calc(var(--header-h) + 12px)}
@media(max-width:720px){ .hero .hero-overlay{padding:calc(var(--header-h) + 2rem) 1rem 2rem} .hero h1{font-size:2.2rem} .site-header .header-inner{padding:0 1rem}}
/* VISIT THE STORE */
.visit-store{
  background:#ffffff;
  border-top:1px solid #e5edf2;
  border-bottom:1px solid #e5edf2;
}
.visit-grid{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.1fr);
  gap:2rem;
  align-items:flex-start;
}
.visit-store h2{margin-top:0}
.visit-address{margin-top:1rem;font-size:.98rem}
.visit-actions{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* Store hours card */
.store-hours{
  background:#f6fbfd;
  border-radius:14px;
  padding:1.25rem 1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.store-hours h3{margin-top:0;margin-bottom:.75rem}
.store-hours ul{
  list-style:none;
  margin:0;
  padding:0;
}
.store-hours li{
  display:flex;
  justify-content:space-between;
  padding:.25rem 0;
  font-size:.95rem;
}
.store-hours li span:first-child{font-weight:500}
.hours-note{
  margin-top:.75rem;
  font-size:.85rem;
  color:#6b7a82;
}

/* OUR WORK tweaks */
.work-ctas{
  margin-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}

/* MAINTENANCE PROMO */
.maintenance-promo{
  background:#0a7ea7;
  color:#ffffff;
}
.maintenance-inner{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  align-items:center;
  justify-content:space-between;
}
.maintenance-inner h2{margin-top:0}
.maintenance-inner p{max-width:540px;margin-bottom:0}
.maintenance-actions .btn{
  background:#ffffff;
  color:#0a7ea7;
}

/* Responsive layout adjustments */
@media (max-width: 820px){
  .visit-grid{
    grid-template-columns: minmax(0,1fr);
  }
}

/* Sub-hero for inner pages */
.sub-hero{
  background:#0a7ea7;
  color:#ffffff;
  padding-top:calc(var(--header-h) + 1.5rem);
  padding-bottom:2rem;
}
.sub-hero .wrap{
  padding-top:0;
  padding-bottom:0;
}
.sub-hero h1{
  margin:0 0 .5rem;
}
.sub-hero .lead{
  margin:0;
  max-width:680px;
}

/* Local gallery grid */
.gallery-local h2{
  margin-top:2rem;
  margin-bottom:1rem;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.gallery-grid figure{
  margin:0;
}
.gallery-grid img{
  width:100%;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(2,8,20,.15);
}
.gallery-grid figcaption{
  margin-top:.4rem;
  font-size:.9rem;
  color:var(--muted);
}

/* Facebook gallery section */
.gallery-facebook{
  background:#f0f7fb;
  border-top:1px solid #e5edf2;
  padding:2rem 0 3rem;
}
.gallery-facebook h2{
  margin-top:0;
}
.gallery-note{
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:1rem;
}
.gallery-facebook .fb-page{
  max-width:100%;
}

/* FOOTER */
.site-footer{
  background:#061822;
  color:#cdeaf2;
  margin-top:2rem;
}
.footer-inner{
  display:grid;
  grid-template-columns: minmax(0,2.1fr) minmax(0,1.2fr) minmax(0,1.5fr);
  gap:2rem;
  align-items:flex-start;
}
.footer-col h4{
  margin-top:0;
  margin-bottom:.75rem;
  font-size:1rem;
}
.footer-logo-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.5rem;
}
.footer-logo{
  width:40px;
  height:40px;
}
.footer-name{
  font-weight:600;
}
.footer-tagline{
  margin:0;
  font-size:.9rem;
  color:#a8c8d4;
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.25rem;
}
.footer-links a{
  color:#cdeaf2;
  text-decoration:none;
  font-size:.92rem;
}
.footer-links a:hover{
  text-decoration:underline;
}

.footer-address,
.footer-contact,
.footer-hours,
.footer-social{
  margin:0 0 .55rem;
  font-size:.9rem;
}
.footer-hours span{
  font-weight:500;
}
.footer-social a{
  color:#cdeaf2;
  text-decoration:none;
  font-size:.9rem;
}
.footer-social a:hover{
  text-decoration:underline;
}
.footer-social .dot,
.footer-mini-links .dot{
  margin:0 .35rem;
  opacity:.6;
}

/* Bottom strip */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:1.5rem;
  padding:.75rem 0;
  background:#051117;
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:.85rem;
  color:#9fd0dc;
}
.footer-mini-links a{
  color:#9fd0dc;
  text-decoration:none;
}
.footer-mini-links a:hover{
  text-decoration:underline;
}

/* Footer links everywhere */
.site-footer a{
  color:#cdeaf2;
}
.site-footer a:hover{
  color:#ffffff;
}

/* Responsive footer */
@media (max-width: 860px){
  .footer-inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width: 640px){
  .footer-inner{
    grid-template-columns:minmax(0,1fr);
  }
  .footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* SERVICES PAGE */

/* Reuse sub-hero from gallery; only extra tweaks if needed */

/* Service cards */
.services-intro{
  padding-top:2rem;
  padding-bottom:1rem;
}
.service-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}
.service-card{
  background:#ffffff;
  border-radius:14px;
  padding:1.4rem 1.5rem;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.service-card h2{
  margin-top:0;
  margin-bottom:.4rem;
  font-size:1.25rem;
}
.service-card p{
  margin-top:0;
  margin-bottom:.75rem;
  color:var(--muted);
}
.service-card ul{
  margin:0 0 .75rem 1.1rem;
  padding:0;
  font-size:.95rem;
}
.service-card li{
  margin-bottom:.25rem;
}
.service-cta{
  margin-top:.5rem;
}

/* Two-column layout (Residential / Commercial) */
.services-layout{
  background:#f6fbfd;
  border-top:1px solid #e5edf2;
  border-bottom:1px solid #e5edf2;
}
.services-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}
.services-columns h2{
  margin-top:0;
  margin-bottom:.4rem;
}
.services-columns p{
  margin-top:0;
  margin-bottom:.75rem;
}
.services-columns ul{
  margin:0 0 .75rem 1.1rem;
  padding:0;
  font-size:.95rem;
}

/* Process steps */
.services-process{
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}
.services-process h2{
  text-align:center;
  margin-top:0;
  margin-bottom:1.5rem;
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.process-steps article{
  background:#ffffff;
  border-radius:14px;
  padding:1.2rem 1.3rem 1.3rem;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  position:relative;
}
.step-badge{
  position:absolute;
  top:1rem;
  left:1.1rem;
  width:26px;
  height:26px;
  border-radius:999px;
  background:var(--brand);
  color:#ffffff;
  font-size:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}
.process-steps h3{
  margin:0 0 .4rem;
  padding-left:2.2rem;
}
.process-steps p{
  margin:0;
  font-size:.95rem;
  padding-left:2.2rem;
}

/* Service area band */
.service-area-band{
  background:#0b2430;
  color:#e1f2f8;
}
.service-area-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.service-area-inner h2{
  margin-top:0;
}
.service-area-inner p{
  margin-top:.25rem;
}
.service-area-list{
  margin-top:.6rem;
  font-size:.95rem;
}
.service-area-cta .btn{
  background:#ffffff;
  color:#0b2430;
}

/* Responsive tweaks for services */
@media (max-width:720px){
  .process-steps article{
    padding-left:1.1rem;
  }
  .step-badge{
    left:.9rem;
  }
  .process-steps h3,
  .process-steps p{
    padding-left:2.1rem;
  }
}

/* CONTACT PAGE */

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.2fr);
  gap:2rem;
  padding-top:1rem;
  padding-bottom:2.5rem;
}
.contact-main h2{
  margin-top:0;
  margin-bottom:1rem;
}
.field-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin-bottom:.75rem;
}
.contact-main label{
  display:block;
  font-size:.95rem;
}
.contact-main input,
.contact-main textarea,
.contact-main select{
  width:100%;
}
.contact-main button.btn{
  margin-top:1rem;
}

.contact-aside h2{
  margin-top:0;
  margin-bottom:.5rem;
}
.contact-aside p{
  margin-top:0;
  margin-bottom:.75rem;
  font-size:.95rem;
}

/* Success alert */
.alert-success{
  padding:.8rem 1rem;
  border-radius:8px;
  background:#e3f6e9;
  color:#256435;
  border:1px solid #9dd7a7;
  font-size:.9rem;
}

/* Responsive contact layout */
@media (max-width:820px){
  .contact-layout{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ABOUT PAGE */

.about-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.25fr);
  gap:2rem;
  padding-top:2rem;
  padding-bottom:2.5rem;
}
.about-main h2{
  margin-top:0;
  margin-bottom:.5rem;
}
.about-main p{
  margin-top:0;
  margin-bottom:.75rem;
}
.about-main ul{
  margin:0 0 1rem 1.1rem;
  padding:0;
  font-size:.95rem;
}
.about-main li{
  margin-bottom:.25rem;
}

.about-aside{
  display:grid;
  gap:1rem;
}
.about-card{
  background:#ffffff;
  border-radius:14px;
  padding:1.2rem 1.3rem;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.about-card h3{
  margin-top:0;
  margin-bottom:.6rem;
}
.about-facts{
  list-style:none;
  margin:0;
  padding:0;
  font-size:.95rem;
}
.about-facts li{
  margin-bottom:.35rem;
}
.about-facts span{
  font-weight:500;
}

/* Team / expertise section */
.about-team{
  background:#f6fbfd;
  border-top:1px solid #e5edf2;
  border-bottom:1px solid #e5edf2;
  padding:2.5rem 0;
}
.about-team h2{
  margin-top:0;
  margin-bottom:1rem;
}
.about-team p{
  margin-top:0;
  margin-bottom:1.4rem;
}
.about-team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.about-team-grid article{
  background:#ffffff;
  border-radius:14px;
  padding:1.2rem 1.3rem;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}

/* Visit band */
.about-visit-band{
  background:#0b2430;
  color:#e1f2f8;
}
.about-visit-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.about-visit-inner h2{
  margin-top:0;
}
.about-visit-address{
  margin-top:.5rem;
}
.about-visit-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.about-visit-actions .btn{
  background:#ffffff;
  color:#0b2430;
}
.about-visit-actions .ghost{
  border-color:#ffffff;
}

/* Responsive About layout */
@media (max-width:860px){
  .about-layout{
    grid-template-columns:minmax(0,1fr);
  }
}