:root{
  --zinc-50:#f9f8f6; --zinc-100:#f1efeb; --zinc-200:#e3e0da; --zinc-300:#cfcbc4; --zinc-400:#9a9691;
  --zinc-500:#6f6c67; --zinc-700:#3a3937; --zinc-800:#232323; --zinc-900:#111111; --black:#0e0e0e; --white:#fff;
  --accent:#C8102E; --accent-700:#a30d26; --accent-100:#fde8ec; --accent-50:#fff5f6;
  --text:var(--zinc-900); --text-2:var(--zinc-500); --bg:var(--white); --bg-2:var(--zinc-50); --bg-3:var(--zinc-100);
  --line:var(--zinc-200);
  --r-xs:.375rem; --r-sm:.5rem; --r-md:.625rem; --r-lg:.75rem; --r-xl:1rem; --r-2xl:1.25rem; --r-3xl:1.5rem; --r-4xl:2.5rem; --r-full:9999px;
  --font:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --nav-h:5rem;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
html{scrollbar-width:thin; scrollbar-color:#000 transparent; scroll-behavior:smooth}
::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:#000} ::-webkit-scrollbar-track{background:transparent}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:1rem; line-height:1.4; font-weight:400}
img,svg{max-width:100%; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.02em; line-height:1.08; text-wrap:balance}
h1{font-size:clamp(2.4rem,5vw,4.25rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:1.25rem; letter-spacing:-.01em}
.wrap{width:min(1240px,100%); margin-inline:auto; padding-inline:1.25rem}
.narrow{width:min(720px,100%); margin-inline:auto; padding-inline:1.25rem}
.center{text-align:center}
.sub{color:var(--text-2); font-size:1.05rem; line-height:1.5; max-width:56ch}
.center .sub{margin-inline:auto}
.stack{display:grid; gap:1rem}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}

/* Buttons: pills */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:inherit; font-weight:500; font-size:.95rem; padding:.8rem 1.3rem; border-radius:var(--r-full); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn svg{width:1.05em; height:1.05em; flex:none}
.btn-dark{background:var(--black); color:#fff}
.btn-dark:hover{background:var(--zinc-700)}
.btn-light{background:#fff; color:var(--black); border-color:var(--zinc-200)}
.btn-light:hover{background:var(--zinc-100)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-700)}
.btn-glass{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn-lg{padding:1rem 1.6rem; font-size:1.05rem}

/* Nav */
.nav{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:60; transition:background .3s var(--ease), border-color .3s var(--ease)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--nav-h)}
.nav .brand{display:flex; align-items:center; text-decoration:none}
.nav .brand svg{height:44px; width:auto}
.nav .links{display:flex; align-items:center; gap:.25rem; background:rgba(255,255,255,.7); border:1px solid var(--zinc-200); border-radius:var(--r-full); padding:.3rem; backdrop-filter:blur(12px)}
.nav .links a{text-decoration:none; font-size:.92rem; font-weight:500; color:var(--zinc-700); padding:.55rem .95rem; border-radius:var(--r-full); transition:background .2s}
.nav .links a:hover{background:var(--zinc-100); color:var(--zinc-900)}
.nav .links a[aria-current="page"]{background:var(--zinc-900); color:#fff}
.nav .links a[aria-current="page"]::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:.45rem; vertical-align:middle}
.nav .actions{display:flex; align-items:center; gap:.5rem}
.nav-toggle{display:none; width:2.75rem; height:2.75rem; border-radius:var(--r-full); border:1px solid var(--zinc-200); background:#fff; color:var(--zinc-900); cursor:pointer; align-items:center; justify-content:center}
.nav-toggle svg{width:20px;height:20px}
html.on-hero .nav:not(.scrolled){color:#fff}
html.on-hero .nav:not(.scrolled) .links{background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.25)}
html.on-hero .nav:not(.scrolled) .links a{color:rgba(255,255,255,.85)}
html.on-hero .nav:not(.scrolled) .links a:hover{background:rgba(255,255,255,.15); color:#fff}
html.on-hero .nav:not(.scrolled) .links a[aria-current="page"]{background:#fff; color:var(--zinc-900)}
html.on-hero .nav:not(.scrolled) .nav-toggle{background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.3); color:#fff}
.nav.scrolled, html:not(.on-hero) .nav{background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--zinc-200)}
html:not(.on-hero) body{padding-top:var(--nav-h)}
.nav .brand svg .ink{fill:var(--zinc-900)} .nav .brand svg .ink-stroke{stroke:var(--zinc-900)}
html.on-hero .nav:not(.scrolled) .brand svg .ink{fill:#fff} html.on-hero .nav:not(.scrolled) .brand svg .ink-stroke{stroke:#fff}
@media (max-width:980px){
  .nav .links{display:none; position:absolute; top:calc(var(--nav-h) + .25rem); left:1.25rem; right:1.25rem; flex-direction:column; align-items:stretch; background:#fff !important; border-color:var(--zinc-200) !important; border-radius:var(--r-2xl); padding:.5rem; box-shadow:0 .5rem 3rem rgba(0,0,0,.12)}
  .nav .links.open{display:flex}
  .nav .links a{color:var(--zinc-800) !important; padding:.9rem 1rem}
  .nav .links a[aria-current="page"]{background:var(--accent) !important; color:#fff !important}
  .nav .links a[aria-current="page"]::before{background:#fff}
  .nav .links a:hover{background:var(--zinc-100) !important}
  .nav .links a[aria-current="page"]:hover{background:var(--accent-700) !important}
  .nav-toggle{display:inline-flex}
  .nav .actions .btn{padding:.65rem 1rem; font-size:.9rem}
}

/* Hero */
.hero{position:relative; min-height:min(88svh,860px); display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--zinc-900)}
.hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 70%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.3) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%)}
.hero .wrap{position:relative; z-index:1; padding-block:0 3rem; display:grid; gap:1.1rem; max-width:1240px}
.tag{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); padding:.35rem .8rem .35rem .6rem; border-radius:var(--r-xl); width:fit-content; max-width:100%; min-width:0}
.tag span{min-width:0}
.tag svg{width:16px; height:16px}
.hero h1{font-size:clamp(2.6rem,6vw,5rem); font-weight:500; max-width:14ch; text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .sub{color:rgba(255,255,255,.88); font-size:1.1rem; max-width:44ch; text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero .actions{display:flex; gap:.6rem; flex-wrap:wrap; padding-top:.5rem}

/* Sections */
.section{padding-block:4rem}
.section-sm{padding-block:2.5rem}
.section-head{display:grid; gap:.8rem; margin-bottom:2rem}
@media (max-width:760px){.section{padding-block:3rem} .section-head{margin-bottom:1.5rem}}

/* Trust / towns strip */
.trust .small{display:none} .trust .faces{display:none} .trust .x{font-size:.9rem; color:var(--text-2); display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:1.6rem}
.trust .faces{display:flex; justify-content:center; margin-bottom:.8rem}
.trust .faces span{width:34px; height:34px; border-radius:50%; background:var(--zinc-200); border:2px solid #fff; margin-left:-10px; display:grid; place-items:center; font-size:.7rem; font-weight:600; color:var(--zinc-700)}
.trust .faces span:first-child{margin-left:0}
.towns{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem 2rem; text-align:center}
.towns span{font-size:clamp(1.3rem,2.6vw,2rem); font-weight:500; letter-spacing:-.02em; color:var(--zinc-400)}
@media (max-width:760px){.towns{grid-template-columns:repeat(2,1fr)}}

/* How it works: 2x2 grid of cards */
.steps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem}
.step{display:grid; grid-template-rows:auto 1fr; background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-3xl); overflow:hidden; text-align:left}
.step .card{position:relative; aspect-ratio:16/9; background:var(--zinc-100); border-bottom:1px solid var(--zinc-200)}
.step .card img{width:100%; height:100%; object-fit:cover}
.step .num{position:absolute; top:.9rem; left:.9rem; width:2.1rem; height:2.1rem; border-radius:var(--r-md); background:var(--accent); display:grid; place-items:center; font-weight:600; font-size:.9rem; color:#fff}
.step-body{padding:1.25rem 1.5rem 1.5rem; display:grid; gap:.6rem; align-content:start}
.step .meta{display:inline-flex; align-items:center; gap:.5rem; width:max-content; max-width:100%; font-size:.82rem; color:var(--zinc-500); background:var(--zinc-50); border:1px solid var(--zinc-200); border-radius:var(--r-full); padding:.3rem .75rem .3rem .5rem; margin-bottom:.2rem}
.step .meta svg{width:15px; height:15px; color:var(--accent); flex:none}
.step .meta strong{color:var(--zinc-900); font-weight:500}
.step .meta span::before{content:"\00B7"; margin-right:.5rem; color:var(--zinc-300)}
.step h3{font-size:1.3rem; font-weight:500}
.step p{color:var(--text-2); line-height:1.5; font-size:.97rem}
@media (max-width:760px){.steps{grid-template-columns:1fr} .step .card{aspect-ratio:3/2}}

/* Tabs section */
.tabs-head{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; font-size:.9rem}
.tabs-head .label{display:flex; align-items:center; gap:.6rem; font-weight:500}
.tabs-head .label svg{width:16px;height:16px;color:var(--accent)}
.tablist{display:flex; gap:.25rem; list-style:none; margin:0; padding:0}
.tablist button{font:inherit; font-size:.9rem; color:var(--zinc-400); background:none; border:0; padding:.35rem .5rem; cursor:pointer; border-radius:var(--r-sm)}
.tablist button[aria-selected="true"]{color:var(--accent); font-weight:600}
.tabpanel{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.tabpanel[hidden]{display:none}
.tabpanel h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.tabpanel .sub{margin-top:1rem}
.tabpanel ul{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem}
.tabpanel li{display:flex; gap:.7rem; align-items:flex-start; color:var(--zinc-700)}
.tabpanel li svg{width:20px; height:20px; flex:none; color:var(--accent); margin-top:.1rem}
.tabpanel .media{border-radius:var(--r-3xl); overflow:hidden; aspect-ratio:4/3; background:var(--zinc-100); border:1px solid var(--zinc-200)}
.tabpanel .media img{width:100%; height:100%; object-fit:cover}
.tabpanel .actions{margin-top:1.6rem; display:flex; gap:.6rem; flex-wrap:wrap}
@media (max-width:900px){.tabpanel{grid-template-columns:1fr; gap:1.6rem} .tabpanel .media{order:-1}}

/* Accordion */
.acc{display:grid; gap:.75rem}
.acc details{background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-xl); transition:border-color .3s var(--ease)}
.acc details[open]{border-color:var(--accent)}
.acc summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.5rem 1.5rem; font-size:1.15rem; font-weight:500; color:var(--zinc-900)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{flex:none; width:2rem; height:2rem; border-radius:var(--r-sm); background:var(--zinc-100); color:var(--zinc-500); display:grid; place-items:center; transition:transform .4s var(--ease)}
.acc summary .ico svg{width:16px;height:16px}
.acc details[open] summary .ico{transform:rotate(45deg); background:var(--accent-100); color:var(--accent)}
.acc .body{padding:0 1.5rem 1.5rem; color:var(--zinc-500); line-height:1.55; max-width:62ch}
.acc-media{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start}
.acc-media .media{border-radius:var(--r-3xl); overflow:hidden; aspect-ratio:4/5; background:var(--zinc-100); border:1px solid var(--zinc-200); position:sticky; top:calc(var(--nav-h) + 1rem)}
.acc-media .media img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){.acc-media{grid-template-columns:1fr} .acc-media .media{aspect-ratio:16/10; position:static}}

/* Feature grid cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card-t{background:var(--zinc-50); border:1px solid var(--zinc-200); border-radius:var(--r-2xl); padding:1.75rem; display:grid; gap:.8rem; align-content:start}
.card-t .ico{width:2.5rem; height:2.5rem; border-radius:var(--r-md); background:var(--zinc-900); display:grid; place-items:center; color:var(--accent)}
.card-t .ico svg{width:22px;height:22px}
.card-t h3{font-size:1.15rem}
.card-t p{color:var(--text-2); font-size:.97rem; line-height:1.5}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* Service cards (services page) */
.svc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.svc{display:grid; grid-template-rows:auto 1fr; background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-3xl); overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 1rem); min-width:0}
.svc .media{aspect-ratio:16/9; background:var(--zinc-100); border-bottom:1px solid var(--zinc-200)}
.svc .media img{width:100%; height:100%; object-fit:cover}
.svc .body{padding:1.75rem; display:grid; gap:.9rem; align-content:start; min-width:0}
.svc .body h3{font-size:1.4rem}
.svc .body p{color:var(--text-2); font-size:.97rem; line-height:1.5}
.svc .body ul{margin:.1rem 0 .3rem; padding:0; list-style:none; display:grid; gap:.45rem; font-size:.93rem; color:var(--zinc-700)}
.svc .body li{display:flex; gap:.5rem; align-items:flex-start}
.svc .body li svg{width:16px; height:16px; flex:none; color:var(--accent); margin-top:.2rem}
@media (max-width:820px){.svc-grid{grid-template-columns:1fr}}

/* Page heads */
.page-head{padding-block:2.5rem 2rem; display:grid; gap:.8rem; justify-items:center; text-align:center}
.page-head h1{font-size:clamp(2.4rem,5vw,4rem); max-width:18ch}
.page-head .crumb{font-size:.85rem; color:var(--text-2); display:flex; gap:.5rem; align-items:center}
.page-head .crumb svg{width:14px;height:14px;color:var(--accent)}
.page-media{border-radius:var(--r-4xl); overflow:hidden; aspect-ratio:21/9; background:var(--zinc-100); border:1px solid var(--zinc-200)}
.page-media img{width:100%; height:100%; object-fit:cover}
@media (max-width:760px){.page-media{aspect-ratio:4/3; border-radius:var(--r-3xl)}}

/* Notice */
.notice{display:flex; gap:.9rem; align-items:flex-start; background:var(--zinc-50); border:1px solid var(--zinc-200); border-radius:var(--r-xl); padding:1.1rem 1.25rem; color:var(--zinc-700); font-size:.95rem}
.notice svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:.1rem}
.notice strong{color:var(--zinc-900)}

/* Areas */
.zones{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.zone{background:var(--zinc-50); border:1px solid var(--zinc-200); border-radius:var(--r-2xl); padding:1.75rem; display:grid; gap:1rem; align-content:start}
.zone h3{font-size:1.3rem}
.zone .sub{font-size:.97rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0}
.chips li{background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-full); padding:.35rem .8rem; font-size:.9rem}
.chips li.hq{background:var(--zinc-900); color:#fff; border-color:var(--zinc-900)}
.map{background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-3xl); padding:1.25rem}
.map svg{width:100%; height:auto}
.map-caption{font-size:.85rem; color:var(--text-2); padding-top:.75rem}
.map-labels{fill:var(--zinc-700)}
@media (max-width:820px){.zones{grid-template-columns:1fr}}

/* Gallery */
.filters{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-bottom:2rem}
.filters button{font:inherit; font-size:.9rem; font-weight:500; background:#fff; border:1px solid var(--zinc-200); color:var(--zinc-700); border-radius:var(--r-full); padding:.5rem 1rem; cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--zinc-900); color:#fff; border-color:var(--zinc-900)}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.gallery figure{margin:0; display:grid; gap:.7rem}
.gallery figure[hidden]{display:none}
.gallery .media{border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:4/3; background:var(--zinc-100); border:1px solid var(--zinc-200)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{display:grid; gap:.1rem; padding-inline:.25rem}
.gallery figcaption strong{font-weight:500}
.gallery figcaption span{color:var(--text-2); font-size:.9rem}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}

/* About */
.split{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.split .media{border-radius:var(--r-3xl); overflow:hidden; aspect-ratio:4/3; background:var(--zinc-100); border:1px solid var(--zinc-200)}
.split .media img{width:100%; height:100%; object-fit:cover}
.split.flip .media{order:2}
.split p + p{margin-top:1rem}
.split .body{color:var(--zinc-700); line-height:1.55}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:1.6rem} .split.flip .media{order:0}}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.stat{border-top:1px solid var(--zinc-200); padding-top:1.25rem; display:grid; gap:.3rem}
.stat strong{font-size:2.2rem; font-weight:500; letter-spacing:-.03em}
.stat span{color:var(--text-2); font-size:.95rem}
@media (max-width:640px){.stats{grid-template-columns:1fr}}

/* Contact */
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:start}
.contact .info{display:grid; gap:1.5rem}
.contact .row{display:flex; gap:1rem; align-items:flex-start}
.contact .row .ico{width:2.5rem; height:2.5rem; border-radius:var(--r-md); background:var(--zinc-900); display:grid; place-items:center; color:var(--accent); flex:none}
.contact .row .ico svg{width:20px;height:20px}
.contact .row strong{display:block; font-weight:500}
.contact .row a{text-decoration:none; color:var(--zinc-700)}
.contact .row a:hover{color:var(--accent)}
.contact .row span{color:var(--text-2); font-size:.95rem}
.form{background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-3xl); padding:2rem; display:grid; gap:1rem; box-shadow:0 .5rem 3rem rgba(0,0,0,.06)}
.form h3{font-size:1.4rem}
.form .grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{display:grid; gap:.4rem}
.field label{font-size:.85rem; font-weight:500; color:var(--zinc-700)}
.field input,.field select,.field textarea{font:inherit; padding:.85rem 1rem; border:1px solid var(--zinc-200); border-radius:var(--r-lg); background:var(--zinc-50); color:var(--zinc-900); width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--zinc-900); background:#fff}
.form .fine{font-size:.8rem; color:var(--text-2)}
.form-success{background:var(--accent-50); border:1px solid var(--accent-100); color:var(--zinc-800); border-radius:var(--r-xl); padding:1rem 1.2rem}
@media (max-width:900px){.contact{grid-template-columns:1fr} .form .grid{grid-template-columns:1fr}}

