/* ==========================================================================
   Multi-page additions: header links + Services dropdown, same-day badge,
   form extras, and the inner pages (services, service area, cities, blog,
   privacy). Same tokens and components as the home page (styles.css).
   ========================================================================== */

/* ---------- Header: Services dropdown and page links ---------- */
.nav { grid-template-columns: auto 1fr auto auto; }
.nav__links { display: none; align-items: center; gap: 4px; justify-self: start; margin-left: clamp(12px, 2vw, 36px); }
.nav__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; font-size: 0.92rem; font-weight: 600; color: inherit; white-space: nowrap; transition: color .25s var(--ease); }
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="page"] { color: var(--color-accent); }
.nav.is-light .nav__link:hover { color: var(--color-inverse-text); text-decoration: underline; text-underline-offset: 4px; }
.nav__link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav__drop { position: relative; }
.nav__drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__drop-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 5; display: grid; min-width: 320px; padding: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: 0 24px 60px color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: var(--color-text); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.nav__drop-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge */
.nav__drop-menu.is-open, .nav__drop:hover .nav__drop-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__drop-menu a { display: flex; align-items: baseline; gap: 12px; padding: 11px 12px; font-weight: 600; font-size: 0.95rem; transition: background-color .2s, color .2s; }
.nav__drop-menu a .mono { font-size: 0.66rem; color: var(--color-text-subtle); }
.nav__drop-menu a:hover, .nav__drop-menu a:focus-visible, .nav__drop-menu a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent); }
.nav__drop-menu .nav__drop-all { margin-top: 6px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 500; font-size: 0.86rem; }
.nav__drop-all svg { width: 14px; height: 14px; margin-left: auto; align-self: center; }
.nav__chapter { display: none; }
@media (min-width: 1180px) {
  .nav__links { display: flex; }
}
@media (min-width: 1180px) and (max-width: 1439px) {
  .nav__phone span { display: none; }
  .nav__phone { width: 40px; height: 40px; justify-content: center; border: 1px solid var(--color-border-strong); }
  .nav .theme-toggle__label { display: none; }
  .nav__actions { gap: 10px; }
}
@media (min-width: 1680px) {
  .nav__chapter { display: flex; }
}
@media (max-width: 1179px) {
  .nav { grid-template-columns: 1fr auto; }
}
/* full-screen menu: ten items must fit the screen height as well as its width
   (each row is about 1.3em tall), and the panel scrolls if a screen is very short */
.menu { overflow-y: auto; overscroll-behavior: contain; }
.menu__nav a { font-size: clamp(1.5rem, min(5.4vw, calc((100svh - 190px) / 13.2)), 5.6rem); }
@media (max-width: 899px) {
  .menu__nav a { font-size: clamp(1.4rem, min(7.8vw, calc((100svh - 150px) / 13.5)), 3.4rem); }
}
/* the full-screen menu also lists the service pages */
.menu__pages { display: grid; gap: 6px; margin-bottom: 10px; }
.menu__pages a { color: var(--color-text); font-weight: 600; }
.menu__pages a:hover, .menu__pages a:focus-visible { color: var(--color-accent); }

/* ---------- Home: keyword line inside the H1, same-day badge, links to pages ---------- */
.hero__title .hero__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 400; font-stretch: 100%; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; }
.sameday { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sameday svg { width: 16px; height: 16px; padding: 2px; color: var(--color-on-accent); background: var(--color-accent); border-radius: 50%; flex: none; }
.hero__aside .sameday { margin-top: -6px; }
.svc__more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--color-text-muted); font-size: 0.92rem; font-weight: 600; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.svc__more svg { width: 16px; height: 16px; }
.svc__more:hover, .svc__more:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }
.area__copy .svc__more { margin-top: -6px; }
.area__cities a { color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); }
.area__cities a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.reviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.reviews__leave { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 3px; }
.reviews__leave svg { width: 14px; height: 14px; color: var(--color-accent); }
.reviews__leave:hover { color: var(--color-accent); border-color: var(--color-accent); }
.reviews__head > .reviews__leave { justify-self: start; }

