/* ==========================================================================
   IN THE ZONE — Cinematic editing portfolio
   Layout: full-screen video stage with scenes that fade in/out alternating
   left & right as the page scrolls.
   ========================================================================== */

:root {
  --bg: #000000;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.38);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --accent: #00ff95;
  --accent-soft: rgba(0, 255, 149, 0.15);
  --accent-glow: rgba(0, 255, 149, 0.45);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --scene-edge-padding: clamp(2rem, 7vw, 7rem);

  /* Page-wide centering — caps the active layout area on very wide monitors.
     Below this width the page uses the full viewport; above it, --page-side-pad
     becomes the gap between viewport edge and the centered page area. */
  --page-max-width: 2000px;
  --page-side-pad: max(0px, calc((100vw - var(--page-max-width)) / 2));

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No smooth scroll — we drive the video scrubbing manually for tighter response */
  scroll-behavior: auto;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  position: relative;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Hide native scrollbar — the page is meant to feel like discrete scenes,
   not a long scrolling document. The custom progress bar at top + dots indicate position. */
body::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; -ms-overflow-style: none; }

/* ============ Atmospheric layers ============ */

/* Mouse-tracked neon green glow — sits above the video so it tints the frame
   where the cursor is, but below the text scenes so it never blooms over body copy. */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(0, 255, 149, 0.18),
      rgba(0, 255, 149, 0.05) 40%,
      transparent 75%);
  mix-blend-mode: screen;
  transition: background 180ms var(--ease-soft);
}


/* ============ Centered video stage ============
   The stage fills the viewport with solid black; the video frame inside
   is sized smaller so there's clear black padding around it. This keeps
   the subject in-frame and gives scene text on the sides a clean backdrop. */

.video-stage {
  position: fixed;
  inset: 0 var(--page-side-pad);
  z-index: 1;
  pointer-events: none;
  /* Solid black — the global grain overlay (z=30) sits on top and unifies
     the video margin with the rest of the page, so the video edge has no
     visible boundary against the bg. */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 1.5vh;
}

/* The actual video frame — aspect-ratio matched to the source so the whole
   subject is visible (no head crop). Capped on both axes so there's always
   margin around the frame.
   Shifted slightly right via translateX so the left side of the viewport
   has extra solid-black breathing room for scene content. The shift is
   capped (min(5vw, 70px)) so it doesn't get extreme on ultra-wide monitors. */
.video-frame {
  position: relative;
  aspect-ratio: 1920 / 1072;
  width: min(78vw, calc(78vh * 1920 / 1072), 1440px);
  transform: translateX(min(5vw, 70px));
}

@media (max-width: 880px) {
  /* On mobile the video re-centers behind the stacked content */
  .video-frame { transform: translateX(0); }
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: contrast(1.04) saturate(1.06) brightness(0.94);
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1400ms var(--ease-out), transform 2400ms var(--ease-out);
  will-change: transform;
}

.video-frame video.is-ready {
  opacity: 1;
  transform: scale(1);
}

/* Feathered edges — multi-axis gradient overlay so the video bleeds into pure black. */
.video-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Top */
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(0,0,0,0.85) 4%,
      rgba(0,0,0,0.0) 20%),
    /* Bottom */
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(0,0,0,0.85) 4%,
      rgba(0,0,0,0.0) 20%),
    /* Left */
    linear-gradient(to right,
      var(--bg) 0%,
      rgba(0,0,0,0.85) 4%,
      rgba(0,0,0,0.0) 20%),
    /* Right */
    linear-gradient(to left,
      var(--bg) 0%,
      rgba(0,0,0,0.85) 4%,
      rgba(0,0,0,0.0) 20%),
    /* Soft outer vignette for depth */
    radial-gradient(ellipse 92% 88% at center,
      transparent 38%,
      rgba(0,0,0,0.4) 78%,
      rgba(0,0,0,0.65) 100%);
}

/* ============ Navigation ============ */

.nav {
  position: fixed;
  top: 0;
  left: var(--page-side-pad);
  right: var(--page-side-pad);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--scene-edge-padding);
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Feather the left/right edges so the mouse glow can pass over the nav's
     boundary without revealing the bg/blur step. The middle 90% is fully
     opaque (so logo + CTA aren't affected), only the outermost 5% on each
     side fades to transparent. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%, #000 5%, #000 95%, transparent 100%);
  transition: padding 400ms var(--ease-soft);
}

.nav.is-scrolled {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Red Hat Display', var(--font-sans);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
  /* Smooth filter transition so the green halo eases in/out on hover */
  transition: filter 320ms var(--ease-soft);
}

/* Wordmark = INTHEZONE as one continuous word with a color split */
.brand-wordmark {
  display: inline-flex;
}

.brand-light {
  color: var(--text);
}

.brand-accent {
  color: var(--accent);
}

.brand-mark {
  color: var(--accent);
  font-size: 1.1rem;
  text-shadow: 0 0 16px var(--accent-glow);
  transform: translateY(-1px);
  transition: text-shadow 320ms var(--ease-soft);
}

