/* ==========================================================================
   SECTIONS — hero, manifest, equation, services, reel, proof, contact
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-block-size: 100svh;
  padding-block: clamp(6rem, 13vh, 9rem) calc(var(--hud-h) + 3.5rem);
  overflow: clip;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__canvas {
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.hero__canvas[data-ready='true'] { opacity: 1; }

/* Painted whenever WebGL is unavailable or motion is reduced. */
.hero__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 15% 10%, color-mix(in oklab, var(--navy-600) 90%, transparent), transparent 60%),
    radial-gradient(90% 70% at 85% 90%, color-mix(in oklab, var(--lime) 14%, transparent), transparent 55%),
    linear-gradient(160deg, var(--navy-950), var(--ink) 70%);
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 110% at 50% 40%, transparent 35%, var(--ink) 100%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 22%, transparent 62%, var(--ink) 100%);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  color: var(--ash);
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}

.hero__eyebrow span:not(:last-child)::after {
  content: '/';
  margin-inline-start: 1.1rem;
  color: var(--lime);
}

.hero__title {
  font-size: var(--step-6);
  --wdth: 104;
  --wght: 880;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}

.hero__title span { display: block; }

.hero__title .is-key {
  color: var(--lime);
  --wdth: 122;
  --wght: 900;
  text-shadow: 0 0 clamp(2rem, 6vw, 6rem) var(--lime-glow);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.5rem, 3.5vw, 2.5rem);
}

.hero__ticker {
  position: absolute;
  inset-block-end: calc(var(--hud-h) + 0.5rem);
  inset-inline: 0;
  display: flex;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-inline: calc(var(--frame) + 1.1rem);
  overflow: hidden;
}

.hero__ticker li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  list-style: none;
  white-space: nowrap;
  color: var(--ash-dim);
}

.hero__ticker b { color: var(--lime); font-weight: 700; }

@media (max-width: 55rem) { .hero__ticker li:nth-child(n + 3) { display: none; } }
@media (max-height: 46rem) { .hero__ticker { display: none; } }

.hero__scroll {
  position: absolute;
  inset-block-end: calc(var(--hud-h) + 3.5rem);
  inset-inline-end: calc(var(--frame) + 1.1rem);
  writing-mode: vertical-rl;
  color: var(--ash-dim);
}

@media (max-width: 62rem) { .hero__scroll { display: none; } }

/* --- Manifest ----------------------------------------------------------- */

.manifest__intro {
  font-size: var(--step-2);
  line-height: 1.28;
  --wdth: 96;
  font-weight: 500;
  max-inline-size: 34ch;
  letter-spacing: -0.02em;
}

.manifest__intro em { color: var(--lime); font-style: normal; }

.pillars {
  display: grid;
  gap: var(--rule);
  margin-block-start: clamp(3rem, 7vw, 5rem);
  background: var(--line-soft);
  border-block: var(--rule) solid var(--line-soft);
}

@media (min-width: 55rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }

.pillar {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--ink);
  overflow: hidden;
}

.pillar::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--lime);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur-slow) var(--ease-mech);
}

.pillar[data-in='true']::after { scale: 1 1; }

.pillar__label {
  font-size: var(--step-3);
  text-transform: uppercase;
  --wdth: 118;
  margin-block-end: 1rem;
}

.pillar__proof {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: var(--rule) solid var(--line-soft);
  color: var(--lime);
}

/* --- Equation ----------------------------------------------------------- */

.equation {
  display: grid;
  gap: var(--rule);
  grid-template-columns: minmax(0, 1fr);
  background: var(--line-soft);
  border: var(--rule) solid var(--line-soft);
}

@media (min-width: 45rem) { .equation { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .equation { grid-template-columns: repeat(4, 1fr); } }

.term {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink);
  transition: background-color var(--dur) var(--ease-out);
}

.term:hover { background: var(--navy-900); }

.term__op {
  position: absolute;
  inset-block-start: clamp(1.5rem, 3vw, 2.25rem);
  inset-inline-end: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--lime);
  opacity: 0.5;
}

.term__name {
  font-size: var(--step-2);
  text-transform: uppercase;
  --wdth: 112;
}

.term__body { color: var(--ash); font-size: var(--step--1); max-inline-size: 30ch; }

.equation-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-variation-settings: 'wdth' 120, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.equation-line span { color: var(--lime); }

/* --- Services ----------------------------------------------------------- */

.services { border-block-start: var(--rule) solid var(--line-soft); }

.service {
  position: relative;
  display: grid;
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-block-end: var(--rule) solid var(--line-soft);
  transition: color var(--dur) var(--ease-out);
}

@media (min-width: 62rem) {
  .service { grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.4fr); align-items: center; }
}

.service__idx { color: var(--ash-dim); padding-block-start: 0.55rem; }

