/* Option 2: color-blocked "pure water" layer on top of site.css.
   Color rule: deep water bands carry the page, aqua wash sits between them,
   brand cyan gets one bright band (service area), pink stays the only action color. */

.v2 {
  --deep: #0a3346;
  --deep-2: #0d3d53;
  --abyss: #062231;
  --wash: #e6f5fa;
  --on-deep: #f2f8fb;
  --on-deep-2: #b9d3de;
  --on-deep-line: rgb(255 255 255 / .14);
  --brand-cyan: #06b0dd;
}
@media (prefers-color-scheme: dark) {
  .v2 {
    --deep: #0a2a3a;
    --deep-2: #0e3346;
    --abyss: #051a25;
    --wash: #0f2530;
    --on-deep-2: #a9c4d0;
  }
}

/* Deep sections share one treatment */
.v2 .hero--water,
.v2 .layers,
.v2 .estimate { background: var(--deep); color: var(--on-deep); }
.v2 .hero--water :is(h1, h2, h3),
.v2 .layers :is(h2, h3),
.v2 .estimate :is(h2, h3) { color: #fff; }

/* ---------- Hero ---------- */
.v2 .hero--water {
  position: relative;
  isolation: isolate;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(56px, 7vw, 96px);
  background:
    radial-gradient(48% 60% at 92% 8%, rgb(6 176 221 / .30), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgb(234 7 78 / .14), transparent 70%),
    var(--deep);
}
.v2 .hero__inner { grid-template-columns: 1.05fr .95fr; min-height: calc(100dvh - var(--nav-h) - 140px); }
.v2 .hero__sub { color: var(--on-deep-2); }
.v2 .rating-pill { background: rgb(255 255 255 / .08); border-color: var(--on-deep-line); color: var(--on-deep); }
.v2 .rating-pill strong { color: #fff; }

.btn--ghost-light { border-color: rgb(255 255 255 / .35); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; background: rgb(255 255 255 / .06); }

/* Window pane */
.pane { justify-self: center; width: min(100%, 440px); }
.pane__frame {
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, #ffffff, #e3ebef);
  box-shadow:
    inset 0 -2px 0 rgb(14 40 60 / .12),
    0 30px 60px -24px rgb(0 10 20 / .65),
    0 0 0 1px rgb(255 255 255 / .1);
}
.pane__glass {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: #3a4a3c;
  box-shadow: inset 0 0 0 2px rgb(14 40 60 / .25), inset 0 6px 14px rgb(0 0 0 / .18);
}
.pane__glass { container-type: inline-size; }
/* Business name sits on the clean glass, under the grime, so the squeegee uncovers it */
.pane__name {
  position: absolute; inset: auto 0 0 0; z-index: 0;
  display: grid; justify-items: center; gap: .35em;
  padding: 26% 6% 9%;
  margin: 0;
  background: linear-gradient(to top, rgb(6 34 49 / .62), rgb(6 34 49 / .28) 55%, transparent);
  color: #fff; text-align: center; line-height: 1;
  text-shadow: 0 2px 14px rgb(4 20 30 / .55);
}
.pane__name-big { font: 700 clamp(1.9rem, 13cqw, 3.4rem)/1 var(--display); letter-spacing: -.025em; }
.pane__name-small {
  display: flex; align-items: center; gap: .8em;
  font: 600 clamp(.72rem, 3.6cqw, .95rem)/1 var(--body); letter-spacing: .42em; text-transform: uppercase;
  padding-left: .42em;
}
.pane__name-small::before, .pane__name-small::after { content: ""; width: 1.8em; height: 1.5px; background: var(--pink); }
.pane__view, .pane__dirt, .pane__dirt img, .pane__haze, .pane__wet, .pane__glint {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.pane__view, .pane__dirt img { object-fit: cover; }
.pane__dirt { will-change: clip-path; }
.pane__dirt img { filter: blur(2.5px) saturate(.5) contrast(.82) brightness(1.04); transform: scale(1.03); }
.pane__haze {
  background:
    radial-gradient(70% 45% at 28% 22%, rgb(240 238 228 / .42), transparent 72%),
    radial-gradient(60% 40% at 78% 68%, rgb(226 220 204 / .36), transparent 72%),
    radial-gradient(30% 18% at 60% 40%, rgb(250 248 240 / .22), transparent 70%),
    repeating-linear-gradient(97deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgb(222 222 212 / .30), rgb(200 194 178 / .40));
}
.pane__wet {
  opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / .16) 45%, transparent 60%);
  transition: opacity .8s var(--ease);
}
.pane__glint {
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .38) 48%, rgb(255 255 255 / .1) 52%, transparent 60%);
  transform: translateX(-70%);
}
.pane__glint.is-on { animation: glint 1.4s var(--ease) forwards; }
@keyframes glint {
  0% { opacity: 0; transform: translateX(-70%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%); }
}
.squeegee {
  position: absolute; left: 0; top: 0;
  width: 120px; height: 140px;
  opacity: 0;
  transform-origin: 0 0;
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35));
  pointer-events: none;
  will-change: transform, opacity;
}
.pane__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; min-height: 40px; }
.pane__foot p { color: var(--on-deep-2); font-size: .9375rem; line-height: 1.4; }
.pane__replay {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--on-deep-line); background: rgb(255 255 255 / .06);
  color: var(--on-deep); font: 500 .875rem/1 var(--body); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pane__replay[hidden] { display: none; }
