/* ============================================================================
   NIMMERSATT — Pitch foundation (page layout)
   A stylized one-screen-per-idea pitch for what Nimmersatt is:
   Artist Booking · Artist Management · Creative Production.
   ========================================================================== */

/* --- Preloader ------------------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.42s var(--ease-out-expo), visibility 0.42s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__media {
  width: clamp(240px, 42vw, 520px);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  /* The loader is real footage — it plays in full colour. Only the page
     chrome stays monochrome; the work itself is the only colour on the site. */
}

/* --- Header --------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.9rem, 2vw, 1.5rem) var(--pad-edge);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--faint);
  /* Hidden over the hero (logo lives in the hero). Slides in once scrolled past. */
  transform: translateY(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
.nav.is-stuck { transform: translateY(0); }
.nav__brand { display: flex; align-items: center; gap: 0.65rem; }
.nav__mark { width: clamp(26px, 3vw, 34px); color: var(--fg); }
.nav__name { font-size: var(--text-label); letter-spacing: 0.22em; text-transform: uppercase; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav__links a {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  position: relative;
  transition: color var(--dur-ui) var(--ease-spring);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
/* Hamburger toggle — hidden on desktop, revealed on phones (mobile block).
   Two bars that cross into an × when the menu is open. */
.nav__toggle {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: -6px -6px -6px 0;
}
.nav__toggle-bar {
  display: block; width: 22px; height: 2px; background: var(--fg);
  transition: transform .3s var(--ease-spring), opacity .2s linear;
}
.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Section scaffold ----------------------------------------------------- */
.section { padding-block: var(--gap-section); }
.section--tight { padding-block: clamp(3rem, 7vw, 6rem); }
/* Mini-heading redesign — a short black rule + small mono label (B&W, editorial).
   Replaces the old coloured "01 — Label" anti-pattern. */
.section__index {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  font-size: var(--text-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
}
.section__index::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(26px, 4vw, 54px);
  height: 1px;
  background: var(--fg);
}
.section__num { color: var(--fg); font-variant-numeric: tabular-nums; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  position: relative;
}
.hero__kicker {
  display: flex; gap: 0.6rem; align-items: center;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.hero__title {
  font-size: var(--text-hero);
  letter-spacing: 0.005em;   /* tighter than display default so the full name fits */
  margin-left: -0.02em;
  white-space: nowrap;
}
.hero__sub {
  max-width: 46ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--text-sub);
  line-height: 1.55;
  color: var(--fg);
}
.hero__sub em { color: var(--accent); font-style: normal; }
.hero__meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}
.hero__stamp {
  position: absolute;
  top: clamp(5rem, 12vw, 9rem);
  right: var(--pad-edge);
  width: clamp(86px, 11vw, 132px);
  height: clamp(86px, 11vw, 132px);
  animation: slowspin 22s linear infinite;
}
.hero__stamp text { font-size: 9.2px; letter-spacing: 0.28em; fill: var(--muted); text-transform: uppercase; }
@keyframes slowspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__stamp { animation: none; } }
@media (max-width: 640px) { .hero__stamp { display: none; } }

/* --- Manifesto ------------------------------------------------------------ */
.manifesto { border-top: 1px solid var(--faint); }
.manifesto__line {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.04;
  font-size: var(--text-display);
  max-width: 18ch;
}
.manifesto__body {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 54ch;
  color: var(--muted);
  line-height: 1.7;
}
/* Short readable subhead under a Rock 3D headline — carries the nuance the
   short display line drops, in legible mono. */
.section__lead {
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.7;
}

/* --- Pillars (the three) -------------------------------------------------- */
.pillars { border-top: 1px solid var(--faint); }
.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--faint);
  border: 1px solid var(--faint);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 880px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  min-height: clamp(320px, 36vw, 440px);
  transition: background var(--dur-ui) var(--ease-spring);
}
.pillar:hover { background: var(--panel); }
.pillar__no { font-size: var(--text-label); letter-spacing: 0.2em; color: var(--accent); }
.pillar__name {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.95;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
}
.pillar__desc { margin-top: 1rem; color: var(--muted); font-size: var(--text-body); line-height: 1.65; }

