
:root{--ink:#0A0A0A;--ink-2:#101010;--panel:#16160F;--panel-2:#1C1C14;--line:#2E2E2A;--line-2:#3E3E38;
--white:#FFF;--body:#D2D4D6;--dim:#A7AA9C;--muted:#8A8D80;
--accent:#AEF11F;--accent-dk:#95D40F;--accent-hi:#D6FF7C;--accent-deep:#6F9E0A;
--glow:rgba(174,241,31,.30);--glow-soft:rgba(174,241,31,.13);
--ease:cubic-bezier(.22,.68,.16,1);--ease-out:cubic-bezier(.16,1,.3,1);--maxw:1240px}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--body);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em}p:last-child{margin-bottom:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
@media(max-width:600px){.wrap{padding-inline:18px}}
.display{font-family:"Anton","Archivo Black",Impact,system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.004em;line-height:.94;text-wrap:balance}
.label{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:.815rem}
.mini{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:.7rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ink);padding:12px 18px;z-index:200;
font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* header */
.topline{height:3px;background:var(--accent)}
.util{background:var(--ink);border-bottom:1px solid #1B1B19}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:11px}
.util span{color:var(--muted)}.util .geo{color:var(--accent);opacity:.8}
@media(max-width:900px){.util{display:none}}
.head{background:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.head-in{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);padding-block:9px}
.brand{flex:none;display:block}.brand img{height:104px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.nav>a,.drop>a{color:var(--dim);font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.1em;font-size:.76rem;padding-block:10px;border-bottom:2px solid transparent;white-space:nowrap;display:block;transition:color .15s,border-color .15s}
.nav>a:hover,.drop>a:hover,.nav>a.on,.drop>a.on{color:var(--white);border-bottom-color:var(--accent)}
.drop{position:relative}
.dropmenu{position:absolute;top:100%;left:-18px;min-width:250px;background:var(--ink-2);border:1px solid var(--line);
list-style:none;margin:0;padding:8px 0;display:none;z-index:70}
.drop:hover .dropmenu,.drop:focus-within .dropmenu{display:block}
.dropmenu a{display:block;padding:10px 20px;color:var(--dim);font-size:.9rem}
.dropmenu a:hover{color:var(--accent);background:var(--panel)}
.head-tel{flex:none;display:flex;flex-direction:column;gap:2px;padding-left:clamp(12px,1.6vw,22px);border-left:1px solid var(--line)}
.head-tel .k{color:var(--muted);font-size:.6rem;letter-spacing:.17em}
.head-tel .v{color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:800;font-size:1.06rem;white-space:nowrap}
.head-tel:hover .v{color:var(--white)}
.head .cta{flex:none;background:var(--accent);color:var(--ink);padding:14px 20px;font-family:"IBM Plex Sans",sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;white-space:nowrap;transition:background .15s}
.head .cta:hover{background:var(--accent-dk)}
.burger{display:none;margin-left:auto;align-items:center;gap:11px;background:transparent;border:1px solid var(--line-2);
color:var(--white);cursor:pointer;padding:12px 16px;font-family:"IBM Plex Sans",sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:.12em;font-size:.74rem}
.burger:hover{border-color:var(--accent);color:var(--accent)}
.burger i{display:flex;flex-direction:column;gap:4px;width:18px}
.burger i b{display:block;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] i b:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] i b:nth-child(2){opacity:0}
.burger[aria-expanded=true] i b:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none;background:var(--ink-2);border-top:1px solid var(--line);max-height:74vh;overflow-y:auto}
.drawer.open{display:block}
.drawer nav{display:flex;flex-direction:column}
.drawer a{padding:14px 0;border-bottom:1px solid #1B1B19;color:var(--white);font-family:"IBM Plex Sans",sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
.drawer a.hot{color:var(--accent)}
@media(max-width:1180px){.nav,.head-tel,.head .cta{display:none}.burger{display:flex}}
@media(max-width:600px){.brand img{height:74px}}
/* hero */
.hero{position:relative;overflow:hidden;min-height:clamp(520px,74vh,720px);display:flex;align-items:center;
background:#0A0A0A url(/img/hero-plain.webp) 50% 46%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,.26) 26%,rgba(10,10,10,.45) 72%,rgba(10,10,10,.9)),
linear-gradient(90deg,rgba(10,10,10,.95),rgba(10,10,10,.86) 34%,rgba(10,10,10,.5) 66%,rgba(10,10,10,.3))}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(52px,8vw,96px)}
.hero-copy{max-width:44rem}
.eyebrow{display:flex;align-items:center;gap:16px;color:var(--accent);margin-bottom:clamp(14px,2.2vw,24px)}
.eyebrow::before{content:"";height:2px;width:clamp(26px,3.4vw,46px);background:var(--accent);flex:none}
h1{margin:0 0 clamp(16px,2.4vw,26px);color:var(--white);font-size:clamp(2.3rem,5.9vw,4.8rem)}
h1 .hl{color:var(--accent)}
.hero-sub{margin:0 0 clamp(26px,3.6vw,38px);color:var(--body);font-size:clamp(1.04rem,1.4vw,1.18rem);max-width:38rem}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:.95rem;
padding:18px 30px;border:2px solid transparent;display:inline-flex;align-items:center;gap:12px;cursor:pointer;
transition:background .16s,color .16s,border-color .16s}
.btn-sm{padding:14px 22px;font-size:.84rem;align-self:flex-start}
.btn-solid{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-solid:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-ghost{background:rgba(10,10,10,.5);border-color:#4A4A46;color:var(--white)}
.btn-ghost:hover{background:rgba(10,10,10,.85);border-color:var(--accent);color:var(--accent)}
.btn svg{width:17px;height:17px;flex:none}
@media(max-width:760px){.hero{background-position:64% 48%;min-height:0}
.hero::after{background:linear-gradient(180deg,rgba(10,10,10,.7),rgba(10,10,10,.5) 24%,rgba(10,10,10,.82) 62%,rgba(10,10,10,.97))}
.actions .btn{flex:1 1 100%;justify-content:center}}
/* page heroes */
.phero,.gphero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.phero-bg,.gphero-bg{position:absolute;inset:0;z-index:-2}
.phero-bg img,.gphero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.phero::before,.gphero::before{content:"";position:absolute;inset:0;z-index:-1;background:
linear-gradient(180deg,rgba(10,10,10,.72),rgba(10,10,10,.8) 60%,rgba(10,10,10,.95)),
linear-gradient(90deg,rgba(10,10,10,.94),rgba(10,10,10,.72) 60%,rgba(10,10,10,.5))}
.phero-in,.gphero-in{padding-block:clamp(46px,6.5vw,84px);max-width:52rem}
.gphero h1{font-size:clamp(1.85rem,4.1vw,3.25rem);max-width:20ch}
.phero h1{font-size:clamp(2rem,4.6vw,3.6rem)}
.phero-sub{color:var(--body);font-size:clamp(1.03rem,1.4vw,1.16rem);max-width:40rem;margin:18px 0 28px}
/* sections */
.sec{padding-block:clamp(52px,6.6vw,92px)}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:20px 48px;align-items:end;padding-bottom:clamp(26px,3.2vw,40px);
border-bottom:1px solid var(--line);margin-bottom:clamp(30px,3.8vw,48px)}
.sec-kick{display:flex;align-items:center;gap:14px;color:var(--accent);margin-bottom:15px}
.sec-kick::before{content:"";height:2px;width:30px;background:var(--accent);flex:none}
h2{margin:0;color:var(--white);font-size:clamp(1.85rem,3.9vw,3rem)}
.subhead{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sec-note{color:var(--dim);max-width:34ch;font-size:.98rem;padding-bottom:6px}
.lede{color:var(--dim);max-width:58ch}
@media(max-width:860px){.sec-head{grid-template-columns:1fr}.sec-note{max-width:52ch}}
/* facts */
.facts{background:var(--panel);border-bottom:1px solid var(--line)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:24px clamp(14px,2vw,28px);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.fact:first-child{border-left:0;padding-left:0}
.fact b{color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem}
.fact span{color:var(--white);font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:1rem;line-height:1.3}
@media(max-width:900px){.facts-in{grid-template-columns:1fr 1fr}.fact{border-top:1px solid var(--line);padding-left:clamp(14px,2vw,28px)}
.fact:nth-child(-n+2){border-top:0}.fact:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:520px){.facts-in{grid-template-columns:1fr}.fact{border-left:0;padding-left:0}.fact:nth-child(2){border-top:1px solid var(--line)}}
/* feature + service grid */
.feature{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);margin-bottom:clamp(28px,3.4vw,44px)}
.feature-photo{position:relative;overflow:hidden;min-height:340px;background:var(--panel)}
.feature-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tagpin{position:absolute;left:0;bottom:0;z-index:2;background:var(--accent);color:var(--ink);padding:9px 16px}
.feature-body{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;justify-content:center;gap:15px;background:var(--panel)}
.feature-body h3{margin:0;color:var(--white);font-size:clamp(1.55rem,2.8vw,2.25rem)}
.speclist{list-style:none;margin:4px 0 6px;padding:0;border-top:1px solid var(--line-2)}
.speclist li{padding:12px 0 12px 24px;border-bottom:1px solid var(--line-2);position:relative;color:var(--dim);font-size:.94rem}
.speclist li::before{content:"";position:absolute;left:0;top:21px;width:12px;height:2px;background:var(--accent)}
@media(max-width:900px){.feature{grid-template-columns:1fr}.feature-photo{min-height:0;aspect-ratio:16/10}}
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:var(--ink)}
.svc>a{display:flex;flex-direction:column;height:100%;padding-bottom:26px}
.svc-img{aspect-ratio:16/10;overflow:hidden;background:var(--panel);margin-bottom:20px}
.svc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.92);transition:transform .55s,filter .3s}
.svc:hover .svc-img img{transform:scale(1.05);filter:none}
.svc h3{margin:0 clamp(18px,2vw,26px) 10px;color:var(--white);font-size:1.22rem;transition:color .15s}
.svc:hover h3{color:var(--accent)}
.svc p{margin:0 clamp(18px,2vw,26px);color:var(--dim);font-size:.94rem;line-height:1.6}
.svc .more{margin:14px clamp(18px,2vw,26px) 0;color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}
@media(max-width:980px){.svcgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svcgrid{grid-template-columns:1fr}}
.alsolist{margin-top:30px;color:var(--muted);font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.12em;font-size:.72rem;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.inlinelist{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.inlinelist a{border:1px solid var(--line-2);padding:8px 13px;color:var(--dim);font-size:.72rem;display:block}
.inlinelist a:hover{border-color:var(--accent);color:var(--accent)}
/* band / trio / equipment / gallery */
.band{position:relative;isolation:isolate;border-block:1px solid var(--line)}
.band-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) contrast(1.04)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.95),rgba(10,10,10,.88) 42%,rgba(10,10,10,.97))}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.trio>div{display:flex;flex-direction:column;gap:11px;padding-top:22px;border-top:2px solid var(--accent)}
.trio h3{margin:0;color:var(--white);font-size:1.14rem}
.trio p{color:var(--dim);font-size:.95rem}
@media(max-width:840px){.trio{grid-template-columns:1fr}}
.eq{display:grid;grid-template-columns:.92fr 1.08fr;border:1px solid var(--line)}
.eq-photo{position:relative;overflow:hidden;background:var(--panel);min-height:420px}
.eq-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eq-list{background:var(--panel);padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;justify-content:center}
.eq-row{border-top:1px solid var(--line-2);padding:20px 0;display:grid;grid-template-columns:1fr auto;gap:5px 18px;align-items:baseline}
.eq-row:first-child{border-top:0;padding-top:0}.eq-row:last-child{padding-bottom:0}
.eq-row b{font-family:"IBM Plex Sans",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.12rem;color:var(--white)}
.eq-row em{font-style:normal;color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.65rem}
.eq-row small{grid-column:1/-1;color:var(--dim);font-size:.93rem;line-height:1.55}
@media(max-width:900px){.eq{grid-template-columns:1fr}.eq-photo{min-height:0;aspect-ratio:16/10}}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.gal figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--panel)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal figure:hover img{transform:scale(1.06)}
@media(max-width:900px){.gal{grid-template-columns:1fr 1fr}.gal figure{aspect-ratio:4/3}}
/* counties / chips / link cards */
.counties{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cty{background:var(--ink);padding:22px clamp(15px,1.7vw,22px);display:flex;flex-direction:column;gap:8px;transition:background .18s}
.cty:hover{background:var(--panel)}
.cty b{font-family:"IBM Plex Sans",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.14rem;color:var(--white)}
.cty:hover b{color:var(--accent)}
.cty span{color:var(--dim);font-size:.88rem;line-height:1.5}
@media(max-width:1000px){.counties{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.counties{grid-template-columns:1fr}}
.afterlist{margin-top:26px}
.textlink{color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.townchips,.ctychips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.townchips a,.ctychips a{border:1px solid var(--line-2);padding:10px 15px;color:var(--dim);
font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem}
.townchips a:hover,.ctychips a:hover{border-color:var(--accent);color:var(--accent)}
.linkcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.linkcards a{display:flex;flex-direction:column;gap:8px;background:var(--ink);padding:22px 20px;height:100%;transition:background .18s}
.linkcards a:hover{background:var(--panel)}
.linkcards b{font-family:"IBM Plex Sans",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.04rem;color:var(--white)}
.linkcards a:hover b{color:var(--accent)}
.linkcards span{color:var(--dim);font-size:.88rem;line-height:1.5}
.linkcards img{aspect-ratio:16/10;object-fit:cover;margin:-22px -20px 6px;width:calc(100% + 40px);max-width:none}
@media(max-width:1000px){.linkcards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.linkcards{grid-template-columns:1fr}}
.svcindex{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svcindex a{display:block;background:var(--ink);padding-bottom:24px;height:100%}
.svcindex img{aspect-ratio:16/10;object-fit:cover;width:100%;filter:saturate(.86) brightness(.92);transition:filter .3s}
.svcindex a:hover img{filter:none}
.svcindex h3{margin:18px 22px 9px;color:var(--white);font-size:1.16rem}
.svcindex a:hover h3{color:var(--accent)}
.svcindex p{margin:0 22px;color:var(--dim);font-size:.92rem}
@media(max-width:980px){.svcindex{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svcindex{grid-template-columns:1fr}}
.areagrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.areacol{background:var(--ink);padding:clamp(22px,2.4vw,34px)}
.areacol h2{font-size:1.5rem;margin-bottom:12px}
.areacol h2 a:hover{color:var(--accent)}
.areacol p{color:var(--dim);font-size:.94rem}
@media(max-width:820px){.areagrid{grid-template-columns:1fr}}
.areastrip{background:var(--panel);border-block:1px solid var(--line)}
/* prose */
.prose{max-width:74ch}.prose.narrow{max-width:66ch}
.prose .blk{margin-bottom:clamp(30px,3.4vw,48px)}
.prose h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:22px}
.prose h2{font-size:clamp(1.35rem,2.5vw,1.85rem);margin:0 0 14px;padding-top:6px}
.prose p{color:var(--body);font-size:1.03rem}
.prose a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:not(.btn):hover{color:var(--white)}
.upd{color:var(--muted);font-size:.86rem;margin-bottom:28px}
.fineprint{color:var(--muted);font-size:.85rem;line-height:1.55}
.tablewrap{overflow-x:auto;border:1px solid var(--line);margin:20px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}
caption{text-align:left;padding:14px 16px;color:var(--muted);font-size:.8rem;border-bottom:1px solid var(--line)}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
th{background:var(--panel);color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
td{color:var(--body)}tbody tr:last-child td{border-bottom:0}
td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--white)}
/* faq */
.faq{border-bottom:1px solid var(--line)}
.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;color:var(--white);
font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:1.04rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:13px;height:2px;background:var(--accent);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:10px;top:50%;width:13px;height:2px;background:var(--accent);
transform:translateY(-50%) rotate(90deg);transition:transform .2s}
.faq[open] summary::before{transform:translateY(-50%) rotate(0)}
.faq summary:hover{color:var(--accent)}
.faq-a{padding:0 44px 22px 0;color:var(--dim);font-size:.98rem;max-width:74ch}
.faq-a a{color:var(--accent)}
/* crumbs */
.crumbs{border-bottom:1px solid var(--line);background:var(--ink-2);font-size:.8rem;color:var(--muted)}
.crumbs .wrap{padding-block:12px}
.crumbs a{color:var(--dim)}.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--accent)}
/* cta band */
.ctaband{background:var(--accent);color:var(--ink)}
.ctaband-in{display:flex;gap:clamp(24px,4vw,60px);align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:clamp(38px,4.6vw,60px)}
.ctaband h2{color:var(--ink);font-size:clamp(1.6rem,3.2vw,2.5rem)}
.ctaband p{color:#1D2409;max-width:46ch;margin-top:12px;margin-bottom:0;font-weight:500}
.ctaband .sec-kick{color:#1D2409}.ctaband .sec-kick::before{background:#1D2409}
.ctaband-act{display:flex;gap:12px;flex-wrap:wrap}
.ctaband .btn-solid{background:var(--ink);border-color:var(--ink);color:var(--accent)}
.ctaband .btn-solid:hover{background:#000;border-color:#000}
.ctaband .btn-ghost{background:transparent;border-color:rgba(10,10,10,.45);color:var(--ink)}
.ctaband .btn-ghost:hover{background:rgba(10,10,10,.08);border-color:var(--ink);color:var(--ink)}
/* quote form */
.quote{background:var(--panel)}
.q-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.6vw,68px);align-items:start}
.q-side h1{margin-bottom:16px}
.q-side>p{color:var(--body);font-size:1.05rem;margin-bottom:24px;max-width:34ch}
.q-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.q-list li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line-2);position:relative;color:var(--dim);font-size:.95rem}
.q-list li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:2px;background:var(--accent)}
.q-tel{margin-top:24px;display:inline-flex;flex-direction:column;gap:3px}
.q-tel .k{color:var(--muted);font-size:.63rem;letter-spacing:.17em}
.q-tel .v{color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:800;font-size:1.55rem}
.q-tel:hover .v{color:var(--white)}
.q-alt{margin-top:16px;color:var(--dim);font-size:.92rem}
.q-alt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.q-alt.small{font-size:.85rem;color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:var(--ink);border:1px solid var(--line);padding:clamp(22px,2.6vw,36px);align-content:start}
.f-full{grid-column:1/-1}
label{display:block;margin-bottom:8px;font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.13em;font-size:.67rem;color:var(--muted)}
input,select,textarea{width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--white);
font-family:"Figtree",sans-serif;font-size:1rem;padding:14px 15px;transition:border-color .15s,background .15s}
input::placeholder,textarea::placeholder{color:#72756A}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
textarea{resize:vertical;min-height:112px;font-family:"Figtree",sans-serif}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--panel-2)}
input.bad,select.bad{border-color:#CC5A1E}
.submit{grid-column:1/-1;background:var(--accent);color:var(--ink);border:2px solid var(--accent);cursor:pointer;
font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:1rem;padding:19px;transition:background .15s}
.submit:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.f-note{grid-column:1/-1;color:var(--muted);font-size:.84rem;line-height:1.5}
.sent{grid-column:1/-1;border:2px solid var(--accent);padding:24px;display:none}
.sent b{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.28rem;color:var(--accent);margin-bottom:9px}
form.done>*:not(.sent){display:none}form.done .sent{display:block}
@media(max-width:900px){.q-grid{grid-template-columns:1fr}}
@media(max-width:560px){form{grid-template-columns:1fr}}
/* footer */
footer{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(44px,5.6vw,68px) 28px}
.f-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(26px,3.6vw,56px);padding-bottom:clamp(28px,3.6vw,42px);border-bottom:1px solid var(--line)}
.f-logo{height:128px;width:auto;margin-bottom:18px}
.f-col h2{margin:0 0 15px;color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.69rem}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.f-col a,.f-col li{color:var(--dim);font-size:.93rem}
.f-col a:hover{color:var(--accent)}
.f-blurb{color:var(--dim);font-size:.95rem;max-width:40ch}
.f-tel{display:inline-flex;flex-direction:column;gap:3px;margin-top:16px}
.f-tel .k{color:var(--muted);font-size:.61rem;letter-spacing:.17em}
.f-tel .v{color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-weight:800;font-size:1.38rem}
.f-tel:hover .v{color:var(--white)}
.f-soc{margin-top:14px}.f-soc a{color:var(--dim);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.f-soc a:hover{color:var(--accent)}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:#63665D;font-size:.81rem}
.f-legal a:hover{color:var(--accent)}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}.f-col:first-child{grid-column:1/-1}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
/* dock + cookie */
.dock{display:none}
@media(max-width:760px){body{padding-bottom:62px}
.dock{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;border-top:1px solid var(--line-2)}
.dock a{padding:19px 8px;text-align:center;font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.84rem}
.dock .a{background:var(--accent);color:var(--ink)}
.dock .b{background:var(--ink);color:var(--white);border-left:1px solid var(--line-2)}}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink-2);border-top:2px solid var(--accent);
padding:18px 24px;display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.cookie[hidden]{display:none!important}
.cookie p{margin:0;color:var(--dim);font-size:.88rem;max-width:62ch}
.cookie a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cookie-btn{display:flex;gap:10px;flex-wrap:wrap}
.cookie button{cursor:pointer;border:2px solid var(--accent);padding:11px 20px;font-family:"IBM Plex Sans",sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem}
.ck-a{background:var(--accent);color:var(--ink)}.ck-a:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.ck-b{background:transparent;color:var(--white);border-color:var(--line-2)}.ck-b:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:760px){.cookie{bottom:62px;padding:15px 18px}}