/* Neon green glow halo on hover — blooms the entire logo. The triangle mark
   gets an extra inner pulse so it lights up brighter than the wordmark. */
.nav-brand:hover {
  filter: drop-shadow(0 0 14px var(--accent-glow))
          drop-shadow(0 0 4px var(--accent-glow));
}

.nav-brand:hover .brand-mark {
  text-shadow: 0 0 24px var(--accent-glow), 0 0 8px var(--accent);
}

@media (max-width: 880px) {
  .nav-brand { font-size: 1.2rem; }
  .brand-mark { font-size: 0.95rem; }
}

.nav-links {
  display: flex;
  gap: 2.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.nav-links a {
  position: relative;
  padding: 0.25rem 0;
  transition: color 200ms var(--ease-soft);
  cursor: pointer;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out);
}

.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  font-size: 0.825rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--text);
  transition: all 250ms var(--ease-soft);
  cursor: pointer;
}

.nav-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 24px -8px var(--accent-glow);
}

/* ============ Scenes (fixed overlay layer) ============
   Only one scene is "fully visible" at any given scroll position. Their
   opacity + transform is driven by JS based on scroll progress. The body
   scroll length comes from .scroll-track which sets total scrollable height. */

.scenes {
  position: fixed;
  inset: 0 var(--page-side-pad);
  z-index: 20;
  pointer-events: none;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--scene-edge-padding);
  opacity: 0;
  pointer-events: none;
  /* No CSS transition — JS drives opacity directly per scroll frame for ultra-smooth response */
}

.scene[data-position="left"]   { justify-content: flex-start; }
.scene[data-position="right"]  { justify-content: flex-end; }
.scene[data-position="center"] { justify-content: center; text-align: center; }

/* Hero only — pin to the top so "Time to Lock In." sits just above the
   monitors visible in the first frame of the scroll-scrub video. Other
   scenes (stat numbers, value statements) stay centered. */
.scene[data-index="0"] {
  align-items: flex-start;
  padding-top: clamp(6rem, 14vh, 10rem);
}

.scene-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 2rem 0;
  will-change: transform, opacity;
}

.scene[data-position="center"] .scene-content {
  max-width: 1000px;
}

/* Soft halo behind text — heavily feathered so the cursor glow can pass over
   it without revealing the halo's outline. Multiple gradient stops + a wide
   blur diffuse the edge into the background so there's no visible "shape". */
.scene-content::before {
  content: '';
  position: absolute;
  inset: -8rem -10rem;
  background: radial-gradient(ellipse 70% 60% at center,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.45) 18%,
    rgba(0,0,0,0.32) 36%,
    rgba(0,0,0,0.20) 54%,
    rgba(0,0,0,0.10) 72%,
    rgba(0,0,0,0.04) 86%,
    transparent 100%);
  z-index: -1;
  pointer-events: none;
  filter: blur(10px);
  /* Avoid hard alpha edge interacting visibly with the screen-blend mouse glow */
  will-change: opacity;
}

/* A tiny shadow on body text adds extra legibility over busy frames
   without making the type look heavy. */
.scene-content .lede,
.scene-content .scene-sub,
.scene-content .eyebrow,
.scene-content .work-meta,
.scene-content .scene-num {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.scene-content .scene-title,
.scene-content .work-title {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

/* Hero title gets a deeper, multi-layered drop shadow so the type pops off
   the bright video frame underneath. Defined here (with .scene-content
   specificity) so it wins over the lighter title-shadow above. */
.scene-content .display {
  text-shadow:
    0 6px 28px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.8),
    0 0 64px rgba(0, 0, 0, 0.55);
}

.scene-content .display .display-accent {
  text-shadow:
    0 6px 28px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.75),
    0 0 36px var(--accent-glow);
}

/* The scroll track is invisible — its sole job is to give the body enough
   height that scrolling drives the scene transitions and video scrub.
   5 scenes × 100vh = 500vh. Scroll-driven transitions happen across 4 vh
   of scrollable area (scene N's center is at scrollY = (N / (count-1)) * 4vh). */
.scroll-track {
  position: relative;
  width: 100%;
  height: 500vh;
  pointer-events: none;
}

/* ============ Scene indicators (right-edge dots) ============ */

.scene-indicators {
  position: fixed;
  right: calc(var(--page-side-pad) + clamp(1rem, 2.5vw, 2.5rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: all 350ms var(--ease-out);
  position: relative;
}

.indicator-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.indicator-dot:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.15);
}

.indicator-dot.is-active {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: scale(1.3);
}

/* ============ Typography (within scenes) ============ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.scene[data-position="center"] .eyebrow {
  justify-content: center;
}

.eyebrow-line {
  width: 2.25rem;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.2vw, 5.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
  white-space: nowrap;
  text-transform: uppercase;
  /* Layered black drop-shadows give the hero title real depth against the
     bright video. Three shadows at different blurs build a soft → sharp →
     wide halo so the type reads cleanly over any frame underneath. */
  text-shadow:
    0 6px 28px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.8),
    0 0 64px rgba(0, 0, 0, 0.55);
}