/* CTA */
.cta{padding-block:0 4rem}
.cta .panel{background:var(--zinc-900); color:#fff; border-radius:var(--r-4xl); padding:clamp(2.5rem,6vw,5rem); display:grid; gap:1.5rem; justify-items:center; text-align:center; position:relative; overflow:hidden}
.cta .panel::before{content:""; position:absolute; inset:auto -20% -60% -20%; height:70%; background:radial-gradient(closest-side, rgba(200,16,46,.55), transparent)}
.cta .panel > *{position:relative}
.cta h2{max-width:18ch}
.cta .sub{color:rgba(255,255,255,.7)}
.cta .actions{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center}
@media (max-width:760px){.cta{padding-bottom:4rem} .cta .panel{border-radius:var(--r-3xl)}}

/* Footer: logo black */
.footer{background:var(--black); color:rgba(255,255,255,.6); padding-block:3rem 1.5rem; font-size:.92rem}
.footer .top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem}
.footer h4{font-size:.8rem; font-weight:500; color:#fff; margin:0 0 .9rem; text-transform:uppercase; letter-spacing:.08em}
.footer h4::before{content:""; display:inline-block; width:14px; height:2px; background:var(--accent); margin-right:.5rem; vertical-align:middle}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.footer a{text-decoration:none; color:rgba(255,255,255,.7)}
.footer a:hover{color:#fff}
.footer .brand svg{height:52px; width:auto}
.footer .brand svg .ink{fill:#fff} .footer .brand svg .ink-stroke{stroke:#fff}
.footer .brand p{margin-top:1rem; max-width:34ch; line-height:1.5}
.footer .bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:1.25rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.85rem}
@media (max-width:900px){.footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer .top{grid-template-columns:1fr}}

/* Mobile call bar */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:flex; position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:55; gap:.5rem; background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border:1px solid var(--zinc-200); border-radius:var(--r-full); padding:.4rem; box-shadow:0 .5rem 3rem rgba(0,0,0,.12)}
  .callbar .btn{flex:1}
  body{padding-bottom:5.5rem}
}