/* ==========================================================================
   MOTION + FINISH LAYER
   Everything below is additive. With JS off, or with reduced motion asked
   for, the page renders exactly as it did before — complete and static.
   ========================================================================== */

/* ---- scroll reveal ---- */
.anim .rv{opacity:0;transform:translateY(18px);
  transition:opacity .42s var(--ease-out) var(--d,0ms),transform .42s var(--ease-out) var(--d,0ms)}
.anim .rv.in{opacity:1;transform:none}

/* ---- header: condenses and lifts off the page on scroll ---- */
.head{transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.head.scrolled{background:rgba(10,10,10,.86);-webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);box-shadow:0 16px 40px -28px #000,0 1px 0 var(--glow-soft)}
.head-in{transition:padding .4s var(--ease)}
.head.scrolled .head-in{padding-block:4px}
.brand img{transition:height .4s var(--ease)}
.head.scrolled .brand img{height:78px}
@media(max-width:900px){.head.scrolled .brand img{height:66px}}
.topline{background:linear-gradient(90deg,var(--accent-deep),var(--accent) 38%,var(--accent-hi) 52%,var(--accent) 66%,var(--accent-deep));
  background-size:220% 100%;animation:sheen 9s linear infinite}
@keyframes sheen{to{background-position:-220% 0}}

/* ---- nav: underline wipes in from the left ---- */
.nav>a,.drop>a{position:relative;border-bottom-color:transparent!important}
.nav>a::after,.drop>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out)}
.nav>a:hover::after,.drop>a:hover::after,.nav>a.on::after,.drop>a.on::after,.drop.open>a::after{transform:scaleX(1)}
.nav>a:hover,.drop>a:hover,.drop.open>a{color:var(--white)}

