/* ==========================================================================
   ALL IMPACT — Homepage v0.1
   Editorial Luxury · Silent Authority
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette — "Night Atelier" calibrated to the ALL IMPACT SVG logo:
     brick-red wordmark (#9C3A3A) + charcoal "Management" (#565555).
     Flipped onto a deep warm noir base for distinct, premium feel. */
  --noir:         #0F0B09;   /* page base — deep warm black */
  --noir-2:       #17120E;   /* raised surfaces */
  --noir-3:       #1F1812;   /* cards / hover */
  --noir-4:       #2A221B;   /* hairlines, borders */
  --bone:         #EDEDE7;   /* primary text — neutral paper-white */
  --bone-dim:     #C5C3BB;   /* secondary text — brighter for readability on dark */
  --bone-mute:    #8B8781;   /* tertiary — neutral gray */
  --stone:        #3A3835;   /* hairline accents — neutral dark */

  /* Brand colors — pulled directly from the SVG logo */
  --brick:        #9C3A3A;   /* LOGO red (exact) — primary accent */
  --brick-hi:     #BC4C4A;   /* hover / highlight */
  --brick-lo:     #5C2222;   /* quieter/darker brick */
  --graphite:     #565555;   /* LOGO "Management" gray (light variant) */

  /* Legacy aliases. Semantic split: --ink = dark SURFACE, text tokens
     route to bone-dim so existing selectors repaint correctly on noir. */
  --ink:          var(--noir);         /* dark surfaces */
  --ink-2:        var(--bone-dim);     /* body text mid */
  --ink-soft:     var(--bone-dim);     /* quieter text */
  --bone-2:       var(--bone-dim);
  --porcelain:    var(--bone);         /* light surface / light text */
  --stone-2:      var(--bone-mute);
  --bordeaux:     var(--brick);
  --bordeaux-lit: var(--brick-hi);
  --bordeaux-ink: var(--brick-lo);
  --saffron:      var(--brick);
  --saffron-hi:   var(--brick-hi);
  --saffron-lo:   var(--brick-lo);
  --sienna:       var(--graphite);

  /* Brand typography
     - Bodoni Moda: display, closest free match to "BodoniflfRoman" (brand)
     - Fahkwang: UI/body, exact brand font used for "Management"
     - JetBrains Mono: meta / labels */
  --ff-display:   "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --ff-italic:    "Bodoni Moda", "Didot", serif;
  --ff-body:      "Fahkwang", ui-sans-serif, system-ui, sans-serif;
  --ff-mono:      "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale (fluid) */
  --fs-xxxl: clamp(4.2rem, 14vw, 14rem);
  --fs-xxl:  clamp(3rem, 9vw, 9rem);
  --fs-xl:   clamp(2.25rem, 6vw, 6rem);
  --fs-lg:   clamp(1.5rem, 3vw, 2.75rem);
  --fs-md:   clamp(1.05rem, 1.25vw, 1.25rem);
  --fs-sm:   0.925rem;
  --fs-xs:   0.78rem;
  --fs-mono: 0.72rem;

  /* Spacing */
  --pad-x:   clamp(1.25rem, 4vw, 4rem);
  --gut:     clamp(1rem, 2vw, 2rem);
  --sec-y:   clamp(5rem, 11vw, 10rem);

  /* Motion */
  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --dur:     0.65s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* On dark backgrounds, subpixel/default rendering preserves stroke weight
     better than 'antialiased' which thins out Bodoni hairlines. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--bordeaux); color: var(--porcelain); }

/* ---------- Base ---------- */
body {
  background: var(--noir);
  color: var(--bone);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  overflow-x: hidden;
  /* Fahkwang 450 equivalent — sits between Regular and Medium
     so body copy reads solidly on dark without feeling bold. */
  font-weight: 400;
}

