/* ---------------------------------------------------------------
   Fonts — self-hosted so it renders identically in every browser,
   not just ones with the family installed system-side.
----------------------------------------------------------------*/
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   Tokens
----------------------------------------------------------------*/
:root {
  --bg: #0a0a0a;
  --fg: #f2f0ea;
  --muted: #8a8a86;
  --line: #232321;
  --line-soft: #1a1a18;
  --accent: #e9ff3e;

  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --body: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --chrome-pad: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 700;
  height: 100%;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
img, video { max-width: 100%; display: block; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Chrome (shared header / footer bars)
----------------------------------------------------------------*/
.chrome {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: var(--chrome-pad);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.chrome--top {
  top: 0;
  background: rgba(10, 10, 10, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-soft);
}
.chrome--bottom {
  bottom: 0;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
/* Inside the reel, the footer bar belongs to that section, not the
   viewport — it scrolls away with the reel instead of floating over
   the hero above it. */
.reel .chrome--bottom {
  position: absolute;
  z-index: 20;
}

.brand__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 1.8vw, 21px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity .28s ease, transform .28s ease;
}
.brand__name.is-swapping {
  opacity: 0;
  transform: translateY(-0.2em);
}
@media (prefers-reduced-motion: reduce) {
  .brand__name { transition: none; }
}
.brand__meta {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.nav a {
  position: relative;
  padding-bottom: 4px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav a[aria-current="page"] { color: var(--accent); }

/* ---------------------------------------------------------------
   Homepage hero
----------------------------------------------------------------*/
.hero {
  position: relative;
  /* Full viewport height so nothing from the next section is visible
     until the user actually scrolls. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: calc(var(--chrome-pad) * 2 + 30px) var(--chrome-pad) 60px;
  overflow: hidden;
  background: var(--bg);
}
.hero--compact { min-height: 52vh; }

.hero__bg {
  position: absolute;
  /* A hairline gap can appear at one edge on some mobile browsers from
     subpixel rounding when a video layer is composited edge-to-edge —
     bleeding this 2px past the section's own bounds (still clipped by
     .hero's overflow:hidden) guarantees full coverage regardless. Top
     is the exception: --hero-bg-top (set from JS in hero-bg.js) pins
     it flush against the header's own real bottom edge instead, so
     the video starts right below the nav bar rather than running
     behind its translucent blur.
  */
  top: var(--hero-bg-top, -2px);
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__video-layers {
  position: absolute;
  inset: 0;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero__video.is-active { opacity: 1; }
.page__canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.2) 0%, rgba(10,10,10,.6) 65%, var(--bg) 100%);
}
.hero__headline, .hero__cue {
  position: relative;
  z-index: 1;
}

.hero__headline {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(34px, 9vw, 128px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  /* Without this, the font's own kerning table nudges specific
     letter pairs (like L-E vs E-T) tighter or looser than others —
     turning it off makes every gap purely the flat letter-spacing
     above, so all pairs read as evenly spaced. */
  font-kerning: none;
  text-transform: uppercase;
  width: 100%;
  margin: 0;
}
.hero__line {
  display: block;
  white-space: nowrap;
}
.hero__lead { display: block; }
.hero__word {
  display: inline-block;
  color: var(--accent);
  /* A bit more room than the lead lines — long rotating words like
     "UNFORGETTABLE" pack tight double-letter clusters (E-T-T) that
     read as cramped at the base letter-spacing. */
  letter-spacing: 0.03em;
  transition: opacity .32s ease, transform .32s ease;
}
.hero__word.is-swapping {
  opacity: 0;
  transform: translateY(0.18em);
}
@media (prefers-reduced-motion: reduce) {
  .hero__word { transition: none; }
}
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.hero__cue:hover { color: var(--accent); }
.hero__cue svg {
  width: 13px;
  height: 13px;
  animation: heroCueBob 1.8s ease-in-out infinite;
}
@keyframes heroCueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue svg { animation: none; }
}

/* ---------------------------------------------------------------
   Homepage reel
----------------------------------------------------------------*/
.reel {
  position: relative;
  height: 100vh;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}

/* A fixed-ratio HD frame, centered in the section and inset to align
   with the hero's own margins — the full picture always stays inside
   it, letterboxed rather than cropped, on every screen size. Its
   actual width/height (capped at 1280x720, clear of the top nav and
   the caption bar's real rendered height) are set from JS in
   reel.js — a plain CSS width+max-height combo can't keep the box a
   true 16:9 rectangle once max-height becomes the binding constraint. */
.reel__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.reel__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .8s ease;
}
.reel__layer.is-active { opacity: 1; }

.reel__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 18%, transparent 78%, rgba(0,0,0,.7) 100%);
  z-index: 5;
}

.reel__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.reel__timecode {
  font-family: var(--mono);
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: 6px;
}
.reel__client {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: pre-line;
}
.reel__title {
  font-family: var(--body);
  font-size: clamp(12px, 1.3vw, 14px);
  color: var(--muted);
}

.controls {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.controls button {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.controls button:hover { opacity: 1; color: var(--accent); }
/* Pulled out of the transport row and pinned to the video frame's own
   bottom-right corner instead — a persistent, high-contrast call to
   action rather than one control among several. Shared by the reel
   player's sound button and the hero background video's own. */
.video-sound-btn {
  position: absolute;
  right: 16px;
  bottom: 40px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 9px 16px;
  opacity: .92;
  transition: opacity .2s ease, background .2s ease;
}
.video-sound-btn:hover { opacity: 1; background: rgba(10, 10, 10, .75); }
/* Right-edge-aligned with the "You" nav link at the end of the top
   menu, instead of the shared .video-sound-btn's own fixed 16px —
   --chrome-pad is the same value the nav's own right edge sits at.
   Overridden again below for mobile. */
#heroSoundBtn {
  right: var(--chrome-pad);
}

.reel__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  padding: 8px 0;
  box-sizing: content-box;
  background: transparent;
  z-index: 21;
  cursor: pointer;
  transition: height .15s ease;
}
.reel__progress:hover { height: 5px; }
.reel__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .1s linear;
  pointer-events: none;
}