/* ---- dropdown: driven by .open from JS, never by :focus-within ---- */
.dropmenu{display:block;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px);transform-origin:top left;
  border-top:2px solid var(--accent);
  box-shadow:0 26px 60px -30px #000,0 0 0 1px rgba(0,0,0,.4);
  transition:opacity .22s var(--ease),transform .28s var(--ease-out),visibility 0s linear .28s}
.drop.open .dropmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity .22s var(--ease),transform .28s var(--ease-out),visibility 0s}
.drop:hover .dropmenu,.drop:focus-within .dropmenu{display:block}
.dropmenu a{position:relative;padding-left:20px;transition:color .2s var(--ease),background .2s var(--ease),padding-left .25s var(--ease)}
.dropmenu a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease-out)}
.dropmenu a:hover{padding-left:26px}
.dropmenu a:hover::before{transform:scaleY(1)}

/* ---- buttons: colour wipes up from the bottom, arrow drifts ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .46s var(--ease-out)}
.btn:hover::after{transform:translateY(0)}
.btn-solid::after{background:var(--accent-hi)}
.btn-solid:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 34px -16px var(--glow)}
.btn-ghost::after{background:var(--accent)}
.btn-ghost:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
.head .cta{position:relative;overflow:hidden;isolation:isolate;transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.head .cta::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hi);
  transform:translateY(101%);transition:transform .42s var(--ease-out)}
.head .cta:hover{background:var(--accent);box-shadow:0 12px 30px -16px var(--glow)}
.head .cta:hover::after{transform:translateY(0)}

/* ---- hero: the picture washes up from black behind the headline ---- */
.anim .hero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);
  pointer-events:none;animation:heroWash .85s var(--ease-out) both}