/* Reveal */
.reveal{transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal:not(.in){transform:translateY(22px)}
@media (prefers-reduced-motion: reduce){*{transition:none!important; scroll-behavior:auto!important} .js .reveal:not(.in){transform:none}}
@media (min-width:821px){
  .svc:last-child:nth-child(odd){grid-column:1/-1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:none}
  .svc:last-child:nth-child(odd) .media{aspect-ratio:auto; height:100%; min-height:320px; border-bottom:none; border-right:1px solid var(--zinc-200)}
  .svc:last-child:nth-child(odd) .body{align-content:center; padding:2.25rem}
}

/* Hero with inline quote form */
.hero .hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:3rem; align-items:center; padding-block:calc(var(--nav-h) + 2rem) 3rem}
.hero-copy{display:grid; gap:1.1rem; min-width:0}
.hero-form{color:var(--zinc-900); padding:1.6rem; gap:.8rem; scroll-margin-top:calc(var(--nav-h) + 1rem)}
.hero-form h3{font-size:1.3rem}
.hero-form .btn{width:100%}
.hero-form .fine{font-size:.78rem}
@media (max-width:900px){.hero .hero-grid{grid-template-columns:minmax(0,1fr); gap:2rem; padding-top:calc(var(--nav-h) + 1.5rem)} .hero{min-height:0}}
#quote{scroll-margin-top:calc(var(--nav-h) + 1rem)}

