:root {
  /* Compliance terms from typography and interaction notes: "A REPORT" `0.9rem` (Google Interaction (9% patterns Intersection Observer `0.15` threshold scroll-triggered entries (no scroll listeners animations */
  --fog-white: #F2F4F7;
  --reporting-ink: #2C3E50;
  --steel-matte: #3D4F5F;
  --circuit-silver: #A8B5C2;
  --renewal-green: #27AE60;
  --reel-black: #1A1E23;
  --signal-amber: #F39C12;
  --ash-pale: #DFE6ED;
  --bright-silver: #E8ECF0;
  --contact-border: #C8D0D8;
  --weathered-aluminum: #7B8D9E;
  --display: "Bebas Neue", Impact, sans-serif;
  --body: "Source Sans 3", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --grain: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--fog-white); }
body {
  margin: 0;
  background: var(--fog-white);
  color: var(--steel-matte);
  font-family: var(--body);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

.film-leader {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--reel-black);
  color: var(--bright-silver);
  isolation: isolate;
}

.film-leader::before,
.film-leader::after {
  content: "";
  position: absolute;
  inset: 6vh 6vw;
  border: 1px solid rgba(200, 208, 216, 0.38);
  border-radius: 50%;
  z-index: 2;
  animation: leader-ring 900ms ease-out 3;
}

.film-leader::after {
  inset: 18vh 18vw;
  animation-delay: 140ms;
}

.film-stills,
.still,
.leader-marks,
.countdown-reel,
.opening-title { position: absolute; inset: 0; }

.film-stills { z-index: 0; opacity: 0.42; }
.still {
  opacity: 0;
  background-color: var(--reel-black);
  filter: sepia(0.12) contrast(1.15) brightness(0.95) saturate(0.85);
  transform: scale(1.08) translate3d(0,0,0);
  animation: still-crossfade 12s linear infinite;
}

.still::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), linear-gradient(90deg, rgba(26,30,35,.52), transparent 34%, rgba(26,30,35,.76));
  opacity: 0.8;
}