@keyframes heroWash{from{opacity:1}to{opacity:0}}

/* ---- hero: slow push-in, then the copy rises ---- */
.hero-bg img,.phero-bg img,.band-bg img,.gphero-bg img{will-change:transform}
.anim .hero-bg img{animation:heroIn 1.2s var(--ease-out) both}
@keyframes heroIn{from{transform:scale(1.16);opacity:.4}to{transform:scale(1.12);opacity:1}}
.anim .hero-copy>*{opacity:0;animation:riseIn .55s var(--ease-out) both}
.anim .hero-copy>*:nth-child(1){animation-delay:.05s}
.anim .hero-copy>*:nth-child(2){animation-delay:.11s}
.anim .hero-copy>*:nth-child(3){animation-delay:.17s}
.anim .hero-copy>*:nth-child(4){animation-delay:.23s}
.anim .hero-copy>*:nth-child(5){animation-delay:.29s}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
h1 .hl{position:relative;text-shadow:0 0 34px var(--glow-soft)}

/* ---- section kickers draw their rule ---- */
.anim .sec-kick::before,.anim .eyebrow::before{transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out) .1s}
.anim .rv.in .sec-kick::before,.anim .sec-kick.rv.in::before,
.anim .rv.in .eyebrow::before,.anim .eyebrow.rv.in::before{transform:scaleX(1)}