.display-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  /* Persistent multi-layer green halo + slow pulse so "Lock In." always reads
     as the most active word on the page. Black depth-shadows stay constant;
     only the green glow layers breathe. */
  animation: lock-in-glow 4s ease-in-out infinite;
}

@keyframes lock-in-glow {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(0, 255, 149, 0.85),
      0 0 48px rgba(0, 255, 149, 0.4),
      0 0 90px rgba(0, 255, 149, 0.2);
  }
  50% {
    text-shadow:
      0 0 28px rgba(0, 255, 149, 1),
      0 0 66px rgba(0, 255, 149, 0.55),
      0 0 115px rgba(0, 255, 149, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .display-accent { animation: none; }
}

.lede {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 3rem;
  font-weight: 300;
}

.scene[data-position="left"] .lede,
.scene[data-position="right"] .lede {
  margin-left: 0;
  margin-right: 0;
}

.scene-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.scene[data-position="center"] .scene-actions {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.95rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 300ms var(--ease-soft);
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px -6px var(--accent-glow);
}

.btn-primary:hover .btn-arrow { transform: translateX(3px); }

.btn-ghost {
  border-color: var(--hairline-strong);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--text);
  background: rgba(255,255,255,0.04);
}

.btn-arrow {
  display: inline-block;
  transition: transform 300ms var(--ease-out);
}

/* ============ Scroll cue ============
   Replaces the hero CTA buttons. A small "scroll to know more" label,
   a thin vertical track with a green dot that flows downward on loop,
   and a soft chevron — all in the page's accent green. */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 400ms var(--ease-out);
}

.scroll-cue:hover {
  transform: translateY(2px);
}

.scroll-cue-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 250ms var(--ease-soft), text-shadow 250ms var(--ease-soft);
}

.scroll-cue:hover .scroll-cue-label {
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

/* Vertical track — fades in/out at top and bottom for a soft edge */
.scroll-cue-track {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 18%,
    rgba(255, 255, 255, 0.18) 82%,
    transparent 100%);
  overflow: hidden;
  border-radius: 999px;
}

/* Dot that streams down the track on infinite loop */
.scroll-cue-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 10px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow), 0 0 4px var(--accent);
  animation: scroll-cue-fall 2.4s cubic-bezier(0.55, 0.05, 0.45, 1) infinite;
}

@keyframes scroll-cue-fall {
  0%   { transform: translateY(-12px); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

/* Chevron sits right below the track */
.scroll-cue-chevron {
  width: 16px;
  height: 8px;
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  animation: scroll-cue-pulse 2.4s ease-in-out infinite;
}

@keyframes scroll-cue-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-dot,
  .scroll-cue-chevron {
    animation: none;
  }
}

/* ============ Stat scenes (big numbers) ============ */

.stat-figure {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11.5vw, 9.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--accent);
  text-shadow: 0 0 60px var(--accent-glow);
  white-space: nowrap;
}

.stat-plus {
  font-size: 0.6em;
  position: relative;
  top: -0.1em;
  margin-left: -0.05em;
  color: var(--accent);
}

.stat-unit {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  padding-bottom: 0.4rem;
}

.stat-caption {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 50ch;
  font-weight: 300;
}

/* ============ Value scenes (statements) ============ */

.value-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}

.value-caption {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 50ch;
  font-weight: 300;
}

/* ============ Post-scroll content ============
   Sits in normal flow AFTER the .scroll-track. As the user scrolls past the
   scene region, the fixed video + scenes + indicators fade out (handled in JS),
   and this content takes over with a higher z-index + solid bg. */

.post-scroll {
  position: relative;
  z-index: 25;
  /* No top padding — content starts at the section edge so there's no empty
     strip between the scrolling video and the clients section. The bg pseudo
     handles the visual transition via a feathered top edge (mask below). */
  padding: 0 var(--scene-edge-padding);
}

/* Full-bleed 3D-grid bg that spans the whole post-scroll area (clients +
   see-work). `background-attachment: fixed` keeps it locked to the viewport
   so the section scrolls past it as a mask. The footer paints its own solid
   bg on top so the grid doesn't peek through under the legal row. */
.post-scroll::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Full-bleed without `transform` — Chrome/WebKit silently disables
     `background-attachment: fixed` on a transformed element. */
  left: calc(50% - 50vw);
  width: 100vw;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("our%20work%20bg.png");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  pointer-events: none;
  /* Feather the top edge so the bg fades in from the dark scene area above
     instead of cutting in with a hard line. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    black clamp(3rem, 7vh, 6rem),
    black 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    black clamp(3rem, 7vh, 6rem),
    black 100%);
}

/* Lift each direct section above the bg pseudo */
.post-scroll > * { position: relative; }

.post-section-head {
  margin-bottom: 3rem;
}

.post-section-head .eyebrow {
  margin-bottom: 1.5rem;
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 18ch;
}

/* ----- Clients grid ----- */

