/* AllPro Property Maintenance preview v4: "crew yard" system.
   Barlow Condensed (display, signage feel) + Barlow Semi Condensed (labels, nav) + Public Sans (text).
   Palette from the shield logo: near-black #121314, safety orange #FF6B12, warm job-site paper. 8px grid, hairlines. */
:root {
  --ink: #121314; --ink-2: #1b1c1e; --ink-3: #2a2c2f;
  --paper: #f4f1ea; --paper-2: #e8e3d8; --white: #ffffff;
  --text: #121314; --text-2: #45484c; --muted: #6c7075;
  --on-dark: #ecebe7; --on-dark-2: #a8aaad;
  --orange: #ff6b12; --orange-hover: #ff8236; --orange-ink: #b84a00;
  --rule: rgba(18,19,20,.14); --rule-strong: rgba(18,19,20,.34); --rule-dark: rgba(255,255,255,.14);
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --semi: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: var(--semi);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --r: 6px; --shell: 1280px; --nav-h: 80px; --util-h: 0px; --crumbs-h: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
.nowrap { white-space: nowrap; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.005em; line-height: .98; text-wrap: balance; }
h1, h2 { text-transform: uppercase; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--s5); }
.ic { width: 18px; height: 18px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: var(--s1); z-index: 200; padding: 10px 14px; background: var(--orange); color: var(--ink); font-weight: 600; }
.skip:focus { left: var(--s1); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.label { font: 600 13px/1.3 var(--semi); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); font-variant-numeric: tabular-nums; }
.label-light { color: var(--on-dark-2); }
.num { color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 var(--s3); border: 0; border-radius: var(--r); font: 700 17px/1 var(--semi); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 18px; height: 18px; transition: transform .22s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn-primary { background: var(--orange); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }
.btn-line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); color: var(--text); }
.btn-line:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--text); }
.btn:disabled { opacity: .35; cursor: default; }
.more { display: inline-flex; align-items: center; gap: var(--s1); font: 700 15px/1.2 var(--semi); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 3px; transition: color .18s ease; }
.more .ic { width: 16px; height: 16px; transition: transform .22s var(--ease); }
.more:hover { color: var(--orange-ink); }
.more:hover .ic { transform: translateX(3px); }

/* brand: shield + set wordmark */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-shield { height: 56px; width: auto; transition: height .25s var(--ease); }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font: 800 30px/.9 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.brand-txt small { margin-top: 4px; font: 700 11.5px/1 var(--semi); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.brand-txt b::first-letter { color: inherit; }

/* utility bar */
.util { background: var(--ink); color: var(--on-dark-2); font: 500 13px/1 var(--semi); letter-spacing: .04em; }
.util-row { display: flex; align-items: center; gap: var(--s4); height: var(--util-h); }
.util-hours { color: #fff; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,107,18,.6); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,107,18,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255,107,18,0); } }
.util-tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .03em; text-decoration: none; }
.util-tel .ic { width: 14px; height: 14px; color: var(--orange); }
.util-tel:hover { color: var(--orange); }

/* nav: white, sticky, shrinks on scroll */
.nav { position: sticky; top: 0; z-index: 60; background: var(--white); color: var(--text); border-bottom: 1px solid var(--rule); transition: box-shadow .25s ease; }
.nav-row { display: flex; align-items: center; gap: var(--s3); height: var(--nav-h); transition: height .25s var(--ease); }
.nav.scrolled .nav-row { height: 64px; }
.nav.scrolled { box-shadow: 0 8px 24px -20px rgba(0,0,0,.5); }
.nav.scrolled .brand-shield { height: 44px; }
.menu { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.menu-list { display: flex; align-items: center; }
.menu-list > li { position: relative; }
.dd-btn, .menu-a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--nav-h); padding: 0 14px; border: 0; background: none; color: var(--text); font: 700 16px/1 var(--semi); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .15s ease, height .25s var(--ease); }
.nav.scrolled .dd-btn, .nav.scrolled .menu-a { height: 64px; }
.dd-btn:hover, .menu-a:hover, .dd.open > .dd-btn { color: var(--orange-ink); }
.dd-btn .chev { width: 15px; height: 15px; opacity: .7; transition: transform .2s ease; }
.dd.open .chev { transform: rotate(180deg); }
.dd-btn::after, .menu-a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.dd.open > .dd-btn::after, .menu-a:hover::after, .dd-btn:hover::after { transform: scaleX(1); }
.dd-panel { position: absolute; top: 100%; left: 0; min-width: 300px; padding: var(--s1); background: var(--white); color: var(--text); border: 1px solid var(--rule); border-top: 3px solid var(--orange); border-radius: 0 0 var(--r) var(--r); box-shadow: 0 24px 40px -24px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
.dd-panel a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 4px; font: 600 16px/1.25 var(--sans); text-decoration: none; }
.dd-panel a small { font: 400 13.5px/1.3 var(--sans); color: var(--muted); }
.dd-panel a:hover { background: var(--paper); }
.dd-panel a[aria-current] { box-shadow: inset 3px 0 0 var(--orange); }
.dd-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.dd-all a { flex-direction: row; justify-content: space-between; align-items: center; font-weight: 700; }
.dd-all .ic { width: 16px; height: 16px; }
.menu-tel { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text); font: 700 18px/1 var(--semi); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.menu-tel .ic { width: 18px; height: 18px; color: var(--orange-ink); }
.menu-tel:hover span { text-decoration: underline; text-underline-offset: 4px; }
.menu-cta { min-height: 48px; padding: 0 22px; font-size: 16px; }
.nav-call-sm, .burger { display: none; }

/* breadcrumbs */
.crumbs { background: var(--paper); border-bottom: 1px solid var(--rule); }
.crumbs ol { display: flex; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; align-items: center; gap: var(--s1); height: calc(var(--crumbs-h) - 1px); padding: 0; font: 600 13px/1.3 var(--semi); letter-spacing: .06em; text-transform: uppercase; }
.crumbs li { display: inline-flex; gap: var(--s1); color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--text); text-decoration: none; }
.crumbs a:hover { color: var(--orange-ink); }