/* ---------- Offers: first-screen pill and the band under the proof grid ---------- */
.offer-pill { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; justify-self: start; padding: 8px 14px; border: 1px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-text); font-size: 0.92rem; line-height: 1.3; }
.offer-pill strong { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1.15rem; color: var(--color-accent); text-transform: uppercase; }
.offers { padding: 12vh var(--pad); background: var(--color-bg); }
.offers__head { display: grid; gap: 22px; margin-bottom: 5vh; }
.offers__title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: 0.9; letter-spacing: -0.02em; }
.offers__title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; color: var(--color-accent); letter-spacing: -0.01em; }
.offers__list { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.offer { display: grid; gap: 10px; align-content: start; padding: 26px 26px 28px; background: var(--color-surface); border: 1px solid var(--color-border); }
.offer__fig { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 0.95; color: var(--color-text); }
.offer h3 { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.offer p { color: var(--color-text-muted); line-height: 1.5; }
.offer--main { border: 1px solid var(--color-accent); background: radial-gradient(120% 90% at 0% 0%, var(--color-accent-soft), transparent 70%), var(--color-surface); }
.offer--main .offer__fig { font-size: clamp(2.6rem, 4.4vw, 4.4rem); color: var(--color-accent); }
.offer--main .btn { justify-self: start; margin-top: 6px; }
/* short desktop screens: the offer joins the first screen without pushing the headline */
@media (min-width: 900px) and (max-height: 780px) {
  .hero__aside { gap: 12px; padding-top: 1.4vh; }
  .offer-pill { padding: 5px 12px; font-size: 0.84rem; }
  .offer-pill strong { font-size: 1rem; }
  /* the same facts sit in the proof grid and the offers band right below */
  .hero__aside .sameday { display: none; }
}
@media (min-width: 900px) and (max-height: 720px) {
  .hero__rail { display: none; } /* licence and figure caption: repeated in the proof grid just below */
}
@media (max-width: 1100px) { .offers__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .offers__list { grid-template-columns: 1fr; } .offers { padding-block: 9vh; } }

/* ---------- Request form: ZIP beside the phone, customer type ---------- */
.field-row--zip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); }
.field__note { margin-top: -10px; font-size: 0.84rem; line-height: 1.45; }
.field__note:empty { display: none; }
.field__note[data-state="in"] { color: var(--color-success); }
.field__note[data-state="out"] { color: var(--color-text-muted); padding-left: 10px; border-left: 2px solid var(--color-accent); }
.seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg__legend { float: left; margin-right: 6px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--color-border-strong); font-size: 0.88rem; color: var(--color-text-muted); transition: background-color .2s, color .2s, border-color .2s; }
.seg__opt input:checked + span { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-text); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* the live map takes focus when unlocked: show it */
.area-map__live:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ---------- Inner pages: hero with breadcrumbs ---------- */
.page { background: var(--color-bg); }
.phero { padding: 128px var(--pad) 9vh; background: var(--color-bg); position: relative; overflow: hidden; }
.phero::before { content: ""; position: absolute; inset: -30% -10% auto 40%; height: 120%; background: radial-gradient(closest-side, var(--color-accent-soft), transparent); pointer-events: none; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--color-border-strong); }
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current] { color: var(--color-text); }
.phero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 5vw; align-items: center; }
.phero__copy { display: grid; gap: 26px; justify-items: start; }
.phero__title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 5.4rem); line-height: 0.92; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: manual; }
.page--post .phero__title { font-size: clamp(2.1rem, 4.4vw, 4.4rem); text-transform: none; line-height: 1; }
.phero__lede { max-width: 54ch; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.5; color: var(--color-text-muted); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.phero__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__media--product { display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 62%, var(--color-accent-soft), transparent), var(--color-surface-2); }
.phero__media--product img { width: 56%; height: 82%; object-fit: contain; }