/* Deep atmospheric glow — gives the noir base warmth, not flat black.
   Tinted toward the logo brick-red for subtle brand presence. */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(156,58,58, 0.055), transparent 70%),
    radial-gradient(900px 700px at 110% 20%, rgba(156,58,58, 0.035), transparent 70%),
    radial-gradient(1400px 900px at 50% 110%, rgba(109, 106, 100, 0.04), transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* Film grain — lighter chroma, screen-blend for warmth on dark */
.grain {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.72 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  /* Bodoni Moda at 600 retains presence on dark bg; at smaller display
     sizes (24–60px) the thin strokes would otherwise vanish. */
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0;
  color: var(--bone);
}
em {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
strong { font-weight: 600; }

/* ---------- Topbar ---------- */
.topbar {
  position: relative; z-index: 5;
  border-bottom: 1px solid rgba(237,237,231, 0.08);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--bone-dim);
}
.topbar__inner {
  display: flex; align-items: center; gap: .9rem;
  padding: 0.55rem var(--pad-x);
  min-height: 34px;
}
.topbar__spacer { flex: 1; }
.topbar__sep { opacity: .4; }
.topbar__item--muted { opacity: .65; }
@media (max-width: 720px) {
  .topbar__inner { gap: .6rem; overflow: hidden; white-space: nowrap; }
  .topbar__item:nth-child(3), .topbar__item:nth-child(5) { display: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gut);
  padding: 1rem var(--pad-x);
  background: color-mix(in oklab, var(--noir) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(237,237,231, 0.07);
}
.nav__mark {
  display: inline-flex; align-items: center;
  transition: opacity .2s var(--ease);
}
.nav__mark:hover { opacity: .88; }

/* Wordmark — dark-mode-native reconstruction of the ALL IMPACT logo
   using the brand fonts (Bodoni Moda display + Fahkwang).
   Colors inverted from the light logo: wordmark in bone for high
   contrast on noir, "Management" in brick as the brand accent. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: .3rem;
}
.wordmark__primary {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 24;
  font-size: 2rem;
  letter-spacing: .005em;
  color: var(--bone);
  line-height: .95;
}
.wordmark__secondary {
  font-family: var(--ff-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .34em;
  color: var(--brick-hi);
  padding-left: .15rem;
}
@media (max-width: 720px) {
  .wordmark__primary { font-size: 1.6rem; }
  .wordmark__secondary { font-size: .62rem; letter-spacing: .3em; }
}
.nav__links {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem;
}
.nav__link {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .35rem 0;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute;
  left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--saffron);
  transition: right .35s var(--ease);
}
.nav__link:hover { color: var(--saffron); }
.nav__link:hover::after { right: 0; }
.nav__num {
  font-family: var(--ff-mono);
  font-size: .62rem; letter-spacing: .15em;
  color: var(--bone-mute);
  text-transform: uppercase;
  transform: translateY(-2px);
}
.nav__utility { display: flex; align-items: center; gap: 1rem; }
.nav__burger { display: none; width: 36px; height: 36px; border: 1px solid var(--bone); border-radius: 999px; padding: 10px 8px; flex-direction: column; justify-content: space-between; }
.nav__burger span { display: block; height: 1px; background: var(--bone); }

.lang { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.lang__btn { padding: .2rem .15rem; color: var(--bone-mute); transition: color .25s; border-bottom: 1px solid transparent; }
.lang__btn.is-active { color: var(--bone); border-bottom-color: var(--bone); }
.lang__btn:not(:disabled):hover { color: var(--bone); }
.lang__btn:disabled { opacity: .55; cursor: not-allowed; }
.lang__sep { color: var(--stone); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .82rem 1.3rem;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--solid { background: var(--brick); color: #FFFFFF; font-weight: 600; }
.btn--solid:hover { background: var(--brick-hi); color: #FFFFFF; }
.btn--ghost { color: var(--bone); border: 1px solid rgba(237,237,231,.45); }
.btn--ghost:hover { background: var(--bone); color: var(--noir); border-color: var(--bone); }
.btn--minimal { color: var(--bone); padding-left: 0; padding-right: 0; gap: .45rem; }
.btn--minimal::after { content: ""; width: 18px; height: 1px; background: var(--saffron); transition: width .3s var(--ease); }
.btn--minimal:hover { color: var(--saffron); }
.btn--minimal:hover::after { width: 32px; }

/* ---------- Tags ---------- */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--ff-mono);
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .75rem;
  border: 1px solid rgba(237,237,231,.22);
  border-radius: 999px;
  color: var(--bone-dim);
  background: rgba(237,237,231,.03);
}
.tag--mono { padding-left: .5rem; }
.tag--mono::before { content: "◉"; margin-right: .4rem; color: var(--saffron); }
.tag--light { color: var(--bone); border-color: rgba(237,237,231,.35); background: transparent; }

