/* ==========================================================================
   Voix Digital — Site stylesheet
   Built on top of colors_and_type.css design tokens.
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--voix-coral-yellow);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--voix-pure-white);
  /* Prevent horizontal overflow from marquees/animations. We keep this on
     body rather than html so html remains a clean scroll container that
     correctly respects scroll-snap-type. */
  overflow-x: hidden;
}

::selection {
  background: var(--voix-coral-yellow);
  color: var(--voix-atomic-black);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ==========================================================================
   Loader — first-paint reveal
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  background: var(--voix-pure-white);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity 600ms var(--ease-out), visibility 600ms var(--ease-out);
}
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__mark {
  width: 96px;
  height: 96px;
  animation: loaderPulse 1400ms var(--ease-standard) infinite;
}
.loader__bar {
  width: 200px;
  height: 2px;
  background: rgba(15, 15, 15, 0.10);
  position: relative;
  overflow: hidden;
}
.loader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--voix-coral-yellow);
  animation: loaderFill 1600ms var(--ease-out) forwards;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.7; }
}
@keyframes loaderFill {
  to { width: 100%; }
}

/* ==========================================================================
   Custom cursor (desktop only)
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--voix-coral-yellow);
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease-out), width 200ms var(--ease-out), height 200ms var(--ease-out);
  display: none;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 54, 0.6);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition: transform 400ms var(--ease-out), width 300ms var(--ease-out), height 300ms var(--ease-out), opacity 300ms;
  display: none;
}
.cursor.cursor--hover {
  width: 0;
  height: 0;
}
.cursor-ring.cursor--hover {
  width: 80px;
  height: 80px;
  border-color: var(--voix-coral-yellow);
  background: rgba(255, 215, 54, 0.15);
}
@media (hover: hover) and (pointer: fine) {
  .cursor, .cursor-ring { display: block; }
  body { cursor: none; }
  a, button, .interactive { cursor: none; }
}

/* ==========================================================================
   Floating glass navigation
   ========================================================================== */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  transition: top 400ms var(--ease-out);
}
/* Liquid glass — two states:
   AT REST  → fully transparent, all-white content. Calm, minimal.
   ACTIVE   → dark grey glass wash (still transparent), white content reads cleanly.
              Active = nav is hovered OR menu is open. */

/* ---------- Pill / panel surface ---------- */
.nav__pill,
.nav__panel {
  /* At rest: nearly invisible — just a hairline of glass */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(15, 15, 15, 0.04);
  transition: background 380ms var(--ease-out),
              border-color 380ms var(--ease-out),
              box-shadow 380ms var(--ease-out),
              backdrop-filter 380ms var(--ease-out);
}

/* ACTIVE — when the user is interacting with the nav, glass thickens to
   a dark grey wash so the white content reads cleanly on any background. */