/* --- Ticker (dark band) --------------------------------------------------- */
.ticker {
  background: var(--dark);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  border-block: 1px solid var(--dark);
}
.ticker__track {
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.ticker__track span {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: inline-flex;
  gap: 2.5rem;
  align-items: center;
}
.ticker__track span::after { content: "✦"; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* --- Proof numbers -------------------------------------------------------- */
/* Number rows redesign — number left, label right, hairline dividers.
   Replaces the generic three-up big-number grid. */
.proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--faint);
}
.stat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--faint);
}
@media (min-width: 680px) { .stat { grid-template-columns: minmax(0, 0.42fr) 1fr; gap: 2.5rem; } }
.stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  line-height: 0.82;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  align-self: center;
  margin: 0;
  color: var(--muted);
}

/* --- Clients -------------------------------------------------------------- */
.clients { border-top: 1px solid var(--faint); }
.clients__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.6rem) clamp(1.5rem, 3.4vw, 3.4rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  align-items: baseline;
}
.clients__row span {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color var(--dur-ui) var(--ease-spring);
}
.clients__row span:hover { color: var(--fg); }

/* --- Closing / CTA -------------------------------------------------------- */
.closing { background: var(--dark); color: var(--on-dark); }
.closing__line {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.04;
  font-size: var(--text-display);
  max-width: 16ch;
}
.closing__lead {
  margin-top: clamp(1.1rem, 2.4vw, 1.75rem);
  max-width: 42ch;
  color: var(--on-dark-muted);
  line-height: 1.7;
}
.closing__contacts {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) { .closing__contacts { grid-template-columns: repeat(3, 1fr); } }
.contact__label { font-size: var(--text-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-muted); }
.contact__mail {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--text-sub);
  color: var(--on-dark);
  position: relative;
}
.contact__mail::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.contact__mail:hover::after { transform: scaleX(1); transform-origin: left; }
.closing__foot {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245,245,240,0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.closing__foot span { font-size: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-muted); }

/* --- Scroll progress + skip link (UX / a11y) ------------------------------ */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: calc(var(--z-nav) + 1);
  transition: width 0.1s linear;
}
.skip-link {
  position: fixed; top: -60px; left: var(--pad-edge); z-index: var(--z-preloader);
  background: var(--dark); color: var(--on-dark); padding: 0.6rem 1rem;
  font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase;
  transition: top var(--dur-ui) var(--ease-spring);
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav__links a.is-active { color: var(--fg); }
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* --- Work / Selected cases ------------------------------------------------ */
.work { border-top: 1px solid var(--faint); }
.work__grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--faint); border: 1px solid var(--faint);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 760px) { .work__grid { grid-template-columns: 1fr 1fr; } }
.case {
  background: var(--bg); padding: clamp(1.5rem, 2.6vw, 2.5rem);
  display: flex; flex-direction: column; gap: 0.85rem;
  min-height: clamp(248px, 27vw, 320px);
  transition: background var(--dur-ui) var(--ease-spring);
}
.case:hover { background: var(--panel); }
.case__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.case__client { font-size: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.case__year { font-size: var(--text-label); letter-spacing: 0.1em; color: var(--accent); }
.case__name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.03em; line-height: 0.95; font-size: clamp(1.5rem, 2.7vw, 2.35rem);
  margin-top: auto;
}
.case__metric { color: var(--fg); font-size: var(--text-body); line-height: 1.55; }
.case__tag { font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* --- Roster / Network ----------------------------------------------------- */
.roster { border-top: 1px solid var(--faint); }
.roster__lead { max-width: 52ch; margin-top: clamp(1.25rem, 2.5vw, 2rem); color: var(--muted); line-height: 1.7; }
.roster__cols {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) { .roster__cols { grid-template-columns: 1.4fr 1fr; } }
.roster__col h3 { font-size: var(--text-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }
.roster__names { display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem; align-items: baseline; }
.roster__names span {
  font-size: clamp(0.98rem, 1.5vw, 1.3rem); color: var(--muted);
  transition: color var(--dur-ui) var(--ease-spring);
}
.roster__names span b { font-weight: 600; color: var(--fg); }
.roster__names span:hover { color: var(--fg); }

/* --- Client logo wall (real brand logos, monochrome) ---------------------- */
.clientwall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--faint);
  border: 1px solid var(--faint);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 560px) { .clientwall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 920px) { .clientwall { grid-template-columns: repeat(7, 1fr); } }
