/* ============================================================
   Atmos-style hero: metallic wordmark + animated pressure-washer
   nozzle shooting water (canvas), floating stat callouts, and a
   word-by-word statement reveal. Pressure-washing themed.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Jet hero ---------- */
.jet-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 94vh; display: flex; align-items: center;
  background:
    radial-gradient(80% 60% at 50% 18%, rgba(56,210,245,.10), transparent 60%),
    linear-gradient(180deg, #060a12 0%, #070b14 60%, var(--ink) 100%);
}
.jet-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.jet-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(6,9,15,.62), transparent 72%),
    linear-gradient(180deg, rgba(6,9,15,.55) 0%, transparent 28%, transparent 62%, rgba(6,9,15,.85) 100%);
}
.jet-hero > .container { position: relative; z-index: 3; width: 100%; }
.jet-hero__inner { max-width: 940px; margin-inline: auto; text-align: center; animation: jetUp 1s cubic-bezier(.2,.65,.2,1) both; }
@keyframes jetUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.jet-hero .eyebrow { margin-inline: auto; }

/* ---------- Metallic chrome wordmark ---------- */
.bigmark { margin: 4px 0 0; line-height: .88; }
.bigmark__stack { position: relative; display: inline-block; overflow: visible; }
/* grime canvas overflows the letters so mud can drip BELOW them */
.bigmark__grime { position: absolute; left: -5%; width: 110%; top: -12%; height: 150%; pointer-events: none; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .bigmark__grime { display: none; } }

/* water splash that lands IN FRONT of the letters while washing */
.jet-splash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

.wash-hint {
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 9vh, 96px); z-index: 5;
  text-align: center; pointer-events: none;
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fog);
  opacity: 0; animation: washHint 1s ease 5s forwards;
}
@keyframes washHint { to { opacity: .65; } }
@media (max-width: 760px) { .wash-hint { bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .jet-splash { display: none; } .wash-hint { display: none; } }
.bigmark__word {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(3.2rem, 18.5vw, 13rem);
  background: linear-gradient(180deg, #f4fbff 2%, #d2eefc 20%, #84c9ee 39%, #2f86bd 55%, #1c5e8e 63%, #7cc6ec 80%, #eef9ff 98%);
  background-size: 100% 250%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(170,226,255,.16);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 16px 40px rgba(56,210,245,.45));
  animation: chrome 6.5s ease-in-out infinite;
}
@keyframes chrome { 0%, 100% { background-position: 50% 16%; } 50% { background-position: 50% 84%; } }
.bigmark__sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.8rem, 2.3vw, 1.35rem); letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent-2); margin: 8px 0 0; padding-left: .26em;
  text-shadow: 0 0 22px rgba(56,210,245,.5);
}
.jet-hero__lead { font-size: clamp(1.04rem, 2vw, 1.2rem); color: var(--mist); max-width: 60ch; margin: 26px auto 30px; }
.jet-hero .hero__cta { justify-content: center; }
.jet-hero .hero__trust { justify-content: center; }

/* ---------- Pressure-washer nozzle (SVG) ---------- */
.nozzle { position: absolute; z-index: 2; left: clamp(-8px, 2vw, 30px); bottom: clamp(40px, 12vh, 130px); width: clamp(170px, 24vw, 300px); pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.nozzle svg { width: 100%; height: auto; display: block; }
.nozzle__tip { position: absolute; right: 7%; top: 25%; width: 2px; height: 2px; }
@media (max-width: 640px) { .nozzle { opacity: .9; bottom: 26px; width: 150px; } }

/* ---------- Floating stat callouts (Atmos-style) ---------- */
.jet-stat {
  position: absolute; z-index: 3; display: grid; gap: 2px; padding: 13px 18px;
  background: rgba(10,16,26,.55); border: 1px solid rgba(124,198,236,.28); border-radius: 16px;
  backdrop-filter: blur(10px); box-shadow: 0 18px 50px -22px rgba(0,0,0,.8);
  animation: floaty 7s ease-in-out infinite;
}
.jet-stat b { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; }
.jet-stat b small { font-size: .72rem; color: var(--accent-2); font-weight: 600; letter-spacing: .08em; margin-left: 4px; }
.jet-stat span { color: var(--fog); font-size: .8rem; }
.jet-stat--a { top: 19%; right: 7%; }
.jet-stat--b { top: 50%; right: 4%; animation-delay: -2.3s; }
.jet-stat--c { bottom: 16%; left: 6%; animation-delay: -4.6s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 1080px) { .jet-stat--c { display: none; } }
@media (max-width: 860px) { .jet-stat { display: none; } }

.jet-hero .hero__scroll { z-index: 3; }

/* ---------- Statement reveal (Atmos intro) ---------- */
.statement-sec { padding: clamp(70px, 12vw, 150px) 0; position: relative; }
.statement {
  max-width: 22ch + 40ch; max-width: 1000px; margin-inline: auto; text-align: center;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.22;
  font-size: clamp(1.5rem, 4.4vw, 3rem); color: var(--white);
}
.statement .w { display: inline-block; opacity: .12; filter: blur(2px); transform: translateY(.12em); transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.statement .w.lit { opacity: 1; filter: none; transform: none; }
.statement .w.accent.lit { color: var(--accent-2); }

/* portrait before/after pair (real split photo) */
.ba-slider--portrait { aspect-ratio: 11 / 16; max-width: 520px; }

@media (prefers-reduced-motion: reduce) {
  .bigmark__word { animation: none; background-position: 50% 40%; }
  .jet-stat { animation: none; }
  .jet-hero__inner { animation: none; }
  .statement .w { opacity: 1; filter: none; transform: none; transition: none; }
}