/* ============================================================================
   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__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__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);
}
.stat__copy { display: grid; gap: 0.65rem; align-self: center; }
.stat__desc {
  max-width: 62ch;
  color: var(--ink);
  font-weight: var(--w-read);
  line-height: var(--lh-read);
}

/* --- Clients -------------------------------------------------------------- */
.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__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__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__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__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; }

/* --- Interactive "let the AI read it" chat -------------------------------
   A calm, high-quality frosted-glass panel. Monochrome only (no hue): the
   "liquid" feel comes from translucency, a soft backdrop blur, a hairline
   top highlight and layered shadow — not colour. Built to read like a
   familiar AI chat: avatar + status, message bubbles, a pill composer.     */
.chat {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 680px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  /* Flat, shadowless chat base — keep only the glass edge highlights, no drop shadow. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),   /* top liquid highlight */
    inset 0 0 0 1px rgba(255, 255, 255, 0.35); /* inner glass edge */
}

/* Header: avatar chip, name, live status */
.chat__brand {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.9rem 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.chat__avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--bg); background: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(5, 5, 5, 0.22);
}
.chat__logo { display: block; width: 19px; height: 19px; }
.chat__brandtext { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.chat__brandname {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  text-transform: none; color: var(--fg); line-height: 1.1;
}
.chat__brandmeta {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-label); letter-spacing: 0.02em; color: var(--muted);
}
/* Which model powers the bot — a quiet hairline pill. Right-aligned on the
   header row on desktop; on phones it drops to its own line under the name so
   the bot name and status keep the full width. */
.chat__model {
  flex: 0 0 auto; margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  padding: 0.28rem 0.55rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
@media (max-width: 559px) {
  /* Grid header on phones: avatar + name on row 1, the model pill on its own
     row 2 (indented under the name, natural width — never full-bleed, never
     overflowing the card). */
  .chat__brand {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; column-gap: 0.75rem; row-gap: 0.2rem;
  }
  .chat__avatar { grid-column: 1; grid-row: 1; }
  .chat__brandtext { grid-column: 2; grid-row: 1; }
  .chat__model { grid-column: 2; grid-row: 2; justify-self: start; margin: 0; }
}
.chat__status {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg) 45%, transparent);
  animation: chatPulse 2.4s var(--ease-spring) infinite;
}
@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg) 40%, transparent); }
  70%  { box-shadow: 0 0 0 6px rgba(5, 5, 5, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 5, 5, 0); }
}

/* Scroll area — contains its own scroll so the page underneath stays put */
.chat__window {
  padding: clamp(1rem, 2.4vw, 1.4rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  /* Fixed height: reserves room for the first message and never grows as the
     conversation fills up, so the page layout below can't be pushed around.
     New messages just scroll inside this box. */
  height: clamp(340px, 52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;                 /* don't chain to the page */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 22%, transparent) transparent;
}
.chat__window:focus-visible { outline: none; }
.chat__window::-webkit-scrollbar { width: 8px; }
.chat__window::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.chat__window::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fg) 30%, transparent); background-clip: padding-box; }