.clientwall__logo {
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  aspect-ratio: 3 / 2;
  transition: background var(--dur-ui) var(--ease-spring);
}
.clientwall__logo:hover { background: var(--panel); }
/* Every logo is forced to ONE flat colour: brightness(0) turns any source
   (white gmbh/lululemon, colour, black) into the same black silhouette via its
   alpha, shown at one shared opacity — so they all read identically. Sized to a
   consistent optical height, with two buckets for the aspect-ratio outliers. */
.clientwall__logo img {
  height: clamp(15px, 1.9vw, 20px);
  width: auto;
  max-width: 86%;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.58;
  transition: opacity var(--dur-ui) var(--ease-spring);
}
.clientwall__logo:hover img { opacity: 1; }
/* Ultra-wide wordmarks (sony, marc-o-polo, ottolinger): size by width so they
   read as a wordmark of consistent length instead of being crushed thin. */
.clientwall__logo--word img {
  height: auto;
  width: clamp(78px, 8.5vw, 108px);
  max-width: 92%;
  max-height: 20px;
}
/* Compact square marks: a touch taller so their visual mass matches the
   wordmarks instead of reading as a tiny dot. */
.clientwall__logo--mark img {
  height: clamp(18px, 2.3vw, 25px);
}

/* --- Roster: clickable people / partners (real portfolio links) ----------- */
.roster__person {
  font-size: clamp(0.98rem, 1.5vw, 1.3rem);
  color: var(--muted);
  position: relative;
  transition: color var(--dur-ui) var(--ease-spring);
}
.roster__person b { font-weight: 600; color: var(--fg); }
.roster__person::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.roster__person:hover { color: var(--fg); }
.roster__person:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- The deck system (on-page section) ------------------------------------ */
.decks { border-top: 1px solid var(--faint); }
.decks__lead { margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 54ch; color: var(--muted); line-height: 1.7; }
.decks__grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--faint); border: 1px solid var(--faint);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 680px) { .decks__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .decks__grid { grid-template-columns: 1fr 1fr 1fr; } }
.deckcard {
  background: var(--bg); padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  min-height: clamp(200px, 20vw, 244px);
  transition: background var(--dur-ui) var(--ease-spring);
}
.deckcard:hover { background: var(--panel); }
.deckcard__no { font-size: var(--text-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.deckcard__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.95; font-size: clamp(1.4rem, 2.4vw, 2rem); margin-top: auto; }
.deckcard__desc { color: var(--muted); line-height: 1.6; font-size: var(--text-body); }
.deckcard__go { font-size: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* --- By industry (on-page section) ---------------------------------------- */
.industries { border-top: 1px solid var(--faint); }
.industries__list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--faint); }
.industry {
  display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--faint); align-items: baseline;
}
@media (min-width: 760px) { .industry { grid-template-columns: 0.5fr 2fr; } }
.industry__name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.03em; line-height: 0.95; font-size: clamp(1.4rem, 2.4vw, 2.1rem);
}
.industry__list { color: var(--muted); line-height: 1.7; }