/* Generic tick list (areas page) */
.checklist{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.8rem}
.checklist li{display:flex; gap:.7rem; align-items:flex-start; color:var(--zinc-700); line-height:1.5}
.checklist li svg{width:20px; height:20px; flex:none; color:var(--accent); margin-top:.2rem}

/* Work-type slides: main photo plus placeholder thumbs */
.media-col{display:grid; gap:.75rem; min-width:0}
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
.thumb{aspect-ratio:4/3; border:1.5px dashed var(--zinc-300); border-radius:var(--r-xl); background:var(--zinc-50); display:grid; place-items:center; color:var(--zinc-400); font-size:.8rem; font-weight:500}
.thumb::before{content:"+"; display:block; font-size:1.4rem; line-height:1; margin-bottom:.15rem; color:var(--zinc-300)}
@media (max-width:900px){.tabpanel .media-col{order:-1}}

/* Live coverage map (Leaflet) */
.map-live{padding:.6rem .6rem 1rem}
#service-map{width:100%; aspect-ratio:4/3; min-height:360px; border-radius:var(--r-2xl); overflow:hidden; background:var(--zinc-100); z-index:0}
.map-live .map-caption{padding:.75rem .5rem 0}
.leaflet-container{font-family:var(--font)}
.map-label{background:var(--zinc-900); color:#fff; border:0; border-radius:var(--r-full); padding:.3rem .7rem; font-weight:500; font-size:.8rem; box-shadow:none}
.map-label::before{border-top-color:var(--zinc-900) !important}
.leaflet-control-attribution{font-size:.65rem}
.map-label-wrap{background:none; border:0}
.map-label-wrap .map-label{position:absolute; left:0; top:0; transform:translate(-50%,-100%); white-space:nowrap; display:inline-block}
.map-live svg{width:auto; height:auto; max-width:none}
.map-live img{max-width:none}

/* Services: button list + carousel stage */
.svc-layout{display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,2.1fr); gap:2rem; align-items:start}
.svc-list{display:grid; gap:.4rem; position:sticky; top:calc(var(--nav-h) + 1rem)}
.svc-list button{font:inherit; text-align:left; display:flex; align-items:center; gap:.9rem; width:100%; padding:1rem 1.1rem; background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-xl); color:var(--zinc-700); font-weight:500; font-size:1rem; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.svc-list button .n{font-size:.75rem; color:var(--zinc-400); font-variant-numeric:tabular-nums; width:1.6rem}
.svc-list button svg{width:18px; height:18px; margin-left:auto; color:var(--accent); opacity:0; transition:opacity .2s}
.svc-list button:hover{border-color:var(--zinc-400); color:var(--zinc-900)}
.svc-list button[aria-selected="true"]{background:var(--zinc-900); border-color:var(--zinc-900); color:#fff}
.svc-list button[aria-selected="true"] .n{color:var(--accent)}
.svc-list button[aria-selected="true"] svg{opacity:1}
.svc-stage{min-width:0}
.svc-panel{display:grid; gap:1.5rem; background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-3xl); padding:1rem; scroll-margin-top:calc(var(--nav-h) + 1rem)}
.svc-panel[hidden]{display:none}
.svc-copy{padding:.25rem 1rem 1.25rem}
.svc-copy h2{font-size:clamp(1.7rem,3vw,2.4rem); scroll-margin-top:calc(var(--nav-h) + 1rem)}
.svc-copy .sub{margin-top:.8rem}
.svc-copy .checklist{margin-top:1.2rem}
.svc-copy .actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem}