/* ---------- Inner pages: sections ---------- */
.psec, .psteps, .prelated, .pmap, .pregions, .pblog, .ppost, .cband { padding: 12vh var(--pad); }
.psec { background: var(--color-surface); }
.psec--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 5vw; align-items: start; }
.prose { display: grid; gap: 18px; max-width: 68ch; }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.prose--article h2 { margin-top: 18px; font-size: clamp(1.3rem, 2vw, 1.8rem); text-transform: none; }
.prose p, .prose li { color: var(--color-text-muted); font-size: 1.06rem; line-height: 1.65; }
.prose .label { font-size: 0.72rem; line-height: normal; } /* a section label inside prose keeps the label size */
.prose strong { color: var(--color-text); }
.prose a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); }
.prose ul { display: grid; gap: 6px; padding-left: 1.2em; }
.psec__lists { display: grid; gap: 28px; }
.plist { padding: 26px 28px; background: var(--color-bg); border: 1px solid var(--color-border); }
.plist h3 { margin-bottom: 16px; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.plist ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plist li { position: relative; padding-left: 22px; color: var(--color-text); line-height: 1.4; }
.plist li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 2px; background: var(--color-accent); }

.psteps { display: grid; gap: 26px; background: var(--color-bg); }
.psteps__title, .prelated__title, .pmap__title, .pregions__title, .cband__title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: 0.9; letter-spacing: -0.02em; }
.psteps__title em, .prelated__title em, .pmap__title em, .pregions__title em, .cband__title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; color: var(--color-accent); letter-spacing: -0.01em; }
.psteps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 3vh 0 0; padding: 0; list-style: none; }
.psteps__list li { display: grid; gap: 12px; align-content: start; padding: 26px 0 0; border-top: 2px solid var(--color-border-strong); }
.psteps__list li .mono { color: var(--color-accent); font-size: 0.8rem; }
.psteps__list h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1.05; text-transform: uppercase; }
.psteps__list p { color: var(--color-text-muted); line-height: 1.55; }

.reviews--page { padding-top: 12vh; background: var(--color-surface); }
.reviews--page .review { background: var(--color-bg); }
.faq--page { background: var(--color-bg); }

.prelated { display: grid; gap: 26px; background: var(--color-surface); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 3vh 0 0; padding: 0; list-style: none; }
.pcard { position: relative; display: grid; gap: 10px; align-content: start; height: 100%; padding: 26px 26px 54px; background: var(--color-bg); border: 1px solid var(--color-border); transition: border-color .3s var(--ease), transform .4s var(--ease); }
.pcard .mono { color: var(--color-text-subtle); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pcard strong { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; color: var(--color-text); }
.pcard > span:last-of-type { color: var(--color-text-muted); line-height: 1.45; }
.pcard svg { position: absolute; right: 22px; bottom: 20px; width: 20px; height: 20px; color: var(--color-accent); transition: transform .3s var(--ease); }
.pcard:hover, .pcard:focus-visible { border-color: var(--color-accent); transform: translateY(-3px); }
.pcard:hover svg { transform: translateX(4px); }
.prelated__area { color: var(--color-text-muted); }
.prelated__area a { color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); }
.prelated__area a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* service-area map on inner pages: same live map, no schematic underneath */
.pmap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 5vw; align-items: center; background: var(--color-bg); }
.pmap__head { display: grid; gap: 22px; }
.pmap__head > p:last-child { color: var(--color-text-muted); line-height: 1.6; }
.pmap__head a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); }
.pmap--wide { grid-template-columns: 1fr; }
.pmap--wide .pmap__head { max-width: 760px; }
.area-map--page .area-map__placeholder { aspect-ratio: 975 / 680; background: repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, var(--color-border) 0 1px, transparent 1px 64px), var(--color-bg); }
.pmap--wide .area-map--page .area-map__placeholder { aspect-ratio: 16 / 8; }

