/* WhipWashPro — "Process Journey" pinned scroll-scrubbed video section.
   Replaces the old white 4-box "How Our Mobile Car Detailing Works" grid.
   Same verified pinned-scroll architecture as service-film (track/sticky
   stage/rAF-driven scrub, no library), extended with per-chapter copy
   positioning so text never has to sit in one fixed spot that would cover
   different subjects across scenes. Namespaced wwp-process- throughout. */

#wwp-process-root, #wwp-process-root * { box-sizing: border-box; }

#wwp-process-root {
  --wwp-process-navy: #04081a;
  --wwp-process-blue: #2d8eff;
  --wwp-process-orange: #ff7a1f;
  --wwp-process-white: #ffffff;
  --wwp-process-support: rgba(255, 255, 255, 0.82);
  --wwp-process-track-vh: 480vh;

  position: relative;
  background: var(--wwp-process-navy);
  color: var(--wwp-process-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: clip;
}

/* ── scroll track / sticky stage ──────────────────────────────────── */

#wwp-process-track {
  position: relative;
  height: var(--wwp-process-track-vh);
}

#wwp-process-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: var(--wwp-process-navy);
}

/* ── media layer ─────────────────────────────────────────────────── */

.wwp-process-media {
  position: absolute;
  inset: 0;
}

#wwp-process-video,
.wwp-process-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wwp-process-focal, 50% 50%);
  display: block;
  pointer-events: none;
  transform: scale(var(--wwp-process-scale, 1));
  transition: object-position .6s ease;
}

.wwp-process-poster-img {
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.wwp-process-poster-img.wwp-process-hidden { opacity: 0; }

.wwp-process-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--wwp-process-scrim-bg, linear-gradient(180deg, rgba(3,8,20,.35) 0%, rgba(3,8,20,.05) 35%, rgba(3,8,20,.55) 100%));
  transition: background .5s ease;
}

/* localized scrim panel behind the active chapter's copy only — keeps the
   rest of the frame free of a full-bleed darken, per chapter position */
.wwp-process-copy-scrim {
  position: absolute;
  z-index: 3;
  left: var(--wwp-process-copy-x, 5%);
  top: var(--wwp-process-copy-y, 8%);
  width: var(--wwp-process-scrim-width, min(440px, 42vw));
  height: var(--wwp-process-scrim-height, 260px);
  background: radial-gradient(ellipse at 30% 30%, rgba(3,8,20,.65), rgba(3,8,20,.15) 70%, transparent 100%);
  pointer-events: none;
  transition: left .5s ease, top .5s ease, width .5s ease, height .5s ease;
}

/* ── intro (eyebrow / h2 / intro paragraph) — visible throughout ──── */

.wwp-process-intro {
  position: absolute;
  z-index: 4;
  left: clamp(20px, 5vw, 72px);
  top: max(clamp(20px, 5vh, 48px), calc(var(--wwp-process-header-offset, 0px) + 14px));
  max-width: 30ch;
}

.wwp-process-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wwp-process-blue);
}
.wwp-process-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--wwp-process-blue);
  display: inline-block;
}

.wwp-process-heading {
  margin: 10px 0 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(18px, 1.8vw, 25px);
  color: var(--wwp-process-white);
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

/* ── chapters (stacked, one active/readable at a time, positioned per
   chapter via CSS custom properties set from data-active-chapter) ──── */

.wwp-process-chapters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.wwp-process-chapter {
  position: absolute;
  left: var(--wwp-process-copy-x, 5%);
  top: var(--wwp-process-copy-y, 8%);
  width: var(--wwp-process-copy-width, min(420px, 40vw));
  will-change: opacity, transform;
  pointer-events: none;
  transition: left .5s ease, top .5s ease, width .5s ease;
}
.wwp-process-chapter.wwp-process-chapter-active { pointer-events: auto; }

.wwp-process-chapter-num {
  display: inline-block;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wwp-process-orange);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.wwp-process-chapter h3 {
  margin: 6px 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--wwp-process-white);
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

/* Hard override: the theme's global h1..h6{color:var(--color-heading)}
   rule beats plain inheritance whenever this rule's own color declaration
   is ever dropped again — pin it explicitly, scoped strictly to this
   section (see service-film.css for the incident this guards against). */
html body #wwp-process-root .wwp-process-chapter h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1;
}

.wwp-process-chapter p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wwp-process-support);
  max-width: 32ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

.wwp-process-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.wwp-process-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 8px;
  background: var(--wwp-process-blue);
  color: var(--wwp-process-white);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.wwp-process-cta:hover { background: var(--wwp-process-orange); transform: translateY(-1px); }
.wwp-process-cta:focus-visible { outline: 2px solid var(--wwp-process-orange); outline-offset: 2px; }
.wwp-process-cta svg { width: 13px; height: 13px; flex: none; }