.pane__replay:hover { border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .1); }

/* Without JS or with reduced motion, the glass is simply clean */
html:not(.js) .pane__dirt, html:not(.js) .squeegee { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pane__dirt, .squeegee, .pane__replay { display: none !important; }
}

@media (max-width: 900px) {
  .v2 .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .pane { width: min(100%, 380px); }
}

/* ---------- Facts strip: aqua wash ---------- */
.v2 .facts { background: var(--wash); border-block: 0; }
.v2 .facts__list li + li { border-left-color: color-mix(in srgb, var(--cyan-ink) 22%, transparent); }

/* ---------- Window process: deep band ---------- */
.v2 .layers .section-head p,
.v2 .layer p { color: var(--on-deep-2); }
.v2 .layer h3 span { color: var(--brand-cyan); }
.v2 .layer img { background: var(--deep-2); }

/* ---------- Equipment: aqua wash ---------- */
.v2 .kit { background: var(--wash); border-block: 0; }

/* ---------- Service area: brand cyan band ---------- */
.v2 .area { background: var(--brand-cyan); color: #062231; }
.v2 .area h2 { color: #041a22; }
.v2 .marquee { border-color: rgb(4 26 34 / .18); }
.v2 .marquee__track span { color: rgb(4 26 34 / .55); }
.v2 .marquee__track span:nth-child(3n+1) { color: #041a22; }
.v2 .area__list { color: #06303f; }
@media (prefers-color-scheme: dark) {
  .v2 .area { background: #0b4a5f; color: var(--on-deep); }
  .v2 .area h2, .v2 .marquee__track span:nth-child(3n+1) { color: #fff; }
  .v2 .marquee { border-color: var(--on-deep-line); }
  .v2 .marquee__track span { color: rgb(255 255 255 / .5); }
  .v2 .area__list { color: var(--on-deep-2); }
}

/* ---------- Estimate: deep band, form stays a light card ---------- */
.v2 .estimate {
  background:
    radial-gradient(50% 60% at 100% 0%, rgb(6 176 221 / .18), transparent 70%),
    var(--deep);
}
.v2 .estimate__card > p, .v2 .contact__plain, .v2 .contact span:not(.contact__plain) { color: var(--on-deep-2); }
.v2 .contact a { color: #fff; }
.v2 .contact a:hover { color: #ff8fb0; }
.v2 .contact i { color: var(--brand-cyan); }
.v2 .estimate__logo { background: #fff; padding: 12px 16px; border-radius: var(--r-sm); width: 200px; }
.v2 .form { border-color: transparent; }

/* ---------- Footer: wave sits on the deep estimate band ---------- */
.v2 .footer__wave { background: var(--deep); }
.v2 .footer__wave-blue { fill: var(--abyss); }
.v2 .footer__body { background: var(--abyss); color: var(--on-deep-2); }
.v2 .footer__name, .v2 .footer__links a { color: #fff; }
.v2 .footer__legal { border-top-color: var(--on-deep-line); }
.footer__concept { display: block; margin-top: 6px; opacity: .8; }
.footer__concept a { color: inherit; }

/* Nav keeps a light bar over the deep hero */
.v2 .nav { background: color-mix(in srgb, var(--surface) 92%, transparent); }

/* Mobile bottom bar: the call button picks up the deep navy */
@media (max-width: 640px) and (prefers-color-scheme: light) {
  .v2 .mbar__call { border-color: var(--deep); color: var(--deep); }
}