/* ══════════════════════════════════════════════════
   SCROLL-DRIVEN GUIDE LINE
   Decorative background element injected by scripts/scroll-line.js.
   position:fixed + a manually-synced translateY(-scrollY) on the
   inner <g> is what lets a document-height path live inside a
   viewport-sized fixed SVG (see scroll-line.js for the why).
   z-index:0 (explicit, not "auto") + being body's first child is
   what keeps it above plain section backgrounds (which are
   unpositioned and always paint first) while staying below every
   other positioned element on the page, all of which come later
   in DOM order — no other file needs touching for correct stacking.
   ══════════════════════════════════════════════════ */

.scroll-line {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* z-index 1 puts the line above every section's background AND above
     media (photos, video, the Stats visual) — which is wanted, the line
     reads fine crossing a visual. Text is lifted to 2 below so it always
     stays on top of the line. The header sits at var(--z-sticky) = 10,
     well clear of both. */
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.scroll-line__path,
.scroll-line__dot {
  opacity: 0.85;
}

/* Laptop/desktop only — no tablet or mobile variant. Matches the JS width
   guard (MOBILE_BREAKPOINT) in scroll-line.js and the sitewide tablet-
   landscape breakpoint (styles/responsive.css), kept here too as a hard
   backstop so it's never visible below this width regardless of JS timing. */
@media (max-width: 1024px) {
  .scroll-line {
    display: none;
  }
}

/* Text content sits above the line; media deliberately does not. Only
   the blocks that actually carry copy are lifted — the photo/video/
   canvas columns are left alone so the line can pass over them, which
   reads fine and keeps the path feeling continuous. These wrappers are
   transparent, so only their real painted content occludes anything;
   the line still shows through every gap. `position: relative` with no
   offsets changes nothing visually, it only makes z-index apply.
   This is what lets the path weave freely across the page instead of
   being hand-routed around each section's text.

   Exception: `.sv-right` (the Stats visual). Everywhere else the line
   is meant to cross over media — but here scroll-line.js draws a ring
   *around* it, so the visual needs to sit on top wherever that ring's
   stroke happens to overlap its bounding box, or the ring reads as
   cutting across the visual instead of framing it. */
.site-whatwedo__head,
.site-whatwedo__text,
.site-howitworks__head,
.site-howitworks__step,
.site-services__head,
.site-services__text,
.site-portfolio__head,
.site-portfolio__cta-wrap,
.pf-card__content,
.site-stats__head,
.morph-stage,
.sv-right,
.site-clients__head,
.site-clients__text,
.site-cta-banner__inner {
  position: relative;
  z-index: 2;
}