/* Richmond Pest Control Pros — "Bayfront Industrial"
   Warm concrete + marine teal + signal vermilion. Barlow Condensed + Barlow. */

:root{
  --concrete:#EEEBE3; --concrete2:#E5E1D6; --card:#ffffff;
  --teal:#0C5B63; --teal-d:#084149; --teal-dd:#05323A;
  --teal-tint:#E3EEEC; --teal-tint2:#D2E3E0;
  --steel:#15201F; --steel2:#1C2A28; --steel3:#263835;
  --signal:#E4572E; --signal-d:#C8431F;
  --ink:#15201F; --body:#3C4442; --muted:#77807B; --muted2:#98A09B;
  --line:#DAD5C8; --line2:#C9C2B1;
  --r:4px; --rr:6px;
  --shadow:0 1px 2px rgba(21,32,31,.05), 0 10px 26px rgba(21,32,31,.07);
  --shadow-lg:0 22px 50px rgba(8,44,48,.18);
  --wrap:1180px;
  --sans:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:"Barlow Condensed",system-ui,Segoe UI,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--concrete); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--disp); color:var(--ink); line-height:1.03; margin:0; text-transform:uppercase; letter-spacing:.005em; font-weight:800;}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem; font-weight:700}
p{margin:0 0 1rem}
a{color:var(--teal); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:10px 16px; z-index:200}
.skip:focus{left:0}

.live{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgba(228,87,46,.6); animation:pulse 2s infinite; vertical-align:middle}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(228,87,46,.5)}70%{box-shadow:0 0 0 7px rgba(228,87,46,0)}100%{box-shadow:0 0 0 0 rgba(228,87,46,0)}}