/* Messages */
.chat__msg {
  max-width: 84%; display: flex; flex-direction: column; gap: 0.28rem;
  animation: chatIn 0.34s var(--ease-out-expo) both;
}
@keyframes chatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat__msg p {
  margin: 0; padding: 0.66rem 0.9rem; border-radius: 16px; line-height: 1.6;
  font-size: 0.94rem; white-space: pre-wrap; word-break: break-word;
}
.chat__who {
  font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding-inline: 0.2rem;
}
.chat__msg--bot { align-self: flex-start; }
.chat__msg--bot p {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  border-bottom-left-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.chat__msg--user { align-self: flex-end; align-items: flex-end; }
.chat__msg--user .chat__who { display: none; }
.chat__msg--user p {
  background: var(--fg); color: var(--bg);
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px -6px rgba(5, 5, 5, 0.5);
}

/* Typing indicator — three breathing dots */
.chat__dots { display: inline-flex; align-items: center; gap: 5px; }
.chat__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 45%, transparent);
  animation: chatBlink 1.3s ease-in-out infinite;
}
.chat__dots i:nth-child(2) { animation-delay: 0.18s; }
.chat__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatBlink { 0%, 80%, 100% { opacity: 0.28; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Composer — pill input + circular send */
.chat__form {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.chat__input {
  /* min-width: 0 or the flex item refuses to shrink past an input's default
     ~20-character intrinsic width, and the send button gets pushed out of the
     card on a 320px phone. */
  flex: 1; min-width: 0; appearance: none;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 999px; padding: 0.72rem 1.05rem;
  font: inherit; font-size: 0.92rem; font-weight: 500;
  transition: border-color var(--dur-ui) var(--ease-spring), box-shadow var(--dur-ui) var(--ease-spring);
}
.chat__input::placeholder { color: color-mix(in srgb, var(--fg) 42%, transparent); }
.chat__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--fg) 32%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent);
}
.chat__send {
  flex: 0 0 auto; appearance: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fg); color: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px -4px rgba(5, 5, 5, 0.5);
  transition: transform var(--dur-ui) var(--ease-spring), opacity var(--dur-ui) var(--ease-spring);
}
.chat__send:hover { transform: translateY(-1px) scale(1.04); }
.chat__send:active { transform: translateY(0) scale(0.96); }
/* While the bot is answering the button is dead: no second question can be
   fired on top of the first one. */
.chat__send:disabled { cursor: default; opacity: 0.42; }
.chat__send:disabled:hover, .chat__send:disabled:active { transform: none; }
.chat__send svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .chat__status, .chat__msg, .chat__dots i { animation: none; }
  .chat__send:hover { transform: none; }
}

/* --- Animated hero reel: logo-masked footage on the white hero. Sits in the
   free space above the wordmark; the flattened white background of the clip
   blends into the page so the mark appears to float. Encoded small (mp4/webm)
   with a poster for a fast paint. ------------------------------------------- */
.hero__reel {
  width: 100%;
  max-width: clamp(240px, 42vw, 560px);
  aspect-ratio: 40 / 27;
  margin: clamp(4.5rem, 11vw, 7.5rem) 0 auto;   /* nav clearance on top, auto pushes the wordmark to the bottom */
  align-self: center;
}
.hero__reel video {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
}
@media (max-width: 640px) {
  /* On a phone the `auto` bottom margin was absorbing every spare pixel of a
     100svh hero and dropping a 400px hole between the clip and the wordmark.
     Zeroed, so the four parts (clip, NIMMERSATT, tagline, the three labels)
     centre as one block on the .hero gap. Desktop keeps the pushed-apart
     composition. */
  .hero__reel { max-width: min(70vw, 300px); margin-top: 0; margin-bottom: 0; }
}

/* --- The card that used to hold the "Auf die Liste" sign-up form. That form
   was removed on 2026-08-23 on request; the card frame stayed, and its only
   child is now the Berufshaftpflicht block (.ifunnel-slot, styled in
   css/funnel.css). Class name kept so the frame, the max-width and the
   scroll-reveal hook stay where the rest of the page expects them. ---- */