.wwp-process-cta-secondary {
  background: rgba(4, 8, 26, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.wwp-process-cta-secondary:hover { background: rgba(45, 142, 255, 0.25); border-color: var(--wwp-process-blue); }

/* ── scroll cue (opening state only) ────────────────────────────── */

.wwp-process-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(56px, 9vh, 84px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: opacity 0.3s ease;
}
.wwp-process-cue-bar { width: 1px; height: 26px; background: linear-gradient(to bottom, var(--wwp-process-blue), transparent); animation: wwp-process-cue-move 1.6s ease-in-out infinite; }
@keyframes wwp-process-cue-move {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
}

/* ── progress interface ──────────────────────────────────────────── */

.wwp-process-progress-wrap {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 32px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.wwp-process-count {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wwp-process-count b { color: var(--wwp-process-white); }

.wwp-process-progress {
  position: relative;
  width: min(220px, 34vw);
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
#wwp-process-progressbar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--wwp-process-blue);
}
.wwp-process-progress-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wwp-process-orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(255, 122, 31, 0.25);
}

.wwp-process-step-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  display: none;
}

/* ── per-chapter copy position / focal point ─────────────────────
   Set by JS via #wwp-process-root[data-active-chapter="N"]. Calibrated
   against the measured scene ranges in SCENE-MAP.md so text clears the
   phone (ch0), van/shirt logos (ch1), spray+extractor tools (ch2), and
   the technician/customer handover (ch3) in every scene each chapter
   spans — verified visually during QA, not just assumed from a single
   frame, since each chapter covers multiple scenes with the subject in
   a different place. */
#wwp-process-root[data-active-chapter="0"] {
  --wwp-process-copy-x: 6%;
  --wwp-process-copy-y: 64%;
  --wwp-process-copy-width: min(360px, 32vw);
  --wwp-process-scrim-width: min(420px, 38vw);
  --wwp-process-scrim-height: 280px;
  --wwp-process-focal: 32% 45%;
  --wwp-process-copy-y-mobile: 66%;
}
#wwp-process-root[data-active-chapter="1"] {
  /* was top-left (12%) — collided with the always-visible .wwp-process-intro
     eyebrow/heading, which also lives top-left. Moved below it. Width
     narrowed from 400px so it doesn't reach the small secondary WHIP logo
     on the van's front door (~x:34-42%) during the driving/arrival scenes. */
  --wwp-process-copy-x: 6%;
  --wwp-process-copy-y: 60%;
  --wwp-process-copy-width: min(300px, 27vw);
  --wwp-process-scrim-width: min(340px, 30vw);
  --wwp-process-scrim-height: 280px;
  --wwp-process-focal: 55% 42%;
  --wwp-process-copy-y-mobile: 62%;
}
#wwp-process-root[data-active-chapter="2"] {
  /* also moved off the top edge for the same reason as chapter 1 */
  --wwp-process-copy-x: 58%;
  --wwp-process-copy-y: 58%;
  --wwp-process-copy-width: min(360px, 32vw);
  --wwp-process-scrim-width: min(420px, 38vw);
  --wwp-process-scrim-height: 300px;
  --wwp-process-focal: 45% 45%;
  --wwp-process-copy-y-mobile: 60%;
}
#wwp-process-root[data-active-chapter="3"] {
  --wwp-process-copy-x: 6%;
  --wwp-process-copy-y: 60%;
  --wwp-process-copy-width: min(400px, 36vw);
  --wwp-process-scrim-width: min(460px, 42vw);
  --wwp-process-scrim-height: 300px;
  --wwp-process-focal: 50% 40%;
  --wwp-process-copy-y-mobile: 64%;
}
@media (max-width: 767px) {
  #wwp-process-root[data-active-chapter="2"] { --wwp-process-copy-x: 16px; }
}

/* ── static / reduced-motion / no-js fallback ───────────────────── */

