/* Hydro design system: canvas, glass surfaces, hairlines, mist, grain, the
   logo wash, and the reveal animations. Lifted out of index.html so /estimate
   can render the same quote form against the same surfaces instead of carrying
   a second copy that drifts. Loaded BEFORE assets/css/home.css on both pages --
   the Tailwind build has to win the cascade, same as when this was inline. */
html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  background: #182636;
  color: #eef2f8;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Cinzel', serif; letter-spacing: 0.02em; }
.font-label { font-family: 'Cabin', sans-serif; letter-spacing: 0.06em; }

/* Water-lit canvas — luminous cool bloom, mid-slate base (no more near-black) */
.bg-hydro {
  background:
    radial-gradient(1400px 820px at 18% -10%, rgba(165, 205, 245, 0.40), transparent 62%),
    radial-gradient(1100px 720px at 93% 16%, rgba(190, 220, 250, 0.32), transparent 60%),
    radial-gradient(1200px 900px at 60% 110%, rgba(120, 165, 215, 0.32), transparent 65%),
    linear-gradient(180deg, #1d2d41 0%, #223349 42%, #172535 100%);
}

/* Alt panel — even lighter, for lifted sections */
.bg-panel {
  background:
    radial-gradient(1200px 700px at 80% 0%, rgba(200,225,250,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
}

/* Elevated glass cards — rim-lit, deep shadow, smooth spring */
.card-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 18px 46px -14px rgba(0,0,0,0.5),
    0 2px 8px rgba(0,0,0,0.22);
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .4s ease, box-shadow .4s ease;
}
.card-glass:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 30px 70px -14px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.26),
    0 0 60px -10px rgba(160,200,240,0.32);
}

.hairline { border-color: rgba(210, 230, 255, 0.18); }
.hairline-2 { border-color: rgba(210, 230, 255, 0.32); }
.text-steel { color: #cfdcee; }
.text-slate-soft { color: #9dadc6; }

.grain::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.divider-h {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,220,255,0.35), transparent);
}

/* Polished-steel CTA — highlight + inner shadow + soft glow + shine sweep */
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #e8efF8 48%, #c8d4e4 100%);
  color: #121b2a;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(80,100,130,0.25),
    0 10px 28px -10px rgba(200,220,240,0.5),
    0 2px 6px rgba(0,0,0,0.2);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, filter .3s ease;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0 auto 0 -55%; width: 45%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .8s cubic-bezier(.16,1,.3,1), inset .8s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(80,100,130,0.25),
    0 18px 40px -10px rgba(210,228,245,0.6),
    0 4px 10px rgba(0,0,0,0.2);
}
.btn-primary:hover::after { inset: 0 -55% 0 auto; }