/* --- Featured case deep-dives (inline on the one page) -------------------- */
.casefeature { margin-top: clamp(2.5rem, 5vw, 4rem); }
.casefeature__label {
  font-size: var(--text-label); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: clamp(0.85rem, 2vw, 1.4rem);
}
/* The casefeature dioramas are full 16:9 illustrated scenes — never side-crop
   them. Match the tile aspect to the image so object-fit:cover fills exactly
   (no horizontal crop); a two-up case (SS26 + FW26) sits side by side, each
   shown whole. Higher specificity than deck.css's portrait .mood rules. */
.casefeature .moodgrid { grid-template-columns: 1fr; }
@media (min-width: 720px) { .casefeature .moodgrid { grid-template-columns: repeat(2, 1fr); } }
.casefeature .mood { aspect-ratio: 16 / 9; background: var(--bg); }
.casefeature .mood img { aspect-ratio: 16 / 9; }
.casefeature .mood--wide { grid-column: 1 / -1; }

/* ============================================================================
   B&W REDESIGN — hero logo, About/Info manifesto, strict monochrome.
   ========================================================================== */

/* Logo now lives in the hero (not the header) */
.hero__logo {
  width: clamp(56px, 8vw, 116px);
  height: auto;
  color: var(--fg);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* About / Info — the real Nimmersatt manifesto */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
}
@media (min-width: 900px) { .about__grid { grid-template-columns: 1.55fr 1fr; gap: clamp(3rem, 5vw, 5.5rem); } }
.about__body { display: grid; gap: clamp(0.9rem, 1.6vw, 1.3rem); max-width: 64ch; }
/* Desktop/tablet show the full manifesto; the condensed mobile copy is hidden
   here and swapped in only on phones (see the max-width:760 block). */
.about .about__body--short { display: none; }
.about__body p { color: var(--muted); line-height: 1.7; font-size: var(--text-body); }
/* lead paragraph: black, larger — the manifesto opener */
.about__body p:first-child {
  color: var(--fg);
  font-size: var(--text-sub);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.about__emailrow { margin-top: clamp(0.6rem, 1.5vw, 1.1rem); }
.about__email {
  color: var(--fg); position: relative; font-size: var(--text-sub);
}
.about__email::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--fg); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.about__email:hover::after { transform: scaleX(1); transform-origin: left; }

.about__services {
  list-style: none; display: grid; gap: 0; align-content: start;
  border-top: 1px solid var(--faint);
}
.about__services li {
  font-size: var(--text-label); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); padding-block: clamp(0.5rem, 1vw, 0.7rem);
  border-bottom: 1px solid var(--faint);
  transition: color var(--dur-ui) var(--ease-spring);
}
.about__services li:hover { color: var(--fg); }
/* Two columns on wide screens — a 15-item single hairline list is too long. */
@media (min-width: 560px) {
  .about__services {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    border-top: none;
  }
  .about__services li { border-top: 1px solid var(--faint); border-bottom: none; }
}

/* ============================================================================
   A-SIDE / B-SIDE markers — the two acts of the pitch (vinyl wayfinding).
   Used exactly twice: once to open the pitch, once to open the facts.
   ========================================================================== */
.sidemark {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.sidemark__ab {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.8;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  flex: 0 0 auto;
}
.sidemark__txt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.sidemark__txt b { display: block; color: var(--fg); font-weight: 700; }

/* ============================================================================
   Case cards — now lead with the work itself (full colour), text below.
   Turns "Selected work" from a text list into a scannable visual grid.
   ========================================================================== */
.case { padding: 0; gap: 0; overflow: hidden; }
.case__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--panel);
  border-bottom: 1px solid var(--faint);
}
.case__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}
.case:hover .case__thumb img { transform: scale(1.04); }
.case__body {
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.75rem;
  flex: 1;
}
.case__name { margin-top: 0.35rem; }

/* ============================================================================
   SCROLLYTELLING — sticky canvas frame-scrub (B&W)
   ========================================================================== */
.scrolly {
  position: relative;
  height: 440vh;              /* 3 projects × scrub room */
  background: var(--bg);
}
@media (max-width: 640px) { .scrolly { height: 360vh; } }