.lead {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  max-width: 680px;
  border-radius: 22px;
  isolation: isolate;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

/* --- 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; }

/* --- Project tool media placeholders ------------------------------------- */
.tool-placeholder {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--faint);
  background:
    linear-gradient(135deg, transparent 49.7%, var(--faint) 50%, transparent 50.3%),
    linear-gradient(45deg, transparent 49.7%, var(--faint) 50%, transparent 50.3%),
    var(--panel);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: clamp(1.25rem, 3vw, 2.4rem);
}
.tool-placeholder--gif { min-height: clamp(260px, 48vw, 620px); }
.tool-placeholder__type,
.tool-placeholder__meta {
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-placeholder__title {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
}

/* Inline (non-redirecting) video player for the project overview */
.tool-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--faint);
  background: #000;
}
.tool-video iframe,
.tool-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tool-video video { object-fit: cover; background: #000; }

/* Real product screenshots in the artist-side casefeature */
.tool-shot {
  margin: 0;
  border: 1px solid var(--faint);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tool-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.tool-shot figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(0.9rem, 2vw, 1.3rem);
  border-top: 1px solid var(--faint);
}
.tool-shot__title {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.tool-shot__meta {
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Screenshot + note pairs. Single container so mobile order is
   shot → note → shot → note (each screenshot keeps its own explanation right
   under it). On desktop the grid areas restore the shots-row / notes-row look. */
.toolpairs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3.5vw, 1.6rem);
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.tool-note h3 {
  font-size: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 0.7rem;
}
.tool-note p { color: var(--muted); line-height: 1.7; font-size: var(--text-body); }
@media (min-width: 720px) {
  .toolpairs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "shot1 shot2" "note1 note2";
    column-gap: clamp(1.5rem, 3vw, 2.4rem);
    row-gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  .toolpairs > *:nth-child(1) { grid-area: shot1; }
  .toolpairs > *:nth-child(2) { grid-area: note1; }
  .toolpairs > *:nth-child(3) { grid-area: shot2; }
  .toolpairs > *:nth-child(4) { grid-area: note2; }
}

/* ============================================================================
   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;
}
/* Single-row heading ("Nimmersatt — Code of Conduct"): the 22ch cap above is
   narrower than the line itself, so it needs lifting here, after the rule that
   sets it. No nowrap — the line stays on one row wherever it fits and wraps on
   narrow phones instead of pushing the whole page sideways. */
.manifesto__line--onerow { max-width: none; }
.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(2.4rem, 5vw, 4.8rem);
}
.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: 56ch; }
.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: 28ch; /* holds each 26-char <br/> segment on one line -> exactly 2 lines */
  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;
  align-items: baseline;
  gap: 0.6rem 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;
  width: calc(100% - 1.5rem);
  margin-left: 0.35rem;
  margin-bottom: 1.5rem;
}
/* Forced flex row-breaks so the services read as exactly 4 lines (4/4/4/3):
   Generational Decoding · Brand Identity · Conception & Execution · Cinematic Storytelling
   Personal Branding · Treatment Design · Illustration & Graphic · Creative Direction
   Heritage Modernization · Web Experiences · Fashion Editorials · Sourcing & Scouting
   Graphic Design · Motion Design · Lookbooks */
.about__services-br {
  display: block;
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}
.about__services-br::after { content: none !important; }
.about__services li {
  font-family: var(--font-mono);
  /* Sized off the viewport so even the longest (6-item) staircase row fits on
     one line without wrapping. */
  font-size: clamp(0.62rem, 1.2vw, 0.9rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-ui) var(--ease-spring);
}
/* "·" between items on a line (em-based so it scales with the text) ... */
.about__services li:not(:last-child)::after {
  content: "·";
  margin: 0 0.6em;
  color: var(--faint);
}
/* ... but never a trailing separator at the end of a forced line. */
.about__services li:has(+ .about__services-br)::after { content: none; }
.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 ---------- */
/* Three cells, one row, at every width, phones included. Two columns left the
   third cell alone on a second row next to an empty box. */
.artists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--faint);
  border: 1px solid var(--faint);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.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-start;
  transition: background var(--dur-ui) var(--ease-spring);
}
.artist:hover { background: var(--panel); }
/* Clickable rows (download / invite): monochrome, no underline; the ↓ / ↗
   marker darkens on hover so the row reads as actionable. */