/* The clients section sits inside .post-scroll, which provides the full-bleed
   3D-grid bg covering both clients and see-work. Each card is a liquid-glass
   tile (definitions further down). */
.clients {
  max-width: 1200px;
  margin: 0 auto;
  /* Tight vertical rhythm — top has only enough breathing room for the feather
     to clear the eyebrow; bottom is flush so the see-work block follows
     directly without an empty band. */
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each client card uses the same liquid-glass treatment as Our Work cards */
.client-card a {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.75rem 1.5rem;
  height: 100%;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: background 350ms var(--ease-soft),
              border-color 350ms var(--ease-soft),
              transform 350ms var(--ease-out),
              box-shadow 350ms var(--ease-soft);
}

.client-card a::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.client-card a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at top right,
    rgba(0, 255, 149, 0.13),
    transparent 65%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.client-card a > * {
  position: relative;
  z-index: 2;
}

.client-card a:hover {
  background: linear-gradient(135deg,
    rgba(0, 255, 149, 0.10),
    rgba(255, 255, 255, 0.04));
  border-color: rgba(0, 255, 149, 0.4);
  transform: translateY(-3px);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 32px -10px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Grayscale avatar at the top of each client card. The PNG is already
   pre-processed (circular alpha mask + grayscale) so the white surrounding
   is transparent — no extra CSS masking needed. */
.client-avatar {
  width: 64px;
  height: 64px;
  display: block;
  flex-shrink: 0;
  filter: contrast(1.05);
  transition: filter 350ms var(--ease-soft), transform 350ms var(--ease-out);
}

.client-card a:hover .client-avatar {
  filter: contrast(1.1) brightness(1.08);
  transform: scale(1.04);
}

.client-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 1.5rem;
}

.client-card-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.client-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.7vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  grid-column: 1;
  grid-row: 1;
}

.client-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  grid-column: 1;
  grid-row: 2;
  margin-top: 0.35rem;
}

.client-arrow {
  color: var(--text-faint);
  font-size: 1.05rem;
  transition: all 320ms var(--ease-out);
  grid-column: 2;
  grid-row: 1;
}

.client-card a:hover .client-arrow {
  color: var(--accent);
  transform: translate(3px, -3px);
}

.client-card-bottom {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.client-count {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-shadow: 0 0 22px var(--accent-glow);
}

.client-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ----- See our work CTA ----- */

.see-work {
  max-width: 1200px;
  margin: 0 auto;
  /* No top padding / divider — flows directly from the client cards above */
  padding-top: 0;
}

.see-work-link {
  display: block;
  padding: 2.5rem 0;
  position: relative;
  transition: padding 400ms var(--ease-out);
}

.see-work-link:hover {
  padding-left: 1rem;
}

.see-work-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  margin-bottom: 1rem;
}