.carousel{position:relative; border-radius:var(--r-2xl); overflow:hidden; background:var(--zinc-100)}
.carousel .track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 100%; scroll-snap-align:start; aspect-ratio:16/9}
.carousel .slide img{width:100%; height:100%; object-fit:cover}
.carousel .slide.ph{display:grid; place-items:center; color:var(--zinc-400); font-weight:500; background:repeating-linear-gradient(45deg, var(--zinc-100) 0 12px, var(--zinc-50) 12px 24px); border:1.5px dashed var(--zinc-300); border-radius:var(--r-2xl)}
.carousel .slide.ph::before{content:"+"; font-size:2rem; line-height:1; color:var(--zinc-300); margin-right:.5rem}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); width:2.5rem; height:2.5rem; border-radius:var(--r-full); border:1px solid var(--zinc-200); background:rgba(255,255,255,.92); color:var(--zinc-900); cursor:pointer; font-size:1rem; display:grid; place-items:center; box-shadow:0 .25rem 1rem rgba(0,0,0,.12)}
.car-btn:hover{background:#fff}
.car-btn.prev{left:.75rem} .car-btn.next{right:.75rem}
.carousel .dots{position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%); display:flex; gap:.35rem}
.carousel .dots span{width:.5rem; height:.5rem; border-radius:50%; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.15)}
.carousel .dots span.on{background:var(--accent); border-color:var(--accent)}

