:root{
  --ink:#184048;
  --bg:#ffffff;
  --accent:#FB9A1B;
  --muted:#f4f7f7;
  --muted2:#e9f0f0;
  --text:#12373c;
  --line:rgba(24,64,72,.14);
  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --radius: 18px;
  --radius2: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.container{width:min(1120px, 92%); margin-inline:auto}

/* Buttons */
.btnx{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
  transition:.18s ease;
  white-space:nowrap;
}
.btnx-primary{background:var(--ink); color:#fff;}
.btnx-accent{background:var(--accent); color:#1a1a1a;}
.btnx-ghost{background:#fff; border-color:var(--line);}
.btnx-primary:hover,.btnx-accent:hover,.btnx-ghost:hover{transform:translateY(-1px); box-shadow:var(--shadow)}

/* ===== HERO (exact style) ===== */
.wolf-hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:180px 16px 120px;
  background:#111;
}
.wolf-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/hero-scetion.webp");
  background-size:cover;
  background-position:left center;
  transform:scale(1.02);
  z-index:0;
}
.wolf-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1;
}
.wolf-hero__inner{
  position:relative;
  z-index:2;
  max-width:900px;
  margin-top:40px;
}
.wolf-hero__inner::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-120px;
  width:303vw;
  height:2100px;
  background:linear-gradient(90deg, rgba(10,66,75,0.92), rgba(10,66,75,0.92));
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  z-index:-1;
  opacity:.9;
}
.wolf-hero h1{
  margin:0 0 10px;
  font-size: clamp(32px, 3.5vw, 54px);
  line-height:1.08;
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
}
.wolf-hero__sub{
  margin:0 auto 18px;
  max-width:780px;
  font-size:16px;
  color:rgba(255,255,255,.9);
}
.wolf-hero__logo{margin:18px 0 18px; display:flex; justify-content:center;}
.wolf-hero__logo img{width:170px; max-width:60vw; transform: rotate(-6deg); filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));}
.wolf-hero__actions{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px;}
.wolf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 22px;
  border-radius:10px;
  font-weight:900;
  font-size:14px;
  border:1px solid transparent;
  transition:.15s ease;
}
.wolf-btn--accent{background:var(--accent); color:#1a1a1a;}
.wolf-btn--ghost{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff;}
.wolf-btn--ghost:hover,.wolf-btn--accent:hover{transform:translateY(-1px);}

/* Trust badges (exact snippet) */
.m-hero-badges{
  margin:18px auto 0;
  display:flex;
  gap:14px;
  justify-content:center;
  /* flex-wrap:wrap; */
}
.hero-badge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  color:#fff;
  min-width: 210px;
}
.hero-badge .badge-icon{font-size:20px; opacity:.95}
.hero-badge.tp .badge-icon{color:#22c55e}
.hero-badge.gg .badge-icon{color:#fbbf24}
.badge-title{font-weight:900; line-height:1.1}
.badge-row{display:flex; align-items:center; gap:10px; margin-top:2px}
.badge-stars{display:flex; gap:2px; font-size:12px; color:#ffd166}
.badge-score{font-weight:900; opacity:.95}

/* Sections */
.service-section{padding:54px 0}
.service-section--soft{background:linear-gradient(0deg, var(--muted), #fff)}
.service-section--dark{background:linear-gradient(135deg, var(--ink), rgba(24,64,72,.92)); color:#fff;}
.service-section__head{margin-bottom:18px;}
.service-section__head h2{margin:0 0 6px; color:var(--ink); font-size: clamp(22px, 2.2vw, 32px); letter-spacing:-.02em;}
.service-section__head p{margin:0; max-width:70ch}

.service-grid{display:grid; gap:14px}
.service-grid--2{grid-template-columns: repeat(2, 1fr)}

.service-feature{
  display:flex; gap:12px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.service-feature__icon{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(251,154,27,.22);
  border:1px solid rgba(251,154,27,.35);
  font-size:18px;
  flex:0 0 auto;
}
.service-feature h3{margin:0 0 4px; color:var(--ink)}
.service-feature p{margin:0}

.card-split{display:grid; grid-template-columns: 1.12fr .88fr; gap:18px; align-items:stretch;}
.card-split--reverse .card-split__text{order:2}
.card-split--reverse .card-split__media{order:1}
.card-split__text,.card-split__media{display:flex}
.card-box{width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius2); padding:18px;}
.card-box h2{margin:0 0 8px; color:var(--ink); font-size: clamp(22px, 2.2vw, 30px); letter-spacing:-.02em;}
.card-box p{margin:0}
.card-box p + p{margin-top:10px}
.service-media__box{width:100%; height:100%; border-radius:var(--radius2); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.12); overflow:hidden; background:var(--muted);}
.service-media__img{width:100%; height:100%; display:block;  object-position:center;}

.service-stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.service-stat{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; background:rgba(24,64,72,.06); border:1px solid var(--line);}
.service-stat__num{font-weight:900; color:var(--ink)}
.service-stat__label{font-weight:800}

.service-emergency{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:stretch;}
.service-emergency__text h2{color:#fff; margin:0 0 10px}
.service-emergency__text p{margin:0 0 14px; color:rgba(255,255,255,.9)}
.service-emergency__actions{display:flex; gap:10px; flex-wrap:wrap}
.service-btn-dark{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:12px 16px; border-radius:999px; font-weight:900; border:1px solid transparent; transition:.18s ease; white-space:nowrap;}
.service-btn-dark.accent{background:var(--accent); color:#1a1a1a;}
.service-btn-dark.ghost{background:transparent; border-color:rgba(255,255,255,.25); color:#fff;}
.service-btn-dark:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.22)}
.service-panel{height:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:16px;}
.service-checklist{margin:0; padding-left:18px}
.service-checklist li{margin:10px 0}
.service-checklist--on-dark{color:rgba(255,255,255,.92)}

/* FAQ */
.service-faq details{border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:#fff;}
.service-faq details + details{margin-top:10px}
.service-faq summary{cursor:pointer; font-weight:900; color:var(--ink);}
.service-faq p{margin:10px 0 0}

/* CTA / Contact */
.service-cta{padding:54px 0; background:
  radial-gradient(900px 320px at 10% 10%, rgba(251,154,27,.22), transparent 60%),
  radial-gradient(800px 260px at 90% 20%, rgba(24,64,72,.16), transparent 60%),
  #fff;
}
.service-cta__inner{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start; border:1px solid var(--line); border-radius:var(--radius2); padding:18px; background:#fff; box-shadow:0 12px 34px rgba(0,0,0,.08);}
.service-cta h2{margin:0 0 6px; color:var(--ink)}
.service-cta p{margin:0; max-width:60ch}
.service-cta__form{border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--muted);}
label{display:block}
label span{display:block; font-weight:800; color:var(--ink); margin:0 0 6px}
input, textarea{width:100%; border-radius:14px; border:1px solid var(--line); padding:12px 12px; font:inherit; outline:none; background:#fff;}
input:focus, textarea:focus{border-color:rgba(251,154,27,.7); box-shadow:0 0 0 4px rgba(251,154,27,.18)}
.service-formrow{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
textarea{resize:vertical}
.service-fineprint{margin:10px 0 0; font-size:.9rem; opacity:.8}

/* TOC */
.toc-wrap{padding:16px 0 0; background:#fff;}
.toc-card{width:100%; background:#fff; border:1px solid rgba(24,64,72,.18); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.12); overflow:hidden;}
.toc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:linear-gradient(0deg, #f7fbfb, #fff); border-bottom:1px solid rgba(24,64,72,.12);}
.toc-head h4{margin:0; font-size:15px; font-weight:900; color:var(--ink);}
.toc-actions{display:flex; gap:8px; align-items:center;}
.toc-iconbtn{width:34px; height:34px; border-radius:10px; border:1px solid rgba(24,64,72,.18); background:#fff; display:grid; place-items:center; cursor:pointer; transition:.15s ease;}
.toc-iconbtn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.10)}
.toc-iconbtn svg{width:16px; height:16px; fill:var(--ink); opacity:.9}
.toc-body{padding:12px; transition:max-height .22s ease, padding .22s ease; overflow:auto;}
.toc-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.toc-item a{display:flex; align-items:center; gap:12px; padding:14px 14px; border-radius:14px; border:1px solid rgba(24,64,72,.12); background:#fff; transition:.15s ease;}
.toc-item a:hover{background:#f2f7f7; border-color:rgba(24,64,72,.18);}
.toc-badge{width:26px; height:26px; border-radius:999px; display:grid; place-items:center; background:rgba(251,154,27,.18); border:1px solid rgba(251,154,27,.35); font-size:12px; font-weight:900; color:#b76500; flex:0 0 auto;}
.toc-text{font-weight:900; color:#0f3a40; font-size:14px; line-height:1.2;}
.toc-card.is-collapsed .toc-body{max-height:0; padding:0 12px; overflow:hidden;}

/* District navigation (bottom) */
.district-section{padding:54px 0; background:linear-gradient(0deg, var(--muted), #fff)}
.district-card{border:1px dashed rgba(24,64,72,.22); border-radius:22px; padding:26px 18px; background:#fff;}
.district-title{display:flex; justify-content:center; margin-top:-44px;}
.district-title span{display:inline-block; background: #FB9A1B; color:#fff; font-weight:900; padding:12px 18px; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.16)}
.district-map{display:flex; justify-content:center; margin:10px 0 18px}
.district-map img{max-width:760px; width:100%; height:auto}
.district-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.district-grid a{display:inline-flex; align-items:center; justify-content:center; min-width:70px; padding:10px 14px; border-radius:999px; background:#FB9A1B; color:#fff; font-weight:900; border:0; box-shadow:0 10px 20px rgba(0,0,0,.10);}
.district-grid a:hover{transform:translateY(-1px)}

/* Responsive */
@media (max-width: 980px){
  .service-grid--2{grid-template-columns:1fr}
  .service-emergency{grid-template-columns:1fr}
  .service-cta__inner{grid-template-columns:1fr}
  .service-formrow{grid-template-columns:1fr}
  .card-split{grid-template-columns:1fr}
  .card-split--reverse .card-split__text{order:1}
  .card-split--reverse .card-split__media{order:2}
  .wolf-hero{padding:120px 14px 90px; min-height:480px;}
  .wolf-hero__sub{font-size:14px}
  .hero-badge{min-width: 180px}
}