.scrolly__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.scrolly__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg);
  filter: contrast(1.03);                 /* the work plays in full colour */
}
/* The contained footage sits on the white stage, so the caption lives in the
   margin below it as dark editorial type — no scrim, no blend tricks. */
.scrolly__cap {
  position: absolute;
  left: var(--pad-edge);
  bottom: clamp(2rem, 6vw, 5rem);
  z-index: 2;
  color: var(--fg);
  pointer-events: none;
  will-change: opacity;
}
.scrolly__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.98;
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  max-width: 16ch;
}
.scrolly__meta {
  margin-top: 0.7rem;
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Print: collapse the tall scroll section to a single still */
@media print {
  .scrolly { height: auto !important; }
  .scrolly__stage { position: static !important; height: 60vh !important; }
  .scrolly__hint { display: none !important; }
}

/* ============================================================================
   FLUID MOTION — Lenis smooth-scroll + GSAP light parallax (js/motion.js).
   All of this only engages when js/motion.js adds the classes; with
   prefers-reduced-motion the layer never starts and the page scrolls natively.
   ========================================================================== */

/* Lenis: it adds .lenis / .lenis-smooth to <html> when smooth scroll is on. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Parallax-ready media: extra height gives the drift room so it never exposes
   an edge; GSAP owns the transform each frame, so kill any CSS transition. */
.motion-on .case__thumb img,
.motion-on .casefeature .mood img {
  height: 114%;
  transition: none !important;
  will-change: transform;
}

/* ============================================================================
   EDITORIAL TYPE SYSTEM (readability-first)
   ----------------------------------------------------------------------------
   The page speaks in two faces only: Rock 3D (display) and Martian Mono
   (everything else). Mono reads poorly heavy, so this block fixes WHERE text
   appears and HOW it is formatted, in four roles:

     1. DISPLAY    Rock 3D, uppercase. Section headlines + hero wordmark only.
                   Short (1-3 words). Never running text.            [.manifesto__line, .hero__title, .closing__line]
     2. STANDFIRST One intro line under a headline. Near-black, weight 500,
                   tight leading, narrow measure.                    [.hero__sub, .roster__lead, .decks__lead, .section__lead, .casefeature__intro]
     3. BODY       Running paragraphs. --ink (AA+), weight 460, measure 64ch,
                   open leading. The reading workhorse.              [.about__body p, .pillar__desc, .case__metric, .industry__list, .twocol p]
     4. LABEL      Small uppercase metadata / eyebrows. --muted, weight 600,
                   wide tracking. Never a sentence.                  [.section__index, .label, *__tag, *__client, *__no]

   Emphasis inside BODY/STANDFIRST uses the SAME face at full --fg (no second
   font, no italics-as-decoration).
   ========================================================================== */

/* --- BODY: running paragraphs ------------------------------------------- */
.about__body p,
.pillar__desc,
.case__metric,
.industry__list,
.manifesto__body {
  font-weight: var(--w-read);
  color: var(--ink);
  line-height: var(--lh-read);
  max-width: var(--measure);
}

/* --- STANDFIRST: one intro line under a headline ------------------------ */
.hero__sub,
.roster__lead,
.decks__lead,
.section__lead {
  font-weight: var(--w-lead);
  color: var(--ink-strong);
  line-height: var(--lh-lead);
}

/* --- Emphasis inside reading text: same face, full ink, a little heavier - */
.about__body strong,
.pillar__desc strong,
.case__metric strong,
.roster__lead strong,
.industry__list strong,
.manifesto__body strong {
  font-weight: 650;
  color: var(--fg);
}

/* The About lead keeps its larger standfirst treatment but inherits the
   readable weight (large heavy mono is the part that felt blunt). */
.about__body p:first-child {
  font-weight: var(--w-lead);
  color: var(--ink-strong);
}

/* Body text on the dark closing band: lift contrast for reading. */
.closing__lead {
  color: var(--on-dark-read);
  font-weight: var(--w-read);
  line-height: var(--lh-read);
}

/* ============================================================================
   HEADING FACE — Rock 3D (hand-drawn) is RESERVED for the hero wordmark only.
   It was overpowering every section and hurting the text beneath it, so every
   other heading now uses the readable face, Martian Mono. Statement headlines
   read sentence-case (calmer); names/labels stay caps; numbers go tabular.
   ========================================================================== */
.manifesto__line,
.closing__line {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: none;             /* sentence case = less shouty, more readable */
  letter-spacing: -0.01em;
  line-height: 1.14;
  font-size: clamp(1.55rem, 3.3vw, 2.6rem);
  max-width: 22ch;
}
.pillar__name,
.case__name,
.industry__name,
.deckcard__name,
.scrolly__title {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.12;
}
.pillar__name   { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
.case__name     { font-size: clamp(1.1rem, 1.9vw, 1.5rem); }
.industry__name { font-size: clamp(1.05rem, 1.9vw, 1.55rem); }
.deckcard__name { font-size: clamp(1.05rem, 1.9vw, 1.5rem); }
.scrolly__title { font-size: clamp(1.25rem, 2.8vw, 2.1rem); line-height: 1.1; }

/* The A/B side markers: bold mono letter instead of the drawn glyph. */
.sidemark__ab {
  font-family: var(--font-mono);
  font-weight: 800;
  line-height: 1;
}

/* Big stats: mono, bold, tabular — far more legible than the drawn numerals. */
.stat__num,
.statrow .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat__num { font-size: clamp(2rem, 5vw, 3.3rem); }

/* ============================================================================
   ANNOTATION PASS — hero (centred animated mark), nav (bold = position),
   about (big lead + services row), pillars (vertical), roster (all artists),
   closing (prominent emails). Plus a full mobile-optimisation block.
   ========================================================================== */

/* --- Hero: vertically centred; the animated mark sits above the tagline --- */
.hero {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 0;
  gap: clamp(1.4rem, 3.2vw, 2.5rem);
}
.hero__mark {
  width: clamp(150px, 25vw, 310px);
  height: auto;
  margin: 0 auto;
}
/* The hero is a centred flex column with its own `gap`; drop the per-element
   margin-tops so every gap (GIF → wordmark → paragraph → the three labels)
   is even instead of the paragraph and labels drifting far apart. */
.hero__sub { margin-inline: auto; margin-top: 0; text-align: center; max-width: 44ch; }
.hero__meta { justify-content: center; margin-top: 0; }

/* --- Nav: current section shown by BOLDER weight, never an underline ------ */
.nav__links a::after { display: none; }
.nav__links a { transition: color var(--dur-ui) var(--ease-spring); }
.nav__links a.is-active { color: var(--fg); font-weight: 800; }

/* --- About: big lead statement, readable body, services row at the bottom - */
.about__lead {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-strong);
  font-size: clamp(1.85rem, 4.6vw, 3.55rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.about__body { max-width: var(--measure); }
/* lead moved out, so the first body paragraph is normal running text again */
.about__body p:first-child {
  font-weight: var(--w-read);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-read);
}

/* Services: a flowing full-width row at the bottom (text-scramble decode in) */
.about__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  align-content: start;
  list-style: none;
  border: none;
  border-top: 1px solid var(--faint);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: none;
}
.about__services li {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-ui) var(--ease-spring);
}
.about__services li:not(:last-child)::after {
  content: "·";
  margin: 0 0.9rem;
  color: var(--faint);
}
.about__services li:hover { color: var(--fg); }