.service__title {
  font-size: var(--step-3);
  text-transform: uppercase;
  --wdth: 110;
  transition: color var(--dur) var(--ease-out), --wdth var(--dur) var(--ease-out);
}

.service__body { color: var(--ash); max-inline-size: 52ch; }

.service--featured .service__title { color: var(--lime); }

.service__tag {
  position: absolute;
  inset-block-start: clamp(1.5rem, 3.5vw, 2.5rem);
  inset-inline-end: 0;
  color: var(--lime);
  display: none;
}

@media (min-width: 62rem) { .service--featured .service__tag { display: block; } }

/* --- Reel: full-bleed cinematic shots ---------------------------------- */

.reel { position: relative; }

.shot {
  position: relative;
  block-size: 190svh;
}

.shot__sticky {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  overflow: clip;
  display: grid;
  align-content: end;
  isolation: isolate;
}

.shot__art {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.shot__art picture,
.shot__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.shot__grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--ink) 4%, color-mix(in oklab, var(--ink) 60%, transparent) 45%, transparent 78%),
    linear-gradient(to right, var(--ink) -4%, color-mix(in oklab, var(--ink) 72%, transparent) 38%, transparent 82%),
    radial-gradient(120% 90% at 80% 20%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
}

/* Procedural stand-in while real key art is pending. */
.shot__art--pending,
.pending-art {
  background:
    conic-gradient(from calc(var(--seed, 0.3) * 360deg) at 70% 30%,
      color-mix(in oklab, var(--accent) 40%, var(--navy-900)),
      var(--navy-950) 35%,
      color-mix(in oklab, var(--accent) 22%, var(--navy-800)) 70%,
      var(--navy-950)),
    var(--navy-950);
}

.pending-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain-src);
  background-size: 160px 160px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.shot__inner {
  position: relative;
  padding-block-end: calc(var(--hud-h) + clamp(2rem, 6vh, 4.5rem));
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  justify-items: start;
  max-inline-size: 46rem;
}

.shot__id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ash);
}

.shot__num {
  color: var(--accent);
  font-weight: 700;
}

.shot__num::after {
  content: '';
  display: inline-block;
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: var(--rule);
  margin-inline-start: 0.85rem;
  vertical-align: 0.25em;
  background: currentColor;
}

.shot__lockup { max-inline-size: min(100%, 30rem); }

.shot__logo {
  max-block-size: clamp(4rem, 10vh, 7.5rem);
  inline-size: auto;
  max-inline-size: 100%;
  filter: drop-shadow(0 0.5rem 2rem rgb(0 0 0 / 0.6));
}

.shot__wordmark {
  font-size: var(--step-4);
  text-transform: uppercase;
  --wdth: 116;
  color: var(--paper);
}

.shot__hook {
  font-size: var(--step-2);
  line-height: 1.15;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  max-inline-size: 24ch;
}

.shot__summary {
  color: color-mix(in oklab, var(--paper) 82%, transparent);
  max-inline-size: 54ch;
  font-size: var(--step-0);
}

@media (max-width: 48rem) {
  .shot__summary { font-size: var(--step--1); max-inline-size: 40ch; }
  .shot__inner .chips { display: none; }
}

.shot__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-block-start: 0.5rem;
}

/* Lime sweep that crosses the frame as a shot locks in. */
.shot__sweep {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 2px;
  background: var(--lime);
  opacity: 0;
  box-shadow: 0 0 3rem 0.5rem var(--lime-glow);
  pointer-events: none;
}

.shot__sticky[data-in='true'] .shot__sweep { animation: sweep-across 1.1s var(--ease-mech) forwards; }

/* --- Case cards (teasers + work grid) ---------------------------------- */

.case-grid {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.case-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border: var(--rule) solid var(--line-soft);
  background: var(--navy-950);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}

.case-card:hover,
.case-card:focus-within {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  translate: 0 -4px;
}

.case-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-900);
}

.case-card__media picture,
.case-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-out);
}

.case-card:hover .case-card__media img { scale: 1.06; }

.case-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--navy-950), transparent 55%);
}

.case-card__logo {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 1;
  max-block-size: 2.75rem;
  max-inline-size: 60%;
  inline-size: auto;
  filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.7));
}

.case-card__stub {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1.5rem;
  text-align: center;
}

.case-card__stub span {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variation-settings: 'wdth' 115, 'wght' 850;
  text-transform: uppercase;
  line-height: 0.95;
  color: color-mix(in oklab, var(--paper) 88%, transparent);
  mix-blend-mode: overlay;
}

