/* =============================================================
   Basement waterproofing page (services/basement-waterproofing.html)
   Page-specific styles only. Loaded after ../css/main.css.
   "The diagram" layout: compact text hero, the cross-section
   drawing as the hero visual, offerings as a legend keyed to it.
   ============================================================= */

/* ---------- Hero ----------
   Was a compact text-only hero (.wp-hero) with the cross-section inside it.
   The hero is now the shared .hero + .hero-service overlay from
   css/main.css, and the diagram gets its own band directly below. */

/* The only 1366px-wide waterproofing photo we have ships with a heavy blue
   cast baked into the JPEG, which made this hero read far bluer than the
   other three. Pull the saturation out and let the shared navy scrim do the
   colouring, same as every other service hero. */
.hero-wp .hero-media img { filter: saturate(.22); }

/* ---------- Cross-section band ----------
   Still the first thing under the hero, so it keeps leading the page. */
.wp-diagram-band { padding-block: 56px; }
@media (min-width: 960px) { .wp-diagram-band { padding-block: 88px; } }
.wp-diagram-band .wp-diagram { max-width: 960px; margin-inline: auto; }

/* ---------- Offerings legend (keyed to the diagram) ---------- */
/* Sits right under the diagram, so the section drops its top padding. */
.wp-offer { padding-top: 0; }
.wp-offer .section-head,
.wp-legend { max-width: 720px; margin-inline: auto; }
.wp-legend li { display: flex; align-items: flex-start; gap: 1.25rem; padding-block: 1.375rem; }
.wp-legend li + li { border-top: 1px solid var(--line); }
.wp-key {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: .5rem;
  background: var(--gold);
}
.wp-legend h3 { font-size: 1.125rem; }
.wp-legend p { margin-top: .25rem; font-size: .9875rem; }

/* ---------- Trust facts on stone (hosts the ambient draft layer) ---------- */
.wp-trust { position: relative; }
.wp-trust .container { position: relative; z-index: 1; }

/* Inline checks row (no cards) */
.check-row { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; margin-top: 2.5rem; }
.check-item { display: flex; align-items: flex-start; gap: .75rem; max-width: 300px; }
.check-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-700); margin-top: .25rem; }
.check-item strong { display: block; font-weight: 600; color: var(--ink); }
.check-item p { margin-top: .125rem; font-size: .9375rem; }

/* --- waterproofing diagram --- */
/* Copied unchanged from css/pages/basement.css when this page got its
   own stylesheet. All rules are scoped to .wp-diagram. */

.wp-diagram { max-width: 860px; margin: 0 auto 3rem; }
.wp-diagram svg { display: block; width: 100%; height: auto; }
.wp-diagram text { font-family: var(--font-stack); }

/* Draw-in on scroll (shared bespoke pattern). Guarded by html.js so the
   full drawing stays visible when JavaScript is unavailable. */
html.js .wp-diagram .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .wp-diagram.in-view .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .15s; }
/* Stagger: grade draws first (.15s base), then each group in build order. */
html.js .wp-diagram.in-view .g-house .draw { transition-delay: .27s; }
html.js .wp-diagram.in-view .g-structure .draw { transition-delay: .39s; }
html.js .wp-diagram.in-view .g-interior .draw { transition-delay: .51s; }
html.js .wp-diagram.in-view .g-barrier .draw { transition-delay: .63s; }
html.js .wp-diagram.in-view .g-crack .draw { transition-delay: .75s; }

/* Labels, leaders, perforations, and water dots fade in after the line work. */
html.js .wp-diagram .wp-fade { opacity: 0; }
html.js .wp-diagram.in-view .wp-fade { opacity: 1; transition: opacity .6s ease 1s; }

/* Groundwater dashes drift along their paths toward the footing drain. */
@media (prefers-reduced-motion: no-preference) {
  .wp-diagram .wp-flow { animation: wp-flow-drift 3s linear infinite; }
}
@keyframes wp-flow-drift { to { stroke-dashoffset: -8; } }

@media (prefers-reduced-motion: reduce) {
  html.js .wp-diagram .draw { stroke-dashoffset: 0; transition: none; }
  html.js .wp-diagram .wp-fade { opacity: 1; transition: none; }
}

/* Small screens: keep the 11px labels legible by letting the figure
   scroll sideways instead of shrinking below 640px of drawing width. */
@media (max-width: 640px) {
  .wp-diagram { overflow-x: auto; }
  .wp-diagram svg { min-width: 640px; }
}