html, body { background: var(--paper); color: var(--ink); font-family: var(--font-display); }

/* Persistent WebGL layer sits behind all content */
#hero-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}

/* Content floats above the canvas */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* Hero is transparent (reveals canvas); lower sections are opaque so they cover it */
.hero { background: transparent; }
.positioning, .services, .site-footer { background: var(--paper); }
.cta { background: transparent; } /* rock re-appears here (Task 6) */

/* scroll reveal */
.positioning, .services, .cta { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.positioning.in, .services.in, .cta.in { opacity: 1; transform: none; }

.wrap { width: min(92vw, 1600px); margin-inline: auto; }

/* ---- header ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;   /* nav centered */
  padding: clamp(18px, 2.2vw, 34px) clamp(20px, 3vw, 54px);
  mix-blend-mode: difference; /* stays legible over light + dark scenes, like the original */
  color: #fff;
}

/* ---- hero: tall scroll region, sticky UI ---- */
.hero { position: relative; height: 340vh; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: flex-end;
  padding: clamp(20px, 3vw, 54px);
}
.hero-copy { max-width: 60ch; }
.hero-scroll { position: absolute; right: clamp(20px, 3vw, 54px); bottom: clamp(20px, 3vw, 54px); }

/* ---- positioning ---- */
.positioning {
  padding: clamp(80px, 16vh, 220px) clamp(20px, 3vw, 54px) clamp(60px, 10vh, 140px);
}

/* ---- services ---- */
.services {
  position: relative;
  padding: clamp(40px, 8vh, 120px) clamp(20px, 3vw, 54px) clamp(80px, 14vh, 200px);
}
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 40px); margin-top: clamp(24px, 4vh, 56px);
}

/* ---- cta ---- */
.cta {
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  padding: clamp(40px, 8vh, 120px) clamp(20px, 3vw, 54px);
}

/* ---- footer ---- */
.site-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 54px);
}

@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr; }
}