.case-card__body {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.case-card__title {
  font-size: var(--step-1);
  text-transform: uppercase;
  --wdth: 108;
}

.case-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.case-card__hook { color: var(--accent); font-size: var(--step--1); }
.case-card__studio { color: var(--ash-dim); }

.case-card__tag {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.55rem;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  border: var(--rule) solid var(--line);
  color: var(--ash);
  backdrop-filter: blur(6px);
}

/* --- Proof / stats ------------------------------------------------------ */

.stats {
  display: grid;
  gap: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: var(--line-soft);
  border: var(--rule) solid var(--line-soft);
}

.stat {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ink);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-variation-settings: 'wdth' 118, 'wght' 850;
  line-height: 0.85;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.stat__label { color: var(--ash); font-size: var(--step--1); max-inline-size: 22ch; }

/* --- Testimonials ------------------------------------------------------- */

.quotes { display: grid; gap: clamp(1rem, 3vw, 2rem); }

@media (min-width: 62rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }

.quote {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: var(--rule) solid var(--line-soft);
  background: linear-gradient(160deg, var(--navy-950), var(--ink));
  overflow: hidden;
}

.quote::before {
  content: '“';
  position: absolute;
  inset-block-start: -2.5rem;
  inset-inline-end: 1rem;
  font-family: var(--font-display);
  font-size: 14rem;
  line-height: 1;
  color: var(--lime);
  opacity: 0.09;
  pointer-events: none;
}

.quote__company {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variation-settings: 'wdth' 118, 'wght' 850;
  text-transform: uppercase;
  color: var(--lime);
}

.quote__text {
  font-size: var(--step-1);
  line-height: 1.35;
  font-variation-settings: 'wdth' 92, 'wght' 450;
  letter-spacing: -0.015em;
}

.quote__by {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-block-start: 1.25rem;
  border-block-start: var(--rule) solid var(--line-soft);
}

.quote__by b { color: var(--paper); font-weight: 600; }
.quote__by span { color: var(--ash-dim); }

/* --- Close / contact ---------------------------------------------------- */

.close-note {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-inline-size: 62rem;
}

.close-note__head {
  font-size: var(--step-5);
  text-transform: uppercase;
  --wdth: 116;
  line-height: 0.85;
}

.close-note__head em { color: var(--lime); font-style: normal; }

.contacts {
  display: grid;
  gap: var(--rule);
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  background: var(--line-soft);
  border: var(--rule) solid var(--line-soft);
}

@media (min-width: 48rem) { .contacts { grid-template-columns: repeat(2, 1fr); } }

.contact {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--ink);
  transition: background-color var(--dur) var(--ease-out);
}

.contact:hover { background: var(--navy-950); }

.contact__name {
  font-size: var(--step-2);
  text-transform: uppercase;
  --wdth: 112;
}

.contact__role { color: var(--lime); margin-block-end: 0.85rem; }

.contact a {
  color: var(--ash);
  transition: color var(--dur-fast) var(--ease-out);
  inline-size: fit-content;
}

.contact a:hover { color: var(--lime); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(3rem, 7vw, 5rem) calc(var(--hud-h) + 2rem);
  border-block-start: var(--rule) solid var(--line-soft);
}

.site-footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 55rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer__mark { block-size: 1.6rem; inline-size: auto; margin-block-end: 1.25rem; }

.footer-list { display: grid; gap: 0.6rem; list-style: none; padding: 0; }
.footer-list a { color: var(--ash); transition: color var(--dur-fast) var(--ease-out); }
.footer-list a:hover { color: var(--lime); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: var(--rule) solid var(--line-soft);
  color: var(--ash-dim);
}

/* --- Work index + case detail ------------------------------------------ */

.page-head {
  padding-block: clamp(9rem, 20vh, 14rem) clamp(2.5rem, 6vw, 4rem);
}

.page-head__title { font-size: var(--step-5); text-transform: uppercase; --wdth: 118; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}

.filter {
  padding: 0.55rem 1.1rem;
  border: var(--rule) solid var(--line);
  background: transparent;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.filter[aria-pressed='true'] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.case-hero {
  position: relative;
  display: grid;
  align-content: end;
  min-block-size: min(88svh, 52rem);
  padding-block: clamp(8rem, 18vh, 12rem) clamp(2.5rem, 6vw, 4rem);
  overflow: clip;
}

.case-hero__art { position: absolute; inset: 0; z-index: -2; }
.case-hero__art picture,
.case-hero__art img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.case-body {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 62rem) { .case-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.case-body__text { font-size: var(--step-1); line-height: 1.45; }

.case-meta { display: grid; gap: 1.5rem; }

.case-meta__block { display: grid; gap: 0.6rem; padding-block-start: 1rem; border-block-start: var(--rule) solid var(--line-soft); }
.case-meta__key { color: var(--ash-dim); }

.next-case {
  display: grid;
  gap: 0.75rem;
  padding-block: clamp(3rem, 8vw, 6rem);
  border-block-start: var(--rule) solid var(--line-soft);
}

.next-case__title {
  font-size: var(--step-4);
  text-transform: uppercase;
  --wdth: 114;
  transition: color var(--dur) var(--ease-out);
}

.next-case a:hover .next-case__title { color: var(--lime); }