.see-work-headline {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.see-work-arrow {
  display: inline-block;
  color: var(--text);
  transition: transform 350ms var(--ease-out), color 250ms var(--ease-soft);
}

.see-work-link:hover .see-work-arrow {
  transform: translateX(10px);
  color: var(--accent);
}

.see-work-sub {
  display: block;
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 300;
}

/* ----- Site footer ----- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 2rem 0 2.25rem;
  background: var(--bg);
}

.site-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer-nav {
  display: flex;
  gap: 1.75rem;
}

.site-footer-nav a {
  color: var(--text-muted);
  transition: color 200ms var(--ease-soft);
}

.site-footer-nav a:hover { color: var(--accent); }

.site-footer-tag {
  color: var(--accent);
}

@media (max-width: 880px) {
  .post-title { font-size: clamp(2rem, 8vw, 3rem); }
  .see-work-headline { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .site-footer-row { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
  .site-footer-nav { flex-wrap: wrap; gap: 1rem; }
}

/* ============ Static (sub-)pages ============
   Our Work / Products / About / Contact share a simpler layout: nav, then a
   single-column main with the same typographic system used on the home page. */

.page-static {
  background: var(--bg);
}

/* Our Work page — uses a 3D grid background image instead of solid black.
   A dark linear-gradient overlay is stacked above the image to dim the
   cyan grid lines so they read as faint, atmospheric texture rather than
   foreground pattern. min-height: 100vh ensures the bg covers the full
   viewport even when the page has no content yet. */
.page-our-work {
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("our%20work%20bg.png");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-color: var(--bg);
}

/* ============ Liquid Glass utility ============
   Cross-browser approximation of Apple's iOS 26 "Liquid Glass" — heavy
   backdrop blur + saturate, semi-transparent gradient bg, top-edge specular
   highlight, ambient green corner tint, and layered shadows for depth. */

.lg-glass {
  position: relative;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Top specular highlight — the "glint" of glass */
.lg-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ambient green tint from one corner — ties the glass to the brand accent */
.lg-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at top right,
    rgba(0, 255, 149, 0.13),
    transparent 65%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* ============ Our Work — natural-scroll page with selector cards ============
   Architecture:
   • Persistent section-selector at top with 4 medium liquid-glass cards
     (icon + name). Click smooth-scrolls to that section. Active card
     tracked via IntersectionObserver scroll-spy.
   • Page is normal flow — sections stack vertically.
   • Reels shows 3 portrait cards in a 3-column grid.
   • Entertainment / Talking Head / Motion Graphics each have 3 landscape
     cards stacked one per row, full-width within the container. */

/* ----- Persistent section selector ----- */

.section-selector {
  position: fixed;
  /* Sits below the nav (~84px tall) with ~28px of clear space above */
  top: clamp(7rem, 11vh, 8rem);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  padding: 0 var(--page-side-pad);
  pointer-events: none;
}

.selector-card {
  /* Compact horizontal pill — liquid-glass styled (white-tint gradient +
     backdrop blur), no longer the bulky stacked card. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 220ms var(--ease-out),
              background 220ms var(--ease-soft),
              border-color 220ms var(--ease-soft),
              color 220ms var(--ease-soft),
              box-shadow 220ms var(--ease-soft);
}

.selector-card:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg,
    rgba(0, 255, 149, 0.10),
    rgba(255, 255, 255, 0.04));
  border-color: rgba(0, 255, 149, 0.4);
  color: var(--text);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 18px -4px var(--accent-glow);
}

.selector-card:hover .selector-card-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.selector-card.is-active {
  background: linear-gradient(135deg,
    rgba(0, 255, 149, 0.16),
    rgba(0, 255, 149, 0.04));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow:
    0 0 18px -4px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.selector-card.is-active .selector-card-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.selector-card-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: color 220ms var(--ease-soft),
              filter 220ms var(--ease-soft);
}

.selector-card-icon svg { width: 100%; height: 100%; }

.selector-card-name {
  letter-spacing: -0.005em;
  line-height: 1;
}

@media (max-width: 720px) {
  .section-selector { gap: 0.4rem; }
  .selector-card { padding: 0.55rem; }
  .selector-card-name { display: none; }
  .selector-card-icon { width: 18px; height: 18px; }
}

/* ----- Page content (normal flow) ----- */

main.work-page-list {
  position: relative;
  z-index: 5;
  /* Top padding: nav (~84px) + gap (28px) + pill (~36px) + gap (28px) ≈ 176px.
     Horizontal padding is a normal gutter — main is already centered via
     max-width + margin: auto, so we don't double-apply --page-side-pad. */
  padding: clamp(11rem, 19vh, 14rem) clamp(1.5rem, 4vw, 3rem) 6rem;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.work-section {
  /* Scales with viewport so the layout fills wide screens (1440 → 4K) instead
     of leaving a sea of black on the sides. */
  max-width: clamp(1100px, 92vw, 2200px);
  margin: 0 auto 7rem;
  /* Anchor scroll lands the section title visually below fixed chrome
     with the equal-gap requested. */
  scroll-margin-top: clamp(11rem, 19vh, 14rem);
  /* Smooth focus-fade transition driven by JS on scroll */
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-section:last-child { margin-bottom: 0; }

.work-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.75rem;
  white-space: nowrap;
}

/* Reels — 3-card flex row, cards capped so they fit in viewport */
.cards-grid {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cards-grid > .work-card-portrait {
  /* Card sized to fit the available vertical space below nav + selector +
     title (~250px of fixed chrome on most viewports). max-height plus
     aspect-ratio means width auto-derives, so 3 cards stay row-aligned.
     max-width scales with viewport so cards grow on big screens (4K) but
     never get absurdly tall. */
  aspect-ratio: 9 / 16;
  flex: 0 1 auto;
  height: auto;
  width: 100%;
  max-width: clamp(300px, 20vw, 540px);
  max-height: calc(100vh - 320px);
}

/* Landscape sections — vertical stack */
.cards-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.work-card-landscape-stack {
  width: 100%;
  max-width: clamp(780px, 66vw, 1600px);
  aspect-ratio: 16 / 9;
}

/* YouTube card: thumbnail-on-top + tight meta strip below. The whole card
   is the click target — no inner button. The thumb wrap is a 16:9 frame
   that contains the image and centered play icon; the meta sits flush
   underneath with the view count anchored to the bottom-right. */
.work-card-yt {
  width: 100%;
  max-width: clamp(780px, 66vw, 1600px);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.work-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.work-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 500ms var(--ease-out),
              filter 320ms var(--ease-soft);
}

.work-card:hover .work-card-thumb {
  transform: scale(1.025);
  filter: brightness(0.78);
}

.work-card-yt .work-card-meta {
  position: relative;
  width: 100%;
  padding: 0.85rem 1.4rem 1rem;
  display: block;
}

.work-card-views {
  position: absolute;
  right: 1.4rem;
  bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.work-card-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  z-index: 2;
  pointer-events: none;
  transition: transform 280ms var(--ease-out),
              background 280ms var(--ease-soft),
              border-color 280ms var(--ease-soft),
              color 280ms var(--ease-soft),
              box-shadow 280ms var(--ease-soft);
}

.work-card-play-icon svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;  /* optical center for the play triangle */
}

.work-card:hover .work-card-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: linear-gradient(135deg, rgba(0, 255, 149, 0.22), rgba(0, 255, 149, 0.06));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 32px -4px var(--accent-glow);
}

@media (max-width: 880px) {
  main.work-page-list { padding-top: clamp(9.5rem, 15vh, 12rem); }
  .cards-grid { gap: 0.75rem; }
  .cards-grid > .work-card-portrait { max-width: 240px; }
  .work-section-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .work-section { scroll-margin-top: clamp(9.5rem, 15vh, 12rem); }
}

/* ---- Legacy grid kept for any pages that might reference it ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-flow: dense;
  gap: 1.25rem;
  padding-bottom: 4rem;
  list-style: none;
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  transition: transform 400ms var(--ease-out),
              box-shadow 400ms var(--ease-soft);
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 40px -10px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.work-card-landscape {
  aspect-ratio: 16 / 9;
  grid-column: span 2;
}

.work-card-portrait {
  aspect-ratio: 9 / 16;
  grid-column: span 1;
}

/* Card content sits above the ::before / ::after pseudo overlays */
.work-card > * {
  position: relative;
  z-index: 2;
}

.work-card-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px var(--accent-glow);
}

.work-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.work-card-year {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
}

@media (max-width: 880px) {
  .work-card-landscape,
  .work-card-portrait { grid-column: span 1; }
  .work-card-landscape { aspect-ratio: 16 / 9; }
}

/* Card preview video — fills the card behind the glass overlays. The browser
   shows the frame at the URL fragment time (#t=0.5) as the thumbnail until
   the user hovers and JS calls .play(). */
.work-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

/* Audio toggle — appears on hover, top-right of the card. Clicks here
   toggle mute without triggering the modal (the existing card-click
   handler skips clicks on buttons without [data-full-video]). */
.work-card-mute {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 250ms var(--ease-soft),
              transform 250ms var(--ease-out),
              background 220ms var(--ease-soft),
              color 220ms var(--ease-soft);
}

.work-card:hover .work-card-mute,
.work-card-mute:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.work-card-mute:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.work-card-mute svg {
  width: 18px;
  height: 18px;
  display: none;
}

.work-card-mute.is-muted .icon-mute { display: block; }
.work-card-mute:not(.is-muted) .icon-unmute { display: block; }

/* Bottom gradient behind card text so titles stay readable over any frame */
.work-card[data-full-video] .work-card-meta,
.work-card:has(.work-card-media) .work-card-meta {
  position: relative;
  z-index: 2;
  margin: auto -1.4rem -1.25rem -1.4rem;
  padding: 5rem 1.4rem 1.25rem;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 55%,
    transparent 100%);
}

/* ============ Video modal ============
   Opens when any element with [data-full-video] is clicked. The card preview
   videos are paused while the modal is up so audio doesn't conflict, then
   resumed on close. */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vh, 4rem) clamp(1rem, 4vw, 4rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity 320ms var(--ease-out), visibility 320ms;
}