@media (max-width: 1100px) {
  .book-side, .wiz, .local-about, .local-faq { grid-column: 1 / -1; }
  .book-side { position: static; margin-bottom: var(--s5); }
  .local-faq { margin-top: var(--s8); }
  .util-area, .util-pay { display: none; }
  .nav-call-sm { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r); background: var(--orange); color: var(--ink); }
  .nav-call-sm .ic { width: 20px; height: 20px; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--rule-strong); border-radius: var(--r); background: transparent; cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--s2); margin: 0; padding: var(--s1) var(--s4) var(--s4); background: var(--white); border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -24px rgba(0,0,0,.4); max-height: calc(100svh - 64px); overflow-y: auto; }
  .nav.menu-open .menu { display: flex; }
  .menu-list { flex-direction: column; align-items: stretch; }
  .menu-list > li { border-bottom: 1px solid var(--rule); }
  .dd-btn, .menu-a, .nav.scrolled .dd-btn, .nav.scrolled .menu-a { width: 100%; height: 56px; padding: 0; justify-content: space-between; font-size: 18px; }
  .dd-btn::after, .menu-a::after { display: none; }
  .dd-panel { position: static; min-width: 0; padding: 0 0 var(--s1); border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .dd.open .dd-panel { display: block; }
  .dd-panel a { padding: 10px 0; }
  .dd-panel a:hover { background: transparent; color: var(--orange-ink); }
  .menu-tel { justify-content: center; height: 52px; border: 1.5px solid var(--rule-strong); border-radius: var(--r); }
  .menu-cta { width: 100%; min-height: 52px; order: 3; }
}
@media (max-width: 640px) {
  .book { padding: var(--s8) 0; }
  .book-side h2, .local-about h2, .local-faq h2 { font-size: 36px; }
  .local { padding: var(--s8) 0; }
  .local-facts div { grid-template-columns: 1fr; gap: 4px; }
  .w-step legend { font-size: 27px; }
  :root { --nav-h: 68px; }
  .shell { padding: 0 var(--s2); }
  .util-hours { font-size: 12px; }
  .util-tel { font-size: 13px; }
  .brand-shield { height: 46px; }
  .nav.scrolled .brand-shield { height: 40px; }
  .brand-txt b { font-size: 25px; }
  .brand-txt small { font-size: 9.5px; letter-spacing: .12em; }
  .nav.scrolled .nav-row { height: 60px; }
  .menu { padding: var(--s1) var(--s2) var(--s3); }
}

/* ---------- HERO: full-bleed job photo/clip, shade only where the copy sits ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: 0; isolation: isolate; } /* own stacking context: clips can never cover the copy */
.hero-shade { z-index: 1; }
.hero-inner, .ph-head-grid { z-index: 2; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hero-media img { transform-origin: 62% 45%; animation: kb 24s cubic-bezier(.25,.1,.25,1) both; will-change: transform; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-seq { position: absolute; inset: 0; }
.hero-v { opacity: 0; transition: opacity .9s ease; }
.hero-v.on { opacity: 1; }
/* with clips, the still is the clip's first frame: no zoom, same crop as the video so the loop fade is seamless */
.hero-media.has-seq img { animation: none; }
.hero-media.has-seq img, .hero-media.has-seq video { object-position: 50% 50%; }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(12,13,14,.78) 0%, rgba(12,13,14,.55) 30%, rgba(12,13,14,.12) 52%, rgba(12,13,14,0) 64%),
  linear-gradient(0deg, rgba(12,13,14,.5) 0%, rgba(12,13,14,0) 26%); }