.nav:hover .nav__pill,
.nav:hover .nav__panel,
.nav:focus-within .nav__pill,
.nav:focus-within .nav__panel,
.nav--open .nav__pill,
.nav--open .nav__panel {
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 32px rgba(15, 15, 15, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Content — ALL WHITE, ALWAYS ---------- */
.nav__logo img { /* keep the white-filled SVG as-is, never invert */ }
.nav__time {
  color: #fff;
  transition: opacity 380ms var(--ease-out);
}
.nav__burger rect { fill: #fff; }
.nav__link { color: #fff; }

/* Subtle at rest, fully present on interaction.
   Even at rest the content is white so it inherits its parent's surface; the
   pill stays so transparent that the white sits over the page color — fine
   on dark sections, low-contrast on yellow/white but acceptable as a
   "ghost" cue. The moment the user approaches it, the dark wash kicks in. */
.nav__time,
.nav__burger rect {
  opacity: 0.65;
  transition: opacity 380ms var(--ease-out), fill 380ms var(--ease-out);
}
.nav:hover .nav__time,
.nav:hover .nav__burger rect,
.nav:focus-within .nav__time,
.nav:focus-within .nav__burger rect,
.nav--open .nav__time,
.nav--open .nav__burger rect { opacity: 1; }

/* Toggle button — subtle white wash, slightly brighter on hover */
.nav__toggle {
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--dur-base) var(--ease-standard);
}
.nav:hover .nav__toggle { background: rgba(255, 255, 255, 0.14); }
.nav__toggle:hover { background: rgba(255, 255, 255, 0.22); }
.nav__pill {
  border-radius: 999px;
  padding: 10px 14px 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
}
.nav__logo img { height: 18px; display: block; }
.nav__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #fff;
}
.nav__toggle {
  width: 36px; height: 36px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0;
}

.nav__panel {
  border-radius: 20px;
  padding: 10px;
  display: grid;
  gap: 2px;
  transform-origin: top center;
  transform: translateY(-8px) scaleY(0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.nav--open .nav__panel {
  transform: translateY(0) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}
.nav__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  transition: background var(--dur-base) var(--ease-standard),
              color 380ms var(--ease-out);
}
/* Hover on a link — soft white wash on the dark grey glass */
.nav__link:hover { background: rgba(255, 255, 255, 0.14); }
/* "You are here" — slightly brighter wash + yellow-accented index number */
.nav__link.is-active { background: rgba(255, 255, 255, 0.18); }
.nav__link.is-active .nav__link-num {
  color: var(--voix-coral-yellow);
  opacity: 1;
}
.nav__link-num {
  font-size: 10px;
  opacity: 0.6;
  letter-spacing: 0.18em;
  transition: color 240ms var(--ease-standard), opacity 240ms var(--ease-standard);
}

/* ==========================================================================
   Hero — solid yellow, single headline, white type.
   The whole section is just the title; everything else has been removed.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--voix-coral-yellow);
  color: var(--voix-pure-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1480px;
  padding: 0 48px;
  margin: 0 auto;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  /* Min 44px so 'marketing.' fits comfortably on a 390px viewport.
     Max 200px on huge desktops. */
  font-size: clamp(44px, 11vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--voix-pure-white);
}
.hero__headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Extend the clip box past the glyph bounds on the bottom AND the right.
     Descenders ('g', 'p') need bottom room; serifs/italic overhangs and
     punctuation ('k', '.') need right room. Negative margins keep the
     surrounding layout exactly where it was — no shift in spacing or wrap. */
  padding: 0 0.12em 0.25em 0;
  margin: 0 -0.12em -0.25em 0;
}
.hero__headline .word span {
  display: inline-block;
  transform: translateY(110%);
  animation: revealWord 900ms var(--ease-out) forwards;
}
.hero__headline .word:nth-child(1) span { animation-delay: 250ms; }
.hero__headline .word:nth-child(2) span { animation-delay: 380ms; }
.hero__headline .word:nth-child(3) span { animation-delay: 510ms; }
.hero__headline .word:nth-child(4) span { animation-delay: 640ms; }
.hero__headline .accent {
  font-style: italic;
  font-weight: 700;
}

@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes revealWord {
  to { transform: translateY(0); }
}

/* ==========================================================================
   Marquee — running text strip
   ========================================================================== */
.marquee {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
  overflow: hidden;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marqueeScroll 30s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.02em;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.marquee__item::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--voix-coral-yellow);
  display: inline-block;
}
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Client logos strip
   ========================================================================== */
.logos-strip {
  background: var(--voix-pure-white);
  padding: 48px 0;
  overflow: hidden;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.logos-strip__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  text-align: center;
  margin-bottom: 32px;
}
.logos-strip__track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.logos-strip__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  will-change: transform;
}
.logos-strip__logo {
  width: 240px;
  height: 80px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 300ms;
  flex-shrink: 0;
}
.logos-strip__logo:hover { opacity: 1; }

/* ==========================================================================
   Statement — large editorial sentence
   ========================================================================== */
.statement {
  background: var(--voix-pure-white);
  padding: clamp(96px, 16vw, 200px) 48px;
}
.statement__inner {
  max-width: 1480px;
  margin: 0 auto;
}
.statement__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.statement__eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--fg-2);
}
.statement__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0;
  max-width: 18ch;
}
.statement__h .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.statement__h.in-view .reveal-word {
  opacity: 1;
  transform: translateY(0);
}
.statement__h .reveal-word:nth-child(1) { transition-delay: 0ms; }
.statement__h .reveal-word:nth-child(2) { transition-delay: 80ms; }
.statement__h .reveal-word:nth-child(3) { transition-delay: 160ms; }
.statement__h .reveal-word:nth-child(4) { transition-delay: 240ms; }
.statement__h .reveal-word:nth-child(5) { transition-delay: 320ms; }
.statement__h .reveal-word:nth-child(6) { transition-delay: 400ms; }
.statement__h .reveal-word:nth-child(7) { transition-delay: 480ms; }
.statement__h .reveal-word:nth-child(8) { transition-delay: 560ms; }