/* ---- cards lift, photos breathe, an accent bar wipes across the top ---- */
.svc,.fact,.linkcards a,.cty,.feature{position:relative;
  transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
.svc::after,.linkcards a::after,.cty::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out)}
.svc:hover,.linkcards a:hover,.cty:hover{transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 26px 54px -34px #000,0 0 0 1px var(--glow-soft)}
.svc:hover::after,.linkcards a:hover::after,.cty:hover::after{transform:scaleX(1)}
.svc-img,.gal figure,.eq-photo,.feature-photo{overflow:hidden}
.svc-img img,.gal figure img,.eq-photo img,.feature-photo img{
  transition:transform .55s var(--ease-out),filter .35s var(--ease)}
.svc:hover .svc-img img,.gal figure:hover img,.eq-photo:hover img,.feature:hover .feature-photo img{transform:scale(1.06)}
.fact:hover{transform:translateY(-4px);border-color:var(--accent)}
.fact .k{transition:color .35s var(--ease)}
.fact:hover .k{color:var(--accent-hi)}

/* ---- chips and inline links ---- */
.ctychips a,.townchips a,.tagpin{transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)}
.ctychips a:hover,.townchips a:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
.textlink,.prose a:not(.btn){background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease-out),color .3s var(--ease)}
.textlink:hover,.prose a:not(.btn):hover{background-size:100% 1px;color:var(--accent)}