/* --- Pillars: stacked vertically, connected boxes, content side by side --- */
.pillars__grid { grid-template-columns: 1fr; }
.pillar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  min-height: 0;
  padding: clamp(1.9rem, 3.5vw, 3rem);
  text-align: center;        /* numbers removed — wording is centred in each tile */
  justify-items: center;
}
.pillar__name { margin-top: 0.2rem; }
.pillar__desc { max-width: 56ch; margin-inline: auto; }
@media (min-width: 720px) {
  .pillar { min-height: clamp(170px, 17vw, 220px); align-content: center; }
  .pillar__desc { max-width: 62ch; }
}

/* --- Roster: every artist as a connected cell, name + discipline ---------- */
.artists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--faint);
  border: 1px solid var(--faint);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 560px) { .artists { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .artists { grid-template-columns: repeat(4, 1fr); } }
.artist {
  background: var(--bg);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: clamp(96px, 11vw, 128px);
  justify-content: flex-end;
  transition: background var(--dur-ui) var(--ease-spring);
}
.artist:hover { background: var(--panel); }
.artist__name {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--fg);
  line-height: 1.05;
}
.artist__role {
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.roster__partners {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--faint);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}
.roster__subhead {
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.3rem) clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 760px) { .partners { grid-template-columns: repeat(4, 1fr); } }
.partner { display: flex; flex-direction: column; gap: 0.2rem; }
.partner__name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--fg);
  transition: color var(--dur-ui) var(--ease-spring);
}
.partner:hover .partner__name { color: var(--accent); }
.partner__role { font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* --- Closing: emails as big, fully-clickable, connected blocks ------------ */
.closing__contacts {
  gap: 1px;
  background: rgba(245, 245, 240, 0.14);
  border: 1px solid rgba(245, 245, 240, 0.14);
}
.contact {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  transition: background var(--dur-ui) var(--ease-spring);
}
.contact:hover { background: #161616; }
.contact .contact__label { color: var(--on-dark-muted); margin: 0; }
.contact .contact__mail {
  display: block;
  font-size: clamp(0.8rem, 1.7vw, 1.2rem);
  color: var(--on-dark);
  white-space: nowrap;       /* an email must never break mid-address */
}
.contact__mail::after { display: none; }

/* ============================================================================
   MOBILE OPTIMISATION
   ========================================================================== */
@media (max-width: 760px) {
  /* tighter section rhythm */
  .section { padding-block: clamp(3rem, 11vw, 4.5rem); }

  /* Nav → hamburger: a clean bar with a toggle that opens a full-width panel
     of large, readable, tappable links (each ≥ 44px). */
  .nav { padding: 0.7rem var(--pad-edge); }
  .nav__name { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--faint);
    padding: 0.25rem var(--pad-edge) 0.6rem;
    box-shadow: 0 22px 44px -30px rgba(5, 5, 5, 0.55);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a {
    font-size: 1rem; letter-spacing: 0.14em; color: var(--ink-strong);
    padding: 0.95rem 0.15rem; border-bottom: 1px solid var(--faint);
  }
  .nav__links a:last-child { border-bottom: none; }
  .nav__links a::after { display: none; }

  /* Larger tap targets on phones */
  .about__email { display: inline-block; padding-block: 0.35rem; }
  .backtotop { min-height: 44px; display: inline-flex; align-items: center; }

  /* Hero: mark + tagline, comfortably centred */
  .hero__mark { width: clamp(128px, 44vw, 220px); }
  .hero__sub { font-size: 1.02rem; max-width: 34ch; }

  /* About lead: big but never overflowing */
  .about__lead { font-size: clamp(1.55rem, 8.5vw, 2.4rem); max-width: none; }

  /* About body: swap the full manifesto for the condensed, faster-to-read copy */
  .about .about__body--full { display: none; }
  .about .about__body--short { display: grid; }

  /* Casefeature moodgrid: single column on phones */
  .moodgrid { grid-template-columns: 1fr; }
  .mood--wide { grid-column: auto; }

  /* Closing footer stacks */
  .closing__foot { flex-direction: column; gap: 0.45rem; align-items: flex-start; }

  /* Roster cells a touch shorter */
  .artist { min-height: 82px; }

  /* Hero wordmark: scale with the viewport so NIMMERSATT never clips on
     narrow phones (the global --text-hero min of 2.75rem was too large
     below ~390px and the nowrap title got cut off at both edges). */
  .hero__title { font-size: min(var(--text-hero), 10.8vw); }

  /* Services: a clean hairline-separated stack. Once the type got larger
     the inline "·" separators left dangling dots at each line end. */
  .about__services { gap: 0; }
  .about__services li { width: 100%; padding-block: 0.6rem; border-bottom: 1px solid var(--faint); }
  .about__services li:last-child { border-bottom: none; }
  .about__services li::after { display: none; }

  /* Back-to-top: move to the right edge on phones so it stops covering the
     left-aligned roster names and the scrollytelling caption. */
  .backtotop { left: auto; right: var(--pad-edge); }
}
@media (max-width: 420px) {
  .hero__meta { gap: 0.4rem 1.2rem; }
}

/* ============================================================================
   ARTIST REEL OVERLAY
   Our own player; the reel video streams from nimmersatt.fyi. Monochrome chrome,
   the reel is the colour. Exit via a clear "Back" control, not just an ×.
   ========================================================================== */
html.reel-open { overflow: hidden; }
.reel {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .42s var(--ease-out-expo), visibility .42s;
}
.reel.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.reel__backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(26px) saturate(1.1); -webkit-backdrop-filter: blur(26px) saturate(1.1);
}
.reel__card {
  position: relative; z-index: 1;
  width: min(96vw, 1040px); max-height: min(92svh, calc(100svh - 2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--ink-strong);
  border: 1px solid var(--faint); border-radius: 14px;
  transform: scale(.975); transition: transform .5s var(--ease-out-expo);
}
.reel.is-open .reel__card { transform: scale(1); }
.reel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--faint); flex: 0 0 auto;
}
.reel__back {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-strong);
  padding: 0.45rem 0.8rem; border: 1px solid var(--faint); border-radius: 999px;
  transition: color var(--dur-ui), border-color var(--dur-ui), background var(--dur-ui);
}
.reel__back:hover, .reel__back:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); outline: none; }
.reel__source {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.reel__stage {
  position: relative; flex: 0 0 auto;
  /* Follows the loaded reel's real aspect (set via --reel-ar in reel.js) so the
     stage takes the video's shape instead of letterboxing it. 16/9 fallback. */
  width: 100%; aspect-ratio: var(--reel-ar, 16 / 9); max-height: 64svh;
  background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.reel__video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.reel__embed { width: 100%; height: 100%; border: 0; background: #000; display: block; }
.reel__embed[hidden] { display: none; }
.reel__video[hidden] { display: none; }
.reel__spinner {
  display: none; position: absolute; width: 34px; height: 34px; pointer-events: none;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%;
  animation: reelspin .8s linear infinite;
}
.reel__stage.is-loading .reel__spinner { display: block; }
@keyframes reelspin { to { transform: rotate(360deg); } }
.reel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.05rem; line-height: 1;
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-strong);
  border: 1px solid var(--faint);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color var(--dur-ui), background var(--dur-ui), border-color var(--dur-ui);
}
.reel__nav:hover, .reel__nav:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); outline: none; }
.reel__nav--prev { left: 10px; }
.reel__nav--next { right: 10px; }
.reel__info {
  padding: clamp(1rem, 2.2vw, 1.55rem); display: flex; flex-direction: column; gap: 0.5rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0;
}
.reel__name {
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.05; color: var(--ink-strong);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}
.reel__meta {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.reel__bio {
  font-family: var(--font-mono); font-weight: 460; line-height: 1.7;
  color: var(--ink); font-size: var(--text-body); max-width: var(--measure);
}
@media (prefers-reduced-motion: reduce) {
  .reel, .reel__card { transition: opacity .2s linear; }
  .reel__card { transform: none; }
  .reel__spinner { animation-duration: 1.6s; }
}
@media (max-width: 600px) {
  .reel__stage { max-height: 50svh; }
  .reel__nav { width: 44px; height: 44px; }       /* full tap target */
  .reel__back { padding: 0.6rem 0.95rem; }        /* ≥ 44px tall */
  .reel__source { display: none; }   /* keep the bar clean on phones */
}