/* Original Softwash demo. Layout and components follow the HP Exterior template (Jahforge);
   the client's logo red replaces the template's water blue, charcoal replaces its navy. */
:root {
  --concrete: #f1efe9;
  --concrete-2: #e7e4db;
  --ink: #16181b;
  --night: #1c1d21;
  --red: #9e1c21;      /* client logo red: buttons, labels, links on light */
  --red-hi: #ff6b6b;   /* same red lifted for dark bands and the hero (6.2:1 on --night) */
  --slate: #5c6167;
  --muted-on-dark: #b9bcc3;
  --line-strong: rgba(22, 24, 27, .25);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --stripes: repeating-linear-gradient(-45deg, var(--night) 0 8px, var(--red) 8px 16px);
  --nav-h: 0px;        /* no sticky nav, like the template */
  --gutter: 26px;
  --accent: var(--red-hi);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--concrete); color: var(--ink); font-family: 'Public Sans', sans-serif; font-size: 16.5px; line-height: 1.65; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.util :focus-visible, .hero :focus-visible, .quote-sect :focus-visible, .footer :focus-visible, .callbar :focus-visible, .demo-ribbon :focus-visible, .plan-note :focus-visible, .closing :focus-visible { outline-color: var(--red-hi); }
.quote-sect .qform :focus-visible { outline-color: var(--red); }
h1, h2, h3 { font-family: 'Oswald', sans-serif; font-weight: 600; margin: 0; line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: 12px; top: 12px; z-index: 10000; padding: .65rem 1rem; background: #fff; color: var(--ink); font-weight: 600; transform: translateY(-300%); transition: transform .18s ease; }
.skip-link:focus { transform: none; }
main:focus, section:focus { outline: none; }
.text-link { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---- Demo ribbon + utility bar ---- */
.demo-ribbon { background: var(--night); color: var(--muted-on-dark); text-align: center; font-size: .78rem; padding: 8px 16px; }
.demo-ribbon a { text-decoration: underline; color: #fff; }
.util { background: var(--night); color: #c9ccd2; border-top: 1px solid rgba(255, 255, 255, .12); }
.util .container { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 9px; padding-bottom: 9px; font-size: .82rem; font-weight: 500; }
.util .left span + span::before { content: "·"; margin: 0 10px; color: var(--red-hi); }
.util__phone { display: flex; align-items: center; gap: 14px; }
.util .phone { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.util .phone b { color: var(--red-hi); }
.util .text-link { color: #fff; }
@media (max-width: 720px) { .util .left span:nth-child(2), .util .left span:nth-child(3) { display: none; } }
@media (max-width: 420px) { .util .left { display: none; } .util .container { justify-content: center; } }

/* ---- Hazard-stripe buttons ---- */
.btn-stripe {
  position: relative; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--red); color: #fff;
  padding: .95rem 1.6rem .95rem 1.35rem;
  border: 2px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-stripe::after {
  content: ""; width: 16px; align-self: stretch; margin: -.95rem -1.6rem -.95rem 0;
  background: var(--stripes); background-size: 23px 23px; border-left: 2px solid var(--ink);
  transition: background-position .5s var(--ease);
}
.btn-stripe:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn-stripe:hover::after { background-position: 23px 0; }
.btn-stripe:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-stripe.ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 rgba(255, 255, 255, .35); }
.btn-stripe.ghost:hover { box-shadow: 7px 7px 0 rgba(255, 255, 255, .35); }
.btn-stripe.ghost::after { border-left-color: #fff; }
.btn-stripe.dark { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 4px 4px 0 var(--red); }
.btn-stripe.dark::after { background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, var(--red-hi) 8px 16px); background-size: 23px 23px; border-left-color: #fff; }

/* ---- Hero: toolkit scroll-scrub structure ---- */
.hero { position: relative; height: 300vh; --p: 0; background: var(--night); }
.hero__sticky {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  overflow: hidden; isolation: isolate; display: flex; align-items: center;
}
.hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); }
/* brightness + saturate only: contrast() amplifies compression noise */
.hero__still, .hero__video { filter: brightness(.6) saturate(.72); }
.hero__still { z-index: -3; }
.hero__video { z-index: -2; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 58%, rgba(12, 13, 15, .55) 0%, rgba(12, 13, 15, 0) 100%),
    linear-gradient(180deg, rgba(12, 13, 15, .55) 0%, rgba(12, 13, 15, 0) 26%),
    linear-gradient(0deg, rgba(12, 13, 15, .7) 0%, rgba(12, 13, 15, 0) 40%);
}
/* Template's floating badge-logo, centered over the film */
.hero-brand { position: absolute; top: clamp(14px, 3vh, 30px); left: 0; right: 0; z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.hero-brand img { height: clamp(70px, 14vh, 128px); width: auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6)); }

.hero__inner { position: relative; z-index: 1; width: 100%; max-width: 860px; margin: 0 auto; text-align: center; color: #fff;
  padding-top: calc(clamp(70px, 14vh, 128px) + clamp(24px, 5vh, 52px)); padding-bottom: 96px; }
.creds { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.creds span { display: inline-flex; align-items: center; gap: 9px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: #fff; background: rgba(12, 13, 15, .55); border: 1px solid rgba(255, 255, 255, .3); padding: 7px 14px; }
.creds b { color: var(--red-hi); font-size: .95rem; }
.hero h1 { margin-top: clamp(14px, 3vh, 26px); font-size: clamp(2.3rem, min(5.6vw, 8.6vh), 4.5rem); color: #fff; }
.hero h1 em { display: block; font-style: normal; color: #ff8a8a; }
.hero__lede { margin: clamp(12px, 2.4vh, 18px) auto 0; max-width: 560px; font-size: 1.1rem; color: #e6e7ea; font-weight: 500; }
.hero__actions { margin-top: clamp(18px, 3.6vh, 32px); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.hero__call { margin: clamp(14px, 2.6vh, 22px) 0 0; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: .02em; }
.hero__call .text-link { font-family: 'Public Sans', sans-serif; font-size: 1rem; font-weight: 600; margin-left: 10px; color: #fff; }
.hero .creds span, .hero h1, .hero__lede, .hero__call, .hero__swap p { text-shadow: 0 0 2px rgba(12, 13, 15, .85), 0 1px 6px rgba(12, 13, 15, .7), 0 0 22px rgba(12, 13, 15, .5); }
/* The roof sits behind the copy: the chips and lede fade out early in the scrub so the wash reads */
.creds, .hero__lede { opacity: clamp(0, calc(1 - var(--p) * 5), 1); }
.hero__swap { display: grid; margin-top: clamp(10px, 2vh, 18px); font-size: .95rem; color: #e6e7ea; }
.hero__swap > p { grid-area: 1 / 1; margin: 0; transition: opacity .5s ease, transform .5s ease; }
.hero__payoff { opacity: 0; transform: translateY(8px); font-weight: 600; color: #fff; }
.hero.is-done .hero__teaser { opacity: 0; }
.hero.is-done .hero__payoff { opacity: 1; transform: none; }
.hero__hint { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 13px; color: #fff; transition: opacity .4s ease; }
.hero__bar { display: block; width: 120px; height: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.hero__bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p)); }
.hero.is-near-end .hero__hint { opacity: 0; }
.hero__toggle { position: absolute; right: var(--gutter); bottom: 30px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(12, 13, 15, .6); color: #fff; cursor: pointer; }
.hero__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hero__toggle .i-play, .hero__toggle[aria-pressed="true"] .i-pause { display: none; }
.hero__toggle[aria-pressed="true"] .i-play { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero.is-static { height: auto; }
.hero.is-static .hero__sticky { position: relative; min-height: 92svh; height: auto; }
.hero.is-static .hero__video, .hero.is-static .hero__hint, .hero.is-static .hero__toggle, .hero.is-static .hero__swap { display: none; }
/* Short laptop windows (1167×552): drop the chips first, then the lede */
@media (max-height: 760px) { .creds { display: none; } }
@media (max-height: 700px) { .hero__hint { display: none; } .hero__inner { padding-bottom: 24px; } }
@media (max-height: 560px) { .hero__lede { display: none; } }
/* Phones: short copy so the house stays visible under the text */
@media (max-width: 760px) {
  .hero__lede, .creds { display: none; }
  .hero__actions { flex-wrap: nowrap; gap: 12px; }
  .hero__actions .btn-stripe { font-size: .82rem; padding: .85rem 1.25rem .85rem 1rem; }
  .hero__actions .btn-stripe::after { margin: -.85rem -1.25rem -.85rem 0; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .hero__call .text-link { display: block; margin: 6px 0 0; }
}
@media (max-width: 380px) { .hero__actions .btn-stripe.ghost { display: none; } }
/* The phone call bar covers the bottom 58px: lift the hint and toggle above it */
@media (max-width: 820px) {
  .hero__hint { bottom: 82px; }
  .hero__toggle { bottom: 76px; }
  .hero__inner { padding-bottom: 150px; }
}

/* ---- Sections ---- */
.sect { padding: 100px 0; }
.sect-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.kick { display: inline-block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--red); padding: 4px 11px; }
.sect-head h2 { margin-top: 18px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.sect-head p { margin-top: 14px; color: var(--slate); font-size: 1.02rem; }
@media (max-width: 640px) { .sect { padding: 72px 0; } .sect-head { margin-bottom: 40px; } }

/* ---- Services ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.svc { background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--concrete-2); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.svc:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--red); }
.svc .ph { height: 210px; overflow: hidden; border-bottom: 2px solid var(--ink); }
.svc .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc:hover .ph img { transform: scale(1.05); }
.svc .body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.svc h3 { font-size: 1.35rem; }
.svc .blurb { margin: 14px 0 0; color: var(--slate); font-size: .93rem; }
.svc .blurb b { color: var(--ink); }
.svc .learn { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: none; border: none; border-bottom: 3px solid var(--red); padding: 0 0 3px; cursor: pointer; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.svc .learn .chev { transition: transform .35s var(--ease); font-size: .75rem; }
.svc .learn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.svc .more { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.svc .more-inner { padding-top: 18px; }
.svc .more h4 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; }
.svc .more ul { list-style: none; margin: 0; padding: 0; }
.svc .more ul.cols2 { columns: 2; column-gap: 18px; }
.svc .more li { font-size: .9rem; font-weight: 500; padding: 4px 0; display: flex; gap: 9px; break-inside: avoid; }
.svc .more li::before { content: "→"; color: var(--red); font-weight: 700; }
.svc .more .note { margin: 14px 0 0; font-size: .82rem; color: var(--slate); font-style: italic; border-left: 3px solid var(--red); padding-left: 10px; }
.svc .go { margin-top: 22px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: .88rem; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--red); align-self: flex-start; padding-bottom: 2px; transition: gap .25s; }
.svc .go:hover { gap: 14px; }

/* Dark callout band */
.plan-note { margin-top: 40px; background: var(--night); color: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--red); padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.plan-note h3 { font-size: 1.35rem; }
.plan-note h3 em { font-style: normal; color: var(--red-hi); }
.plan-note p { margin: 8px 0 0; color: var(--muted-on-dark); font-size: .95rem; max-width: 560px; }

/* ---- How it works ---- */
.steps-sect { padding-top: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 4px solid var(--ink); padding-top: 22px; }
.step .num { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 3rem; line-height: 1; color: var(--red); }
.step h3 { margin-top: 10px; font-size: 1.3rem; }
.step p { margin: 10px 0 0; color: var(--slate); }

/* ---- Before / after slider ---- */
.ba { position: relative; aspect-ratio: 600 / 280; max-width: 980px; margin: 0 auto 40px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--red); overflow: hidden; background: var(--night); --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--red); color: #fff; border: 2px solid var(--ink); font-size: .7rem; padding: 8px 10px; white-space: nowrap; letter-spacing: .1em; }
.ba__label { position: absolute; bottom: 14px; background: var(--ink); color: #fff; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; pointer-events: none; }
.ba__label--l { left: 14px; }
.ba__label--r { right: 14px; background: var(--red); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) { outline: 3px solid var(--red); outline-offset: 4px; }

/* Job tiles: before | after pairs with the template's accent tag */
.tease { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .tease { grid-template-columns: 1fr; } }
.tile { margin: 0; height: 230px; overflow: hidden; border: 2px solid var(--ink); position: relative; background: var(--night); }
.tile .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile .tag { position: absolute; left: 0; bottom: 14px; background: var(--red); color: #fff; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border: 2px solid var(--ink); border-left: none; }
.tease-note { text-align: center; color: var(--slate); font-size: .85rem; margin: 16px 0 0; }
.tease-cta { text-align: center; margin-top: 44px; }

/* ---- Reviews ---- */
.reviews-sect { background: var(--concrete-2); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rev-grid { grid-template-columns: 1fr; } }
.rev { margin: 0; background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 26px; display: flex; flex-direction: column; }
.rev .stars { color: var(--red); letter-spacing: .15em; font-size: 1.05rem; }
.rev blockquote { margin: 12px 0 0; font-size: .95rem; flex-grow: 1; }
.rev figcaption { margin-top: 16px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }

/* ---- Quote form ---- */
.quote-sect { background: var(--night); color: #fff; border-top: 4px solid var(--red); }
.quote-sect .sect-head p { color: var(--muted-on-dark); }
.form-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; gap: 40px; } }
.qform { background: #fff; color: var(--ink); border: 2px solid var(--ink); padding: 36px; box-shadow: 8px 8px 0 var(--red); }
@media (max-width: 560px) { .qform { padding: 24px 20px; } }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
.field { margin-top: 18px; }
.qform .f-row:first-child .field { margin-top: 0; }
@media (max-width: 560px) { .qform .f-row:first-child .field + .field { margin-top: 18px; } }
.field label { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-bottom: 7px; }
.field .opt { text-transform: none; letter-spacing: 0; font-family: 'Public Sans', sans-serif; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; background: var(--concrete); color: var(--ink); border: 2px solid var(--line-strong); border-radius: 0; padding: 12px 13px; font-family: 'Public Sans', sans-serif; font-size: 1rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: #fff; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qform .btn-stripe { width: 100%; justify-content: center; margin-top: 24px; }
.form-note { text-align: center; font-size: .8rem; color: var(--slate); margin: 12px 0 0; }
.form-sent { display: none; margin: 16px 0 0; padding: 14px 16px; border: 2px solid var(--red); background: rgba(158, 28, 33, .07); font-size: .92rem; font-weight: 500; }
.form-sent.is-visible { display: block; }
.reach .line { display: flex; justify-content: space-between; gap: 14px; padding: 16px 2px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: .95rem; }
.reach .line span { color: var(--muted-on-dark); }
.reach .line b { font-weight: 600; text-align: right; }
.reach .line a { text-decoration: underline; text-underline-offset: 3px; }
.reach .big-phone { margin: 28px 0 0; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.4rem); color: var(--red-hi); letter-spacing: .02em; line-height: 1.2; }
.reach .big-phone small { display: block; font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: .85rem; color: var(--muted-on-dark); letter-spacing: 0; margin-bottom: 4px; }
.reach-text { margin: 8px 0 0; }

/* ---- About (template's owner block) ---- */
.owner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .owner { grid-template-columns: 1fr; gap: 36px; } }
.owner-photo { background: var(--concrete-2); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--red); padding: 30px 20px; display: flex; align-items: center; justify-content: center; }
.owner-photo img { width: 100%; max-width: 520px; }
.owner-copy h2 { margin-top: 18px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.owner-copy p { color: var(--slate); margin: 16px 0 0; }
.owner-copy p:first-of-type { margin-top: 22px; }
.owner-copy .love { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--red); font-size: 1.15rem; }
.owner-copy .btn-stripe { margin-top: 28px; }
.prep { margin-top: 64px; border: 2px solid var(--ink); background: #fff; padding: 30px 34px; }
.prep h3 { font-size: 1.3rem; }
.prep ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
@media (max-width: 720px) { .prep ul { grid-template-columns: 1fr; } .prep { padding: 24px 20px; } }
.prep li { display: flex; gap: 10px; }
.prep li::before { content: "✓"; color: var(--red); font-weight: 700; }

/* ---- Service area + FAQ ---- */
.area-sect { background: var(--concrete-2); }
.area-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .area-grid { grid-template-columns: 1fr; } }
.area-grid h2 { margin-top: 18px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.area-sub { color: var(--slate); margin: 14px 0 0; }
.towns { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { background: #fff; border: 2px solid var(--ink); padding: 5px 12px; font-weight: 600; font-size: .9rem; }
.faq details { border-bottom: 2px solid var(--ink); }
.faq h2 + details { margin-top: 20px; border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 34px 16px 0; position: relative; font-weight: 700; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-family: 'Oswald', sans-serif; font-size: 1.5rem; color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--slate); }

/* ---- Closing CTA ---- */
.closing { background: var(--night); color: #fff; padding: 80px 0; border-top: 4px solid var(--red); }
.closing__inner { text-align: center; }
.closing h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.closing h2 em { font-style: normal; color: var(--red-hi); }
.closing__actions { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; }
.closing__phone { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2rem); color: var(--red-hi); }

/* ---- Footer ---- */
.footer { background: #121316; color: var(--muted-on-dark); padding: 46px 0 28px; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo { width: 220px; }
.footer p { margin: 10px 0 0; }
.footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__phone { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.5rem; text-decoration: none !important; color: var(--red-hi) !important; }
.footer__base { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; }

/* ---- Sticky phone call bar ---- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; grid-template-columns: 1fr 1fr 1.2fr; border-top: 2px solid var(--ink); }
@media (max-width: 820px) { .callbar { display: grid; } body { padding-bottom: 58px; } }
.callbar a { display: flex; align-items: center; justify-content: center; padding: 15px 8px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.callbar .call { background: var(--night); color: #fff; }
.callbar .text { background: #2a2b30; color: #fff; border-left: 1px solid rgba(255, 255, 255, .15); }
.callbar .quote-link { background: var(--red); color: #fff; }

/* ---- Scroll-in ---- */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js .rise.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}