.btn-ghost {
  border: 1px solid rgba(210,230,255,0.32);
  color: #eef2f8;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .3s ease, border .3s ease, box-shadow .3s ease;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(210,230,255,0.11);
  border-color: rgba(210,230,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 28px -10px rgba(160,200,240,0.28);
}

.nav-blur { backdrop-filter: saturate(150%) blur(16px); background: rgba(24, 38, 54, 0.78); }

/* Logo glow halo */
.logo-glow { position: relative; }
.logo-glow::before {
  content: '';
  position: absolute; inset: -10px; border-radius: 16px;
  background: radial-gradient(circle, rgba(170,210,245,0.5), transparent 70%);
  filter: blur(14px); pointer-events: none; z-index: -1;
}

/* Logo wash (Ross, 2026-09-08). After the hero has painted, a sheet of water
   runs down the header badge -- the part under it refracts through the
   #lw-refract displacement filter, which also wobbles the sheet's edges --
   and leaves lens-like beads on the face. Then the badge shakes the water
   off (a quick, decaying twist, like a dog): the beads fly outward, drips
   and flung droplets leave the rim, and one glint crosses the clean face.
   2.35s, then it is just the logo again. Replays every 30s while the tab is
   visible, and on hover/tap. Everything is clipped to the circle. The JS
   never starts it under prefers-reduced-motion.
   --s is the rendered badge size (h-16, sm:h-20); every measurement is a
   fraction of it so the same numbers work at both sizes. */
.lw { --s: 64px; --badge: url(/assets/images/spw-badge-240.png); position: relative; width: var(--s); height: var(--s);
      filter: drop-shadow(0 2px 12px rgba(200,225,250,0.55)) drop-shadow(0 0 1px rgba(255,255,255,0.4)); }
@media (min-width: 640px) { .lw { --s: 80px; } }
.lw-c { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; isolation: isolate; transform: translateZ(0); transform-origin: 50% 50%; }
.lw img { display: block; width: var(--s); height: var(--s); pointer-events: none; user-select: none; }
.lw-base { position: relative; }
.lw-sheet { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--s) * .5); overflow: hidden; visibility: hidden; pointer-events: none; filter: url(#lw-refract); }
.lw-sheet img { position: absolute; left: 0; top: 0; filter: brightness(1.14) saturate(1.08); }
.lw-sheet::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.42) 0, rgba(255,255,255,.10) 12%, rgba(180,215,250,.12) 50%, rgba(255,255,255,.10) 86%, rgba(255,255,255,.48) 100%); }
.lw-glint { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.62) 50%, rgba(255,255,255,0)); transform: skewX(-20deg); }
/* beads: a tiny lens -- the badge underneath, magnified 1.25x -- with a bright
   top-left highlight and a dark lower edge */
.lw-bead { position: absolute; left: calc(var(--s) * var(--fx)); top: calc(var(--s) * var(--fy)); width: calc(var(--s) * var(--w)); height: calc(var(--s) * var(--w) * 1.18); opacity: 0; pointer-events: none;
  border-radius: 50% / 46% 46% 54% 54%;
  background-image: var(--badge); background-repeat: no-repeat; background-size: calc(var(--s) * 1.25) calc(var(--s) * 1.25);
  background-position: calc(var(--s) * var(--w) / 2 - 1.25 * (var(--s) * var(--fx) + var(--s) * var(--w) / 2)) calc(var(--s) * var(--w) * 1.18 / 2 - 1.25 * (var(--s) * var(--fy) + var(--s) * var(--w) * 1.18 / 2));
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28), inset 1px 1px 1.5px rgba(255,255,255,.7), inset -1px -1.5px 2px rgba(0,10,30,.55), 0 1px 1.5px rgba(0,0,0,.35); }
.lw-bead::after { content: ''; position: absolute; left: 24%; top: 16%; width: 26%; height: 20%; border-radius: 50%; background: rgba(255,255,255,.85); }
/* drips: bead up on the bottom rim, stretch, let go, fall a short way, vanish */
.lw-drip { position: absolute; left: calc(var(--s) * var(--fx)); bottom: calc(var(--s) * var(--by)); width: calc(var(--s) * .075); height: calc(var(--s) * .075); opacity: 0; pointer-events: none; transform-origin: 50% 0; }
.lw-drip::before { content: ''; position: absolute; inset: 0; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background: radial-gradient(circle at 40% 40%, rgba(215,235,252,.62), rgba(150,190,230,.42) 55%, rgba(110,150,200,.34));
  box-shadow: inset .5px .5px 1px rgba(255,255,255,.8), inset -1px -1px 2px rgba(5,25,55,.5), 0 1px 2px rgba(0,0,0,.4); }
