:root{
  --ink:#0b1324;
  --muted:#475569;
  --line:#e2e8f0;
  --soft:#f8fafc;
  --brand:#0284c7;
  --brand2:#0369a1;
  --paper:#fff;
  --night:#0b1220;
  --ok:#16a34a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* Top Nav */
.topnav{
  position:fixed;left:0;right:0;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topnav .inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;font-weight:900;
}
.brand strong{letter-spacing:.2px}
.muted{color:var(--muted)}
.tagline{font-weight:700;font-size:.95rem}
.navlinks{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:800;font-size:.95rem}
.navlinks a:hover{color:var(--ink)}
@media (max-width:860px){ .navlinks{display:none} }

/* CTA */
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  text-decoration:none;font-weight:900;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  cursor:pointer;white-space:nowrap;
}
.cta:hover{background:var(--brand2);border-color:var(--brand2)}

/* Hero (fixed: restores original mask values .62 while using <img> background) */
.hero{
  min-height:92vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  color:#fff;
  padding-top:70px;
  background:#0b1220; /* fallback while image loads */
}

/* LCP hero image (from index.php <img class="hero-bg">) */
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* ✅ Original overlay mask (same as the old linear-gradient rgba(2,6,23,.62)) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(rgba(2,6,23,.62),rgba(2,6,23,.62));
}

/* Hero content above overlay */
.hero-content{position:relative;z-index:2}

h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:0 0 14px;max-width:980px}
h2{font-size:1.9rem;margin:0 0 14px}
h3{margin:0 0 8px}
.lead{font-size:1.12rem;max-width:860px;color:rgba(255,255,255,.92);margin:0}
.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.heroBadges{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.badgeMini{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  font-weight:800;font-size:.92rem;
}
.dot{width:9px;height:9px;border-radius:999px;background:var(--ok);display:inline-block}

section{padding:64px 0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px}
.learn{color:var(--brand2);font-weight:900;text-decoration:none}
.learn:hover{text-decoration:underline}

/* Trust bar */
.trustbar{padding:26px 0;background:#fff;border-bottom:1px solid var(--line)}
.trustgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.trustitem{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px}
.trustitem strong{display:block}
.trustitem span{color:var(--muted);font-size:.92rem}

/* Lists */
.ticklist{margin:0;padding-left:18px}
.ticklist li{margin:8px 0}

/* Reviews carousel */
.carousel-wrap{overflow:hidden;position:relative}
.carousel{position:relative;display:flex;gap:14px;padding-bottom:8px;width:max-content;animation:reviewScroll 42s linear infinite}
.carousel-wrap:hover .carousel{animation-play-state:paused}
@keyframes reviewScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.review{
  width:min(92vw,420px);min-width:min(92vw,420px);
  height:230px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;flex:0 0 auto
}
.stars{letter-spacing:1px;color:#eab308;font-size:1.1rem}
.source{font-size:.82rem;color:var(--muted)}
.source a{color:var(--brand2)}

/* Detail */
.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.service-detail img{width:100%;height:280px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
@media (max-width:800px){
  .service-detail{grid-template-columns:1fr}
  .hero{min-height:86vh}
}

/* Areas */
.localblock{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:999px;background:#fff;
  border:1px solid var(--line);
  color:var(--muted);font-weight:800;font-size:.92rem
}

/* CTA band */
.ctaband{background:linear-gradient(135deg,var(--night),#111827);color:#fff}
.ctaband .inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* Footer */
footer{padding:26px 0;background:#111827;color:#cbd5e1}
.footerLine{color:#94a3b8;font-size:.95rem;margin-top:6px}

/* Floating mobile CTA */
.mobileQuote{position:fixed;right:16px;bottom:16px;z-index:60;display:none}
.mobileQuote button{
  border:0;border-radius:999px;
  padding:14px 16px;background:var(--brand);color:#fff;font-weight:900;
  box-shadow:0 16px 40px rgba(2,6,23,.25);cursor:pointer;
}
.mobileQuote button:hover{background:var(--brand2)}
@media (max-width:820px){ .mobileQuote{display:block} }

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:9999}
.modal[aria-hidden="false"]{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(2,6,23,.62)}
.modal__panel{
  position:relative;width:min(92vw,560px);margin:7vh auto;
  background:var(--paper);color:var(--ink);border-radius:16px;border:1px solid var(--line);
  padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal__close{
  position:absolute;right:10px;top:10px;
  border:1px solid var(--line);background:#fff;border-radius:10px;
  width:38px;height:38px;font-size:22px;line-height:1;cursor:pointer;
}
.stepper{margin:10px 0 14px}
.stepper__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.stepper__fill{height:100%;width:0;background:var(--brand);transition:width .2s ease}
.stepper__meta{margin-top:6px;color:var(--muted);font-size:.9rem}

.modal input,.modal select,.modal textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);
  font:inherit;margin-top:6px;background:#fff;
}
.modal textarea{resize:vertical}
.formActions{display:flex;gap:10px;justify-content:space-between;margin-top:14px}
.btnPrimary{
  background:var(--brand);color:#fff;border:0;padding:12px 14px;border-radius:12px;
  font-weight:900;cursor:pointer;flex:1;
}
.btnPrimary:hover{background:var(--brand2)}
.btnGhost{
  background:#fff;color:var(--ink);border:1px solid var(--line);
  padding:12px 14px;border-radius:12px;font-weight:900;cursor:pointer;width:120px;
}
.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}
footer {
  padding: 40px 0;
}

.footerInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.footerLeft {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footerPhone {
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.footerRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footerLogo {
  height: 120px;
  width: auto;
  display: block;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .footerInner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footerRight {
    justify-content: flex-start;
  }

  .footerLogo {
    height: 50px;
  }
}
.headerLogo {
  height: 80px;
  width: auto;
  display: block;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footerMadeBy a{
  display:inline-block;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
}

.footerMadeBy a:hover{
  border-color: rgba(255,255,255,.32);
  text-decoration:underline;
}
/* Hide top nav while hero is visible */
body.nav-hidden .topnav {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* Smooth transition */
.topnav {
  transition: transform 220ms ease, opacity 220ms ease;
  will-change: transform, opacity;
}
.footer-credit {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.9rem;
  opacity: 0.85;
}

.footer-credit a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.footer-credit a:hover {
  opacity: 1;
  text-decoration: underline;
}