/* Pressure washing: slate navy, safety yellow, a bold condensed italic.
   Structure lives in /t/_base/base.css; this is only the palette, the type
   and the CSS stand-in for the sprayer. */
:root {
  --bg: #0a0e14; --bg-rgb: 10, 14, 20; --bg-2: #111822;
  --ink: #f1f4f8; --ink-2: #d4dbe4; --muted: #8c97a6; --line: rgba(241, 244, 248, .12);
  --accent: #ffd23f; --accent-rgb: 255, 210, 63; --accent-hi: #ffe58a; --on-accent: #1d1600;
  --card-1: #141c27; --card-2: #0b1017; --video-dim: .45;
  --display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --display-case: uppercase; --display-weight: 700; --display-leading: .9; --display-tracking: .005em;
  --title-size: clamp(3.4rem, 10vw, 9rem);
  --serif: "Barlow Condensed", "Arial Narrow", sans-serif;
}
em { font-weight: 700; }
h3 { font-size: 1.7rem; letter-spacing: .01em; }
.steps span { font-size: 1.55rem; }

/* no WebGL: a diagonal jet of water */
html.no-webgl .hero__fallback {
  right: 10vw; top: 16vh; width: 12px; height: 62vh; border-radius: 8px;
  background: linear-gradient(180deg, #ffd23f 0 14%, rgba(214, 241, 255, .9) 14%, rgba(214, 241, 255, 0));
  transform: rotate(24deg); filter: blur(1px);
  box-shadow: 0 0 40px 10px rgba(214, 241, 255, .25);
}
@media (max-width: 760px) {
  html.no-webgl .hero__fallback { top: 70px; right: 45%; height: 28svh; }
}