/* ---- FAQ ---- */
.faq details{transition:border-color .35s var(--ease),background .35s var(--ease)}
.faq details[open]{border-color:var(--accent)}
.faq summary{transition:color .25s var(--ease)}
.faq summary:hover{color:var(--accent)}
.faq-a{animation:faqIn .42s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- phone number pulses very slightly so the eye finds it ---- */
.head-tel .v{transition:color .3s var(--ease),text-shadow .3s var(--ease)}
.head-tel:hover .v{text-shadow:0 0 22px var(--glow)}

/* ---- CTA band gets a slow moving glow ---- */
.ctaband{position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;width:60vw;height:60vw;left:-10vw;top:-30vw;border-radius:50%;
  background:radial-gradient(circle,var(--glow-soft),transparent 62%);pointer-events:none}
.anim .ctaband::before{animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(24vw,12vw,0) scale(1.15)}}

/* ---- mobile drawer: panel wipes down, links cascade ---- */
.drawer{clip-path:inset(0 0 100% 0);display:block;max-height:0;
  transition:clip-path .3s var(--ease-out),max-height .3s var(--ease-out)}
.drawer.open{clip-path:inset(0 0 0 0);max-height:74vh}
.anim .drawer.open nav>*{animation:dRow .26s var(--ease-out) both}
.anim .drawer.open nav>*:nth-child(1){animation-delay:.02s}
.anim .drawer.open nav>*:nth-child(2){animation-delay:.05s}
.anim .drawer.open nav>*:nth-child(3){animation-delay:.08s}
.anim .drawer.open nav>*:nth-child(4){animation-delay:.11s}
.anim .drawer.open nav>*:nth-child(5){animation-delay:.14s}
.anim .drawer.open nav>*:nth-child(6){animation-delay:.17s}
.anim .drawer.open nav>*:nth-child(7){animation-delay:.20s}
@keyframes dRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.drawer a{transition:color .25s var(--ease),padding-left .25s var(--ease)}
.drawer a:hover,.drawer a:focus-visible{color:var(--accent);padding-left:8px}