.lw-drip::after { content: ''; position: absolute; left: 30%; top: 42%; width: 22%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.9); }
/* droplets flung off the rim by the shake */
.lw-fling { position: absolute; left: calc(var(--s) * var(--fx)); top: calc(var(--s) * var(--fy)); width: calc(var(--s) * .055); height: calc(var(--s) * .055); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(190,220,250,.55) 45%, rgba(140,180,225,.3) 70%, transparent 72%); box-shadow: 0 1px 1.5px rgba(0,0,0,.3); }
@keyframes lwSheet { from { transform: translateY(calc(var(--s) * -.55)); } to { transform: translateY(calc(var(--s) * 1.05)); } }
@keyframes lwRef   { from { transform: translateY(calc(var(--s) * .55)); }  to { transform: translateY(calc(var(--s) * -1.05)); } }
@keyframes lwGlint { 0% { transform: skewX(-20deg) translateX(0); opacity: 0; } 18% { opacity: .95; } 100% { transform: skewX(-20deg) translateX(calc(var(--s) * 1.9)); opacity: 0; } }
@keyframes lwBeadIn  { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes lwBeadOff { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--s) * var(--dx)), calc(var(--s) * var(--dy))) scale(.6); } }
@keyframes lwDrip  { 0% { opacity: 0; transform: translateY(0) scale(.35); } 28% { opacity: 1; transform: translateY(0) scale(1); } 52% { opacity: 1; transform: translateY(calc(var(--s) * .05)) scale(1, 1.3); } 100% { opacity: 0; transform: translateY(calc(var(--s) * .46)) scale(.85, 1.35); } }
@keyframes lwFling { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; transform: translate(calc(var(--s) * var(--dx) * .15), calc(var(--s) * var(--dy) * .05)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--s) * var(--dx)), calc(var(--s) * var(--dy))) scale(.7); } }
/* the shake: a decaying twist about the centre; the circle's silhouette never moves */
@keyframes lwShake { 0% { transform: translateZ(0) rotate(0); } 15% { transform: translateZ(0) rotate(-4deg); } 32% { transform: translateZ(0) rotate(3.5deg); } 50% { transform: translateZ(0) rotate(-2.4deg); } 68% { transform: translateZ(0) rotate(1.4deg); } 84% { transform: translateZ(0) rotate(-.6deg); } 100% { transform: translateZ(0) rotate(0); } }
/* timeline: sheet 0-1.0s | beads in as it passes | shake 1.05-1.5s, beads and
   droplets fly 1.1-1.45s, drips 1.12-2.15s | glint 1.55-2.25s */
.lw.play .lw-sheet { visibility: visible; animation: lwSheet 1s cubic-bezier(.42,.05,.58,.95) both; }
.lw.play .lw-sheet img { animation: lwRef 1s cubic-bezier(.42,.05,.58,.95) both; }
.lw.play .lw-c { animation: lwShake .45s cubic-bezier(.36,.07,.19,.97) 1.05s both; }
.lw.play .lw-bead { animation: lwBeadIn .25s ease-out var(--bt) both, lwBeadOff .32s cubic-bezier(.3,0,.8,.4) calc(1.1s + var(--bo)) forwards; }
.lw.play .lw-fling { animation: lwFling .5s cubic-bezier(.2,.4,.6,1) var(--ft) both; }
.lw.play .lw-drip { animation: lwDrip .75s cubic-bezier(.5,0,.9,.4) var(--dt) both; }
.lw.play .lw-glint { animation: lwGlint .7s ease-out 1.55s both; }

/* Section spotlight */
.spot { position: relative; }
.spot::before {
  content: '';
  position: absolute; top: -10%; left: -5%; right: -5%; height: 80%;
  background: radial-gradient(ellipse 50% 70% at 30% 50%, rgba(160,205,245,0.16), transparent 65%);
  filter: blur(50px); pointer-events: none; z-index: 0;
}
.spot > * { position: relative; z-index: 1; }

/* Gradient hairline divider for sections */
section + section { border-top: none; }
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(210,230,255,0.35) 50%, transparent 100%);
}