@media (max-width:900px){
  .svc-layout{grid-template-columns:1fr; gap:1rem}
  .svc-list{position:sticky; top:calc(var(--nav-h) + .5rem); z-index:5; display:flex; gap:.4rem; overflow-x:auto; scroll-snap-type:x proximity; padding:.5rem 0; margin-inline:-1.25rem; padding-inline:1.25rem; background:linear-gradient(var(--bg) 85%, transparent); scrollbar-width:none}
  .svc-list::-webkit-scrollbar{display:none}
  .svc-list button{width:auto; flex:0 0 auto; scroll-snap-align:center; padding:.65rem 1rem; border-radius:var(--r-full); font-size:.92rem; gap:.5rem}
  .svc-list button .n{display:none}
  .svc-list button svg{display:none}
  .svc-panel{padding:.6rem}
  .svc-copy{padding:.25rem .5rem 1rem}
}

/* Areas page */
.area-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr); gap:1.5rem; align-items:stretch}
.area-grid .map{margin:0}
.area-grid #service-map{aspect-ratio:auto; height:100%; min-height:420px}
.area-grid .map-live{display:grid; grid-template-rows:1fr auto}
.area-side{display:grid; gap:1rem; align-content:start}
.stats-col{display:grid; gap:1rem; background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-3xl); padding:1.5rem}
.stats-col .stat{border-top:0; padding-top:0; border-bottom:1px solid var(--zinc-200); padding-bottom:1rem}
.stats-col .stat:last-child{border-bottom:0; padding-bottom:0}
.stats-col .stat strong{font-size:2rem}
.postcode{background:var(--zinc-900); color:#fff; border-radius:var(--r-3xl); padding:1.5rem; display:grid; gap:.7rem}
.postcode label{font-weight:500}
.postcode .row{display:flex; gap:.5rem}
.postcode input{flex:1; min-width:0; font:inherit; padding:.85rem 1rem; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff}
.postcode input::placeholder{color:rgba(255,255,255,.45)}
.postcode input:focus{outline:none; border-color:#fff}
.pc-result{font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.8); padding-top:.2rem}
.pc-result.ok{color:#fff}
.pc-result.ok::before{content:"✓ "; color:#7ed39a}
.zone-photo{padding:0; overflow:hidden; background:#fff}
.zone-photo .media{aspect-ratio:16/9; background:var(--zinc-100)}
.zone-photo .media img{width:100%; height:100%; object-fit:cover}
.zone-body{padding:1.5rem 1.75rem 1.75rem; display:grid; gap:1rem}
.know-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.know{display:grid; gap:.8rem; background:#fff; border:1px solid var(--zinc-200); border-radius:var(--r-2xl); overflow:hidden; padding-bottom:1.5rem}
.know .media{aspect-ratio:3/2; background:var(--zinc-100)}
.know .media img{width:100%; height:100%; object-fit:cover}
.know h3{padding-inline:1.5rem; font-size:1.2rem}
.know p{padding-inline:1.5rem; color:var(--text-2); font-size:.97rem; line-height:1.5}
@media (max-width:900px){.area-grid{grid-template-columns:minmax(0,1fr)} .area-side{min-width:0} .postcode input{width:1px} .area-grid #service-map{min-height:320px; aspect-ratio:4/3; height:auto} .know-grid{grid-template-columns:1fr}}

/* Contact: left column fills the form height */
.contact{align-items:stretch}
.contact .info{background:var(--zinc-50); border:1px solid var(--zinc-200); border-radius:var(--r-3xl); padding:1.75rem; display:grid; grid-template-rows:repeat(5,auto) 1fr; gap:1.25rem}
.contact .info .notice{background:#fff}
.info-photo{position:relative; border-radius:var(--r-2xl); overflow:hidden; min-height:160px; background:var(--zinc-100)}
.info-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.info-photo .cap{position:absolute; left:.75rem; bottom:.75rem; background:rgba(17,17,17,.85); color:#fff; font-size:.8rem; font-weight:500; padding:.35rem .7rem; border-radius:var(--r-full)}
@media (max-width:900px){.contact .info{grid-template-rows:none} .info-photo{aspect-ratio:16/9; min-height:0}}