.statement__h .yellow-bg {
  background: var(--voix-coral-yellow);
  padding: 0 0.18em;
  display: inline-block;
}

.statement__footer {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  border-top: 1px solid var(--border-1);
  padding-top: 48px;
}
.statement__copy {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 48ch;
}
.statement__copy strong {
  color: var(--fg-1);
  font-weight: 700;
}

/* ==========================================================================
   Services — grid of service tiles
   ========================================================================== */
.services {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
  padding: clamp(96px, 14vw, 180px) 48px;
}
.services__inner {
  max-width: 1480px;
  margin: 0 auto;
}
.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 80px;
}
.services__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--voix-coral-yellow);
  display: flex;
  align-items: center;
  gap: 12px;
}
.services__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--voix-coral-yellow);
}
.services__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}
.services__copy {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.66);
  max-width: 42ch;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-left: 1px solid rgba(255,255,255,0.12);
}
.service {
  position: relative;
  padding: 56px 40px 48px;
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  transition: background 480ms var(--ease-out);
}
.service__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 96px;
}
.service__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  position: relative;
  z-index: 2;
  transition: transform 480ms var(--ease-out), color 480ms var(--ease-out);
}
.service__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  max-width: 38ch;
  position: relative;
  z-index: 2;
  transition: color 480ms var(--ease-out);
}
.service__tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.service__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
  transition: border-color 480ms var(--ease-out), color 480ms var(--ease-out), background 480ms var(--ease-out);
}
.service__arrow {
  position: absolute;
  top: 56px;
  right: 40px;
  width: 32px;
  height: 32px;
  z-index: 2;
  transform: translate(0, 0);
  transition: transform 480ms var(--ease-out);
}
.service__arrow svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.7); transition: stroke 480ms var(--ease-out); }

/* Yellow flood on hover */
.service__flood {
  position: absolute;
  inset: 0;
  background: var(--voix-coral-yellow);
  transform: translateY(101%);
  transition: transform 600ms var(--ease-out);
  z-index: 1;
}
.service:hover .service__flood { transform: translateY(0); }
.service:hover .service__title,
.service:hover .service__desc { color: var(--voix-atomic-black); }
.service:hover .service__num { color: rgba(15,15,15,0.5); }
.service:hover .service__tag {
  border-color: rgba(15,15,15,0.4);
  color: var(--voix-atomic-black);
  background: rgba(15,15,15,0.08);
}
.service:hover .service__arrow { transform: translate(6px, -6px); }
.service:hover .service__arrow svg { stroke: var(--voix-atomic-black); }
.service__num { position: relative; z-index: 2; transition: color 480ms var(--ease-out); }

/* ==========================================================================
   KPI strip
   ========================================================================== */
.kpis {
  background: var(--voix-coral-yellow);
  color: var(--voix-atomic-black);
  padding: clamp(80px, 12vw, 144px) 48px;
}
.kpis__inner {
  max-width: 1480px;
  margin: 0 auto;
}
.kpis__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 72px;
  border-bottom: 1px solid rgba(15,15,15,0.18);
  padding-bottom: 32px;
}
.kpis__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.kpis__eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--voix-atomic-black);
}
.kpis__meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
}
.kpis__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.kpi__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
}
.kpi__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.kpi__suffix { font-size: 0.4em; opacity: 0.65; font-weight: 600; letter-spacing: 0; }
.kpi__desc {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  max-width: 26ch;
  opacity: 0.78;
}

/* ==========================================================================
   Work stream — case studies
   ========================================================================== */
.work {
  background: var(--voix-pure-white);
}
.work__head {
  padding: clamp(96px, 12vw, 160px) 48px 48px;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.work__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.work__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--voix-atomic-black); }
.work__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}
.work__title em { font-style: italic; }
.work__copy {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 42ch;
}