.eyebrow{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal);
  padding:0 0 7px; margin-bottom:14px; border-bottom:3px solid var(--signal);
}
.eyebrow--light{color:#EAF3F1; border-bottom-color:var(--signal)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--disp); font-weight:700; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase;
  padding:12px 22px; border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; white-space:nowrap;
}
.btn svg{flex:none}
.btn--call{background:var(--teal); color:#fff; box-shadow:0 8px 18px rgba(12,91,99,.3)}
.btn--call:hover{background:var(--teal-d); transform:translateY(-2px)}
.btn--white{background:#fff; color:var(--teal-d)}
.btn--white:hover{background:#f2faf9; transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--teal); border-color:var(--line2)}
.btn--ghost:hover{border-color:var(--teal); background:var(--teal-tint)}
.btn--ghostw{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn--ghostw:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.btn--lg{padding:15px 30px; font-size:1.18rem}
.btn--full{width:100%}

/* ---------- Header ---------- */
.hd{position:sticky; top:0; z-index:100}
.hd-util{background:var(--steel); color:#C4CFCC; font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.06)}
.hd-util-in{display:flex; justify-content:space-between; align-items:center; gap:14px; height:34px; font-family:var(--disp); letter-spacing:.05em; text-transform:uppercase; font-weight:600}
.hd-util-l{color:#E6ECEA}
.hd-util-r{color:#93A09C}
.hd-bar{background:var(--concrete); border-bottom:1px solid var(--line); box-shadow:0 2px 12px rgba(21,32,31,.05)}
.hd-bar-in{display:flex; align-items:center; gap:20px; height:76px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand-tile{display:grid; place-items:center; filter:drop-shadow(0 4px 8px rgba(12,91,99,.25))}
.brand-tx{display:flex; flex-direction:column; line-height:1; font-family:var(--disp); text-transform:uppercase}
.brand-tx b{color:var(--ink); font-size:1.5rem; font-weight:800; letter-spacing:.02em}
.brand-tx i{color:var(--teal); font-style:normal; font-size:.76rem; font-weight:700; letter-spacing:.24em}
.hd-nav{display:flex; align-items:center; gap:4px}
.hd-nav>a,.hd-item-t{display:inline-flex; align-items:center; gap:5px; padding:9px 13px; font-family:var(--disp); font-weight:700; font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); border-radius:var(--r)}
.hd-nav>a:hover,.hd-item-t:hover{background:var(--teal-tint); color:var(--teal-d)}
.hd-item{position:relative}
.hd-caret{opacity:.6}
.hd-drop{position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--teal); border-radius:0 0 var(--r) var(--r); box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s}
.hd-item:hover .hd-drop{opacity:1; visibility:visible; transform:translateY(0)}
.hd-drop a{display:block; padding:9px 12px; color:var(--body); font-weight:500; border-radius:var(--r); font-size:.98rem}
.hd-drop a:hover{background:var(--teal-tint); color:var(--teal-d)}
.hd-call{display:flex; align-items:center; gap:10px; background:var(--teal); color:#fff; padding:9px 16px 9px 12px; border-radius:var(--r); box-shadow:0 8px 16px rgba(12,91,99,.28)}
.hd-call:hover{background:var(--teal-d)}
.hd-call-ic{display:grid; place-items:center; width:34px; height:34px; background:rgba(255,255,255,.16); border-radius:var(--r)}
.hd-call-tx{display:flex; flex-direction:column; line-height:1.15}
.hd-call-tx small{font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:#B9E0DE; font-family:var(--disp); font-weight:600}
.hd-call-tx b{font-family:var(--disp); font-size:1.16rem; font-weight:700; letter-spacing:.02em}
.hd-burger{display:none; flex-direction:column; gap:5px; width:46px; height:42px; align-items:center; justify-content:center; background:var(--steel); border:0; border-radius:var(--r); cursor:pointer}
.hd-burger span{width:22px; height:2.5px; background:#fff; transition:.2s}
.hd-burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hd-burger.on span:nth-child(2){opacity:0}
.hd-burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mnav{display:none}

/* ---------- Mobile call bar ---------- */
.callbar{display:none}

/* ---------- Hero (spec plate) ---------- */
.hero{position:relative; background:linear-gradient(160deg,#182624 0%,#15201F 55%,#101917 100%); color:#E8EDEB; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:repeating-linear-gradient(135deg,var(--signal) 0 22px,#15201F 22px 40px); opacity:.9}
.hero::after{content:""; position:absolute; right:-140px; top:-90px; width:420px; height:420px; border:1px solid rgba(255,255,255,.05); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.02)}
.hero-in{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; padding:64px 0 70px; position:relative; z-index:1}
.hero-kick{display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:.82rem; color:#CFE0DD; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--signal); padding:7px 14px; margin-bottom:22px}
.hero h1{color:#fff; font-size:clamp(2.7rem,6vw,4.7rem); letter-spacing:.01em; margin-bottom:18px}
.hero h1 .accent{color:#5FC7C1}
.hero-sub{font-size:1.16rem; color:#BDC8C5; max-width:37ch; margin-bottom:26px}
.hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.hero-chips{list-style:none; display:flex; flex-wrap:wrap; gap:9px 18px; padding:0; margin:0}
.hero-chips li{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; color:#C6D2CF}
.hero-chips li::before{content:""; width:7px; height:7px; background:var(--signal); flex:none}
.hero-media{position:relative}
.hero-frame{position:relative; border:6px solid rgba(255,255,255,.9); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:5/6}
.hero-frame img{width:100%; height:100%; object-fit:cover}
.hero-media::before,.hero-media::after{content:""; position:absolute; width:12px; height:12px; background:var(--signal); z-index:2}
.hero-media::before{top:-6px; left:-6px}
.hero-media::after{bottom:-6px; right:-6px}
.hero-tab{position:absolute; left:16px; bottom:16px; z-index:3; display:flex; align-items:center; gap:11px; background:var(--steel); color:#fff; border:1px solid rgba(255,255,255,.14); border-left:4px solid var(--signal); padding:11px 15px; box-shadow:var(--shadow-lg)}
.hero-tab b{font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1rem; letter-spacing:.03em; display:block; line-height:1.1}
.hero-tab small{color:#9FB0AC; font-size:.78rem}

/* ---------- Spec strip ---------- */
.spec{background:var(--steel2); border-top:1px solid rgba(255,255,255,.06)}
.spec-in{display:grid; grid-template-columns:repeat(4,1fr); }
.spec-cell{padding:22px 20px; text-align:center; border-left:1px solid rgba(255,255,255,.09); position:relative}
.spec-cell:first-child{border-left:0}
.spec-cell::before,.spec-cell::after{content:""; position:absolute; width:5px; height:5px; background:rgba(255,255,255,.18); top:9px}
.spec-cell::before{left:9px} .spec-cell::after{right:9px}
.spec-v{font-family:var(--disp); font-weight:800; text-transform:uppercase; color:#fff; font-size:1.75rem; line-height:1; letter-spacing:.02em}
.spec-v em{color:var(--signal); font-style:normal}
.spec-l{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:#9FB0AC; font-size:.78rem; margin-top:6px}

/* ---------- Section scaffolding ---------- */
section{position:relative}
.sec-head{max-width:640px; margin-bottom:38px}
.sec-head h2{margin-bottom:14px}
.sec-head p{color:var(--body); font-size:1.06rem}
.sec-head--center{margin-left:auto; margin-right:auto; text-align:center}

/* ---------- Pest ribbon ---------- */
.ribbon{background:var(--steel); color:#DDE6E4}
.ribbon-in{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.ribbon-item{display:flex; align-items:center; gap:12px; padding:20px 22px; border-left:1px solid rgba(255,255,255,.08); font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem}
.ribbon-item:first-child{border-left:0}
.ribbon-item .ic{width:26px; height:26px; color:var(--signal); flex:none}

/* ---------- Services (label plates) ---------- */
.svc{padding:74px 0}
.svc--page{padding-top:56px}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.scard{position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px 22px 30px; box-shadow:var(--shadow); transition:.16s; overflow:hidden}
.scard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--teal)}
.scard::after{content:""; position:absolute; left:2.5px; top:16px; width:2px; height:2px; border-radius:50%; box-shadow:0 0 0 1.5px #fff, 0 26px 0 0 #fff, 0 26px 0 1.5px #fff}
.scard:hover{transform:translateY(-4px); border-color:var(--teal); box-shadow:var(--shadow-lg)}
.scard:hover::before{background:var(--signal)}
.scard-ic{display:grid; place-items:center; width:50px; height:50px; background:var(--teal-tint); color:var(--teal-d); border-radius:var(--r); margin-bottom:16px}
.scard-ic .ic{width:28px; height:28px}
.scard-tag{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--signal-d); display:block; margin-bottom:5px}
.scard h3{margin-bottom:9px; letter-spacing:.02em}
.scard p{font-size:.96rem; color:var(--body); margin-bottom:16px; flex:1}
.scard-go{display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.86rem; color:var(--teal-d)}
.scard-go svg{color:var(--signal); transition:transform .16s}
.scard:hover .scard-go svg{transform:translateX(4px)}
.svc-grid--area{grid-template-columns:repeat(2,1fr)}
.svc-grid--area .scard{padding-left:28px}

/* ---------- Intro ---------- */
.intro{padding:16px 0 74px}
.intro-in{display:grid; grid-template-columns:.95fr 1.05fr; gap:52px; align-items:center}
.intro-media{position:relative; border:6px solid #fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg)}
.intro-media::after{content:""; position:absolute; top:14px; right:14px; width:14px; height:14px; background:var(--signal)}
.intro-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:11/9}
.intro-tx h2{margin-bottom:16px}
.intro-tx p{margin-bottom:15px}
.intro-list{list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:12px}
.intro-list li{display:flex; align-items:flex-start; gap:12px; font-weight:500; color:var(--ink)}
.intro-list .ic{width:22px; height:22px; color:var(--teal); flex:none; margin-top:2px}

/* ---------- Districts (signature) ---------- */
.dist{padding:74px 0; background:var(--concrete2); border-top:1px solid var(--line)}
.dist-head{max-width:660px; margin-bottom:40px}
.dist-head h2{margin-bottom:14px}
.dist-head p{color:var(--body); font-size:1.06rem}
.dist-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.dplate{position:relative; display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); transition:.16s}
.dplate:hover{transform:translateY(-4px); border-color:var(--teal); box-shadow:var(--shadow-lg)}
.dplate-n{font-family:var(--disp); font-weight:800; font-size:2.5rem; line-height:.9; color:transparent; -webkit-text-stroke:1.6px var(--teal-tint2); flex:none; letter-spacing:.02em}
.dplate:hover .dplate-n{-webkit-text-stroke-color:var(--signal)}
.dplate-body h3{margin-bottom:10px; letter-spacing:.02em}
.dplate-tags{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 12px}
.dplate-tags li{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--teal-d); background:var(--teal-tint); padding:3px 9px; border-radius:2px}
.dplate-body p{font-size:.93rem; color:var(--body); margin-bottom:14px}
.dplate-go{display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:var(--teal-d)}
.dplate-go svg{color:var(--signal)}

/* ---------- Process ---------- */
.proc{padding:74px 0; background:var(--steel); color:#DCE5E3}
.proc::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:repeating-linear-gradient(135deg,var(--signal) 0 20px,transparent 20px 38px)}
.proc-head{max-width:600px; margin-bottom:40px}
.proc-head h2{color:#fff; margin-bottom:14px}
.proc-head p{color:#A9B7B4}
.proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.proc-card{background:var(--steel2); border:1px solid rgba(255,255,255,.08); border-top:3px solid var(--teal); border-radius:var(--r); padding:24px 22px; position:relative}
.proc-n{font-family:var(--disp); font-weight:800; font-size:3rem; line-height:.9; color:transparent; -webkit-text-stroke:1.6px rgba(95,199,193,.5); display:block; margin-bottom:14px}
.proc-card h3{color:#fff; margin-bottom:8px; font-size:1.2rem; letter-spacing:.02em}
.proc-card p{color:#A9B7B4; font-size:.94rem; margin:0}

/* ---------- Local depth ---------- */
.local{padding:74px 0}
.local-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.local-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.local-card h3{font-size:1.16rem; margin-bottom:10px; color:var(--teal-d); letter-spacing:.02em; display:flex; align-items:center; gap:9px}
.local-card h3::before{content:""; width:12px; height:12px; background:var(--signal); flex:none}
.local-card p{font-size:.95rem; margin:0}

/* ---------- Why call ---------- */
.why{padding:0 0 74px}
.why-in{background:var(--teal); color:#EAF6F4; border-radius:var(--r); padding:48px 44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden}
.why-in::before{content:""; position:absolute; right:0; top:0; bottom:0; width:8px; background:repeating-linear-gradient(180deg,var(--signal) 0 16px,transparent 16px 30px)}
.why-tx h2{color:#fff; margin-bottom:14px}
.why-tx p{color:#C7E4E1; margin-bottom:22px}
.why-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.why-list li{display:flex; gap:13px; align-items:flex-start}
.why-list .wn{font-family:var(--disp); font-weight:800; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r); flex:none; font-size:1.05rem}
.why-list b{color:#fff; font-family:var(--disp); text-transform:uppercase; letter-spacing:.03em; display:block; font-size:1.05rem}
.why-list span{color:#C7E4E1; font-size:.95rem}

/* ---------- FAQ ---------- */
.faq{padding:74px 0; background:var(--concrete2); border-top:1px solid var(--line)}
.faq-wrap{max-width:860px}
.faq-head{margin-bottom:30px}
.faq-head h2{margin-top:4px}
.faq-list{display:grid; gap:12px}
.faq-item{background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:var(--r); overflow:hidden}
.faq-item[open]{border-left-color:var(--signal); box-shadow:var(--shadow)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.1rem; color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:relative; width:16px; height:16px; flex:none}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; background:var(--teal); border-radius:2px}
.faq-plus::before{left:0; right:0; top:7px; height:2.5px}
.faq-plus::after{top:0; bottom:0; left:7px; width:2.5px; transition:.2s}
.faq-item[open] .faq-plus::after{transform:scaleY(0)}
.faq-item[open] .faq-plus::before{background:var(--signal)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0; color:var(--body)}

/* ---------- CTA band ---------- */
.cta{background:linear-gradient(150deg,var(--teal) 0%,var(--teal-d) 100%); color:#EAF6F4; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:repeating-linear-gradient(135deg,var(--signal) 0 22px,transparent 22px 40px)}
.cta-in{display:flex; justify-content:space-between; align-items:center; gap:36px; padding:52px 0}
.cta-kick{display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; color:#BFE6E2; margin-bottom:12px}
.cta-tx h2{color:#fff; margin-bottom:10px; max-width:20ch}
.cta-tx p{color:#C7E4E1; max-width:52ch; margin:0}
.cta-act{display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:none}
.cta-sub{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:#BFE6E2}

/* ---------- Footer ---------- */
.ft{background:var(--steel); color:#AFBDBA}
.ft-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:60px 0 40px}
.ft-brand .brand{margin-bottom:16px}
.ft-brand .brand-tx b{color:#fff}
.ft-brand .brand-tx i{color:#7FC9C3}
.ft-brand p{font-size:.95rem; color:#9AA8A5; margin-bottom:16px; max-width:38ch}
.ft-call{font-family:var(--disp); font-weight:800; font-size:1.5rem; color:#fff; letter-spacing:.02em}
.ft-hours{font-size:.86rem; color:#8B9996; margin-top:4px}
.ft-col h3{color:#fff; font-size:1rem; letter-spacing:.1em; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,.1)}
.ft-col ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.ft-col a{color:#A6B4B1; font-size:.95rem}
.ft-col a:hover{color:#7FC9C3}
.ft-legal{border-top:1px solid rgba(255,255,255,.08); padding:24px 0 40px}
.ft-legal p{font-size:.8rem; color:#7E8C89; max-width:none; margin-bottom:12px; line-height:1.55}
.ft-copy{font-family:var(--disp); text-transform:uppercase; letter-spacing:.05em; color:#93A19E}
.ft-copy a{color:#7FC9C3}

/* ---------- Breadcrumbs ---------- */
.crumbs{background:var(--concrete2); border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; margin:0; font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem}
.crumbs a{color:var(--teal-d)}
.crumbs span[aria-current]{color:var(--muted)}
.crumbs .sep{color:var(--line2)}

/* ---------- Page head ---------- */
.phead{background:linear-gradient(160deg,#182624,#15201F); color:#E8EDEB; padding:56px 0}
.phead::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:repeating-linear-gradient(135deg,var(--signal) 0 22px,#15201F 22px 40px)}
.phead h1{color:#fff; font-size:clamp(2.2rem,4.6vw,3.4rem); margin:0 0 14px}
.phead p{color:#BDC8C5; max-width:60ch; font-size:1.08rem; margin-bottom:22px}
.phead--tall{padding:90px 0}

/* ---------- Service hero ---------- */
.shero{background:var(--concrete); padding:44px 0 20px}
.shero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.shero-tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--teal-d); background:var(--teal-tint); border-left:3px solid var(--signal); padding:7px 13px; margin-bottom:18px}
.shero-ic{display:grid; place-items:center}
.shero-ic .ic{width:20px; height:20px; color:var(--teal)}
.shero-tx h1{font-size:clamp(2.2rem,4.6vw,3.4rem); margin-bottom:16px}
.shero-sub{font-size:1.14rem; color:var(--body); margin-bottom:24px; max-width:44ch}
.shero-cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.shero-note{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:var(--muted)}
.shero-media{position:relative; border:6px solid #fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg)}
.shero-media::after{content:""; position:absolute; top:0; left:0; width:14px; height:14px; background:var(--signal)}
.shero-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}

/* ---------- Service / area body ---------- */
.sbody{padding:52px 0 66px}
.sbody-in{display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start}
.sbody-main .lead{font-size:1.18rem; line-height:1.6; color:var(--ink); font-weight:500; margin-bottom:26px}
.abody-p{font-size:1.05rem; margin-bottom:16px}
.sblock{margin-top:30px}
.sblock h2{font-size:1.6rem; margin-bottom:14px; padding-left:16px; border-left:4px solid var(--signal)}
.sblock p{margin-bottom:14px}
.rel-row{display:flex; flex-wrap:wrap; gap:12px}
.rel-card{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:11px 16px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); box-shadow:var(--shadow)}
.rel-card:hover{border-color:var(--teal); color:var(--teal-d); transform:translateY(-2px)}
.rel-ic{display:grid; place-items:center; color:var(--teal)}
.rel-ic .ic{width:22px; height:22px}
.rel-card svg:last-child{color:var(--signal)}

/* sidebar */
.sbody-side{display:grid; gap:18px; position:sticky; top:130px}
.side-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.side-card h3{font-size:1.2rem; margin-bottom:12px; letter-spacing:.02em}
.side-card--call{background:var(--steel); color:#DCE5E3; border-color:var(--steel3); border-top:4px solid var(--signal)}
.side-card--call h3{color:#fff}
.side-card--call p{color:#A9B7B4; font-size:.95rem; margin-bottom:16px}
.side-hours{display:block; text-align:center; margin-top:12px; font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.8rem; color:#8B9996}
.side-checks{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.side-checks li{display:flex; align-items:flex-start; gap:11px; font-size:.96rem; color:var(--body)}
.side-checks li svg,.side-checks li .ic{color:var(--teal); flex:none; margin-top:2px; width:20px; height:20px}
.side-checks--wide li{font-size:1rem}
.side-card--areas p{font-size:.95rem; color:var(--body); margin:0; line-height:1.7}
.side-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.side-links a{display:block; padding:9px 12px; background:var(--concrete); border-radius:var(--r); color:var(--teal-d); font-weight:600; font-size:.95rem}
.side-links a:hover{background:var(--teal-tint)}

/* ---------- Area hero ---------- */
.ahero{background:linear-gradient(160deg,#182624,#15201F); color:#E8EDEB; padding:56px 0}
.ahero::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:repeating-linear-gradient(135deg,var(--signal) 0 22px,#15201F 22px 40px)}
.ahero h1{color:#fff; font-size:clamp(2.2rem,4.6vw,3.3rem); margin:0 0 14px}
.ahero p{color:#BDC8C5; max-width:64ch; font-size:1.08rem; margin-bottom:22px}

/* ---------- About ---------- */
.about{padding:56px 0 66px}
.about-in{display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start}
.about-tx h2{font-size:1.6rem; margin:26px 0 14px; padding-left:16px; border-left:4px solid var(--signal)}
.about-tx h2:first-child{margin-top:0}
.about-side .side-card h3{margin-bottom:14px}
.about-side .side-checks{margin-bottom:18px}

/* ---------- Contact ---------- */
.contact{padding:56px 0 66px}
.contact-in{display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start}
.contact-call{display:flex; align-items:center; gap:18px; background:var(--steel); color:#fff; border-radius:var(--r); border-left:4px solid var(--signal); padding:26px; margin-bottom:26px}
.contact-ic{display:grid; place-items:center; width:60px; height:60px; background:var(--teal); border-radius:var(--r); flex:none}
.contact-label{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:#9FB0AC; display:block}
.contact-phone{font-family:var(--disp); font-weight:800; font-size:2.1rem; color:#fff; letter-spacing:.02em; line-height:1.1}
.contact-hours{display:block; font-size:.85rem; color:#9FB0AC}
.contact-copy h2{font-size:1.5rem; margin-bottom:16px; padding-left:16px; border-left:4px solid var(--signal)}

/* ---------- Legal ---------- */
.legal{padding:52px 0 66px}
.legal-wrap{max-width:800px}
.legal-wrap h2{font-size:1.4rem; margin:28px 0 12px}
.legal-wrap p{margin-bottom:14px}

/* ---------- Blog ---------- */
.blog{padding:52px 0 66px}
.bfeat{display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); margin-bottom:26px}
.bfeat:hover{border-color:var(--teal); box-shadow:var(--shadow-lg)}
.bfeat-media{overflow:hidden}
.bfeat-media img{width:100%; height:100%; object-fit:cover; min-height:280px}
.bfeat-tx{padding:32px}
.btag{display:inline-block; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:#fff; background:var(--signal); padding:3px 10px; border-radius:2px; margin-bottom:12px}
.bfeat-tx h2{font-size:1.7rem; margin-bottom:12px}
.bfeat-tx p{color:var(--body); margin-bottom:14px}
.bmeta{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:var(--muted)}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.bcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.bcard:hover{border-color:var(--teal); box-shadow:var(--shadow-lg); transform:translateY(-4px)}
.bcard-media img{width:100%; height:190px; object-fit:cover}
.bcard-tx{padding:22px; display:flex; flex-direction:column; flex:1}
.bcard-tx h3{font-size:1.2rem; margin-bottom:10px; letter-spacing:.01em}
.bcard-tx p{font-size:.93rem; color:var(--body); margin-bottom:14px; flex:1}

/* ---------- Post ---------- */
.post{padding:44px 0 20px}
.post-wrap{max-width:800px}
.post-head{margin-bottom:22px}
.post-head h1{font-size:clamp(2rem,4.4vw,3rem); margin:12px 0 12px}
.post-media{border:6px solid #fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:30px}
.post-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/8}
.post-body .sblock h2{font-size:1.5rem}
.post-body p{font-size:1.06rem}
.post-cta{display:flex; justify-content:space-between; align-items:center; gap:24px; background:var(--teal-tint); border:1px solid var(--teal-tint2); border-left:4px solid var(--signal); border-radius:var(--r); padding:26px 28px; margin:34px 0}
.post-cta h3{color:var(--teal-d); margin-bottom:6px; letter-spacing:.02em}
.post-cta p{margin:0; color:var(--body); font-size:.98rem}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-in,.intro-in,.shero-in,.why-in{grid-template-columns:1fr; gap:34px}
  .sbody-in,.about-in,.contact-in{grid-template-columns:1fr; gap:32px}
  .sbody-side{position:static}
  .svc-grid,.dist-grid,.proc-grid,.local-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .bfeat{grid-template-columns:1fr}
  .hero-media{max-width:440px}
  .intro-media{order:-1}
}
@media (max-width:860px){
  .hd-util{display:none}
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .mnav{display:block; max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--concrete); border-bottom:1px solid var(--line)}
  .mnav.open{max-height:640px}
  .mnav>a,.mnav-group>summary{display:flex; justify-content:space-between; align-items:center; padding:15px 22px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.08rem; color:var(--ink); border-top:1px solid var(--line); cursor:pointer; list-style:none}
  .mnav-group>summary::-webkit-details-marker{display:none}
  .mnav-caret{transition:.2s}
  .mnav-group[open] .mnav-caret{transform:rotate(180deg)}
  .mnav-sub{display:grid; background:#fff}
  .mnav-sub a{padding:12px 34px; color:var(--body); border-top:1px solid var(--line); font-size:.98rem}
  .mnav-call{display:block; margin:16px 22px; text-align:center; background:var(--teal); color:#fff; padding:14px; border-radius:var(--r); font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
  .callbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; justify-content:space-between; align-items:center; gap:12px; background:var(--teal); color:#fff; padding:11px 18px; box-shadow:0 -6px 20px rgba(0,0,0,.2)}
  .callbar-l{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.86rem}
  .callbar-r{font-family:var(--disp); font-weight:800; font-size:1.24rem; letter-spacing:.02em}
  main{padding-bottom:64px}
  .cta-in{flex-direction:column; align-items:flex-start; gap:22px}
}
@media (max-width:620px){
  .svc-grid,.dist-grid,.proc-grid,.local-grid,.blog-grid,.spec-in,.ribbon-in{grid-template-columns:1fr}
  .svc-grid--area{grid-template-columns:1fr}
  .spec-cell{border-left:0; border-top:1px solid rgba(255,255,255,.09); text-align:left; padding:16px 22px; display:flex; align-items:baseline; gap:12px}
  .spec-cell:first-child{border-top:0}
  .spec-cell::before,.spec-cell::after{display:none}
  .spec-l{margin-top:0}
  .ribbon-item{border-left:0; border-top:1px solid rgba(255,255,255,.08)}
  .ribbon-item:first-child{border-top:0}
  .contact-call{flex-direction:column; text-align:center}
  .post-cta{flex-direction:column; align-items:flex-start}
}