.pregions { background: var(--color-surface); }
.pregions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 5vh; }
.pregion { padding: 26px 28px; background: var(--color-bg); border: 1px solid var(--color-border); }
.pregion__blurb { margin: 0 0 18px; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; }
.pregion h3 { margin-bottom: 18px; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.pregion ul { columns: 2; column-gap: 20px; margin: 0; padding: 0; list-style: none; }
.pregion li { padding: 6px 0; border-bottom: 1px solid var(--color-border); break-inside: avoid; color: var(--color-text-muted); }
.pregion a { color: var(--color-text); font-weight: 600; }
.pregion a:hover { color: var(--color-accent); }

/* ---------- Blog and articles ---------- */
.pblog { background: var(--color-surface); }
.pblog__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pblog__card { position: relative; display: grid; gap: 12px; align-content: start; height: 100%; padding: 28px 28px 58px; background: var(--color-bg); border: 1px solid var(--color-border); transition: border-color .3s var(--ease); }
.pblog__card time { color: var(--color-text-subtle); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pblog__card strong { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: var(--color-text); }
.pblog__card > span:not(.draft-tag) { color: var(--color-text-muted); line-height: 1.5; }
.pblog__card svg { position: absolute; right: 24px; bottom: 22px; width: 20px; height: 20px; color: var(--color-accent); }
.pblog__card:hover { border-color: var(--color-accent); }
.draft-tag { justify-self: start; padding: 4px 8px; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-accent); background: var(--color-status-fault); }
.ppost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 5vw; align-items: start; background: var(--color-surface); }
.draft-note { grid-column: 1 / -1; justify-self: start; padding: 10px 14px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); border-left: 3px solid var(--color-status-fault); background: color-mix(in srgb, var(--color-status-fault) 12%, transparent); }
.ppost__aside { position: sticky; top: 110px; display: grid; gap: 14px; }
.ppost__aside > .mono { color: var(--color-text-subtle); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.page--privacy .ppost { grid-template-columns: minmax(0, 1fr); }

/* ---------- Closing call to action ---------- */
.cband { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.cband__inner { display: grid; gap: 26px; justify-items: start; max-width: 980px; }
.cband__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .psteps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pregions__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .phero { padding-top: 96px; }
  .crumbs ol { margin-bottom: 26px; }
  .phero__grid, .psec--split, .pmap, .ppost { grid-template-columns: 1fr; gap: 40px; }
  .phero__media { aspect-ratio: 16 / 10; }
  .psec, .psteps, .prelated, .pmap, .pregions, .pblog, .ppost, .cband { padding-block: 9vh; }
  .ppost__aside { position: static; }
  .pregions__grid { grid-template-columns: 1fr; }
  .area-map--page .area-map__placeholder, .pmap--wide .area-map--page .area-map__placeholder { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
  .phero__title { font-size: min(2.6rem, 10.4vw); font-stretch: 100%; }
  .psteps__list { grid-template-columns: 1fr; }
  .field-row--zip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 10px; }
  .pregion ul { columns: 1; }
}

/* ---------- Service pages: symptoms, safe checks, what we look at, local conditions ---------- */
.psec__title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2rem, 4vw, 4.4rem); line-height: 0.92; letter-spacing: -0.02em; }
.psec__title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; color: var(--color-accent); letter-spacing: -0.01em; }
.psymptoms, .plook { display: grid; gap: 26px; padding: 12vh var(--pad); background: var(--color-bg); }
.psymptoms__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 3vh 0 0; padding: 0; list-style: none; }
.psymptom { display: grid; gap: 10px; align-content: start; padding: 24px 24px 26px; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent); }
.psymptom h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 104%; font-size: 1.12rem; line-height: 1.2; color: var(--color-text); }
.psymptom p { color: var(--color-text-muted); line-height: 1.55; }
.pchecks { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 5vw; align-items: start; padding: 12vh var(--pad); background: var(--color-surface); }
.pchecks__main { display: grid; gap: 26px; }
.pchecks__list { display: grid; gap: 12px; margin: 2vh 0 0; padding: 0; list-style: none; counter-reset: check; }
.pchecks__list li { counter-increment: check; position: relative; padding: 18px 20px 18px 64px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted); line-height: 1.55; }
.pchecks__list li::before { content: counter(check, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-accent); }
.pchecks__list strong { color: var(--color-text); }
.pchecks__warn { position: sticky; top: 110px; display: grid; gap: 14px; padding: 26px 28px; border: 1px solid color-mix(in srgb, var(--color-status-fault) 55%, transparent); background: color-mix(in srgb, var(--color-status-fault) 8%, var(--color-bg)); }
.pchecks__warn h3 { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-status-fault); }
.pchecks__warn p { color: var(--color-text); line-height: 1.6; }
.plook__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5vw; margin: 3vh 0 0; padding: 0; list-style: none; }
.plook__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding: 24px 0; border-top: 1px solid var(--color-border); }
.plook__list .mono { grid-row: span 2; color: var(--color-accent); font-size: 0.8rem; padding-top: 4px; }
.plook__list h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 104%; font-size: 1.15rem; line-height: 1.2; color: var(--color-text); }
.plook__list p { color: var(--color-text-muted); line-height: 1.55; }
.plocal .prose { max-width: 78ch; }
.prelated__note { max-width: 72ch; color: var(--color-text-muted); line-height: 1.6; }
.prelated__note a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); }
.prelated__sub { margin-top: 2vh; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.pcity-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pcity-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border-strong); color: var(--color-text); font-weight: 600; font-size: 0.92rem; transition: border-color .25s, color .25s; }
.pcity-links a:hover, .pcity-links a:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 899px) {
  .psymptoms, .plook, .pchecks { padding-block: 9vh; }
  .pchecks { grid-template-columns: 1fr; gap: 28px; }
  .pchecks__warn { position: static; }
  .plook__list { grid-template-columns: 1fr; }
}