.work__list { display: flex; flex-direction: column; }
.case {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 64px 48px;
  overflow: hidden;
  transition: padding 400ms var(--ease-standard);
  /* McCann-style snap: each case catches the viewport top. */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Snap with proximity so other sections aren't trapped. Cases are full
   viewport height so the snap pull is strong inside the work section,
   but the user can still freely scroll past hero/about/services/etc. */
@media (min-width: 720px) and (hover: hover) {
  html { scroll-snap-type: y proximity; }
}

/* Mobile: enable snap for touch devices — proximity gives strong pull on
   full-viewport cases while letting the user scroll freely past shorter
   sections (awards, about, services) that are not snap targets. */
@media (max-width: 720px) {
  html { scroll-snap-type: y proximity; }
}
.case--yellow { background: var(--voix-coral-yellow); color: var(--voix-atomic-black); }
.case--black  { background: var(--voix-atomic-black); color: var(--voix-pure-white); }
.case--grey   { background: var(--voix-delta-drizzle); color: var(--voix-atomic-black); }
.case--white  { background: var(--voix-pure-white);   color: var(--voix-atomic-black); border-top: 1px solid var(--border-1); }

/* Video-backed case — McCann pattern. Background video fills the card,
   a dark bottom-heavy gradient protects the text contrast, and content
   sits on top in pure white. Cases are full-viewport tall so the
   scroll-snap pull is strong; the video covers (cropping slightly at
   the sides on wide monitors) rather than being letterboxed. */
.case--video {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
  isolation: isolate;
  min-height: 100vh;
}
.case__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Subtle desaturation at rest, full color on hover — McCann's trick to
     keep the page coherent and "wake up" the work when the viewer focuses. */
  filter: saturate(0.85) brightness(0.92);
  transform: scale(1.01);
  transition: transform 1200ms var(--ease-out), filter 600ms var(--ease-out);
}
.case--video:hover .case__video {
  transform: scale(1.06);
  filter: saturate(1) brightness(1);
}
.case__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Dark gradient — heaviest at the bottom where the type sits, lighter up top */
  background:
    linear-gradient(to top,
      rgba(15, 15, 15, 0.78) 0%,
      rgba(15, 15, 15, 0.55) 25%,
      rgba(15, 15, 15, 0.25) 55%,
      rgba(15, 15, 15, 0.10) 100%);
}
/* Ensure bottom row sits above the video + overlay */
.case--video .case__bottom { position: relative; z-index: 2; }

/* McCann-style bottom-anchored layout. The whole case row anchors content
   to the bottom-left; CTA sits bottom-right. No more centered headline. */
.case__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 60%;
}

.case__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.9;
}

.case__t {
  font-family: var(--font-display);
  font-weight: 700;
  /* Smaller, McCann scale — secondary display, not a screen-filling headline */
  font-size: clamp(32px, 4.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: uppercase;
  overflow-wrap: break-word;
  transition: transform 480ms var(--ease-out);
}
.case:hover .case__t { transform: translateY(-4px); }

.case__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.case__credit {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 4px;
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
/* Awards */
.awards {
  background: var(--voix-atomic-black);
  padding: clamp(80px, 12vw, 140px) 48px;
}
.awards__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.awards__header {
  margin-bottom: 56px;
}
.awards__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--voix-pure-white);
  margin: 20px 0 16px;
}
.awards__h em { font-style: italic; color: var(--voix-coral-yellow); }
.awards__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  max-width: 52ch;
}
.awards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border: 1px solid rgba(255,255,255,0.1);
}
.award {
  background: rgba(255,255,255,0.03);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 300ms;
}
.award:last-child { border-right: none; }
.award:hover { background: rgba(255,255,255,0.07); }
.award__metal {
  display: flex;
  align-items: center;
  gap: 8px;
}
.award__medal {
  font-size: 18px;
}
.award__metal--silver .award__medal { color: #C0C0C0; }
.award__metal--bronze .award__medal { color: #CD7F32; }
.award__metal-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.award__metal--silver .award__metal-label { color: #C0C0C0; }
.award__metal--bronze .award__metal-label { color: #CD7F32; }
.award__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.award__super {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--voix-coral-yellow);
}
.award__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--voix-pure-white);
}
.award__entry {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  font-style: italic;
}
.award__awarded {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ==========================================================================
   Process — sticky steps
   ========================================================================== */
.process {
  background: var(--voix-pure-white);
  padding: clamp(96px, 12vw, 160px) 48px;
  border-top: 1px solid var(--border-1);
}
.process__inner { max-width: 1480px; margin: 0 auto; }
.process__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 96px;
}
.process__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.process__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--voix-atomic-black); }
.process__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}