#wwp-process-root.wwp-process-static #wwp-process-track,
.wwp-process-noscript #wwp-process-track { height: auto; }
#wwp-process-root.wwp-process-static #wwp-process-stage,
.wwp-process-noscript #wwp-process-stage {
  position: relative;
  height: auto;
  min-height: 0;
  padding: clamp(56px, 9vh, 96px) 0;
  display: block;
}
#wwp-process-root.wwp-process-static #wwp-process-video,
.wwp-process-noscript #wwp-process-video { display: none; }
#wwp-process-root.wwp-process-static .wwp-process-media,
.wwp-process-noscript .wwp-process-media { position: relative; aspect-ratio: 16/9; }
#wwp-process-root.wwp-process-static .wwp-process-poster-img,
.wwp-process-noscript .wwp-process-poster-img { position: absolute; opacity: 1 !important; object-position: 50% 30%; }
#wwp-process-root.wwp-process-static .wwp-process-cue,
.wwp-process-noscript .wwp-process-cue { display: none; }
#wwp-process-root.wwp-process-static .wwp-process-progress-wrap,
.wwp-process-noscript .wwp-process-progress-wrap { display: none; }
#wwp-process-root.wwp-process-static .wwp-process-copy-scrim,
.wwp-process-noscript .wwp-process-copy-scrim { display: none; }
#wwp-process-root.wwp-process-static .wwp-process-intro,
.wwp-process-noscript .wwp-process-intro {
  position: relative;
  left: auto; top: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
#wwp-process-root.wwp-process-static .wwp-process-chapters,
.wwp-process-noscript .wwp-process-chapters {
  position: static;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 20px;
}
#wwp-process-root.wwp-process-static .wwp-process-chapter,
.wwp-process-noscript .wwp-process-chapter {
  position: static;
  width: auto;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
}
#wwp-process-root.wwp-process-static .wwp-process-chapter p,
.wwp-process-noscript .wwp-process-chapter p { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  #wwp-process-track { height: auto; }
  #wwp-process-stage { position: relative; height: auto; min-height: 0; padding: clamp(56px, 9vh, 96px) 0; display: block; }
  #wwp-process-video { display: none; }
  .wwp-process-media { position: relative; aspect-ratio: 16/9; }
  .wwp-process-poster-img { position: absolute; opacity: 1 !important; object-position: 50% 30%; }
  .wwp-process-cue { display: none; }
  .wwp-process-progress-wrap { display: none; }
  .wwp-process-copy-scrim { display: none; }
  .wwp-process-intro { position: relative; left: auto; top: auto; max-width: 720px; margin: 0 auto; padding: 0 20px; text-align: center; }
  .wwp-process-chapters { position: static; inset: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1100px; margin: 28px auto 0; padding: 0 20px; }
  .wwp-process-chapter { position: static; width: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 18px; }
  .wwp-process-chapter p { max-width: none; }
}

/* ── responsive: tablets ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  #wwp-process-root { --wwp-process-track-vh: 420vh; }
  .wwp-process-chapter { width: var(--wwp-process-copy-width-tablet, min(360px, 52vw)); }
  .wwp-process-chapter h3 { font-size: clamp(20px, 3vw, 27px); }
}

/* ── mobile & small-tablet (≤767px) — isolated override block ────── */
@media (max-width: 767px) {
  #wwp-process-root { --wwp-process-track-vh: 380vh; }

  #wwp-process-stage {
    top: var(--wwp-process-header-offset, 0px);
    height: calc(100svh - var(--wwp-process-header-offset, 0px));
    min-height: 560px;
  }

  #wwp-process-video,
  .wwp-process-poster-img { object-position: var(--wwp-process-focal-mobile, var(--wwp-process-focal, 50% 50%)); }

  .wwp-process-intro { max-width: calc(100% - 40px); }
  .wwp-process-heading { font-size: clamp(15px, 4.2vw, 18px); }

  .wwp-process-chapters { inset: 0; }
  .wwp-process-chapter {
    left: 16px !important;
    right: 16px;
    top: var(--wwp-process-copy-y-mobile, 60%) !important;
    width: auto !important;
    max-width: none;
  }
  .wwp-process-chapter-num { font-size: clamp(28px, 9vw, 40px); }
  .wwp-process-chapter h3 { font-size: clamp(19px, 6vw, 24px); }
  .wwp-process-chapter p { font-size: 12.5px; max-width: none; }
  .wwp-process-cta { padding: 9px 14px; font-size: 12px; min-height: 38px; }

  .wwp-process-copy-scrim {
    left: 12px !important;
    top: calc(var(--wwp-process-copy-y-mobile, 60%) - 4%) !important;
    width: calc(100% - 24px) !important;
    height: var(--wwp-process-scrim-height-mobile, 220px) !important;
    background: linear-gradient(180deg, rgba(3,8,20,0) 0%, rgba(3,8,20,.55) 22%, rgba(3,8,20,.78) 100%);
  }

  /* Moved to the top on mobile: the bottom is contested by both the fixed
     booking bar and chapter copy blocks tall enough to include two CTAs
     (chapter 1) — measured overlap between the CTA row and a bottom-pinned
     progress bar during QA. Top-right (beside the intro) was tried first,
     but the intro heading needs ~250px+ to read in two lines and the
     progress bar needs ~185px — together wider than a 390px viewport, so
     they collided too. Stacked below the intro instead, same left edge. */
  .wwp-process-progress-wrap {
    left: 20px;
    right: auto;
    bottom: auto;
    top: calc(max(clamp(20px, 5vh, 48px), var(--wwp-process-header-offset, 0px) + 14px) + 78px);
    transform: none;
  }
  .wwp-process-cue { bottom: calc(var(--wwp-mobile-bottom-bar-height, 0px) + max(44px, env(safe-area-inset-bottom)) + 12px); }
}

@media (max-width: 767px) and (max-height: 699px) {
  #wwp-process-root { --wwp-process-track-vh: 340vh; }
  .wwp-process-chapter h3 { font-size: clamp(17px, 5.4vw, 21px); }
  .wwp-process-chapter p { font-size: 11.5px; }
  .wwp-process-cue { display: none; }
}