/* ---------- Rendering work only where the visitor is ----------
   Sections below the last scroll-pinned scene (How it works) and the inner
   pages' lower sections skip layout and paint until they come near the
   viewport. That keeps the first paint fast and makes the web-font swap
   re-lay out only what is on screen. "auto" remembers each section's real
   size once it has been rendered. */
.why, .work, .reviews, .area, .faq, .cta, .footer,
.psec, .psteps, .reviews--page, .faq--page, .prelated, .pmap, .pregions, .pblog, .cband, .psymptoms, .pchecks, .plook {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}
.work { contain-intrinsic-size: auto 2200px; }
.footer { contain-intrinsic-size: auto 760px; }

/* ---------- Touch targets: at least 44×44 px on phones, with nothing changing on screen ----------
   An invisible ::after grows the hit area of small links and controls around their centre. */
@media (max-width: 899px) {
  :is(.nav__logo, .theme-toggle, .nav__phone, .nav__menu, .svc__more, .reviews__leave, .footer__top, .seg__opt, .rform__more summary,
      .crumbs a, .proof__list a, .area__cities a, .cta__contact a, .cta__info a, .rform__note a, .footer__col a, .footer__base a,
      .prelated__note a, .prelated__area a, .pmap__head a, .prose a) { position: relative; }
  .seg__opt input { inset: -4px 0; }
  :is(.nav__logo, .theme-toggle, .nav__phone, .nav__menu, .svc__more, .reviews__leave, .footer__top, .seg__opt, .rform__more summary,
      .crumbs a, .proof__list a, .area__cities a, .cta__contact a, .cta__info a, .rform__note a, .footer__col a, .footer__base a,
      .prelated__note a, .prelated__area a, .pmap__head a, .prose a)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}

/* ---------- Hero: parts A–D named while the unit is apart ----------
   Positions are set from the 3D every frame (transform only); everything
   stays inside the stage cell, so nothing can sit on the headline or buttons. */