.process__steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 80px;
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--border-1);
  align-items: center;
}
.step:last-child { border-bottom: 1px solid var(--border-1); }
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.step__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.step__d {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 48ch;
}
.step__icon {
  width: 56px;
  height: 56px;
  border: 1px solid var(--voix-atomic-black);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.step:hover .step__icon { background: var(--voix-coral-yellow); }

/* ==========================================================================
   Clients band
   ========================================================================== */
.clients {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
  padding: 64px 48px;
  overflow: hidden;
}
.clients__inner {
  max-width: 1480px;
  margin: 0 auto;
}
.clients__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.clients__title::before {
  content: ''; width: 32px; height: 1px; background: rgba(255,255,255,0.4);
}
.clients__row {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  animation: marqueeScroll 36s linear infinite;
  width: max-content;
}
.clients__row span {
  opacity: 0.7;
  transition: opacity var(--dur-base);
}
.clients__row span:hover { opacity: 1; color: var(--voix-coral-yellow); }
.clients__row::after { content: ''; }

/* ==========================================================================
   Contact CTA / footer
   ========================================================================== */
.footer {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
  /* Fit everything within one viewport so the user lands on a complete view */
  min-height: 100vh;
  padding: 64px 48px 40px;
  display: flex;
  flex-direction: column;
  /* This becomes a snap target on desktop so fast-scrolling lands cleanly on it */
}
.footer__inner {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  /* Distribute content evenly between top stack and bottom strip */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.footer__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--voix-coral-yellow);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.footer__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--voix-coral-yellow); }

.footer__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
}
.footer__h em { font-style: italic; }
.footer__email {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 32px;
  color: var(--voix-coral-yellow);
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.footer__email::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--voix-coral-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms var(--ease-out);
}
.footer__email:hover::after { transform: scaleX(1); }

.footer__cols {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer__col-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: rgba(255,255,255,0.6);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col li a {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: color var(--dur-base);
}
.footer__col li a:hover { color: var(--voix-coral-yellow); }
.footer__col p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0 0 6px;
}
.footer__col p a {
  color: var(--voix-coral-yellow);
  transition: opacity var(--dur-base);
}
.footer__col p a:hover { opacity: 0.7; }

.footer__base {
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__wordmark { height: 28px; }
.footer__socials { display: flex; gap: 16px; align-items: center; }
.footer__socials a {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.footer__socials a:hover { background: var(--voix-coral-yellow); border-color: var(--voix-coral-yellow); }
.footer__socials a:hover img { filter: brightness(0); }
.footer__socials img { width: 16px; height: 16px; transition: filter var(--dur-base); }
.footer__copy {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.footer__attribution {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  cursor: pointer;
}
.footer__attribution:hover {
  color: rgba(255,255,255,0.55);
}
.footer__attr-icon {
  width: 14px;
  height: 14px;
  opacity: 0.35;
  object-fit: contain;
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .kpis__grid { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 56px 32px; }
  .step { grid-template-columns: 60px 1fr 1fr 60px; gap: 24px; }
  .work__head, .process__head, .statement__footer, .services__header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 720px) {
  .hero__inner { padding: 0 24px; }

  .marquee { padding: 22px 0; }
  .marquee__track { gap: 40px; }
  .marquee__item { gap: 40px; }

  .statement, .services, .kpis, .awards, .process, .footer { padding-left: 24px; padding-right: 24px; }

  .logos-strip__logo { width: 120px; height: 48px; }
  .logos-strip__track { gap: 32px; }
  .services__grid { grid-template-columns: 1fr; }
  .service { padding: 48px 28px 40px; }
  .service__num { margin-bottom: 72px; }
  .service__arrow { top: 48px; right: 28px; }

  .kpis__grid { grid-template-columns: 1fr; gap: 48px; }
  .kpis__head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .work__head { padding: 96px 24px 32px; }
  .case { padding: 56px 24px; min-height: 100vh; }
  .case__t { font-size: clamp(28px, 8vw, 56px); }
  .case__bottom-left { max-width: 100%; }
  .case__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Hero must be a snap target so mandatory snap doesn't skip past it on load */
  .hero { scroll-snap-align: start; scroll-snap-stop: always; }

  /* Everything else must NOT snap — only hero + 6 cases should lock */
  .work__head,
  .awards,
  .statement,
  .kpis,
  .services,
  .footer {
    scroll-snap-align: none;
  }

  .awards__grid { grid-template-columns: repeat(2, 1fr); }
  .award { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .award:last-child { border-bottom: none; }

  .step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }
  .step__icon { display: none; }
  .step__num { font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--fg-3); }

  .footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer__base { flex-direction: column; align-items: flex-start; }

  .nav { width: calc(100vw - 32px); top: 16px; }
  .nav__pill { padding: 8px 12px 8px 18px; }
  .nav__time { display: none; }
}

@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; gap: 40px; }
}

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