/* touch devices never get a hover-only state stuck on */
@media(hover:none){
  .svc:hover,.linkcards a:hover,.cty:hover,.fact:hover,.btn-solid:hover{transform:none;box-shadow:none}
  .dropmenu{transition:none}
}

/* ---- reading-progress hairline across the top of the header ---- */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));pointer-events:none;
  box-shadow:0 0 14px var(--glow)}

/* ---- mobile menu: collapsible groups inside the drawer ---- */
.mgroup{border-bottom:1px solid #1B1B19}
.mgroup>summary{list-style:none;cursor:pointer;padding:14px 0;color:var(--white);
  font-family:"IBM Plex Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:color .2s var(--ease)}
.mgroup>summary::-webkit-details-marker{display:none}
.mgroup>summary::after{content:"";width:12px;height:12px;flex:none;transition:transform .26s var(--ease);
  background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat}
.mgroup[open]>summary{color:var(--accent)}
.mgroup[open]>summary::after{transform:rotate(45deg)}
.msub>div{padding-bottom:6px}
.msub a{display:block;padding:11px 0 11px 18px;border-bottom:1px solid #141412;position:relative;
  color:var(--dim);font-family:"IBM Plex Sans",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.74rem}
.msub a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:var(--accent);opacity:.5}
.msub a:last-child{border-bottom:0}
.msub a:hover,.msub a:focus-visible{color:var(--accent);padding-left:24px}
.msub a::before,.msub a{transition:color .2s var(--ease),padding-left .2s var(--ease)}
.anim .mgroup[open] .msub a{animation:dRow .26s var(--ease-out) both}
.anim .mgroup[open] .msub a:nth-child(1){animation-delay:.01s}
.anim .mgroup[open] .msub a:nth-child(2){animation-delay:.03s}
.anim .mgroup[open] .msub a:nth-child(3){animation-delay:.05s}
.anim .mgroup[open] .msub a:nth-child(4){animation-delay:.07s}
.anim .mgroup[open] .msub a:nth-child(5){animation-delay:.09s}
.anim .mgroup[open] .msub a:nth-child(n+6){animation-delay:.11s}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .prog{display:none}
  .topline{animation:none}
  .dropmenu{transition:none}
}