/* Animated icon wrap — rotate + scale on parent card hover */
.icon-spring { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.card-glass:hover .icon-spring { transform: rotate(-8deg) scale(1.1); }

/* pzip.ai wears the Zipper product identity instead of the site glass, so
   it reads as a different thing on the shelf. Palette lifted from the app
   itself: forest #2e4e24, amber #c87820, sand #d4c498, sage #7a8e6e. The
   amber is lightened to #e8a24a for label text -- #c87820 on forest green
   is under 3:1. */
.tile-zipper {
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(200,120,32,0.20), transparent 58%),
    linear-gradient(158deg, #375c2a 0%, #2e4e24 52%, #223d1b 100%);
  border-color: rgba(212,196,152,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 18px 46px -14px rgba(0,0,0,0.55);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .4s ease;
}
.tile-zipper:hover {
  transform: translateY(-4px);
  border-color: rgba(200,120,32,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 30px 68px -14px rgba(0,0,0,0.6),
    0 0 56px -14px rgba(200,120,32,0.45);
}
/* The logo PNG is 100% opaque on #f0f0f0, so it sits on its own light
   plate rather than being knocked out -- the wordmark is near-black and
   would vanish against the green. */
.zip-plate { background: #f0f0f0; border: 1px solid rgba(255,255,255,0.55); }
.zip-accent { color: #e8a24a; }

/* RockStandard is the parent brand, so its tile spans the row above the
   four apps rather than sitting among them. Palette from the marketing
   site: ground #0a0a0a, off-white #fafaf7, deep blue #1e40af, and the
   light blue #93c5fd it uses for accents. */
.tile-rock {
  background:
    radial-gradient(90% 160% at 12% -30%, rgba(30,64,175,0.30), transparent 60%),
    linear-gradient(150deg, #17171f 0%, #101016 55%, #0a0a0a 100%);
  border-color: rgba(147,197,253,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 18px 46px -14px rgba(0,0,0,0.6);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .4s ease;
}
.tile-rock:hover {
  transform: translateY(-4px);
  border-color: rgba(147,197,253,0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 30px 68px -14px rgba(0,0,0,0.65),
    0 0 56px -14px rgba(30,64,175,0.55);
}
.rock-accent { color: #93c5fd; }

/* Product tiles: stronger lift than the default card-glass hover */
.product-tile { will-change: transform; }
.product-tile:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.09),
    0 40px 90px -16px rgba(0,0,0,0.6),
    0 6px 16px rgba(0,0,0,0.3),
    0 0 80px -10px rgba(160,200,240,0.45);
}

/* Service image parallax-like zoom + brighten */
.zoomable img { transition: transform 1s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.zoomable:hover img { transform: scale(1.07); filter: brightness(1.08) saturate(1.08); }

/* Hero bg slow drift — feels alive without scroll math */
@keyframes bgDrift {
  0%, 100% { background-position: center 40%; transform: scale(1); }
  50%      { background-position: center 44%; transform: scale(1.03); }
}
.hero-photo > .bg-layer {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center 40%;
  animation: bgDrift 22s ease-in-out infinite;
  will-change: transform;
}

/* Scroll-progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg, rgba(170,210,245,0), rgba(170,210,245,0.9), rgba(255,255,255,0.9));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Link underline slide for footer / nav-tail */
.link-u {
  position: relative; padding-bottom: 1px;
}
.link-u::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hydro mist drift — cool counterpart to Burdys' smoke */
@keyframes mist {
  0%   { transform: translate3d(0,0,0) scale(1);   opacity: 0.0; }
  25%  { opacity: 0.55; }
  100% { transform: translate3d(-40px,-180px,0) scale(1.7); opacity: 0; }
}
.mist {
  position: absolute; bottom: -60px; width: 260px; height: 260px; border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(176,208,240,0.22), rgba(176,208,240,0) 70%);
  filter: blur(16px);
  animation: mist 10s ease-in infinite;
  pointer-events: none;
}
.mist.m2 { left: 30%; animation-delay: 2.5s; }
.mist.m3 { left: 60%; animation-delay: 5s; }
.mist.m4 { left: 82%; animation-delay: 7.5s; }

/* Pulse dot */
@keyframes pulse-ring {
  0%   { transform: scale(0.7); opacity: 0.75; }
  100% { transform: scale(1.7); opacity: 0; }
}
.pulse-ring::after {
  content: ''; position: absolute; inset: -4px; border-radius: 9999px;
  border: 2px solid #b0c0d6; animation: pulse-ring 2.2s ease-out infinite;
}

/* Reveal on scroll — richer: fade + slide + scale */
.rv { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1); }
.rv.vis { opacity: 1; transform: translateY(0) scale(1); }

/* Smooth image zoom */
.zoomable img { transition: transform 0.7s ease; }
.zoomable:hover img { transform: scale(1.05); }

/* Hero photo overlay — subtle vignette that still reads the image clearly.
   Matches the live site: full bleed image, minimal darkening, centered text. */
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 58% at 50% 48%, rgba(13,20,32,0.26), rgba(13,20,32,0.40) 85%),
    linear-gradient(180deg, rgba(13,20,32,0.30) 0%, rgba(13,20,32,0.10) 45%, rgba(13,20,32,0.60) 100%);
}
/* Rotation layers: every slide is painted, only .on is visible. Opacity
   (not display) so the cross-fade is a real fade and the images below
   are already decoded when their turn comes. */
.hero-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-layer.on { opacity: 1; }
.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Bias the crop below centre: the spray arc and the stone detail sit
     in the lower half, and this keeps them out from behind the headline. */
  object-position: 50% 58%;
  pointer-events: none;
}
@media (max-width: 640px) {
  /* On phones a cover-fit photo behind a tall hero can only show a narrow
     sliver of it. Run the photo as a 560px band behind the top of the hero
     instead, fading into the page background, and give the driveway a
     right-biased crop so the tech, the flower bed and the lawn all make the
     frame. The rotation slides ship as whole portraits, so they centre. */
  .hero-photo {
    bottom: auto !important; height: 560px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .hero-media { object-position: 50% 50%; }
  .hero-layer:first-child .hero-media { object-position: 82% 45%; }
}

/* Slide-down for mobile nav */
@keyframes slideDown { from {opacity:0; transform:translateY(-12px);} to {opacity:1; transform:translateY(0);} }
.slide-down { animation: slideDown 0.4s ease-out; }

/* Softer focus ring */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid #b0c0d6; outline-offset: 2px;
}

/* Estimator range slider — custom thumb/track so it doesn't look like the OS default */
.est-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: transparent; cursor: ew-resize;
}
.est-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) var(--p, 50%), rgba(255,255,255,0.1) var(--p, 50%), rgba(255,255,255,0.1) 100%);
}
.est-slider::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); }
.est-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.6); }
.est-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(200,220,255,0.4);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.08);
  margin-top: -8px; cursor: grab;
  transition: transform .15s;
}
.est-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
@media (pointer: coarse), (max-width: 820px) {
  .est-slider { height: 34px; }
  .est-slider::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -12px; }
  .est-slider::-moz-range-thumb { width: 30px; height: 30px; }
}
.est-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(200,220,255,0.4);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.08);
  cursor: grab;
}
.est-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid rgba(200,220,255,0.8); outline-offset: 2px; }

/* Fully Insured seal — gentle float + tilt so it reads as a stamp, not a button */
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.badge-float { animation: badgeFloat 6s ease-in-out infinite; }

/* Trusted-by client logo strip — full-color logos on soft light chips
   (silhouette filters destroy figurative marks like the Starbucks siren) */
/* Brand strip — logos as-is, straight on the band (per approved preview 2026-07-29) */
.trust-strip img { height: 38px; width: auto; display: block; flex: 0 0 auto; }
/* Google reviews marquee — cards drift right-to-left, pause on hover/focus */
.marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 48s) linear infinite; }
.marquee-wrap:hover .marquee-track,
.marquee-wrap:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv { opacity:1; transform:none; }
  .mist { display:none; }
  /* Marquee freezes — allow manual horizontal scroll instead */
  .marquee-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}