:root{
  --ink:#1f2933; --slate:#3a454e; --sage:#5a7d6e; --sage-d:#46685a;
  --bone:#f7f5f0; --card:#fffdf9; --clay:#e8845a; --clay-d:#d56f44;
  --muted:#6b7680; --line:rgba(31,41,51,.12); --line-d:rgba(247,245,240,.16);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{color:var(--ink); background:var(--bone); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.018em; line-height:1.06; margin:0}
a{color:inherit}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin:0 0 18px}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--sage)}

/* buttons — terracotta reserved for primary actions only */
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; font-size:15px; padding:14px 26px; border-radius:7px; cursor:pointer; border:0; font-family:inherit; transition:transform .18s ease, background .2s, box-shadow .2s, border-color .2s}
.btn.primary{background:var(--clay); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.04)}
.btn.primary:hover{background:var(--clay-d); transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(213,111,68,.7)}
.btn.primary .arr{transition:transform .2s}
.btn.primary:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}

/* sticky header */
header.bar{position:sticky; top:0; z-index:40; background:rgba(247,245,240,.86); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.bar .row{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand .mark{width:34px; height:34px; flex:none}
.brand .nm{display:flex; flex-direction:column; line-height:1.05}
.brand .nm b{font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:-.01em}
.brand .nm span{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:2px}
nav.links{display:flex; gap:28px; align-items:center}
nav.links a{text-decoration:none; color:var(--slate); font-size:14.5px; font-weight:500; transition:color .2s}
nav.links a:hover{color:var(--sage)}
.bar .btn{padding:11px 20px; font-size:14px}
@media(max-width:760px){
  nav.links{display:none}
  body{padding-bottom:64px}
  .mobilecta{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--clay); color:#fff; font-weight:600; font-size:16px; padding:16px; text-decoration:none; box-shadow:0 -8px 24px -10px rgba(0,0,0,.35); transform:translateY(120%); transition:transform .26s ease}
  .mobilecta.show{transform:translateY(0)}
}

/* hero (homepage) */
.hero{position:relative; overflow:hidden; background:linear-gradient(102deg, rgba(19,26,32,.90) 0%, rgba(19,26,32,.66) 42%, rgba(19,26,32,.40) 100%), url('/img/hero.jpg') center/cover no-repeat #1b2329}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; padding:90px 24px 84px}
.hero h1{font-size:clamp(43px,6vw,74px); font-optical-sizing:auto; font-variation-settings:"opsz" 144; color:#fff}
.hero h1 em{font-style:italic; color:#c2dccd}
.hero .eyebrow{color:#aecabb}
.hero .eyebrow::before{background:#aecabb}
.hero .lede{font-size:18px; line-height:1.6; color:rgba(255,255,255,.87); margin:22px 0 30px; max-width:48ch}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero .btn.ghost{color:#fff; border-color:rgba(255,255,255,.4)}
.hero .btn.ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.trustrow{display:flex; flex-wrap:wrap; gap:22px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.22)}
.trustrow .ti{display:flex; align-items:center; gap:9px; font-size:13.5px; color:rgba(255,255,255,.86)}
.trustrow .ti svg{flex:none; color:#aecabb}

/* quote card / form */
.quotecard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:0 30px 60px -34px rgba(31,41,51,.3)}
.quotecard h2{font-size:23px; margin-bottom:4px}
.quotecard .sub{font-size:14px; color:var(--muted); margin:0 0 18px}
.field{margin:0 0 13px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--slate); margin:0 0 6px; letter-spacing:.01em}
.field input,.field select{width:100%; font-family:inherit; font-size:15.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:9px; padding:13px 14px; transition:border-color .18s, box-shadow .18s}
.field input:focus,.field select:focus{outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(90,125,110,.16)}
.quotecard .btn.primary{width:100%; justify-content:center; margin-top:6px; padding:15px}
.formnote{font-size:12px; color:var(--muted); text-align:center; margin:12px 0 0}
.formmsg{min-height:1.2em; margin:12px 0 0; font-size:14px; font-weight:500; color:var(--sage); text-align:center}
.formmsg.err{color:#b04a2c}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.guarantee{display:flex; align-items:flex-start; gap:9px; margin:14px 0 0; padding:12px 14px; background:rgba(90,125,110,.10); border:1px solid rgba(90,125,110,.30); border-radius:10px; font-size:12.8px; line-height:1.45; color:var(--slate)}
.guarantee svg{flex:none; color:var(--sage); margin-top:1px}
.guarantee b{color:var(--ink); font-weight:600}

/* mobile sticky CTA — shown ≤760px (media block above); hidden on desktop here (min-width so it never
   overrides the mobile display:flex via source order). */
@media(min-width:761px){ .mobilecta{display:none} }

/* section scaffolding */
section{padding:74px 0}
section.tint{background:linear-gradient(180deg,#edf2ed 0%, #f3f1ea 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.shead{max-width:640px; margin:0 0 40px}
.shead h2{font-size:clamp(28px,3.4vw,40px)}
.shead h2 em{font-style:italic; color:var(--sage)}
.shead p{color:var(--slate); font-size:17px; margin:14px 0 0}

/* services cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.scard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px; transition:transform .2s, box-shadow .2s, border-color .2s}
.scard:hover{transform:translateY(-3px); box-shadow:0 22px 44px -28px rgba(31,41,51,.34); border-color:rgba(90,125,110,.4)}
.scard .ic{width:44px; height:44px; border-radius:11px; background:var(--sage); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:16px; box-shadow:0 6px 14px -8px rgba(90,125,110,.8)}
.scard h3{font-size:21px; margin-bottom:8px}
.scard p{color:var(--slate); font-size:14.5px; margin:0 0 16px}
.scard .price{font-family:var(--serif); font-size:15px; color:var(--ink)}
.scard .price b{font-weight:600}
.scard .price span{color:var(--muted); font-size:13px; font-family:var(--sans)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:step}
.step{position:relative; padding-top:8px}
.step .n{font-family:var(--serif); font-size:15px; font-weight:600; color:#fff; background:var(--sage); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:15px}
.step h3{font-size:19px; margin-bottom:7px}
.step p{color:var(--slate); font-size:14.5px; margin:0}

/* areas chips */
.areas{display:flex; flex-wrap:wrap; gap:11px}
.areas .chip{font-size:14.5px; font-weight:500; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:10px 20px; text-decoration:none; transition:border-color .2s, color .2s}
.areas a.chip:hover{border-color:var(--sage); color:var(--sage)}
.areas .chip b{color:var(--sage)}

/* photographic band-breaker */
.imgband{position:relative; min-height:440px; display:flex; align-items:center; background:linear-gradient(90deg, rgba(19,26,32,.74) 0%, rgba(19,26,32,.34) 58%, rgba(19,26,32,.12) 100%), url('/img/band.jpg') center/cover no-repeat #1b2329; color:#fff}
.imgband .inner{max-width:var(--wrap); margin:0 auto; width:100%; padding:56px 24px}
.imgband .eyebrow{color:#aecabb; margin-bottom:14px}
.imgband .eyebrow::before{background:#aecabb}
.imgband .line{font-family:var(--serif); font-weight:500; font-size:clamp(27px,3.6vw,42px); line-height:1.1; letter-spacing:-.015em; margin:0; max-width:17ch; color:#fff}
.imgband .line em{font-style:italic; color:#c2dccd}

/* final cta band */
.band{background:var(--sage-d); color:var(--bone)}
.band .wrap{padding:66px 24px; text-align:center}
.band h2{font-size:clamp(28px,3.6vw,42px); color:#fff}
.band h2 em{font-style:italic; color:#f2e7da}
.band p{color:rgba(247,245,240,.82); font-size:17px; max-width:54ch; margin:16px auto 28px}

footer{padding:42px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
footer .row{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
footer a{color:var(--slate); text-decoration:none}
footer a:hover{color:var(--sage)}

/* ---------- city × service content pages ---------- */
.crumbs{font-size:12.5px; color:var(--muted); margin:0 0 16px; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--sage)}
.crumbs .sep{opacity:.45}
.pagehero{background:linear-gradient(180deg,#e7eee9 0%, var(--bone) 100%); border-bottom:1px solid var(--line)}
.pagehero .wrap{padding:44px 24px 40px}
.pagehero h1{font-size:clamp(32px,4.4vw,52px); font-optical-sizing:auto; font-variation-settings:"opsz" 144; max-width:20ch}
.pagehero h1 em{font-style:italic; color:var(--sage)}
.pagehero .sub{font-size:18px; color:var(--slate); margin:18px 0 22px; max-width:62ch}
.pagehero .pricetag{font-family:var(--serif); font-size:15px; color:var(--ink)}

.layout{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:48px; align-items:start; padding:54px 0}
.prose{max-width:68ch; min-width:0}
.prose>p{font-size:16.5px; color:var(--slate); margin:0 0 18px}
.prose h2{font-size:clamp(23px,2.6vw,30px); margin:38px 0 14px}
.prose h2:first-of-type{margin-top:4px}
.prose h2 em{font-style:italic; color:var(--sage)}
.checklist{list-style:none; padding:0; margin:6px 0 10px; display:grid; grid-template-columns:1fr 1fr; gap:11px 24px}
.checklist li{position:relative; padding-left:28px; font-size:15px; color:var(--slate)}
.checklist li::before{content:""; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:50%; background:rgba(90,125,110,.15)}
.checklist li::after{content:""; position:absolute; left:6px; top:7px; width:6px; height:3px; border-left:2px solid var(--sage); border-bottom:2px solid var(--sage); transform:rotate(-45deg)}
.aside{position:sticky; top:84px}

.faq{margin-top:10px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:17px 0; font-weight:600; font-size:16px; color:var(--ink); display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--sage); font-weight:600; font-size:20px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details>p{margin:0 0 17px; color:var(--slate); font-size:15.5px}

.related{padding:56px 0; border-top:1px solid var(--line)}
.related h2{font-size:24px; margin:0 0 22px}
.relgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.relgrid h3{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.relgrid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.relgrid a{text-decoration:none; color:var(--slate); font-size:15px; font-weight:500}
.relgrid a:hover{color:var(--sage)}

/* homepage internal-links block */
.sitelinks{padding:62px 0; border-top:1px solid var(--line)}
.sitelinks h2{font-size:clamp(24px,3vw,32px); margin:0 0 8px}
.sitelinks h2 em{font-style:italic; color:var(--sage)}
.sitelinks .lead{color:var(--slate); margin:0 0 30px; font-size:16px}
.sitelinks .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.sitelinks .col h3{font-size:15px; margin:0 0 11px}
.sitelinks .col h3 a{text-decoration:none}
.sitelinks .col h3 a:hover{color:var(--sage)}
.sitelinks .col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px}
.sitelinks .col a{color:var(--slate); text-decoration:none; font-size:14px}
.sitelinks .col a:hover{color:var(--sage)}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:36px; padding:48px 24px}
  .cards,.steps{grid-template-columns:1fr}
  section{padding:56px 0}
  .layout{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .aside{position:static}
  .checklist{grid-template-columns:1fr}
}
@media(max-width:760px){
  .relgrid{grid-template-columns:1fr}
  .sitelinks .grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto; transition:none!important}}