.hero-inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(520px, calc(100svh - var(--nav-h) - 1px), 860px); padding-top: var(--s6); padding-bottom: var(--s6); }
.hero-copy { max-width: 620px; }
.hero-h1 { font-size: clamp(50px, 5vw, 80px); line-height: .93; letter-spacing: -.003em; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero-sub { margin-top: var(--s3); max-width: 30em; text-wrap: pretty; font-size: 19px; line-height: 1.45; color: #f1efe9; }
.hero-ctas { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost { background: rgba(18,19,20,.35); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); backdrop-filter: blur(2px); }
.btn-ghost:hover { background: rgba(18,19,20,.6); box-shadow: inset 0 0 0 1.5px #fff; }
.hero-call .ic { width: 18px; height: 18px; color: var(--orange); }
/* hero copy is static and visible from the first frame; only the media behind it moves */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-tag { position: absolute; right: var(--s5); bottom: var(--s4); display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; background: rgba(18,19,20,.78); color: #fff; border-left: 3px solid var(--orange); font: 600 14px/1.2 var(--sans); }
.hero-tag span { font: 700 11px/1 var(--semi); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
/* desktop hero: masthead layout. H1 spans the bottom of the photo, a hairline, then the line, the ask and the phone. */
@media (min-width: 1101px) {
  .hero-shade { background:
    linear-gradient(0deg, rgba(12,13,14,.9) 0%, rgba(12,13,14,.72) 26%, rgba(12,13,14,.18) 58%, rgba(12,13,14,0) 74%),
    linear-gradient(90deg, rgba(12,13,14,.42) 0%, rgba(12,13,14,0) 46%); }
  .hero-inner { justify-content: flex-end; padding-bottom: var(--s10); }
  .hero-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); align-items: end; }
  .hero-h1 { grid-column: 1 / -1; max-width: 15.5em; font-size: clamp(60px, 5.6vw, 88px); line-height: .9; }
  .hero-sub { grid-column: 1; margin-top: 0; padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.28); max-width: none; font-size: 19px; }
  .hero-ctas { grid-column: 2; margin-top: 0; padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.28); flex-wrap: nowrap; }
  .hero-h1 + .hero-sub { margin-top: var(--s4); }
  .hero-h1 ~ .hero-ctas { margin-top: var(--s4); }
  .hero-tag { top: var(--s4); bottom: auto; }
}
@media (max-width: 1100px) {
  .hero-inner { min-height: 560px; }
  .hero-shade { background: linear-gradient(90deg, rgba(12,13,14,.8) 0%, rgba(12,13,14,.5) 45%, rgba(12,13,14,.1) 75%), linear-gradient(0deg, rgba(12,13,14,.5) 0%, rgba(12,13,14,0) 30%); }
}
@media (max-width: 640px) {
  .hero-media img { object-position: 40% 60%; transform-origin: 40% 60%; }
  .hero-media video, .hero-media.has-seq img { object-position: 55% 50%; }
  .hero-shade { background: linear-gradient(0deg, rgba(12,13,14,.88) 0%, rgba(12,13,14,.7) 42%, rgba(12,13,14,.15) 70%, rgba(12,13,14,0) 85%); }
  .hero-inner { justify-content: flex-end; min-height: calc(100svh - var(--nav-h) - 121px); padding-top: var(--s4); padding-bottom: var(--s5); }
  .hero-h1 { font-size: 38px; line-height: .95; }
  .hero-sub { margin-top: 12px; font-size: 16px; }
  .hero-ctas { margin-top: var(--s3); flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-tag { top: var(--s2); bottom: auto; right: var(--s2); padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hero-inner { min-height: calc(100svh - var(--nav-h) - 104px); }
  .hero-h1 { font-size: 33px; }
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn { width: auto; flex: 1; padding: 0 12px; font-size: 15px; }
}

/* facts strip under the hero: big figures that count up, hairline columns */
.facts { background: var(--ink); color: #fff; border-top: 1px solid var(--rule-dark); }
.facts-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.facts-row li { display: flex; flex-direction: column; padding: var(--s3) var(--s2) var(--s3) 0; }
.facts-row li + li { padding-left: var(--s3); border-left: 1px solid var(--rule-dark); }
.fig { font: 800 48px/.9 var(--display); letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
.facts-row li:first-child .fig { color: var(--orange); }
.facts-row em { margin-top: 10px; font: 700 15px/1.15 var(--semi); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.facts-row span:not([data-count]) { margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--on-dark-2); }
@media (max-width: 1100px) {
  .facts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts-row li:nth-child(4) { padding-left: 0; border-left: 0; }
  .facts-row li:nth-child(n+4) { border-top: 1px solid var(--rule-dark); }
}
@media (max-width: 640px) {
  .facts-row { grid-template-columns: 1fr 1fr; }
  .facts-row li, .facts-row li + li { padding: var(--s2) var(--s2) var(--s2) 0; border-left: 0; border-top: 1px solid var(--rule-dark); }
  .facts-row li:nth-child(-n+2) { border-top: 0; }
  .facts-row li:nth-child(even) { padding-left: var(--s2); border-left: 1px solid var(--rule-dark); }
  .fig { font-size: 40px; }
  .facts-row em { font-size: 13.5px; }
}

/* ---------- SERVICES: index list beside a photo ---------- */
.svc { padding: var(--s12) 0; }
.svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
.svc-side { grid-column: 1 / span 5; position: sticky; top: 104px; }
.svc-side h2 { font-size: clamp(40px, 4.4vw, 64px); line-height: .94; }
.svc-lead { margin-top: var(--s3); font-size: 18px; color: var(--text-2); max-width: 28em; }
.svc-photo { position: relative; margin: var(--s5) 0 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.svc-photo .svc-pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .45s ease, transform 1.2s var(--ease); }
.svc-photo .svc-pv.on { opacity: 1; transform: scale(1); }
.svc-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: baseline; gap: var(--s2); padding: 40px var(--s2) 14px; background: linear-gradient(0deg, rgba(12,13,14,.78), rgba(12,13,14,0)); color: #fff; }
.svc-photo figcaption span { font: 600 12px/1 var(--semi); letter-spacing: .12em; color: var(--orange); font-variant-numeric: tabular-nums; }
.svc-photo figcaption b { font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.svc-photo::after { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; background: var(--orange); z-index: 2; }
.cap { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(18,19,20,.82); color: #fff; border-left: 3px solid var(--orange); font: 600 13px/1.2 var(--sans); }
.svc-list { grid-column: 7 / span 6; border-top: 2px solid var(--ink); }
.svc-row { border-bottom: 1px solid var(--rule); }
.svc-row a { position: relative; display: grid; grid-template-columns: 1fr 40px; column-gap: var(--s2); padding: var(--s4) 0 var(--s4) 0; text-decoration: none; transition: padding .25s var(--ease), background-color .2s ease; }
.svc-row a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .25s var(--ease); }
.svc-row a:hover { padding-left: var(--s3); background: linear-gradient(90deg, var(--paper), transparent 80%); }
.svc-row a:hover::before { transform: scaleY(1); }
.svc-thumb { display: none; }
.svc-name { grid-column: 1; display: flex; align-items: baseline; gap: var(--s2); font: 800 clamp(30px, 2.8vw, 40px)/1 var(--display); text-transform: uppercase; }
.svc-n { flex: none; width: 28px; font: 600 13px/1 var(--semi); letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.svc-row a:hover .svc-n, .svc-row a:focus-visible .svc-n { color: var(--orange-ink); }
.svc-p, .svc-inc { margin-left: 44px; }
.svc-p { grid-column: 1; margin-top: 12px; color: var(--text-2); font-size: 16.5px; max-width: 34em; }
.svc-inc { grid-column: 1; margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: 6px; }
.svc-inc li { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 4px; font: 600 13px/1.3 var(--semi); letter-spacing: .03em; color: var(--text-2); background: var(--white); }
.svc-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); border: 1.5px solid var(--rule-strong); transition: background-color .2s ease, border-color .2s ease, transform .25s var(--ease); }
.svc-go .ic { width: 18px; height: 18px; }
.svc-row a:hover .svc-go { background: var(--orange); border-color: var(--orange); transform: translateX(4px); }
@media (max-width: 1100px) {
  .svc-side { grid-column: 1 / -1; position: static; }
  .svc-photo { display: none; }
  .svc-row a { grid-template-columns: 112px 1fr 40px; }
  .svc-thumb { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
  .svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .svc-name, .svc-p, .svc-inc { grid-column: 2; }
  .svc-go { grid-column: 3; }
  .svc-p, .svc-inc { margin-left: 0; }
  .svc-n { display: none; }
  .svc-list { grid-column: 1 / -1; margin-top: var(--s6); }
}
@media (max-width: 640px) {
  .svc { padding: var(--s8) 0; }
  .svc-side h2 { font-size: 36px; }
  .svc-lead { font-size: 16px; }
  .svc-photo { margin-top: var(--s4); }
  .svc-row a { padding: var(--s3) 0; grid-template-columns: 72px 1fr; column-gap: var(--s2); }
  .svc-row a:hover { padding-left: 0; }
  .svc-go { display: none; }
  .svc-inc li:nth-child(n+3) { display: none; }
  .svc-name { font-size: 28px; }
  .svc-go { width: 36px; height: 36px; }
}

/* ---------- BOOK ---------- */
.book { background: var(--ink); color: #fff; padding: var(--s12) 0; position: relative; }
.book::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--ink) 14px 28px); }
.book-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
.book-side { grid-column: 1 / span 5; position: sticky; top: 104px; }
.book-side h2 { font-size: clamp(40px, 4.2vw, 62px); line-height: .94; }
.book-lead { margin-top: var(--s3); color: var(--on-dark); font-size: 17px; max-width: 30em; }
.book-storm { margin-top: var(--s2); padding-left: 14px; border-left: 3px solid var(--orange); font: 700 18px/1.35 var(--semi); letter-spacing: .01em; color: #fff; }
.book-call { margin-top: var(--s5); display: inline-flex; flex-direction: column; gap: 6px; padding-top: var(--s2); border-top: 1px solid var(--rule-dark); font: 800 30px/1 var(--display); color: #fff; text-decoration: none; }
.book-call:hover { color: var(--orange); }
.wiz { grid-column: 7 / span 6; background: var(--white); color: var(--text); border-radius: 8px; padding: var(--s4); scroll-margin-top: 104px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.8); }
.wiz-head { display: flex; gap: var(--s3); align-items: baseline; }
.wiz-pct { margin-left: auto; }
.wiz-head #wStep { transition: color .3s ease; }
.wiz-track { margin-top: 12px; height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.wiz-track span { display: block; width: 0; height: 100%; background: var(--orange); transition: width .45s var(--ease); }
.w-step { border: 0; margin: var(--s3) 0 0; padding: 0; min-width: 0; animation: stepIn .35s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.w-step legend { padding: 0; font: 800 32px/1 var(--display); text-transform: uppercase; }
.w-step legend .label { display: block; margin-bottom: var(--s1); }
.w-hint { margin-top: 12px; color: var(--text-2); font-size: 15px; }
.picks { margin-top: var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.pick, .seg label { position: relative; cursor: pointer; }
.pick input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 var(--s2) 0 48px; border: 1px solid var(--rule); border-radius: var(--r); font-weight: 600; font-size: 16px; transition: border-color .15s ease, background-color .15s ease; }
.pick-n { display: none; font: 500 12px/1 var(--mono); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; order: 2; margin-left: auto; }
.pick span::before { content: ""; position: absolute; left: var(--s2); top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: #fff; transition: all .15s ease; }
.pick:hover span, .seg label:hover span { border-color: var(--text); }
.pick input:checked + span { border-color: var(--text); background: #f6f7f7; }
.pick input:checked + span::before { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pick input:checked + span .pick-n { display: none; color: var(--orange); }
.pick input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.w-label { display: block; margin: var(--s3) 0 var(--s1); }
.w-input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: #fff; font: 500 16px var(--sans); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.w-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,106,19,.25); }
select.w-input { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141516' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.seg span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); font-weight: 600; font-size: 15px; transition: border-color .15s ease, background-color .15s ease; }
.seg small { font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--muted); }
.seg input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg input:checked + span small { color: var(--on-dark-2); }
.drop { margin-top: var(--s2); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s4) var(--s2); border: 1px dashed var(--rule-strong); border-radius: var(--r); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.drop:hover { border-color: var(--text); background: #f6f7f7; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .ic { width: 24px; height: 24px; color: var(--text-2); }
.drop-t { margin-top: 6px; font-weight: 600; }
.drop-s { font-size: 14px; color: var(--muted); }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 12px; }
.thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; animation: stepIn .3s ease both; }
.textlink { margin-top: 12px; padding: 4px 0; border: 0; background: none; font: 600 14px var(--sans); color: var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.textlink:hover { color: var(--orange); }
.w-error { margin-top: var(--s2); font-size: 14px; font-weight: 600; color: #b42318; }
.w-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.w-nav .btn { min-width: 128px; }
.w-done { padding-top: var(--s2); animation: stepIn .35s var(--ease) both; }
.w-check { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r); background: var(--ink); color: var(--orange); animation: stampIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.w-check .ic { width: 26px; height: 26px; stroke-width: 2.5; }
@keyframes stampIn { from { opacity: 0; transform: scale(1.6) rotate(-10deg); } to { opacity: 1; transform: none; } }
.w-done .label { margin-top: var(--s3); }
.w-done h3 { margin-top: var(--s1); font-size: 32px; }
.w-done p:not(.label) { margin-top: 12px; color: var(--text-2); }
.w-preview { font-size: 13px; color: var(--muted) !important; }
.w-done .btn { margin-top: var(--s3); }
.wiz.flash #wStep { color: var(--orange); }

/* ---------- SEE THE WORK: two clips, offset, then the job steps ---------- */
.see { background: var(--paper); padding: var(--s12) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.see-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); }
.see-head h2 { font-size: clamp(44px, 5vw, 76px); line-height: .9; }
.see-head p { max-width: 26em; color: var(--text-2); font-size: 16.5px; }
.see-grid { margin-top: var(--s6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
.vid-yard { grid-column: 1 / span 7; }
.vid-storm { grid-column: 8 / span 5; margin-top: var(--s12); }
.vid { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--ink); aspect-ratio: 16 / 10; }
.vid-storm .vid { aspect-ratio: 4 / 4.4; }
.vid-poster, .vid-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plx-on > img { transform: scale(1.12); will-change: transform; }
.vid .cap { z-index: 2; font: 700 12px/1 var(--semi); letter-spacing: .1em; text-transform: uppercase; }
.vid-txt { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); align-items: end; margin-top: var(--s3); }
.vid-txt h3 { grid-column: 1 / -1; font-size: 30px; text-transform: uppercase; }
.vid-txt p { margin-top: var(--s1); color: var(--text-2); font-size: 16px; max-width: 30em; }
.vid-txt .more { margin-bottom: 4px; white-space: nowrap; }
.how { margin-top: var(--s10); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
.how-t { grid-column: 1 / span 3; font-size: 30px; text-transform: uppercase; }
.how-row { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s3); counter-reset: how; position: relative; }
.how-row::before, .how-row::after { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--rule-strong); }
.how-row::after { background: var(--orange); transform-origin: left; transform: scaleX(var(--p, 0)); }
.how-row li { position: relative; z-index: 1; }
.how-n { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--paper); color: var(--text); box-shadow: inset 0 0 0 2px var(--rule-strong); font: 800 20px/1 var(--display); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.how-row li.lit .how-n { background: var(--ink); color: var(--orange); box-shadow: inset 0 0 0 2px var(--ink); transform: scale(1.06); }
.how-row li h4, .how-row li p { transition: opacity .4s ease, transform .5s var(--ease); }
.js [data-how] .how-row li:not(.lit) h4 { transform: translate3d(0, 6px, 0); }
.how-row h4 { margin: var(--s2) 0 0; font: 700 19px/1.15 var(--semi); letter-spacing: .01em; }
.how-row p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
@media (max-width: 1100px) {
  .see-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .vid-yard { grid-column: 1 / span 7; }
  .vid-storm { grid-column: 8 / span 5; margin-top: var(--s10); }
  .how-t, .how-row { grid-column: 1 / -1; }
  .how-row { margin-top: var(--s4); grid-template-columns: 1fr; row-gap: var(--s4); }
  .how-row li { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s3); }
  .how-row h4 { margin-top: 8px; }
  .how-row p { grid-column: 2; }
  .how-row::before, .how-row::after { left: 19px; right: auto; top: 20px; bottom: var(--s8); width: 2px; height: auto; }
  .how-row::after { transform-origin: top; transform: scaleY(var(--p, 0)); }
}
@media (max-width: 640px) {
  .see { padding: var(--s8) 0; }
  .see-head h2 { font-size: 44px; }
  .see-grid { margin-top: var(--s4); row-gap: var(--s6); }
  .vid-yard, .vid-storm { grid-column: 1 / -1; margin-top: 0; }
  .vid, .vid-storm .vid { aspect-ratio: 16 / 11; }
  .vid-txt { grid-template-columns: 1fr; }
  .vid-txt h3 { font-size: 26px; }
  .vid-txt .more { margin-top: var(--s2); justify-self: start; }
  .how { margin-top: var(--s8); }
  .how-row { grid-template-columns: 1fr; }
  .how-row li { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s2); }
  .how-row h4 { margin-top: 8px; }
  .how-row p { grid-column: 2; }
}

/* discounts + payment (book side, service side card, footer) */
.perks { margin-top: var(--s4); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-dark); }
.perk { display: flex; flex-direction: column; gap: 6px; padding: var(--s2) var(--s2) var(--s2) 0; }
.perk + .perk { padding-left: var(--s2); border-left: 1px solid var(--rule-dark); }
.perk b { font: 500 22px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--orange); letter-spacing: -.01em; }
.perk-pay { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--rule-dark); font-size: 15px; color: var(--on-dark); }
.perks + .book-call { margin-top: var(--s4); }
.perks-side { margin-top: var(--s3); border-top-color: var(--rule); }
.perks-side .perk + .perk { border-left-color: var(--rule); }
.perks-side .perk-pay { border-top-color: var(--rule); color: var(--text-2); font-size: 14px; }
.perks-side .perk b { font-size: 18px; }
.foot-perks { margin-top: var(--s2) !important; font-size: 14px; color: var(--on-dark-2); }

/* wizard contact extras */
.w-opt { text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--muted); margin-left: 6px; }
.w-check-row { margin-top: var(--s2); display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 600; }
.w-check-row input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.w-confirm { font-size: 15px; }
.w-nav .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- LOCAL CREW + FAQ ---------- */
.local { padding: var(--s12) 0; }
.local-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
.local-about { grid-column: 1 / span 5; }
.local-about h2, .local-faq h2 { font-size: clamp(36px, 3.6vw, 52px); line-height: .94; }
.local-about > p { margin-top: var(--s3); font-size: 17px; color: var(--text-2); }
.local-facts { margin: var(--s4) 0 0; border-top: 2px solid var(--ink); }
.local-facts div { display: grid; grid-template-columns: 128px 1fr; gap: var(--s2); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.local-facts dt { padding-top: 3px; }
.local-facts dd { margin: 0; font-weight: 600; font-size: 16px; }
.local-facts dd a { text-decoration: none; border-bottom: 2px solid var(--orange); }
.town-chips { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1); }
.town-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--rule-strong); border-radius: 4px; font: 700 15px/1 var(--semi); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.town-chips .ic { width: 14px; height: 14px; color: var(--orange-ink); transition: transform .2s var(--ease); }
.town-chips a:hover { border-color: var(--ink); background: var(--paper); }
.town-chips a:hover .ic { transform: translateX(2px); }
.local-faq { grid-column: 7 / span 6; scroll-margin-top: 104px; }
.local-faq .faq { margin-top: var(--s3); }
.faq { grid-column: 6 / span 7; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s2); padding: 18px 0; font: 700 19px/1.25 var(--semi); letter-spacing: .005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq-n { font: 500 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.faq-q { flex: 1; }
.faq-x { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.75px; background: currentColor; transition: transform .25s var(--ease); }
.faq-x::after { transform: rotate(90deg); }
.faq details[open] .faq-x::after { transform: rotate(0); }
.faq details[open] .faq-n { color: var(--orange); }
.faq summary:hover .faq-q { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq details p { padding: 0 var(--s4) var(--s3) 0; color: var(--text-2); max-width: 40em; }

/* ---------- FOOTER ---------- */
.foot { background: var(--ink); color: var(--on-dark-2); font-size: 15px; position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--ink) 14px 28px); }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s10) 0 var(--s8); border-bottom: 1px solid var(--rule-dark); }
.foot-line { font: 800 clamp(34px, 3.8vw, 56px)/.94 var(--display); text-transform: uppercase; color: #fff; }
.foot-grid { display: grid; grid-template-columns: 5fr 3fr 3fr 2fr; gap: var(--s5); padding: var(--s8) 0 var(--s6); }
.brand-foot { color: #fff; }
.brand-foot .brand-shield { height: 72px; }
.brand-foot .brand-txt b { font-size: 34px; }
.brand-foot .brand-txt small { color: #d9d6cf; }
.foot-brand p { margin-top: var(--s3); max-width: 26em; }
.foot-phone { margin-top: var(--s3); display: inline-block; font: 800 28px/1 var(--display); color: #fff; text-decoration: none; }
.foot-phone:hover { color: var(--orange); }
.foot .label { color: #d9d6cf; }
.foot-list { margin-top: var(--s2); display: grid; gap: 10px; }
.foot-list a { color: var(--on-dark); text-decoration: none; }
.foot-list a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.foot-base { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--rule-dark); font: 500 13px/1.4 var(--sans); color: #9a9da1; }
.foot-base a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(255,107,18,.7); text-underline-offset: 3px; }
.foot-base a:hover { color: #fff; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .foot-top { flex-direction: column; align-items: flex-start; padding: var(--s8) 0 var(--s6); }
  .foot-top .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-base { flex-direction: column; }
}

/* ---------- SUBPAGES: photo head like the home hero ---------- */
.ph-head { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.ph-media { position: absolute; inset: 0; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 50% 55%; animation: kb 20s cubic-bezier(.25,.1,.25,1) both; }
.ph-head-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: end; height: max(440px, calc(100svh - var(--nav-h) - var(--crumbs-h) - 1px)); max-height: 820px; padding-top: var(--s6); padding-bottom: var(--s6); }
.sub .ph-head { max-height: 820px; }
@media (min-width: 1101px) and (max-height: 820px) { .page-h1 { font-size: clamp(40px, 4.2vw, 60px); } .page-sub { margin-top: var(--s2); font-size: 16.5px; } }
.ph-head-grid > div:first-child { grid-column: 1 / span 7; }
.ph-head-side { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.page-h1 { font-size: clamp(44px, 4.8vw, 76px); line-height: .93; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.page-sub { margin-top: var(--s3); color: #f1efe9; font-size: 18px; max-width: 32em; }
.ph-head-side .btn { width: 100%; }
.ph-head-side .btn-ghost .ic { color: var(--orange); }
.page-photo { display: none; }
.jump { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 4px; }
.jump a { display: inline-flex; padding: 8px 12px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 4px; background: rgba(18,19,20,.35); color: #fff; font: 700 14px/1 var(--semi); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.jump a:hover { border-color: #fff; background: rgba(18,19,20,.6); }
@media (max-width: 1100px) {
  .ph-head-grid > div:first-child, .ph-head-side { grid-column: 1 / -1; }
  .ph-head-side { margin-top: var(--s3); flex-direction: row; flex-wrap: wrap; }
  .ph-head-side .btn { width: auto; }
}
@media (max-width: 640px) {
  .ph-head .hero-shade { background: linear-gradient(0deg, rgba(12,13,14,.9) 0%, rgba(12,13,14,.7) 50%, rgba(12,13,14,.2) 80%); }
  .ph-head-grid { height: max(440px, calc(100svh - var(--nav-h) - var(--crumbs-h) - 96px)); padding-top: var(--s4); padding-bottom: var(--s4); align-content: end; }
  .page-h1 { font-size: 36px; }
  .page-sub { margin-top: 12px; font-size: 15.5px; }
  .ph-head-side { flex-direction: column; margin-top: var(--s3); }
  .ph-head-side .btn { width: 100%; }
}
.detail { padding: var(--s10) 0 var(--s12); }
.detail-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
.detail-main { grid-column: 1 / span 7; }
.incl { margin-top: var(--s2); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); border-top: 1px solid var(--rule); }
.incl li { display: flex; gap: 12px; align-items: flex-start; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-weight: 600; }
.incl li .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--orange-ink); stroke-width: 2.5; }
.incl .num { font: 500 12px/1 var(--mono); }
.detail-l { margin-top: var(--s10); }
.detail-main .faq { margin-top: var(--s2); }
.side { grid-column: 9 / span 4; position: sticky; top: 96px; display: grid; gap: var(--s4); }
.side-card { padding: var(--s3); border: 1px solid var(--rule); border-radius: 8px; border-top: 4px solid var(--orange); background: var(--paper); }
.side-t { font: 800 30px/1 var(--display); text-transform: uppercase; }
.side-card > p:not(.side-t) { margin-top: var(--s1); color: var(--text-2); font-size: 15px; }
.side-card .btn { margin-top: var(--s3); width: 100%; }
.side-call { display: block; margin-top: 12px; text-align: center; font: 500 14px/1.4 var(--mono); color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.side-call:hover { color: var(--text); text-decoration: underline; }
.side-list, .side-towns { margin-top: 12px; border-top: 1px solid var(--rule); }
.side-list a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 600; font-size: 15px; }
.side-list .num { font: 500 12px/1 var(--mono); color: var(--muted); }
.side-list .ic { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .22s var(--ease); }
.side-list a:hover .ic { transform: translateX(3px); color: var(--orange); }
.side-towns { display: flex; flex-wrap: wrap; gap: var(--s1); padding-top: 12px; border-top: 1px solid var(--rule); }
.side-towns a { display: inline-block; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; font-size: 14px; text-decoration: none; }
.side-towns a:hover { border-color: var(--text); }
.jump { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1); }
.jump a { display: inline-flex; gap: var(--s1); align-items: baseline; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; font-weight: 600; font-size: 14px; text-decoration: none; }
.jump .num { font: 500 11px/1 var(--mono); }
.jump a:hover { border-color: var(--text); }
.towns-list { padding-top: var(--s10); padding-bottom: var(--s12); }
.town { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; padding: var(--s5) 0; border-top: 1px solid var(--rule); scroll-margin-top: 96px; }
.town:last-child { border-bottom: 1px solid var(--rule); }
.town > .label { grid-column: 1 / span 3; padding-top: 10px; }
.town-main { grid-column: 4 / span 6; }
.town h2 { font-size: clamp(24px, 2.4vw, 32px); }
.town-main p { margin-top: 12px; color: var(--text-2); }
.town-svcs { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.town-svcs a { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.town-svcs a:hover { border-color: var(--text); }
.town-btn { grid-column: 11 / span 2; justify-self: end; }
.town:target { background: linear-gradient(90deg, rgba(255,106,19,.08), transparent 60%); }

/* reveal */
.js .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .55s ease, transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-seq { display: none; }
}

/* ---------- tablet + mobile menu ---------- */
@media (max-width: 1100px) {
  .shell { padding: 0 var(--s4); }
  .sec-head h2 { grid-column: 1 / -1; }
  .ph-tall { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .work-a .work-col { grid-column: 1 / -1; margin-top: var(--s4); }
  .work-b { margin-top: 0; }
  .work-b .work-col { grid-column: 1 / -1; padding-top: 0; }
  .work-b .entry:first-child { border-top: 0; }
  .ph-cross { grid-column: 1 / -1; margin-top: var(--s4); margin-bottom: calc(var(--s10) * -1); }
  .strip { padding-top: calc(var(--s10) + var(--s10)); }
  .strip-row { grid-template-columns: 1fr 1fr; }
  .strip-row li { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; }
  .strip-row li:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: var(--s3); }
  .strip-row li:nth-child(even) { padding-left: var(--s3) !important; }
  .book-side, .wiz { grid-column: 1 / -1; }
  .vid-yard { grid-column: 1 / span 7; }
  .vid-storm { grid-column: 8 / span 5; margin-top: var(--s10); }
  .see-head h2 { grid-column: 1 / -1; }
  .book-side { position: static; margin-bottom: var(--s5); }
  .ph-about { grid-column: 1 / span 5; }
  .about-copy { grid-column: 6 / span 7; padding-top: 0; }
  .faq-grid > div:first-child, .faq-grid .faq { grid-column: 1 / -1; }
  .faq-grid .faq { margin-top: var(--s4); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .detail-main, .side { grid-column: 1 / -1; }
  .side { position: static; margin-top: var(--s8); }
  .town > .label { grid-column: 1 / -1; padding-top: 0; margin-bottom: 12px; }
  .town-main { grid-column: 1 / span 9; }
  .town-btn { grid-column: 10 / span 3; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .shell { padding: 0 var(--s2); }
  .sec-head { padding-top: var(--s10); }
  .sec-head h2 { font-size: 32px; }
  .work-a { margin-top: var(--s5); }
  .entry h3 { font-size: 24px; }
  .ph-cross { margin-bottom: calc(var(--s8) * -1); }
  .strip { padding: calc(var(--s8) + var(--s8)) 0 var(--s8); }
  .strip-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .strip-fields { gap: var(--s3); flex-wrap: wrap; }
  .strip-row { grid-template-columns: 1fr; }
  .strip-row li, .strip-row li:nth-child(odd), .strip-row li:nth-child(even) { border-right: 0 !important; padding: var(--s3) 0 !important; display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s2); }
  .strip-n { font-size: 32px; grid-row: span 2; }
  .strip-row h3 { margin-top: 0; }
  .book { padding: var(--s10) 0; }
  .see { padding: var(--s10) 0; }
  .see-grid { margin-top: var(--s5); row-gap: var(--s6); }
  .vid-yard, .vid-storm { grid-column: 1 / -1; margin-top: 0; }
  .vid, .vid-storm .vid { aspect-ratio: 16 / 11; }
  .vid-card h3 { font-size: 22px; }
  .perk b { font-size: 20px; }
  .wiz { padding: var(--s3) var(--s2); margin: 0 calc(var(--s1) * -1); }
  .w-step legend { font-size: 24px; }
  .picks { grid-template-columns: 1fr; }
  .seg { grid-template-columns: 1fr; }
  .seg span { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .w-nav .btn { flex: 1; min-width: 0; padding: 0 var(--s2); white-space: nowrap; }
  .about { padding: var(--s10) 0; }
  .ph-about { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .about-copy { grid-column: 1 / -1; margin-top: var(--s4); }
  .town-rows { grid-template-columns: 1fr; }
  .faq-sec { padding: var(--s10) 0; }
  .faq details p { padding: 0 0 var(--s3) 28px; }
  .foot-top { flex-direction: column; align-items: flex-start; padding: var(--s8) 0 var(--s6); }
  .foot-top .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-base { flex-direction: column; }
  .detail { padding: var(--s6) 0 var(--s10); }
  .incl { grid-template-columns: 1fr; }
  .town-main, .town-btn { grid-column: 1 / -1; }
  .town-btn { justify-self: stretch; margin-top: var(--s3); }
}

@media (max-width: 640px) and (max-height: 700px) {
}

/* hours (Open 24/7) */
.side-hours { margin-top: 6px; text-align: center; color: var(--orange); }
.foot-hours { margin-top: var(--s1) !important; color: var(--orange) !important; }



/* ---------- BEFORE / AFTER: drag (or arrow keys) to compare. Pairs come from images/before-*.jpg + after-*.jpg ---------- */
.ba-row { margin-top: var(--s6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); row-gap: var(--s3); }
.ba-n1 .ba { grid-column: 1 / span 8; }
.ba-note { grid-column: 9 / span 4; align-self: end; padding-bottom: var(--s1); }
.ba-note h3 { font-size: 34px; text-transform: uppercase; }
.ba-note p { margin-top: var(--s2); color: var(--text-2); font-size: 16.5px; }
.ba-note .ba-how { margin-top: var(--s1); font: 600 13px/1.3 var(--semi); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ba-note .more { margin-top: var(--s3); }
@media (max-width: 1100px) { .ba-n1 .ba, .ba-note { grid-column: 1 / -1; } .ba-note { padding-bottom: 0; } }
.ba-n2 .ba-lead { grid-column: 1 / span 7; } .ba-n2 .ba:not(.ba-lead) { grid-column: 8 / span 5; align-self: end; }
.ba-n3 .ba-lead { grid-column: 1 / span 8; grid-row: span 2; } .ba-n3 .ba:not(.ba-lead) { grid-column: 9 / span 4; }
.ba { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--ink); aspect-ratio: 16 / 9; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.ba-n3 .ba:not(.ba-lead) { aspect-ratio: auto; height: 100%; min-height: 180px; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: var(--x); z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 6px; background: var(--orange); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); pointer-events: none; transition: transform .2s var(--ease); }
.ba-handle svg { width: 22px; height: 22px; }
.ba.dragging .ba-handle, .ba-range:focus-visible ~ .ba-handle { transform: scale(1.1); }
.ba-range:focus-visible ~ .ba-handle { outline: 2px solid #fff; outline-offset: 3px; }
.ba-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-tag { position: absolute; top: 12px; z-index: 2; padding: 6px 10px; background: rgba(18,19,20,.82); color: #fff; font: 700 12px/1 var(--semi); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.ba-tag-b { left: 12px; } .ba-tag-a { right: 12px; border-right: 3px solid var(--orange); }
.ba .cap { z-index: 2; font: 700 12px/1 var(--semi); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) {
  .ba-row { margin-top: var(--s4); }
  .ba-row .ba, .ba-n3 .ba:not(.ba-lead) { grid-column: 1 / -1 !important; grid-row: auto !important; aspect-ratio: 4 / 3; height: auto; }
}

/* crop toward the ground on older photos so fake-looking tree and sky backgrounds stay out of frame */
img[src$="images/tree.jpg"], img[src$="images/leaves.jpg"], img[src$="images/junk.jpg"] { object-position: 50% 88% !important; }
.ph-media img[src$="images/ad-snow.jpg"] { object-position: 50% 80% !important; }
@media (min-width: 1101px) { .ph-areas .ph-head-grid { padding-bottom: var(--s12); } }
@media (max-width: 640px) { .ph-areas .ph-head-grid { padding-bottom: var(--s12); } }

/* ---------- Hero before/after (2026-10-26): the hero IS the proof. Drag anywhere on the photo. ---------- */
.hero-ba { margin: 0; aspect-ratio: auto; border-radius: 0; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero-ba img { animation: none !important; transform: none !important; object-position: 50% 55%; }
.hero-ba .ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.hero-ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); pointer-events: none; z-index: 1; }
.hero-ba .ba-handle { top: 38%; z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.hero-ba .ba-range { z-index: 2; }
.hb-lab { position: absolute; top: calc(var(--s4, 32px) + 8px); z-index: 1; font: 700 13px/1 var(--semi, inherit); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); pointer-events: none; transition: opacity .2s; }
.hb-b { left: 24px; } .hb-a { right: 24px; }
.hero-shade { pointer-events: none; }
.hero-inner { pointer-events: none; } .hero-inner a, .hero-inner button { pointer-events: auto; }
/* Hero slider moves only from the handle (clicks elsewhere on the hero no longer snap the divider). */
.hero-ba { cursor: default; }
.hero-ba .ba-range { pointer-events: none; }
.hero-ba .ba-handle { pointer-events: auto; cursor: ew-resize; touch-action: none; }
/* Hero video (Seedance lawn clip, 2026-10-26): video over its poster, no Ken Burns. */
.hero-vid img { animation: none !important; transform: none !important; z-index: 0; }
.hero-vid video { z-index: 1; object-position: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .hero-vid video { display: none; } }
/* Instant estimate (2026-10-26): shows the moment a job and size are picked. */
.w-est { margin: 16px 0 4px; padding: 14px 16px; border-radius: 8px; background: #fff4ec; border: 1px solid rgba(255,107,18,.35); display: grid; gap: 2px; }
.w-est span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a84300; }
.w-est b { font-size: 30px; line-height: 1.1; font-weight: 800; color: #121314; }
.w-est small { font-size: 13px; color: #5d6166; }
.w-est-done { font-size: 18px; margin: 8px 0; } .w-est-done b { color: #ff6b12; }
/* Scrolling past the end (Mac/iPhone bounce) shows the page root: make it the footer's color, so the copyright row is the last thing you ever see. */
html { background: #121314; }
/* Bottom bar (Leander 2026-10-26): a solid white strip at the very bottom holding only the copyright and our credit. */
.foot-bar { background: #fff; color: #45484c; }
.foot-bar .foot-base { border-top: 0; padding: 18px 0; color: #45484c; }
.foot-bar .foot-base a { color: #121314; text-decoration-color: rgba(255,107,18,.8); }
.foot-bar .foot-base a:hover { color: #000; }
html { background: #fff; }

/* 2026-10-26: no white bar at the bottom, no hard section dividers (Leander) */
html { background: #121314; }
.foot-bar { background: transparent; color: #9a9da1; }
.foot-bar .foot-base { padding: 0 0 var(--s5); color: #9a9da1; }
.foot-bar .foot-base a { color: #fff; text-decoration-color: rgba(255,107,18,.8); }
.foot-bar .foot-base a:hover { color: var(--orange); }
.nav, .crumbs, .facts, .see, .see-head, .foot-top, .foot-base, .town, .town:last-child { border-top: 0; border-bottom: 0; }
.hero-sub, .hero-ctas, .book-call, .perks, .perk-pay, .perks-side { border-top: 0; }
.svc-list, .local-facts, .faq, .incl, .side-list, .side-towns { border-top: 0; }
.nav { box-shadow: 0 1px 0 rgba(18,19,20,.06); }
.svc-row, .local-facts div, .faq details, .incl li, .side-list a { border-bottom-color: rgba(18,19,20,.07); }
.foot-top { padding-bottom: var(--s6); }
.svc-row, .local-facts div, .incl li, .side-list a, .menu-list > li { border-bottom: 0 !important; }
.faq details { border-bottom: 0; background: var(--paper); border-radius: 8px; margin-bottom: 8px; padding: 0 18px; }
.w-nav { border-top: 0; padding-top: 0; }
.local-facts div { padding: 10px 0; }
.svc-row + .svc-row { margin-top: 6px; }
.perk + .perk { border-left: 0; padding-left: var(--s4); }
.perks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.perk { justify-content: space-between; }

/* Phone hero breathing room: the later `.shell { padding: 0 ... }` rules were zeroing the hero's top and bottom
   padding, so the buttons sat on the edge where the photo meets the next section. */
@media (max-width: 640px) {
  .shell.hero-inner { padding-top: var(--s4); padding-bottom: var(--s5); }
}