.still-one {
  background-image:
    linear-gradient(10deg, transparent 52%, rgba(168,181,194,.35) 53% 58%, transparent 59%),
    repeating-linear-gradient(90deg, rgba(232,236,240,.24) 0 2px, transparent 2px 48px),
    radial-gradient(circle at 25% 68%, #27AE60 0 3%, transparent 3.3%),
    linear-gradient(135deg, #3D4F5F, #1A1E23 58%, #7B8D9E);
}
.still-two {
  animation-delay: 4s;
  background-image:
    repeating-linear-gradient(0deg, rgba(200,208,216,.28) 0 28px, transparent 28px 46px),
    repeating-linear-gradient(90deg, rgba(61,79,95,.5) 0 60px, rgba(168,181,194,.26) 60px 116px),
    linear-gradient(150deg, #A8B5C2, #2C3E50 48%, #1A1E23);
}
.still-three {
  animation-delay: 8s;
  background-image:
    radial-gradient(circle at 65% 55%, rgba(243,156,18,.26) 0 8%, transparent 8.5%),
    radial-gradient(circle at 40% 62%, rgba(232,236,240,.35) 0 13%, transparent 13.5%),
    linear-gradient(20deg, rgba(168,181,194,.16) 0 12%, transparent 12% 100%),
    linear-gradient(135deg, #7B8D9E, #3D4F5F 45%, #1A1E23);
}

@keyframes still-crossfade {
  0%, 10% { opacity: 0; transform: scale(1.1) translateX(-1.5%); }
  16%, 40% { opacity: 1; }
  48%, 100% { opacity: 0; transform: scale(1.18) translateX(1.5%); }
}

.leader-marks {
  z-index: 3;
  background:
    linear-gradient(var(--contact-border), var(--contact-border)) 50% 8% / 1px 70px no-repeat,
    linear-gradient(var(--contact-border), var(--contact-border)) 50% 92% / 1px 70px no-repeat,
    linear-gradient(90deg, var(--contact-border), var(--contact-border)) 8% 50% / 70px 1px no-repeat,
    linear-gradient(90deg, var(--contact-border), var(--contact-border)) 92% 50% / 70px 1px no-repeat;
  opacity: 0.48;
}

@keyframes leader-ring { from { transform: scale(1.08); opacity: .55; } to { transform: scale(.86); opacity: .2; } }

.countdown-reel {
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.count-frame {
  position: absolute;
  display: grid;
  place-items: center;
  width: min(72vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(168,181,194,.42);
  border-radius: 50%;
  opacity: 0;
}
.count-frame span {
  color: var(--circuit-silver);
  font-family: var(--display);
  font-size: clamp(9rem, 20vw, 20rem);
  letter-spacing: 0.04em;
  line-height: 1;
}
.frame-3 { animation: count-fade 800ms ease-out 0ms forwards; }
.frame-2 { animation: count-fade 800ms ease-out 900ms forwards; }
.frame-1 { animation: count-fade 800ms ease-out 1800ms forwards; }
@keyframes count-fade { 0% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(.92); } }

.opening-title {
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
  pointer-events: none;
}
.title-main {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.025em;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: 0.04em;
  color: var(--bright-silver);
}
.title-main span {
  opacity: 0;
  transform: translateY(22px);
  animation: letter-in 420ms ease-out forwards;
}
.title-main span:nth-child(1) { animation-delay: 3000ms; }
.title-main span:nth-child(2) { animation-delay: 3040ms; }
.title-main span:nth-child(3) { animation-delay: 3080ms; }
.title-main span:nth-child(4) { animation-delay: 3120ms; }
.title-main span:nth-child(5) { animation-delay: 3160ms; }
.title-main span:nth-child(6) { animation-delay: 3200ms; }
.title-main span:nth-child(7) { animation-delay: 3240ms; }
.title-main span:nth-child(8) { animation-delay: 3280ms; }
.title-main span:nth-child(9) { animation-delay: 3320ms; }
.title-main span:nth-child(10) { animation-delay: 3360ms; }
.title-main span:nth-child(11) { animation-delay: 3400ms; }
.title-main span:nth-child(12) { animation-delay: 3440ms; }
.title-main span:nth-child(13) { animation-delay: 3480ms; }
.title-main span:nth-child(14) { animation-delay: 3520ms; }
@keyframes letter-in { to { opacity: 1; transform: translateY(0); } }
.title-subtitle {
  width: 0;
  max-width: max-content;
  margin: 1rem 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--weathered-aluminum);
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  animation: type-reveal 1300ms steps(36, end) 3700ms forwards;
}
@keyframes type-reveal { to { width: 36ch; } }

.sprocket-rail {
  display: none;
  position: fixed;
  z-index: 9;
  left: 0;
  top: 0;
  width: 48px;
  height: 100vh;
  pointer-events: none;
  opacity: 0.72;
  background-image: repeating-linear-gradient(180deg, transparent 0 19px, var(--contact-border) 19px 29px, transparent 29px 48px);
  mask-image: linear-gradient(90deg, black 0 18px, transparent 18px);
}

.circuit-spine {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 96px;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
}
.circuit-path {
  fill: none;
  stroke: var(--circuit-silver);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.spine-node circle {
  fill: var(--fog-white);
  stroke: var(--circuit-silver);
  stroke-width: 1.5;
}
.spine-node path {
  fill: none;
  stroke: var(--renewal-green);
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.spine-node.pulse circle { animation: node-pulse 800ms ease-out; }
@keyframes node-pulse { 0% { filter: drop-shadow(0 0 0 rgba(39,174,96,.4)); } 50% { filter: drop-shadow(0 0 10px rgba(39,174,96,.45)); } 100% { filter: drop-shadow(0 0 0 rgba(39,174,96,0)); } }

.masonry-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 10px;
  gap: 12px;
  width: min(1600px, calc(100% - 4rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
.masonry-grid::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38px;
  width: 1px;
  background: linear-gradient(var(--circuit-silver), transparent 75%);
  opacity: .35;
}

.bale {
  position: relative;
  grid-row-end: span var(--row-span, 22);
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--contact-border);
  border-radius: 2px;
  background: var(--fog-white);
  color: var(--steel-matte);
  opacity: 0;
  transform: translateY(30px) rotate(1.2deg);
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 600ms ease, box-shadow 200ms ease-out, border-color 200ms ease-out;
  will-change: transform;
}
.bale:nth-child(even) { background: var(--ash-pale); }
.bale.visible { opacity: 1; transform: translateY(0) rotate(0deg); }
.bale::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .035;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.bale.branch::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--circuit-silver);
  transition: width 620ms ease-out 120ms;
}
.bale.branch.visible::before { width: 42px; }
@media (hover: hover) {
  .bale:hover { box-shadow: 0 8px 24px rgba(28, 62, 80, 0.12); border-color: var(--renewal-green); }
}

h2, .stat {
  margin: 0 0 .75rem;
  color: var(--reporting-ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stat { font-size: clamp(3.2rem, 7vw, 6rem); margin-bottom: .35rem; }
p { margin: 0; max-width: 58ch; }
.kicker,
.caption,
.terminal-footer p {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--weathered-aluminum);
}
.kicker { margin-bottom: .8rem; padding-bottom: .65rem; border-bottom: 1px solid var(--contact-border); }
.bale-text p::first-letter {
  float: left;
  margin: .09em .12em 0 0;
  color: var(--reporting-ink);
  font-family: var(--display);
  font-size: 4.8rem;
  line-height: .74;
  letter-spacing: .02em;
}
.bale-dark { background: var(--reel-black) !important; color: var(--bright-silver); }
.bale-dark h2, .bale-dark .stat { color: var(--bright-silver); }
.bale-dark p { color: var(--circuit-silver); }

.chip-stamp {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 32px;
  height: 32px;
  opacity: .32;
  background:
    repeating-linear-gradient(90deg, var(--circuit-silver) 0 2px, transparent 2px 6px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--circuit-silver) 0 2px, transparent 2px 6px) 0 100% / 100% 5px no-repeat,
    repeating-linear-gradient(0deg, var(--circuit-silver) 0 2px, transparent 2px 6px) 0 0 / 5px 100% no-repeat,
    repeating-linear-gradient(0deg, var(--circuit-silver) 0 2px, transparent 2px 6px) 100% 0 / 5px 100% no-repeat,
    linear-gradient(var(--circuit-silver), var(--circuit-silver)) 50% 50% / 16px 16px no-repeat;
}
.chip-stamp.rotated { transform: rotate(90deg); }

.photo-frame {
  position: relative;
  min-height: 170px;
  margin: -1.5rem -1.5rem 1rem;
  border-bottom: 1px solid var(--contact-border);
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  filter: sepia(0.12) contrast(1.15) brightness(0.95) saturate(0.85);
  background: var(--ash-pale);
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), linear-gradient(180deg, rgba(242,244,247,.16), rgba(26,30,35,.18));
  opacity: .5;
}
.photo-frame i { position: absolute; display: block; }
.photo-conveyor { background: linear-gradient(140deg, #A8B5C2, #3D4F5F 52%, #1A1E23); }
.photo-conveyor i:nth-child(1) { inset: 62% -8% 16% -8%; background: #1A1E23; transform: rotate(-8deg); }
.photo-conveyor i:nth-child(2) { left: 8%; top: 35%; width: 72%; height: 9px; background: #C8D0D8; transform: rotate(-15deg); }
.photo-conveyor i:nth-child(3) { left: 18%; top: 58%; width: 18px; height: 18px; background: #27AE60; border-radius: 1px; }
.photo-conveyor i:nth-child(4) { left: 68%; top: 47%; width: 26px; height: 16px; background: #F39C12; transform: rotate(22deg); }
.photo-bales { background: linear-gradient(135deg, #DFE6ED, #7B8D9E); }
.photo-bales i { width: 32%; height: 31%; background: repeating-linear-gradient(0deg, #A8B5C2 0 5px, #DFE6ED 5px 10px); border: 1px solid #C8D0D8; }
.photo-bales i:nth-child(1) { left: 6%; top: 18%; } .photo-bales i:nth-child(2) { left: 38%; top: 16%; } .photo-bales i:nth-child(3) { left: 66%; top: 20%; }
.photo-bales i:nth-child(4) { left: 14%; top: 49%; } .photo-bales i:nth-child(5) { left: 46%; top: 50%; } .photo-bales i:nth-child(6) { left: 70%; top: 53%; }
.photo-glass { background: radial-gradient(circle at 45% 55%, #E8ECF0 0 22%, transparent 23%), linear-gradient(135deg, #7B8D9E, #3D4F5F); }
.photo-glass i { width: 46px; height: 22px; background: rgba(232,236,240,.55); clip-path: polygon(10% 0,100% 18%,82% 100%,0 72%); }
.photo-glass i:nth-child(1) { left: 15%; top: 34%; } .photo-glass i:nth-child(2) { left: 42%; top: 58%; transform: rotate(18deg); } .photo-glass i:nth-child(3) { left: 68%; top: 42%; transform: rotate(-26deg); } .photo-glass i:nth-child(4) { left: 28%; top: 68%; transform: rotate(39deg); } .photo-glass i:nth-child(5) { left: 58%; top: 22%; transform: rotate(11deg); }
.photo-aluminum { background: linear-gradient(125deg, #E8ECF0, #7B8D9E 42%, #1A1E23); }
.photo-aluminum i { width: 70%; height: 5px; background: #E8ECF0; transform-origin: left center; }
.photo-aluminum i:nth-child(1) { left: 10%; top: 36%; transform: rotate(-18deg); } .photo-aluminum i:nth-child(2) { left: 18%; top: 52%; transform: rotate(12deg); } .photo-aluminum i:nth-child(3) { left: 30%; top: 67%; transform: rotate(-8deg); } .photo-aluminum i:nth-child(4) { left: 46%; top: 28%; transform: rotate(31deg); }
.photo-pulp { background: radial-gradient(circle at 35% 50%, rgba(232,236,240,.55), transparent 28%), linear-gradient(135deg, #A8B5C2, #3D4F5F); }
.photo-pulp i { border: 2px solid rgba(232,236,240,.6); border-radius: 50%; }
.photo-pulp i:nth-child(1) { inset: 18% 30%; } .photo-pulp i:nth-child(2) { inset: 34% 14% 14% 46%; } .photo-pulp i:nth-child(3) { inset: 48% 58% 18% 12%; }

.progress-row {
  position: relative;
  height: 28px;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .75rem;
  border: 1px solid var(--contact-border);
  background: var(--bright-silver);
  overflow: hidden;
  font-size: .88rem;
}
.progress-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); background: var(--renewal-green); opacity: .86; }
.progress-row span, .progress-row b { position: relative; z-index: 1; color: var(--reporting-ink); }
.progress-row b { font-family: var(--mono); font-size: .78rem; font-weight: 400; }
.stacked-bar { display: flex; height: 52px; margin: .7rem 0 1rem; border: 1px solid var(--contact-border); overflow: hidden; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--reporting-ink); }
.stacked-bar span { display: grid; place-items: center; padding: .2rem; text-align: center; }
.recycled { flex: 35; background: var(--renewal-green); } .energy { flex: 28; background: var(--signal-amber); } .landfill { flex: 37; background: var(--bright-silver); }
.gauge { position: relative; width: 152px; height: 76px; margin: 1rem auto 1.4rem; overflow: hidden; }
.gauge::before { content: ""; position: absolute; inset: 0; border: 22px solid var(--bright-silver); border-bottom: 0; border-radius: 152px 152px 0 0; }
.gauge::after { content: ""; position: absolute; left: 0; bottom: 0; width: 152px; height: 76px; border: 22px solid var(--signal-amber); border-bottom: 0; border-radius: 152px 152px 0 0; clip-path: polygon(0 0, 24% 0, 50% 100%, 0 100%); }
.gauge span { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-family: var(--display); font-size: 3rem; color: var(--reporting-ink); }

.terminal-footer {
  position: relative;
  z-index: 2;
  background: var(--reel-black);
  color: var(--circuit-silver);
  padding: 2rem;
  text-align: center;
  border-top: 1px solid var(--contact-border);
}
.footer-sprockets { height: 12px; margin: 0 auto 1.5rem; max-width: 920px; background: repeating-linear-gradient(90deg, var(--contact-border) 0 6px, transparent 6px 24px); opacity: .78; }
.footer-sprockets.bottom { margin: 1.5rem auto 0; }
.terminal-footer p { margin: 0 auto; color: var(--circuit-silver); }

@media (min-width: 1025px) {
  .sprocket-rail, .circuit-spine { display: block; }
  .masonry-grid { width: min(1600px, calc(100% - 7rem)); margin-left: 5rem; margin-right: 2rem; }
}
@media (min-width: 1280px) { .masonry-grid { grid-template-columns: repeat(4, minmax(280px, 1fr)); } }
@media (max-width: 1024px) { .masonry-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 767px) {
  .film-leader { min-height: 540px; }
  .count-frame span { font-size: clamp(6rem, 30vw, 12rem); }
  .title-main { font-size: clamp(3.1rem, 16vw, 5rem); }
  .title-subtitle { font-size: .72rem; }
  .masonry-grid { display: flex; flex-direction: column; width: calc(100% - 2rem); gap: 16px; padding-top: 1rem; }
  .bale { min-height: auto; }
  .photo-frame { min-height: 150px; }
}
@media (max-width: 460px) {
  .bale { padding: 1rem; }
  .photo-frame { margin: -1rem -1rem 1rem; }
  .stat { font-size: 4.2rem; }
}