/* ---------- Section head ---------- */
.section-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--pad-x);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  font-family: var(--ff-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.section-head__folio { color: var(--saffron); font-weight: 500; }
.section-head__label { color: var(--bone-mute); }
.section-head__rule { flex: 1; height: 1px; background: currentColor; opacity: .22; }
.section-head--light { color: var(--bone); }
.section-head--light .section-head__label { color: rgba(237,237,231,.55); }

/* ==========================================================================
   HERO — two-column editorial: type left, portrait right
   ========================================================================== */
.hero {
  position: relative; z-index: 1;
  padding: clamp(2rem, 5vw, 4rem) var(--pad-x) clamp(2.5rem, 6vw, 5rem);
}
.hero__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
  min-height: calc(100vh - 170px);
}

/* Left column — type block */
.hero__text {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-right: clamp(0rem, 2vw, 2rem);
}
.hero__title {
  font-size: clamp(3.6rem, 10.5vw, 10.5rem);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--bone);
}
.hero__line { display: block; overflow: hidden; }
.hero__line em {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--saffron);
}
.hero__line:nth-child(2) { text-indent: clamp(1rem, 4vw, 3.5rem); }
.hero__line:nth-child(3) { text-indent: clamp(.5rem, 2vw, 1.75rem); }

.hero__lede {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.55;
  color: var(--bone-dim);
  margin: 0;
  max-width: 30rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Right column — visual */
.hero__visual {
  margin: 0;
  display: flex; flex-direction: column;
  gap: .85rem;
  align-self: stretch;
}
.hero__visual-frame {
  position: relative;
  flex: 1;
  min-height: clamp(22rem, 48vw, 40rem);
  overflow: hidden;
  background: var(--noir-3);
  border-radius: 2px;
  box-shadow: 0 50px 80px -40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(237,237,231,.06);
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(35%) contrast(1.04) brightness(.92) sepia(.18);
  mix-blend-mode: luminosity;
  animation: heroZoom 18s ease-out forwards;
}
.hero__visual-frame::before {
  /* Duotone tint layer — brick-red warmth under the luminosity-blended image */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 30% 20%, #8A3832 0%, #3A1E1B 55%, #120908 100%);
  z-index: 0;
}
.hero__visual-frame::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(14,11,8,.55) 100%),
    repeating-linear-gradient(90deg, rgba(237,237,231,.025) 0 1px, transparent 1px 120px);
  pointer-events: none;
  z-index: 2;
}
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.hero__cap {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.hero__cap-label { color: var(--saffron); font-weight: 500; }
.hero__cap-sep { color: var(--stone); }

/* Bottom meta line spans full width */
.hero__footline {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(237,237,231,.1);
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.hero__foot--mono { color: var(--saffron); }
.hero__foot-rule {
  display: inline-block;
  flex: 1;
  max-width: 6rem;
  height: 1px;
  background: currentColor;
  opacity: .3;
}

@media (max-width: 900px) {
  .hero__frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
    gap: 2rem;
  }
  .hero__line:nth-child(2), .hero__line:nth-child(3) { text-indent: 0; }
  .hero__visual-frame { min-height: 24rem; }
  .hero__foot-rule { max-width: 2rem; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(237,237,231,.1);
  border-bottom: 1px solid rgba(237,237,231,.1);
  overflow: hidden;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  background: var(--noir-2);
  color: var(--bone);
}
.marquee__track {
  display: flex; gap: 2.25rem;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-weight: 600; font-variation-settings: "opsz" 32;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  animation: marquee 44s linear infinite;
  width: max-content;
}
.marquee__track--slow { animation-duration: 64s; }
.marquee__sep {
  color: var(--bordeaux);
  font-family: var(--ff-body);
  font-weight: 400;
  align-self: center;
  font-size: .8em;
}
.marquee--alt {
  background: linear-gradient(180deg, #1A0E0C 0%, #110907 100%);
  color: var(--bone);
  border-color: rgba(237,237,231,.08);
}
.marquee--alt .marquee__sep { color: var(--brick-hi); }
.marquee--alt .marquee__track span { font-style: italic; font-family: var(--ff-italic); }
.marquee--alt .marquee__track { animation-direction: reverse; font-size: clamp(1.5rem, 3.2vw, 2.8rem); }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ==========================================================================
   MANIFEST
   ========================================================================== */
.manifest {
  position: relative; z-index: 1;
  padding: var(--sec-y) 0;
}
.manifest__title {
  padding: 0 var(--pad-x);
  font-size: var(--fs-xxl);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.035em;
  line-height: 0.94;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.manifest__word { display: inline; }
.manifest__word--italic {
  font-family: var(--ff-italic);
  font-style: italic;
  color: var(--graphite);       /* exact logo gray #565555 — brand-matched */
  font-weight: 400;
  padding: 0 .4rem;
  opacity: .9;
}
.manifest__word--accent { color: var(--brick); }
.manifest__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 var(--pad-x);
  border-top: 1px solid rgba(237,237,231,.1);
}
.manifest__col {
  padding-top: 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.manifest__img {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--noir-2);
  border-radius: 2px;
  position: relative;
  isolation: isolate;
}
.manifest__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(25%) contrast(1.04) brightness(.92);
  transition: transform 1.2s var(--ease), filter .5s var(--ease);
}
.manifest__col:hover .manifest__img img {
  transform: scale(1.03);
  filter: grayscale(0%) contrast(1.06) brightness(1);
}
.manifest__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,11,9,.4) 100%);
  pointer-events: none;
}
.manifest__col-title {
  font-family: var(--ff-mono);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--bone);
  font-weight: 500;
  margin-bottom: 1.25rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.manifest__col-title::before {
  content: "";
  display: inline-block;
  width: 1.5rem; height: 1px;
  background: var(--brick);
  transform: translateY(-.3em);
  flex-shrink: 0;
}
.manifest__col-title span {
  /* drop-cap flattened to match the rest of the mono label */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  transform: none;
  margin: 0;
}
.manifest__col p {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--bone-dim);
  max-width: 30rem;
}