/* Empty state: SMPTE-style countdown leader */
.reel__empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  text-align: center;
  padding: 24px;
}
.reel__empty.is-visible { display: flex; }
.reel__empty h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.reel__empty p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  max-width: 440px;
  line-height: 1.6;
  margin: 0;
}
.reel__empty code {
  color: var(--accent);
  font-family: var(--mono);
}

/* ---------------------------------------------------------------
   Work (works grid) page
----------------------------------------------------------------*/
.bin {
  min-height: 100%;
  padding: calc(var(--chrome-pad) * 2 + 20px) var(--chrome-pad) 100px;
}
.bin__head {
  margin-bottom: 36px;
}
.bin__head h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.bin__head p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 24px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filters button {
  border: 1px solid var(--line);
  padding: 7px 14px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--muted);
  transition: all .2s ease;
}
.filters button:hover { color: var(--fg); border-color: var(--fg); }
.filters button.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  margin-top: 36px;
}

.card {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #050505;
  cursor: pointer;
}
.card video, .card img.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease, transform 6s ease;
}
.card img.poster { opacity: 1; }
.card.is-playing video { opacity: 1; }
.card:hover video, .card:hover img.poster {
  transform: scale(1.03);
}

.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}
.card__meta {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.card__client {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card__title {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.card__duration {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  flex: none;
}

.bin__empty {
  padding: 60px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.bin__empty code { color: var(--accent); }

/* ---------------------------------------------------------------
   Lightbox
----------------------------------------------------------------*/
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--chrome-pad);
}
.lightbox.is-open { display: flex; }
.lightbox__stage {
  position: relative;
  width: 100%;
}
.lightbox__stage video {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #000;
}
.lightbox__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 14px;
  gap: 20px;
}
.lightbox__client {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.lightbox__title, .lightbox__credits {
  font-family: var(--body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.lightbox__nav {
  display: flex;
  gap: 16px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lightbox__nav button:hover { color: var(--accent); }
.lightbox__close {
  position: absolute;
  top: calc(var(--chrome-pad) * -1 + 4px);
  right: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lightbox__close:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   About page
----------------------------------------------------------------*/
.about {
  /* Top-anchored via padding alone, matching .contact (You page) —
     flex + align-items:flex-end used to bottom-anchor this content
     instead, so its actual on-screen position depended on this page's
     own content length and drifted out of sync with the You page's
     otherwise-identical lead title/form layout. */
  padding: var(--about-top-pad, calc(var(--chrome-pad) * 2 + 56px)) var(--chrome-pad) 100px;
  background: #0c0b09;
}
.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  width: 100%;
}
.about__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about__lead {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: 0.002em;
  text-transform: uppercase;
  max-width: 20ch;
  margin: 0;
  color: var(--accent);
}
.about__statement {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.28;
  letter-spacing: 0.005em;
  max-width: 640px;
}
.about__statement p { margin: 0 0 20px; white-space: pre-line; }
.about__statement p:last-child { margin-bottom: 0; }
.about__side {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about__block h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.about__block p, .about__block a {
  font-family: var(--body);
  font-size: 14px;
  color: var(--fg);
  margin: 0;
}
.about__block a { border-bottom: 1px solid var(--line); }
.about__block a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------
   You (contact) page
----------------------------------------------------------------*/
.contact {
  padding: var(--contact-top-pad, calc(var(--chrome-pad) * 2 + 56px)) var(--chrome-pad) 140px;
  background: #0c0b09;
}
.contact__form {
  max-width: 560px;
}
.contact__field {
  margin-bottom: 24px;
}
.contact__field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.contact__field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 24px);
  padding: 10px 2px;
  transition: border-color .2s ease;
}
.contact__field input::placeholder { color: var(--muted); opacity: .55; }
.contact__field input:focus {
  outline: none;
  border-color: var(--accent);
}
.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.contact__submit:hover { transform: translateY(-2px); }
.contact__submit svg { width: 15px; height: 15px; }
.contact__note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 760px) {
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about { align-items: flex-start; }
  .chrome { align-items: flex-start; gap: 12px; }
  .brand__name { font-size: 10px; }
  .nav { gap: 14px; font-size: 10px; }
  .controls { gap: 10px; font-size: 10px; }
  .controls button span.label { display: none; }
  .grid { grid-template-columns: 1fr; }
  .lightbox__meta { flex-direction: column; }
  .contact__field input { font-size: 18px; }
  /* Centered vertically on desktop, the headline covers too much of
     the background video's own image on a tall mobile screen — nudge
     it down from center so more of the video shows above the text. */
  .hero__headline {
    margin-top: 200px;
  }
  /* The fixed 16:9 frame is right for a landscape reel on a wide
     screen, but on a tall mobile viewport it squeezes down to a
     small horizontal strip with huge black bars — especially bad
     for the vertical/portrait reels. Fill the screen instead and
     let each clip's own object-fit: contain handle its own ratio. */
  .reel__frame {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
  /* Scaled up from the left edge so the extra width bleeds off the
     right side (clipped by .hero__bg's overflow:hidden) instead of
     letterboxing — reads bigger, more immersive on a narrow screen. */
  /* On a tall, narrow mobile hero, object-fit: cover on a landscape
     clip only ever shows a narrow center slice of the frame — most of
     the width is cropped no matter what. Biasing that slice right of
     center keeps the subject (and its face, when it turns to camera)
     inside the visible window instead of centering on empty backdrop. */
  .hero__video {
    object-position: 60% center;
  }
  /* On mobile, positioned to land in the same on-screen spot as the
     Reels/Videos sound button initially would (measured directly from
     that page) — the hero has no footer/caption bar to anchor to the
     way those pages do. Anchored to .hero itself (position:absolute,
     not fixed) so it scrolls away with the hero instead of staying
     pinned over every section below as the page scrolls. */
  #heroSoundBtn {
    position: absolute;
    left: 16px;
    right: auto;
    bottom: auto;
    /* In the space left below the headline (which runs to ~71% down
       at this breakpoint) rather than literal screen-middle, which
       collided directly with the text. */
    top: 80%;
  }
  /* Same logic on the Reels/Videos player: top-left, clear of the
     header, instead of the desktop bottom-right position. --header-bottom
     (set from JS in reel.js) is the header's real rendered height.
     In practice this is overridden by syncSoundBtnPos() in reel.js
     (data-sound-btn-pos="above-title" pages set an inline position),
     so this only matters as a fallback before that JS first runs. */
  #btnSound {
    top: calc(var(--header-bottom, 0px) + 16px);
    bottom: auto;
    left: 16px;
    right: auto;
  }
}

/* ---------------------------------------------------------------
   Growth + view-count stats, below the homepage hero — share a
   generative-particle backdrop across both sections.
----------------------------------------------------------------*/
.stats {
  position: relative;
  /* A warm, dark stone grey instead of near-black (--bg) for the
     homepage's post-hero content, down to the footer — scoped here
     rather than changing --bg globally, which also drives text/button
     colors and every other page's background. */
  background: #0c0b09;
}
.stats__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.growth {
  position: relative;
  z-index: 1;
  padding: 96px var(--chrome-pad) 110px;
  border-top: 1px solid var(--line);
}
.growth__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 56px;
}
.growth__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
.growth__chart {
  display: block;
  width: 100%;
  height: clamp(110px, 16vw, 200px);
  overflow: visible;
}
.growth__baseline {
  stroke: var(--line);
  stroke-width: 1;
}
.growth__path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: growthDraw 4s cubic-bezier(.45, 0, .2, 1) infinite;
}
.growth__path--white { stroke: var(--fg); }
.growth__path--accent {
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px rgba(233, 255, 62, .45));
}
@keyframes growthDraw {
  0% { stroke-dashoffset: 420; }
  55%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -420; }
}
.growth__dot--white { fill: var(--fg); }
.growth__dot--accent { fill: var(--accent); }
.growth__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--fg);
  margin: 20px 0 0;
}
.growth__value--accent { color: var(--accent); }
.growth__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .growth__path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
@media (max-width: 760px) {
  .growth__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------------------------------------------------------------
   View-count stats, bar-chart style — below the growth stats
----------------------------------------------------------------*/
.views {
  position: relative;
  z-index: 1;
  padding: 0 var(--chrome-pad) 64px;
}
.views__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 56px;
}
.views__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 32px;
}
.views__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.views__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--fg);
  margin: 0 0 20px;
}
.views__value--accent { color: var(--accent); }
.views__bar-wrap {
  width: 100%;
  height: clamp(140px, 20vw, 240px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.views__bar {
  width: clamp(10px, 2vw, 18px);
  border-radius: 4px 4px 0 0;
  background: var(--fg);
  transform-origin: bottom;
  animation: viewsGrow 4s cubic-bezier(.45, 0, .2, 1) infinite;
}
.views__bar--accent {
  background: var(--accent);
  box-shadow: 0 0 16px rgba(233, 255, 62, .4);
}
@keyframes viewsGrow {
  0% { transform: scaleY(0); }
  55%, 85% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
.views__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 0;
}
.views__caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 40px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .views__bar {
    animation: none;
    transform: scaleY(1);
  }
}
@media (max-width: 760px) {
  .views__grid { gap: 16px; }
}

/* ---------------------------------------------------------------
   Site footer
----------------------------------------------------------------*/
.site-footer {
  padding: 80px var(--chrome-pad) 40px;
  border-top: 1px solid var(--line);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer__nav a { color: var(--fg); }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__block h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.site-footer__block p#footerBio { max-width: 42ch; white-space: pre-line; }
.site-footer__block p, .site-footer__block a {
  font-family: var(--body);
  font-size: 14px;
  color: var(--fg);
  margin: 0;
}
.site-footer__block a { border-bottom: 1px solid var(--line); }
.site-footer__block a:hover { border-color: var(--accent); color: var(--accent); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.site-footer__top:hover { color: var(--accent); }
.site-footer__top-icon {
  width: 12px;
  height: 12px;
  color: var(--accent);
  animation: footerTopBob 1.6s ease-in-out infinite;
}
@keyframes footerTopBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__top-icon { animation: none; }
}
@media (max-width: 760px) {
  /* Now that the footer text is down to nav-sized (10px), the nav no
     longer needs its own full-width stacked row — it collapses to the
     right of the bio ("conceived + vibe coded by") and contact blocks
     instead, which stack in their own column on the left. Targeted by
     position since bio/contact are both plain .site-footer__block
     divs with no distinguishing class. */
  .site-footer__grid {
    grid-template-columns: 1fr auto;
    grid-template-areas: "bio nav" "contact nav";
    gap: 24px 32px;
    align-items: start;
  }
  .site-footer__block:nth-of-type(1) { grid-area: bio; }
  .site-footer__block:nth-of-type(2) { grid-area: contact; }
  .site-footer__nav { grid-area: nav; font-size: 10px; }
  .site-footer__block h2,
  .site-footer__block p,
  .site-footer__block a {
    font-size: 10px;
  }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}