.artist--link { text-decoration: none; color: inherit; cursor: pointer; }
.artist__mark { font-size: 0.8em; color: var(--muted); transition: color var(--dur-ui) var(--ease-spring); }
.artist--link:hover .artist__mark { color: var(--fg); }
.artist--link:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.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); } }
/* Same reason as .artists: a group of three stays a row of three on phones. */
.partners--three { grid-template-columns: repeat(3, 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; }

/* --- Artist application timeline ---------------------------------------- */
.application-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(245, 245, 240, 0.14);
  border: 1px solid rgba(245, 245, 240, 0.14);
}
@media (min-width: 760px) { .application-timeline { grid-template-columns: repeat(3, 1fr); } }
.timeline__step {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--dark);
}
.timeline__no {
  display: block;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  color: var(--on-dark-muted);
}
.timeline__step h3 {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.2;
  text-transform: uppercase;
}
.timeline__step p {
  margin-top: 0.8rem;
  color: var(--on-dark-read);
  font-weight: var(--w-read);
  line-height: var(--lh-read);
}
.timeline__note {
  margin-top: 1rem;
  font-size: var(--text-label);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--on-dark-muted);
}
/* Drop this note down by roughly one / two extra rows. */
.timeline__note--lower { margin-top: 2.6rem; }
.timeline__note--lower2 { margin-top: 7.5rem; }
.timeline__note a {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-style: normal;
  transition: color var(--dur-ui) var(--ease-spring);
}
.timeline__note a:hover { color: var(--accent); }
.application-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 1px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(245, 245, 240, 0.14);
  color: var(--on-dark);
  transition: background var(--dur-ui) var(--ease-spring);
}
.application-cta:hover { background: #161616; }
.application-cta__label {
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.application-cta__mail {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.5rem);
}

/* --- Artist documents: bilingual downloads ------------------------------- */
.document-downloads {
  margin-top: clamp(3.5rem, 7vw, 7rem);
  border-top: 1px solid rgba(245, 245, 240, 0.28);
  border-bottom: 1px solid rgba(245, 245, 240, 0.28);
}
.document-downloads__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 5fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 1px solid rgba(245, 245, 240, 0.18);
}
.document-downloads__eyebrow,
.document-download__no {
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.document-downloads__head h3 {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 3vw, 2.7rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.document-downloads__head > p {
  max-width: 44ch;
  color: var(--on-dark-read);
  line-height: var(--lh-read);
}
.document-download {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 132px;
  padding-block: clamp(1.25rem, 2.5vw, 2.25rem);
}
.document-download + .document-download { border-top: 1px solid rgba(245, 245, 240, 0.18); }
.document-download__name { display: flex; flex-direction: column; gap: 0.4rem; }
.document-download__name strong {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  text-transform: uppercase;
}
.document-download__name span { color: var(--on-dark-muted); }
.document-download__languages { display: flex; gap: 1px; background: rgba(245, 245, 240, 0.2); }
.document-download__languages a {
  min-width: clamp(120px, 13vw, 168px);
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--dark);
  border: 1px solid rgba(245, 245, 240, 0.16);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--dur-ui) var(--ease-spring), color var(--dur-ui) var(--ease-spring);
}
.document-download__languages a:hover,
.document-download__languages a:focus-visible { background: var(--on-dark); color: var(--dark); }