@media (max-width: 720px) {
  .manifest__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { position: relative; z-index: 1; padding: var(--sec-y) 0; }
.services__title {
  padding: 0 var(--pad-x);
  font-size: var(--fs-xl);
  font-weight: 600; font-variation-settings: "opsz" 32;
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services__list { padding: 0 var(--pad-x); }
.service {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(237,237,231,.14);
  transition: padding-left .4s var(--ease);
  cursor: pointer;
}
.service:last-child { border-bottom: 1px solid rgba(237,237,231,.14); }
.service:hover { padding-left: 1.25rem; }
.service__num {
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--stone-2);
  text-transform: uppercase;
  padding-top: .5rem;
}
.service__name {
  font-size: var(--fs-lg);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: .75rem;
  transition: color .3s var(--ease);
}
.service:hover .service__name { color: var(--bordeaux); }
.service__desc {
  margin: 0; max-width: 44rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.55;
}
.service__arrow {
  font-family: var(--ff-body);
  font-size: 1.5rem;
  color: var(--stone-2);
  align-self: center;
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.service:hover .service__arrow { color: var(--bordeaux); transform: translate(4px, -4px); }

@media (max-width: 720px) {
  .service { grid-template-columns: 52px 1fr; }
  .service__arrow { display: none; }
}

/* ==========================================================================
   ARTISTS
   ========================================================================== */
.artists { position: relative; z-index: 1; padding: var(--sec-y) 0 clamp(3rem, 8vw, 6rem); }
.artists__intro {
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.artists__title {
  font-size: var(--fs-xl);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.028em;
  max-width: 16ch;
}
.artists__lede {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 32rem;
}
@media (max-width: 820px) {
  .artists__intro { grid-template-columns: 1fr; }
}

.roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  padding: 0 var(--pad-x);
}
@media (max-width: 1100px) { .roster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .roster { grid-template-columns: repeat(2, 1fr); } }

.card { position: relative; isolation: isolate; }
.card a {
  display: flex; flex-direction: column; gap: .6rem;
  text-decoration: none;
}
.card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  overflow: hidden;
  color: var(--porcelain);
  background: linear-gradient(170deg, var(--card-grad-a) 0%, var(--card-grad-b) 85%);
  border: 1px solid rgba(237,237,231,.1);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  isolation: isolate;
}
/* Tonal duotone variants — each tints the desaturated image toward
   a specific chroma. All riff off brick-red + graphite from the logo
   so the roster reads as one cohesive editorial collection. */
.card[style*="--tone:1"] .card__frame { --card-grad-a: #8C3A34; --card-grad-b: #170E0B; }  /* logo brick */
.card[style*="--tone:2"] .card__frame { --card-grad-a: #5E2A26; --card-grad-b: #120907; }  /* deep brick */
.card[style*="--tone:3"] .card__frame { --card-grad-a: #4A433E; --card-grad-b: #120F0D; }  /* graphite */
.card[style*="--tone:4"] .card__frame { --card-grad-a: #6E3A2C; --card-grad-b: #180D0A; }  /* rust */
.card[style*="--tone:5"] .card__frame { --card-grad-a: #332E2A; --card-grad-b: #0F0B09; }  /* noir */

/* Image layer — desaturated, luminosity-blended into the warm gradient.
   Produces a cohesive editorial duotone even with varied source photos. */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(.92);
  mix-blend-mode: luminosity;
  z-index: 0;
  transition: transform 1.4s var(--ease), filter .6s var(--ease);
}
.card__frame::before {
  /* Film grain over the image */
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.card__frame::after {
  /* Bottom darkening + hairlines to give text contrast */
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 40%, rgba(15,11,8,.8) 100%),
    repeating-linear-gradient(90deg, rgba(237,237,231,.04) 0 1px, transparent 1px 140px);
  pointer-events: none;
}

.card__type {
  position: absolute;
  top: .9rem; left: .95rem;
  z-index: 3;
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .3em;
  color: var(--porcelain);
  opacity: .72;
}
.card__handle {
  position: relative;
  z-index: 3;
  display: block;
  /* Fahkwang at card scale reads infinitely better than Bodoni's
     hairlines when the handle sits at 17–30px over a photo. */
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-transform: lowercase;
  transform: translateY(0);
  transition: transform .5s var(--ease), color .3s var(--ease);
  word-break: break-word;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
.card__role {
  position: relative;
  z-index: 3;
  margin-top: .45rem;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237,237,231,.82);
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), max-height .4s var(--ease);
}
.card__meta {
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone-2);
}

.card:hover .card__frame {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgba(26,21,16,.5);
}
.card:hover .card__img {
  transform: scale(1.05);
  filter: grayscale(60%) contrast(1.1) brightness(1);
}
.card:hover .card__handle { color: var(--porcelain); transform: translateY(-2px); }
.card:hover .card__role { opacity: 1; transform: translateY(0); max-height: 2rem; }

.artists__foot {
  display: flex; justify-content: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* ==========================================================================
   PULL QUOTE
   ========================================================================== */
.pull {
  position: relative; z-index: 1;
  padding: var(--sec-y) var(--pad-x);
  background:
    radial-gradient(900px 700px at 20% 0%, rgba(156,58,58,.14), transparent 70%),
    linear-gradient(180deg, #15100D 0%, #0F0B09 100%);
  border-top: 1px solid rgba(237,237,231,.08);
  border-bottom: 1px solid rgba(237,237,231,.08);
}
.pull__figure {
  position: relative;
  max-width: 56rem; margin: 0 auto;
  text-align: left;
}
.pull__mark {
  display: block;
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: clamp(8rem, 16vw, 16rem);
  line-height: .7;
  color: var(--bordeaux);
  margin-bottom: -2rem;
  transform: translateX(-.25rem);
}
.pull__quote {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600; font-variation-settings: "opsz" 32;
  font-size: var(--fs-xl);
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.pull__quote em {
  color: var(--bordeaux);
  font-family: var(--ff-italic);
}
.pull__cite {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.5rem;
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pull__cite-line { display: inline-block; width: 72px; height: 1px; background: var(--ink-soft); }

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.partners {
  position: relative; z-index: 1;
  background: var(--ink);
  color: var(--porcelain);
  padding: var(--sec-y) 0;
}
.partners .section-head { color: rgba(237,237,231,.65); }
.partners__intro {
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.partners__title {
  color: var(--porcelain);
  font-size: var(--fs-xl);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.03em;
}
.partners__title em { color: var(--bordeaux-lit); }
.partners__lede {
  color: rgba(237,237,231,.7);
  max-width: 30rem;
  font-size: 1.02rem;
  line-height: 1.6;
}
@media (max-width: 820px) {
  .partners__intro { grid-template-columns: 1fr; }
}

.partner-wall {
  padding: 0 var(--pad-x);
  border-top: 1px solid rgba(237,237,231,.18);
}
.partner-wall li {
  display: flex; align-items: baseline;
  gap: 2rem;
  padding: clamp(.8rem, 1.4vw, 1.25rem) 0;
  border-bottom: 1px solid rgba(237,237,231,.12);
  position: relative;
  transition: padding-left .35s var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.partner-wall li::before {
  content: "↗";
  position: absolute;
  right: 0; top: 50%;
  transform: translate(40px, -50%);
  opacity: 0;
  font-size: 1.5rem;
  color: var(--bordeaux-lit);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.partner-wall li:hover::before { opacity: 1; transform: translate(0, -50%); }
.partner-wall li:hover { padding-left: 1.25rem; }
.partner-wall__name {
  font-family: var(--ff-display);
  font-weight: 600; font-variation-settings: "opsz" 32;
  font-size: clamp(2rem, 5vw, 4.75rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--porcelain);
  flex: 1;
  transition: color .3s var(--ease), transform .5s var(--ease);
}
.partner-wall li:hover .partner-wall__name {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--bordeaux-lit);
}
.partner-wall__meta {
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(237,237,231,.5);
  padding-right: 2.5rem;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .partner-wall li { flex-direction: column; gap: .3rem; align-items: flex-start; }
  .partner-wall__meta { padding-right: 0; }
}

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
.locations { position: relative; z-index: 1; padding: var(--sec-y) 0; }
.locations__title {
  padding: 0 var(--pad-x);
  font-size: var(--fs-xl);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.028em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.locations__grid {
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gut);
  border-top: 1px solid rgba(237,237,231,.14);
}
.loc {
  padding: 2rem 0;
  border-right: 1px solid rgba(237,237,231,.1);
  padding-right: var(--gut);
}
.loc:last-child { border-right: none; }
.loc__num {
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--bordeaux);
  text-transform: uppercase;
}
.loc__city {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.03em;
  margin: .5rem 0 1rem;
}
.loc__addr { color: var(--ink-2); line-height: 1.5; margin: 0; font-size: 1rem; }
.loc__role {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone-2);
}
@media (max-width: 900px) {
  .locations__grid { grid-template-columns: 1fr; }
  .loc { border-right: none; border-bottom: 1px solid rgba(237,237,231,.1); padding-right: 0; }
  .loc:last-child { border-bottom: none; }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative; z-index: 1;
  background:
    radial-gradient(1000px 700px at 80% 0%, rgba(156,58,58,.38), transparent 70%),
    radial-gradient(900px 900px at 10% 110%, rgba(94,38,34,.55), transparent 70%),
    linear-gradient(180deg, #1A100D 0%, #0F0B09 100%);
  color: var(--bone);
  padding: clamp(5rem, 12vw, 10rem) var(--pad-x);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(237,237,231,.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(237,237,231,.03) 0 1px, transparent 1px 80px);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  max-width: 88rem; margin: 0 auto;
  display: grid;
  gap: 2rem;
}
.cta__title {
  color: var(--porcelain);
  font-size: clamp(3.5rem, 10vw, 10rem);
  font-weight: 600; font-variation-settings: "opsz" 32;
  letter-spacing: -0.04em;
  line-height: .92;
  margin-top: 1rem;
}
.cta__title em { color: var(--bordeaux-lit); font-family: var(--ff-italic); font-weight: 400; }
.cta__lede {
  max-width: 42rem;
  color: rgba(237,237,231,.75);
  font-size: 1.08rem;
  line-height: 1.6;
}
.cta__addresses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(237,237,231,.15);
  padding-top: 2rem;
}
.addr {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1rem 0;
  transition: transform .35s var(--ease);
}
.addr:hover { transform: translateY(-2px); }
.addr__label {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(237,237,231,.5);
}
.addr__mail {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  letter-spacing: -0.005em;
  color: var(--bone);
  transition: color .3s var(--ease);
}
.addr:hover .addr__mail { color: var(--bordeaux-lit); }
.cta__button {
  margin-top: 2rem;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.25rem 2.25rem;
  background: var(--porcelain);
  color: var(--ink);
  border-radius: 999px;
  font-size: 1.15rem;
  justify-self: start;
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
}
.cta__button svg { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.cta__button:hover { background: var(--bordeaux); color: var(--porcelain); }
.cta__button:hover svg { transform: translateX(4px); }

@media (max-width: 720px) {
  .cta__addresses { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  background: var(--ink);
  color: rgba(237,237,231,.7);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 1.5rem;
  border-top: 1px solid rgba(237,237,231,.08);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  border-bottom: 1px solid rgba(237,237,231,.1);
  padding-bottom: 2.5rem;
  margin-bottom: 1.5rem;
}
.foot__col--brand { max-width: 22rem; }
.foot__wordmark {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600; font-variation-settings: "opsz" 24;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--porcelain);
  margin-bottom: 1rem;
}
.foot__tag { font-size: .95rem; line-height: 1.55; }
.foot__col h4 {
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--porcelain);
  margin: 0 0 1rem;
  font-weight: 500;
}
.foot__col ul { display: grid; gap: .5rem; }
.foot__col a {
  display: inline-flex; gap: .4rem; align-items: baseline;
  color: rgba(237,237,231,.7);
  transition: color .25s var(--ease);
}
.foot__col a:hover { color: var(--bordeaux-lit); }

.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(237,237,231,.45);
}
.foot__spacer { flex: 1; }
.foot__colophon { color: rgba(237,237,231,.35); text-transform: none; letter-spacing: .02em; font-family: var(--ff-body); font-size: .78rem; }
.foot__sep { opacity: .5; }

@media (max-width: 900px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__col--brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   VISUAL BREAK — cinematic mosaic between Services and Artists
   ========================================================================== */
.visual-break {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) var(--pad-x) clamp(2rem, 4vw, 3.5rem);
  z-index: 1;
}
.visual-break__grid {
  display: grid;
  /* Five portrait tiles, slight width variation for editorial asymmetry.
     All same height so faces line up across the row. */
  grid-template-columns: 1.15fr 0.9fr 1.15fr 0.9fr 1.15fr;
  gap: clamp(.5rem, 1vw, .875rem);
}
.vb-tile {
  margin: 0;
  overflow: hidden;
  position: relative;
  background: var(--noir-3);
  border-radius: 2px;
  aspect-ratio: 3 / 4.2;    /* portrait aspect — matches the source photos */
}
.vb-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Preserve faces (upper third of portrait) when crop happens. */
  object-position: center 22%;
  filter: grayscale(25%) contrast(1.05) brightness(.92);
  transition: transform 1.4s var(--ease), filter .6s var(--ease);
}
.vb-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(15,11,9,.35) 100%);
  pointer-events: none;
}
.vb-tile:hover img {
  transform: scale(1.04);
  filter: grayscale(0%) contrast(1.1) brightness(1);
}

.visual-break__meta {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.25rem;
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.visual-break__rule { flex: 1; height: 1px; background: currentColor; opacity: .22; }

@media (max-width: 900px) {
  .visual-break__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .vb-tile:nth-child(4),
  .vb-tile:nth-child(5) { display: none; }
}
@media (max-width: 540px) {
  .visual-break__grid { grid-template-columns: 1fr 1fr; }
  .vb-tile:nth-child(3) { display: none; }
}

/* ==========================================================================
   PULL QUOTE backdrop
   ========================================================================== */
.pull { position: relative; overflow: hidden; }
.pull__backdrop {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pull__backdrop img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(80%) contrast(1.05) brightness(.45);
  opacity: .55;
  mix-blend-mode: luminosity;
}
.pull__backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%, transparent 0%, rgba(15,11,9,.85) 85%),
    linear-gradient(180deg, rgba(15,11,9,.45) 0%, rgba(15,11,9,.6) 100%);
}
.pull__figure { position: relative; z-index: 1; }

/* ==========================================================================
   REVEAL ANIMATIONS (JS-enhanced)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  will-change: transform, opacity;
}
[data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

[data-split] .hero__line > span.word,
[data-split] .hero__line {
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
  will-change: transform;
}
body:not(.is-loading) [data-split] .hero__line { transform: translateY(0); opacity: 1; }
body:not(.is-loading) [data-split] .hero__line:nth-child(1) { transition-delay: .12s; }
body:not(.is-loading) [data-split] .hero__line:nth-child(2) { transition-delay: .24s; }
body:not(.is-loading) [data-split] .hero__line:nth-child(3) { transition-delay: .36s; }

body.is-loading { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE NAV
   ========================================================================== */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__utility .btn { display: none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition-duration: 0s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  body.is-loading [data-split] .hero__line { transform: none; opacity: 1; }
}