.video-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: none;
  padding: 0;
  cursor: pointer;
}

.video-modal-content {
  position: relative;
  z-index: 1;
  width: min(100%, 1280px);
  max-height: 92vh;
  aspect-ratio: 16 / 9;
  padding: 0;
  border-radius: 24px;
  overflow: visible;  /* let the close button extrude */
  transform: scale(0.96);
  transition: transform 320ms var(--ease-out);
}

.video-modal.is-open .video-modal-content {
  transform: scale(1);
}

.video-modal-video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 24px;
  background: #000;
  object-fit: contain;  /* portrait videos sit centered with letterboxing */
}

.video-modal-player {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}

.video-modal-player > video,
.video-modal-player > iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

.video-modal-player > video {
  object-fit: contain;
}

.video-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms var(--ease-soft),
              color 220ms var(--ease-soft),
              transform 220ms var(--ease-out);
}

.video-modal-close:hover {
  background: var(--accent);
  color: var(--bg);
  transform: scale(1.06);
}

/* Lock body scroll while modal is open */
body.modal-open {
  overflow: hidden;
}

.static-page {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(7rem, 12vw, 11rem) var(--scene-edge-padding) 0;
}

.static-header {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 760px;
}

.static-header .eyebrow {
  margin-bottom: 1.75rem;
}

.static-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.static-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 56ch;
}

/* Active nav link styling — same underline mechanic just locked-on */
.nav-links a.is-active {
  color: var(--text);
}
.nav-links a.is-active::after {
  transform: scaleX(1);
}
.nav-cta.is-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 24px -8px var(--accent-glow);
}

/* ----- Our Work: vertical work list ----- */

.work-list-static {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  margin-bottom: 6rem;
}

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1.4fr 2fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding 400ms var(--ease-out), background 400ms var(--ease-soft);
}

.work-row:hover {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background: rgba(0, 255, 149, 0.025);
}

.work-row:hover .work-row-arrow {
  color: var(--accent);
  transform: translate(4px, -4px);
}

.work-row-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.work-row-tag {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  align-self: flex-start;
}