/* --- Code of Conduct sign-off -------------------------------------------- */
.proof__signoff {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* --- Documents dropdown (collapsible) ------------------------------------ */
.document-downloads__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
.document-downloads__summary::-webkit-details-marker { display: none; }
.document-downloads__summary:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; }
.document-downloads__summary-text { display: grid; gap: 0.75rem; }
.document-downloads__summary-title {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.document-downloads__chevron {
  font-size: 1.4rem;
  color: var(--on-dark-muted);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.document-downloads--dropdown[open] .document-downloads__chevron { transform: rotate(180deg); }
.document-downloads--dropdown[open] .document-downloads__list {
  border-top: 1px solid rgba(245, 245, 240, 0.18);
}

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

  /* 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 { gap: clamp(1.8rem, 7vw, 3rem); }
  .hero__sub { font-size: 1.02rem; max-width: 35ch; }

  /* About lead: sized so each 26-char segment fits one line -> stays 2 lines */
  .about__lead { font-size: clamp(1rem, 4.7vw, 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; }

  .document-downloads__head { grid-template-columns: 1fr; gap: 1rem; }
  .document-download {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
  }
  .document-download__languages {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .document-download__languages a { min-width: 0; }

  /* Roster: three cells share the width of a phone, so the padding and the
     type come down far enough that DISCORD / CONTRACT ↓ / PACKAGE ↓ each stay
     on one line inside their column. Long words in the caption may break
     rather than push the cell wider than its track. */
  .artist {
    min-height: 0;
    padding: clamp(0.7rem, 2vw, 1.6rem) clamp(0.55rem, 1.9vw, 1.6rem) clamp(0.8rem, 2vw, 1.6rem);
    gap: 0.35rem;
  }
  .artist__name {
    font-size: clamp(0.72rem, 3.3vw, 1.05rem);
    letter-spacing: -0.01em;
  }
  .artist__role {
    font-size: clamp(0.55rem, 1.6vw, 0.62rem);
    letter-spacing: 0.04em;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .artist__mark { font-size: 0.85em; }

  /* What we expect: same three-up row. "Verlässlichkeit" is the widest word
     in either language and sets the size here. */
  .partners--three { column-gap: clamp(0.6rem, 2vw, 3rem); }
  .partners--three .partner__name {
    font-size: clamp(0.68rem, 2.9vw, 0.95rem);
    /* Hyphenation, not a blind break: "Verlässlichkeit" is wider than a third
       of a phone at any readable size, and a hyphen reads as intended where a
       bare mid-word cut reads as broken. overflow-wrap is only the fallback
       for a word no dictionary can split. */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  .partners--three .partner__role {
    font-size: clamp(0.55rem, 1.6vw, 0.62rem);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* 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 { width: 100%; margin-left: 0; margin-bottom: 0; gap: 0; transform: none; }
  .about__services-br { display: none; }
  .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); }

  /* --- Reading on a phone (2026-08-23) ------------------------------------
     Martian Mono advances 0.7em per character, so a 350px column tops out at
     about 32 characters a line however the type is set. The line cannot get
     much longer without shrinking the text, which would cost more than it
     buys. So the work here is on everything else that makes a narrow column
     hard to read: alignment, rag, hierarchy, and how big the things are that
     a thumb has to hit. */

  /* Eyebrows and the small block headings sat at 9.9px, under a body size of
     15.2px, so the label of a block was smaller than the block it labelled,
     which reads as noise instead of hierarchy. 11.2px stays quiet and can
     actually be read at arm's length. */
  :root { --text-label: clamp(0.7rem, 2.4vw, 0.78rem); }
  /* One exception: the line under the bot's name is chrome, not content, and
     at the larger label size "Berufshaftpflicht · Markel Pro Media" tips onto
     a second row and pushes the whole chat header taller. */
  .chat__brandmeta { font-size: 0.62rem; }

  /* The three deal blocks run 15 to 20 lines each on a phone. Centred text
     that long gives the eye no left edge to return to: every new line has to
     be hunted for. Left-aligned, across the full column, and with half the
     tile padding, which was eating a tenth of every line. On desktop they are
     three short columns side by side and stay centred. */
  .pillar {
    text-align: left;
    justify-items: start;
    padding-inline: clamp(1.1rem, 4.5vw, 3rem);
  }
  .pillar__desc { max-width: none; margin-inline: 0; }

  /* German at 32 characters a line tears holes into the rag: "zusammen-
     arbeiten" alone is half a line. Hyphenation closes them and buys back
     roughly a word per line. The dictionary follows documentElement.lang,
     which js/i18n.js sets on every language switch. */
  .about__body p,
  .pillar__desc,
  .stat__desc,
  .roster__lead,
  .section__lead {
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Only split words worth splitting: at least 8 letters, and never leave a
       stump. Without this Chrome offers "Dei-ne", which reads as a typo. */
    hyphenate-limit-chars: 8 4 3;
  }

  /* The floating back-to-top sat at 82% white over running copy, so the words
     behind it stayed half readable and looked like a printing error. Solid. */
  .backtotop { background: var(--bg); }

  /* Tap targets: 44px is the floor both Apple and Google quote, and these
     four sat under it, the Calendly link worst of all at 12px tall. */
  .nav__brand { min-width: 44px; min-height: 44px; }
  .nav__toggle { width: 44px; height: 44px; margin-right: -10px; }
  .chat__send { width: 44px; height: 44px; }
  .timeline__note a { display: inline-flex; align-items: center; min-height: 44px; }
}
@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__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 */
}

/* ============================================================================
   ARTIST PITCH / MODULAR BOOKING SYSTEM
   The annotated capacity material belongs here: artists can see exactly how
   clients book a solo capability, a unit, or the complete production arc.
   ========================================================================== */
.hero__mark--dot {
  width: clamp(250px, 42vw, 560px);
  max-height: 24svh;
  object-fit: contain;
  object-position: left center;
  opacity: 0.82;
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
}

.booking-eyebrow {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.booking-bridge__lede,
.booking-bridge h2,
.booking-manifesto h2,
.booking-modes h2,
.booking-scale > .shell > h2,
.booking-modular h2,
.booking-audiences h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.booking-bridge__lede {
  max-width: 31ch;
  margin-top: clamp(1.75rem, 4vw, 3.5rem);
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  color: var(--ink-strong);
}
.booking-premise {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
  margin-top: clamp(6rem, 12vw, 11rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--faint);
}
.booking-premise h2 {
  max-width: 19ch;
  font-size: clamp(2rem, 4.8vw, 4.8rem);
}
.booking-premise__lead { min-width: 0; }
.booking-premise__motion {
  display: block;
  width: min(100%, 640px);
  height: clamp(150px, 22vw, 280px);
  margin-top: clamp(2.5rem, 6vw, 5.5rem);
  object-fit: contain;
  object-position: left center;
}
.booking-premise > p {
  max-width: 46ch;
  padding-top: 0.35rem;
  color: var(--ink);
  font-weight: var(--w-read);
  line-height: var(--lh-read);
}

.booking-manifesto,
.booking-audiences {
  background: var(--dark);
  color: var(--on-dark);
}
.booking-manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  gap: clamp(3rem, 8vw, 9rem);
}
.booking-manifesto h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 4.7vw, 4.5rem);
}
.booking-manifesto__copy {
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid rgba(245, 245, 240, 0.22);
}
.booking-manifesto__copy p {
  color: var(--on-dark-read);
  line-height: var(--lh-read);
}
.booking-manifesto__copy p + p { margin-top: 1.5rem; }

.booking-legend {
  margin-top: clamp(6rem, 12vw, 12rem);
  border-block: 1px solid rgba(245, 245, 240, 0.28);
}
.booking-legend__head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid rgba(245, 245, 240, 0.2);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.booking-legend__head span:last-child { color: var(--on-dark-muted); }
.booking-legend__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.booking-legend__mode {
  min-height: clamp(250px, 28vw, 340px);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.booking-legend__mode + .booking-legend__mode { border-left: 1px solid rgba(245, 245, 240, 0.2); }
.booking-legend__meta { display: grid; grid-template-columns: 38px 1fr; gap: 0.8rem; }
.booking-legend__meta > span { color: var(--on-dark-muted); }
.booking-legend__meta h3 {
  font-size: clamp(0.95rem, 1.55vw, 1.3rem);
  line-height: 1.2;
  text-transform: uppercase;
}
.booking-legend__meta p {
  margin-top: 0.5rem;
  color: var(--on-dark-muted);
  font-size: var(--text-label);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-glyph { position: relative; min-height: 96px; margin-top: auto; }
.booking-glyph--solo { display: flex; align-items: end; gap: clamp(0.75rem, 1.5vw, 1.35rem); }
.booking-glyph--solo span { width: clamp(28px, 3.2vw, 44px); aspect-ratio: 1; background: var(--on-dark); }
.booking-glyph--unit { display: flex; flex-direction: column; justify-content: end; gap: 9px; padding-right: 18%; }
.booking-glyph--unit span { height: 9px; background: var(--on-dark); }
.booking-glyph--unit span:nth-child(1),
.booking-glyph--unit span:nth-child(3) { width: 66%; }
.booking-glyph--unit span:nth-child(2) { width: 100%; }
.booking-glyph--unit::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 9px;
  width: 34px;
  height: 34px;
  border-top: 9px solid var(--on-dark);
  border-right: 9px solid var(--on-dark);
  transform: rotate(45deg);
}
.booking-glyph--turnkey span { position: absolute; bottom: 8px; width: 44%; height: 58px; border: 1px solid var(--on-dark); }
.booking-glyph--turnkey span:nth-child(1) { left: 0; bottom: 28px; }
.booking-glyph--turnkey span:nth-child(2) { left: 25%; bottom: 18px; background: var(--dark); }
.booking-glyph--turnkey span:nth-child(3) { right: 0; background: var(--on-dark); }
.booking-legend__progress { position: relative; height: 54px; border-top: 1px solid rgba(245, 245, 240, 0.2); }
.booking-legend__progress::before { content: ""; position: absolute; left: 0; right: 8px; top: 26px; height: 1px; background: var(--on-dark); }
.booking-legend__progress::after { content: ""; position: absolute; right: 0; top: 21px; width: 10px; height: 10px; border-top: 1px solid var(--on-dark); border-right: 1px solid var(--on-dark); transform: rotate(45deg); }
.booking-legend__progress span { position: absolute; top: 22px; width: 9px; height: 9px; background: var(--on-dark); }
.booking-legend__progress span:nth-child(1) { left: 0; }
.booking-legend__progress span:nth-child(2) { left: 50%; }
.booking-legend__progress span:nth-child(3) { right: 0; }

.booking-modes h2,
.booking-scale > .shell > h2,
.booking-audiences h2 { max-width: 22ch; font-size: clamp(2rem, 4.8vw, 4.6rem); }
.booking-modes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(4rem, 9vw, 8rem);
  border: 1px solid var(--fg);
}
.booking-mode {
  min-height: clamp(360px, 42vw, 520px);
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.5rem, 4vw, 3.75rem);
  background: var(--bg);
  color: var(--fg);
}
.booking-mode + .booking-mode { border-left: 1px solid var(--fg); }
.booking-mode--dark { background: var(--dark); color: var(--on-dark); }
.booking-mode__no { font-size: var(--text-label); letter-spacing: 0.12em; }
.booking-mode h3 { max-width: 12ch; font-size: clamp(1.5rem, 3vw, 2.7rem); line-height: 0.98; text-transform: uppercase; }
.booking-mode p { max-width: 45ch; margin-top: 2rem; color: var(--ink); line-height: var(--lh-read); }
.booking-mode--dark p { color: var(--on-dark-read); }
.booking-mode ul { list-style: none; margin-top: clamp(2rem, 5vw, 4rem); }
.booking-mode li { padding-block: 0.75rem; border-top: 1px solid currentColor; font-size: var(--text-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.booking-scale { background: var(--panel); }
.booking-scale__list { margin-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid var(--faint); }
.booking-scale__row {
  display: grid;
  grid-template-columns: 90px 1.25fr 1.6fr 1.5fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  min-height: 240px;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--faint);
}
.booking-scale__row h3 { max-width: 15ch; font-size: clamp(1.35rem, 2.5vw, 2.2rem); line-height: 1.05; text-transform: uppercase; }
.booking-scale__row > p { max-width: 37ch; color: var(--ink); line-height: var(--lh-read); }
.booking-scale__meta,
.booking-scale__example { font-size: var(--text-label); line-height: 1.55; letter-spacing: 0.08em; text-transform: uppercase; }
.booking-scale__meta { font-weight: 700; }
.booking-scale__example { max-width: 34ch; margin-top: 3rem; color: var(--muted); }
.scale-icon { display: flex; gap: 5px; width: 58px; padding-top: 0.15rem; }
.scale-icon span { display: block; background: var(--fg); }
.scale-icon--horizontal span { width: 15px; height: 15px; }
.scale-icon--vertical { flex-direction: column; }
.scale-icon--vertical span { width: 48px; height: 6px; }
.scale-icon--stack { position: relative; height: 42px; }
.scale-icon--stack span { position: absolute; width: 34px; height: 22px; border: 1px solid var(--fg); background: var(--panel); }
.scale-icon--stack span:nth-child(1) { left: 0; top: 0; }
.scale-icon--stack span:nth-child(2) { left: 10px; top: 8px; }
.scale-icon--stack span:nth-child(3) { left: 20px; top: 16px; background: var(--fg); }

.booking-modular {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: clamp(7rem, 14vw, 13rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--fg);
}
.booking-modular h2 { max-width: 18ch; margin-top: 1.25rem; font-size: clamp(1.8rem, 3.8vw, 3.4rem); }
.booking-modular > div:first-child > p:last-child { max-width: 48ch; margin-top: 2rem; color: var(--ink); line-height: var(--lh-read); }
.booking-tetris {
  min-height: 390px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  background: var(--fg);
  border: 1px solid var(--fg);
}
.booking-tetris span { display: flex; align-items: flex-end; padding: 1rem; background: var(--bg); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.booking-tetris__base { grid-column: 1 / 5; grid-row: 3 / 5; }
.booking-tetris__concept { grid-column: 1 / 3; grid-row: 2; }
.booking-tetris__artist { grid-column: 3 / 5; grid-row: 2; color: var(--on-dark); background: var(--dark) !important; }
.booking-tetris__production { grid-column: 5 / 7; grid-row: 1 / 4; }
.booking-tetris__delivery { grid-column: 5 / 7; grid-row: 4; color: var(--on-dark); background: var(--dark) !important; }

.booking-audiences h2 { color: var(--on-dark); }
.booking-audiences__grid {
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  margin-top: clamp(5rem, 11vw, 10rem);
  border-block: 1px solid rgba(245, 245, 240, 0.25);
}
.booking-audiences article { min-height: 390px; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 3rem); }
.booking-audiences article + article { border-left: 1px solid rgba(245, 245, 240, 0.25); }
.booking-audiences article > span { color: var(--on-dark-muted); font-size: var(--text-label); }
.booking-audiences h3 { margin-top: auto; font-size: clamp(1.4rem, 2.7vw, 2.5rem); line-height: 1.05; }
.booking-audiences p { max-width: 40ch; margin-top: 2rem; color: var(--on-dark-read); line-height: var(--lh-read); }

@media (max-width: 900px) {
  .booking-premise,
  .booking-manifesto__grid,
  .booking-modular { grid-template-columns: 1fr; }
  .booking-manifesto__copy { padding: 2rem 0 0; border-left: 0; border-top: 1px solid rgba(245, 245, 240, 0.22); }
  .booking-legend__grid { grid-template-columns: 1fr; }
  .booking-legend__mode + .booking-legend__mode { border-left: 0; border-top: 1px solid rgba(245, 245, 240, 0.2); }
  .booking-legend__progress { display: none; }
  .booking-scale__row { grid-template-columns: 70px 1fr 1fr; }
  .booking-scale__row > p { grid-column: 2 / -1; }
  .booking-audiences__grid { grid-template-columns: 1fr; }
  .booking-audiences article { min-height: 300px; }
  .booking-audiences article + article { border-left: 0; border-top: 1px solid rgba(245, 245, 240, 0.25); }
}

@media (max-width: 680px) {
  .hero__mark--dot { width: min(86vw, 420px); max-height: 18svh; }
  .booking-premise { grid-template-columns: 1fr; margin-top: 5rem; }
  .booking-premise__motion { height: 150px; margin-top: 2.25rem; object-position: center; }
  .booking-legend__head { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.35rem; padding-block: 1rem; }
  .booking-legend__mode { min-height: 240px; }
  .booking-modes__grid { grid-template-columns: 1fr; }
  .booking-mode { min-height: 0; }
  .booking-mode + .booking-mode { border-left: 0; border-top: 1px solid var(--fg); }
  .booking-scale__row { grid-template-columns: 56px 1fr; }
  .booking-scale__row h3,
  .booking-scale__row > p { grid-column: 2; }
  .booking-scale__example { margin-top: 1.5rem; }
  .booking-tetris { min-height: 330px; }
  .booking-audiences article { min-height: 270px; }
}