.hero__tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; }
.hero__tags.is-shown { visibility: visible; }
.hero__tag-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__tag-lines line { stroke: var(--color-accent); stroke-width: 1; opacity: 0.55; }
.htag i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1px solid var(--color-accent); border-radius: 50%; background: var(--color-scrim); will-change: transform; }
.htag i::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--color-accent); }
.htag i em { display: none; }
.htag > span { position: absolute; left: 0; top: 0; padding: 7px 11px; white-space: nowrap; font-size: 0.64rem; color: var(--color-text-muted); background: var(--color-scrim); border: 1px solid var(--color-border); backdrop-filter: blur(6px); will-change: transform; transition: border-color .3s, color .3s; }
.htag b { color: var(--color-accent); margin-right: 9px; font-weight: 600; }
.htag.is-active > span { color: var(--color-text); border-color: var(--color-accent); }
.htag.is-active i { box-shadow: var(--glow); }
/* phones: letter dots on the model, the name in one line underneath */
.hero__tags.is-compact .hero__tag-lines, .hero__tags.is-compact .htag > span { display: none; }
.hero__tags.is-compact .htag i { display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.hero__tags.is-compact .htag i::after { display: none; }
.hero__tags.is-compact .htag i em { display: block; font: 600 0.6rem/1 var(--font-mono); font-style: normal; color: var(--color-accent); }
.hero__tags.is-compact .htag.is-active i { background: var(--color-accent); }
.hero__tags.is-compact .htag.is-active i em { color: var(--color-bg); }
.hero__partline { display: none; }
/* The recorded loop sits exactly over the poster (its first frame), with the same soft
   edges; 2 px inside, so the same picture never counts as a new, larger LCP element */
.hero__poster { object-fit: cover; }
.hero__video { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 70%, transparent); mask-composite: intersect; }
.hero__video.is-ready { opacity: 1; }
.hero.is-video .hero__poster { opacity: 0; }
/* pause / play: the loop runs for everyone, so it can always be stopped (WCAG 2.2.2) */
.hero__pause { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  color: var(--color-accent); background: var(--color-scrim); border: 1px solid var(--color-border); backdrop-filter: blur(6px); cursor: pointer; transition: border-color .2s, color .2s; }
.hero__pause:hover { border-color: var(--color-accent); }
.hero__pause:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.hero__pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero__play-icon, .hero__pause.is-paused .hero__pause-icon { display: none; }
.hero__pause.is-paused .hero__play-icon { display: block; }
@media (max-width: 899px) {
  .hero__pause { right: 0; bottom: 0; width: 44px; height: 44px; }
  .hero__partline { display: block; position: absolute; left: 0; right: 0; bottom: 2px; z-index: 2; margin: 0; padding: 0 50px; text-align: center; font-size: 0.64rem; line-height: 1.4; color: var(--color-text-muted); opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .hero__partline b { color: var(--color-accent); font-weight: 600; }
}
/* tablets: the stage is much wider than the phone recording, so poster and video keep
   its proportions, centred, and the soft edges apply to the picture itself */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__poster, .hero__video { left: 50%; right: auto; width: auto; aspect-ratio: 1080 / 885; transform: translateX(-50%); }
}

/* ---------- Finishing touches (every page) ---------- */
/* page to page: a soft crossfade; the header is carried over, so it never blinks */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced)::view-transition-group(*),
  html:not(.motion-forced)::view-transition-old(*),
  html:not(.motion-forced)::view-transition-new(*) { animation: none !important; }
}

/* scrollbar in the theme's colours: thin, quiet, accent on hover. Mouse devices
   only: on touch screens the system's overlay scrollbar takes no room, while a
   styled one would, and would shift the page as it appears */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-text-subtle) 45%, transparent) var(--color-bg); }
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text-subtle) 45%, transparent); border: 2px solid var(--color-bg); border-radius: 9px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
}

/* headings break into even lines; paragraphs avoid a lone last word */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

/* figures that change or line up: phone numbers, hours, stats, prices */
a[href^="tel:"], .tnum, .proof__fig, .offer__fig, .proof__call strong { font-variant-numeric: tabular-nums; }
[data-count] { display: inline-block; text-align: right; }

/* film grain over both themes: one small static SVG noise tile, above everything
   but too faint (4 %) to touch legibility, and it never takes a click */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media print { body::after { display: none; } }