.work-row-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.work-row-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.5;
}

.work-row-arrow {
  font-size: 1.2rem;
  color: var(--text-faint);
  transition: all 350ms var(--ease-out);
}

@media (max-width: 880px) {
  .work-row {
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
  }
  .work-row-meta { grid-column: 1 / -1; }
  .work-row-title { grid-column: 1; grid-row: 2; }
  .work-row-arrow { grid-column: 2; grid-row: 2; align-self: center; }
  .work-row-desc { grid-column: 1 / -1; grid-row: 3; }
}

/* Static-page headers that should sit on one line — drop the 760px cap and
   force nowrap so the title never wraps awkwardly. */
.page-products .static-header,
.page-contact .static-header {
  max-width: none;
}
.page-products .static-title,
.page-contact .static-title {
  white-space: nowrap;
}

/* ----- Products page: 3-card grid ----- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 6rem;
}

/* The base .product-card (further down) supplies padding, border, bg blur,
   and the accent radial tint. Here we lay it out as a flex column so the
   footer (price + Buy) anchors to the bottom regardless of desc length. */
.products-grid .product-card {
  display: flex;
  flex-direction: column;
  transition: transform 350ms var(--ease-out),
              border-color 350ms var(--ease-soft),
              box-shadow 350ms var(--ease-soft);
}

.products-grid .product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 149, 0.4);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 36px -10px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.products-grid .product-card > * {
  position: relative;
  z-index: 1;
}

.product-card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.product-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 500ms var(--ease-out);
}

.products-grid .product-card:hover .product-card-image {
  transform: scale(1.04);
}

.product-software-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.8rem 0.4rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  margin-bottom: 1rem;
  width: fit-content;
  cursor: default;
  transition: background 280ms var(--ease-soft),
              border-color 280ms var(--ease-soft),
              color 280ms var(--ease-soft),
              box-shadow 280ms var(--ease-soft);
}

/* Highlight the badge when it's directly hovered or when its parent card
   is hovered, so the system requirement reads as part of the active state. */
.product-software-badge:hover,
.products-grid .product-card:hover .product-software-badge {
  background: rgba(0, 255, 149, 0.10);
  border-color: rgba(0, 255, 149, 0.4);
  color: var(--text);
  box-shadow: 0 0 18px -6px var(--accent-glow);
}

.product-software-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.product-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.7rem;
}

.product-card-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  flex: 1;     /* push footer down on tall cards */
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.product-card-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ----- Products: standalone card (legacy, kept for any page using it) ----- */

.product-card-static {
  position: relative;
  padding: 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  overflow: hidden;
  max-width: 720px;
  margin-bottom: 6rem;
}

.product-card-static::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at top right, var(--accent-soft), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.product-card-static .product-tag,
.product-card-static .product-name,
.product-card-static .product-desc,
.product-card-static .product-features,
.product-card-static .product-footer {
  position: relative;
  z-index: 1;
}

/* The about page main is normally a stacking context (z-index: 10) which
   isolates the brain video's `mix-blend-mode: screen`, so the cursor glow
   gets stuck behind the page and the black-bg pixels can't blend out.
   Drop the z-index here so the brain blends against the body bg + bg-glow,
   making the black disappear and the cursor halo paint over the logo. */
.page-about .static-page {
  z-index: auto;
}

/* ----- About: 2-column header (text + brain video) ----- */

.about-header {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  /* Allow this header to grow wider than the default 760 cap so the video has
     proper room next to the title. */
  max-width: 1200px;
}

.about-header-text {
  min-width: 0;
}

.about-brain-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
}

.about-brain-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* The source video is the brain logo on solid black — `mix-blend-mode:
     screen` drops the black against the dark page bg, so the logo reads as
     transparent without re-encoding. */
  mix-blend-mode: screen;
}

@media (max-width: 760px) {
  .about-header {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-brain-video-wrap {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ----- About: 3-column grid ----- */

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem 2rem;
  border-top: 1px solid var(--hairline);
  padding-top: 3rem;
  margin-bottom: 6rem;
}

.about-block h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 1.25rem;
}

.about-block h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

.about-block p {
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.55;
  max-width: 38ch;
}

/* ----- Contact: card on standalone page ----- */

.page-contact .contact-card {
  margin-bottom: 2.5rem;
  max-width: 720px;
}

/* ----- Contact form (mailto-driven) ----- */

.contact-form {
  display: grid;
  gap: 1rem;
  max-width: 720px;
  margin: 0 0 6rem;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.018);
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.contact-form-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contact-form-field input,
.contact-form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color 220ms var(--ease-soft),
              background 220ms var(--ease-soft),
              box-shadow 220ms var(--ease-soft);
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: var(--text-faint);
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
  outline: none;
  border-color: rgba(0, 255, 149, 0.5);
  background: rgba(0, 255, 149, 0.04);
  box-shadow: 0 0 0 4px rgba(0, 255, 149, 0.08);
}

.contact-form-field textarea {
  resize: vertical;
  min-height: 130px;
  font-family: inherit;
}

.contact-form-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 0.25rem 0 0.25rem;
}

.contact-form-target {
  color: var(--accent);
}

.contact-form-submit {
  justify-self: start;
}

@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.25rem; }
}

/* Static pages footer spacing */
.static-page .site-footer {
  margin-top: 3rem;
}

/* ============ Scene head (used in non-hero scenes) ============ */

.scene-head {
  margin-bottom: 2rem;
}

.scene-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--accent-glow);
}

.scene-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}

.scene-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 36ch;
  font-weight: 300;
}

/* ============ Portfolio (work list) ============ */

.work-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  pointer-events: auto;
}

.work-item {
  position: relative;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding 400ms var(--ease-out);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.work-item:hover {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.work-item:hover .work-arrow {
  color: var(--accent);
  transform: translate(4px, -4px);
}

.work-meta {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.work-tag {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
}

.work-title {
  grid-row: 2;
  grid-column: 1;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.work-arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 1.1rem;
  color: var(--text-faint);
  transition: all 350ms var(--ease-out);
  align-self: center;
}

/* ============ Products ============ */

.product-card {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  pointer-events: auto;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at top right, var(--accent-soft), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.product-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.product-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}

.product-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 300;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.product-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.product-features li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.product-features li span {
  color: var(--accent);
  font-size: 0.6rem;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 1;
}

.product-price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.price-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.price-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ============ Services ============ */

.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  pointer-events: auto;
}

.service-item {
  padding: 1.25rem 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  transition: background 400ms var(--ease-soft);
}

.service-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease-out);
}

.service-item:hover {
  background: rgba(0, 255, 149, 0.05);
}

.service-item:hover::before { transform: scaleY(1); }

.service-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.service-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.4;
}

/* ============ Contact ============ */

.contact-card {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

/* Social icon row inside the contact card (sits above the email row) */
.contact-socials {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.contact-social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  transition: color 260ms var(--ease-soft),
              border-color 260ms var(--ease-soft),
              background 260ms var(--ease-soft),
              transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-soft);
}

.contact-social:hover {
  color: var(--accent);
  border-color: rgba(0, 255, 149, 0.45);
  background: rgba(0, 255, 149, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 0 26px -4px var(--accent-glow),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.contact-social svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* Email row: mailto link + copy-to-clipboard button as siblings */
.contact-email-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--hairline);
}

.contact-email {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  position: relative;
  transition: background 350ms var(--ease-soft);
  min-width: 0;
}

.contact-email:hover { background: rgba(0, 255, 149, 0.05); }
.contact-email:hover .contact-arrow { color: var(--accent); transform: translateX(6px); }
.contact-email:hover .contact-value { color: var(--accent); }

.contact-email-copy {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 220ms var(--ease-soft),
              color 220ms var(--ease-soft);
}

.contact-email-copy:hover {
  background: rgba(0, 255, 149, 0.07);
  color: var(--accent);
}

.contact-email-copy svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.contact-copy-icon-done {
  display: none;
  color: var(--accent);
}

.contact-email-copy.is-copied {
  background: rgba(0, 255, 149, 0.10);
  color: var(--accent);
}

.contact-email-copy.is-copied .contact-copy-icon-default { display: none; }
.contact-email-copy.is-copied .contact-copy-icon-done { display: block; }

/* "Copied" tooltip — fades in briefly on success */
.contact-copy-tooltip {
  position: absolute;
  top: -8px;
  right: 50%;
  transform: translate(50%, -100%);
  padding: 0.25rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 255, 149, 0.4);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-soft), transform 200ms var(--ease-out);
}

.contact-email-copy.is-copied .contact-copy-tooltip {
  opacity: 1;
  transform: translate(50%, -110%);
}

.contact-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 0.3rem;
}

.contact-value {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  flex: 1;
  transition: color 300ms var(--ease-soft);
}

.contact-arrow {
  font-size: 1.1rem;
  color: var(--text-faint);
  transition: all 350ms var(--ease-out);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
}

.contact-item {
  padding: 1.1rem 1.5rem;
  background: rgba(0, 0, 0, 0.55);
}

.contact-value-sm {
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.scene-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer-mark { color: var(--accent); }

/* ============ Top scroll progress bar ============ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: var(--page-side-pad);
  right: var(--page-side-pad);
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ============ Responsive ============ */

@media (max-width: 880px) {
  :root {
    --scene-edge-padding: clamp(1.25rem, 5vw, 2rem);
  }

  .nav-links { display: none; }

  .nav-cta {
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
  }

  .scene[data-position="left"],
  .scene[data-position="right"] {
    justify-content: center;
  }

  .scene-content { max-width: 92vw; }

  .scene[data-position="center"] .scene-content,
  .scene[data-position="left"] .scene-content,
  .scene[data-position="right"] .scene-content {
    max-width: 92vw;
  }

  .product-features,
  .service-list,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .scene-indicators {
    right: 0.75rem;
  }
}

@media (max-width: 540px) {
  .display { font-size: clamp(2.75rem, 14vw, 4.5rem); }

  .scene-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}