/* ==========================================================================
   Loomcat Media
   Design direction follows heyo.is:
     · white ground, near-black type, one electric-cyan accent
     · single neo-grotesque family, weights 400/500/600 only
     · centred pill nav with a yellow CTA
     · two-column staggered work grid of large rounded media cards
     · small uppercase tag pills under each card
     · soft pastel panels for cards, dark footer
   Type: Inter (free Google substitute for the reference's Messina Sans)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:      #FFFFFF;
  --ink:     #0A0A0A;
  --ink-2:   #3C3C3C;          /* body copy, 10.8:1 on white */
  --ink-3:   #666663;          /* muted, 5.7:1 on white */
  --line:    #E6E6E2;
  --line-2:  #F0F0EC;

  --paper:   #F5F5F2;          /* soft card panel */
  --portrait:#F3F3F0;          /* founder portrait ground */
  --lav:     #DEDBFF;
  --mint:    #D6F0E2;
  --blush:   #FFE1E1;
  --peach:   #FFE6CE;

  --accent:   #FF4019;         /* brand accent */
  --accent-2: #E63510;         /* accent, pressed/hover */
  --on-accent:#FFFFFF;         /* text on an accent fill */
  --dark:    #0D0D0C;          /* footer */
  --dark-2:  #1A1A18;
  --on-dark: #F7F7F4;
  --on-dark-2: rgba(247, 247, 244, .62);
  --line-dark: rgba(247, 247, 244, .14);

  --f:       "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* hero only — free stand-ins for the reference's Forma DJR Display + Orpheus Pro */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --cream:    #E6E7E0;         /* hero + loader paper */
  --hero-ink: #121212;         /* hero ground */

  --t-h1:   clamp(2.5rem, 5.4vw, 4.7rem);
  --t-h2:   clamp(2rem, 4vw, 3.4rem);
  --t-h3:   clamp(1.2rem, 1.7vw, 1.5rem);
  --t-lead: clamp(1.02rem, 1.3vw, 1.22rem);

  /* one artboard margin: a true 120px on desktop, stepped down below that */
  --gutter: 120px;
  --edge:   120px;
  --shell:  1560px;
  --sec:    clamp(4.5rem, 9vw, 8.5rem);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1240px) { :root { --gutter: 72px;  --edge: 72px; } }
@media (max-width: 900px)  { :root { --gutter: 40px;  --edge: 40px; } }
@media (max-width: 620px)  { :root { --gutter: 22px;  --edge: 22px; } }
@media (max-width: 420px)  { :root { --gutter: 18px;  --edge: 18px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -.032em;
  text-wrap: balance;
}
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.footer :focus-visible, .band-dark :focus-visible { outline-color: var(--accent); }

.skip {
  position: absolute; left: 1rem; top: -120px;
  z-index: 400;
  padding: .8rem 1.2rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: .9rem;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.edge { padding-inline: var(--edge); }
/* the hero is pinned behind these, so each band needs its own ground */
.section {
  padding-block: var(--sec);
  position: relative;
  background: var(--bg);
}
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.band-dark { background: var(--dark); color: var(--on-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.band-dark .eyebrow { color: var(--on-dark-2); }

.sec-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 { font-size: var(--t-h2); max-width: 18ch; }
.sec-head__wide { max-width: 38ch !important; }
.sec-head .lead { font-size: var(--t-lead); color: var(--ink-2); max-width: 56ch; }
.band-dark .sec-head .lead { color: var(--on-dark-2); }

@media (min-width: 900px) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .sec-head--split .eyebrow { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   4. Buttons — label block with a divided "+" tile, as on the reference
   -------------------------------------------------------------------------- */
/* The good-fella.com button: two tiles with a 6px gap between them. At rest
   the label sits flush left and a "+" tile sits at the right; on hover the
   label slides right by one tile plus the gap while a second "+" spins in on
   the left and the right one spins out — so the mark appears to hop across.

   The left tile is ::before (a flex item, so it reserves its width even at
   scale 0) and the right tile is ::after (absolute, so it does not). That
   keeps the button's own width fixed through the whole move. */
.btn {
  --fill: var(--ink);
  --on: var(--bg);
  --stroke: transparent;
  --tile: 2.95em;
  --btn-gap: 6px;
  --btn-r: 4px;
  --btn-ease: cubic-bezier(.83, 0, .17, 1);
  --btn-dur: .7s;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* the two "+" tiles */
.btn::before,
.btn::after {
  content: var(--btn-mark, "+");
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--btn-r);
  background: var(--fill);
  color: var(--on);
  box-shadow: inset 0 0 0 1px var(--stroke);
  font-weight: 500;
  letter-spacing: 0;
  transition: transform var(--btn-dur) var(--btn-ease),
              background-color .25s var(--ease), color .25s var(--ease);
}
.btn::before { transform-origin: left center;  transform: rotate(-45deg) scale(0); }
.btn::after {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  transform-origin: right center;
  transform: rotate(0deg) scale(1);
}

.btn__label {
  flex: none;
  display: grid;
  place-items: center;
  height: var(--tile);
  padding-inline: .95em;
  border-radius: var(--btn-r);
  background: var(--fill);
  color: var(--on);
  box-shadow: inset 0 0 0 1px var(--stroke);
  transform: translateX(calc(-1 * (var(--tile) + var(--btn-gap))));
  transition: transform var(--btn-dur) var(--btn-ease),
              background-color .25s var(--ease), color .25s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before { transform: rotate(0deg) scale(1); }
.btn:hover::after,
.btn:focus-visible::after { transform: rotate(-45deg) scale(0); }
.btn:hover .btn__label,
.btn:focus-visible .btn__label { transform: translateX(0); }

.btn.is-open { --btn-mark: "\2212"; }

.btn--accent { --fill: var(--accent); --on: var(--on-accent); }
.btn--ghost  { --fill: transparent; --on: var(--ink); --stroke: var(--line); }
.btn--ghost:hover  { --fill: var(--ink); --on: var(--bg); --stroke: var(--ink); }

/* on the dark hero */
.btn--cream  { --fill: var(--cream); --on: var(--hero-ink); }
.btn--onDark { --fill: transparent; --on: var(--cream); --stroke: rgba(230, 231, 224, .38); }
.btn--onDark:hover { --fill: var(--cream); --on: var(--hero-ink); --stroke: var(--cream); }

.btn--bare {
  gap: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.012em;
  text-transform: none;
  overflow: visible;
}
.btn--bare::before,
.btn--bare::after { display: none; }
.btn--bare .btn__label {
  height: auto;
  padding: 0 0 3px;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  box-shadow: none;
  transform: none;
}
.btn--bare:hover { opacity: .72; }

.btn--sm { font-size: .72rem; }
.btn--lg { font-size: .92rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: .85rem; }
.link-arrow svg { width: 13px; height: 13px; }

/* tag pills */
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag {
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  background: var(--bg);
}
.tag--more { background: var(--paper); border-color: var(--paper); color: var(--ink-2); }
.band-dark .tag { border-color: var(--line-dark); color: var(--on-dark-2); background: transparent; }

/* --------------------------------------------------------------------------
   5. Brand logo
   Supplied as one path; inlined as a <symbol> and filled with currentColor so
   the same mark works on the dark hero, the light sticky header, the cream
   loader and the dark footer.
   -------------------------------------------------------------------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.brandmark {
  display: block;
  width: auto;
  aspect-ratio: 1273 / 701;
  color: inherit;
  fill: currentColor;
}
.brandmark--sm { height: clamp(32px, 2.9vw, 40px); }
.brandmark--md { height: clamp(52px, 5vw, 68px); }
.brandmark--lg { height: clamp(104px, 13vw, 168px); }

/* --------------------------------------------------------------------------
   5b. Loader — pure CSS, so it still clears itself without scripting
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  animation: curtain .9s cubic-bezier(.76, 0, .24, 1) 1.5s forwards;
}
/* a pale wordmark with a solid one stacked on top, wiped in from the bottom */
.loader__mark { position: relative; z-index: 2; }
.loader__ghost { display: block; color: rgba(18, 18, 18, .17); }
.loader__fill {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--ink);
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  animation: loader-fill 1.35s cubic-bezier(.62, 0, .3, 1) forwards;
}
@keyframes loader-fill {
  to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
@keyframes curtain {
  to { transform: translateY(-101%); visibility: hidden; }
}
body.is-loaded .loader { display: none; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding-block: 1rem;
  color: var(--cream);
  transition: transform .4s var(--ease), background-color .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-2);
}
.header.is-hidden { transform: translateY(-108%); }

/* the menu overlay is light, so the cream logo and burger would disappear
   against it while the hero is still behind the header */
.header.is-menu-open {
  color: var(--ink);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
/* the nav is display:none below 1060px, so without explicit columns the
   right-hand group would auto-place into the middle track */
.header__left  { grid-column: 1; }
.nav           { grid-column: 2; }
.header__right { grid-column: 3; }

.header__left {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  justify-self: start;
  min-width: 0;
}
.header__logo { flex: none; }

.status, .counter {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status { display: none; }

.nav {
  display: none;
  align-items: center;
  gap: clamp(.9rem, 2.2vw, 2rem);
  justify-self: center;
}
.nav a {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .22s var(--ease), color .22s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a.is-active { opacity: 1; color: var(--accent); }

.header__right { display: flex; align-items: center; gap: .75rem; justify-self: end; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  opacity: .8;
}
.burger span {
  display: block; height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.header__cta { display: none; }
@media (min-width: 900px)  { .status { display: inline; } }
@media (min-width: 1060px) { .header__cta { display: inline-flex; } }
@media (min-width: 1060px) { .nav { display: flex; } .burger { display: none; } }

/* mobile overlay, numbered like a shot list */
.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--bg);
  color: var(--ink);
  padding: 92px var(--gutter) 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu__list li { border-top: 1px solid var(--line-2); }
.menu__list li:last-child { border-bottom: 1px solid var(--line-2); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
}
.menu__num { font-size: .7rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
.menu__foot {
  display: grid;
  gap: .55rem;
  font-size: .88rem;
  color: var(--ink-3);
}
.menu__contact { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.menu__contact a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.menu__contact a:hover { border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Hero — copy left, ASCII mark right, clients along the bottom
   -------------------------------------------------------------------------- */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--hero-ink);
  color: var(--cream);
  padding-top: clamp(92px, 8vw, 124px);
  overflow: hidden;
}
/* every band after the hero rides over it */
main > *:not(.hero), .footer { position: relative; z-index: 1; }

/* recedes slightly as the next band slides over it */
.hero__grid, .hero__clients {
  transform: translateY(calc(var(--hero-p, 0) * -34px)) scale(calc(1 - .045 * var(--hero-p, 0)));
  opacity: calc(1 - .62 * var(--hero-p, 0));
  will-change: transform, opacity;
}

.hero__grid {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 4rem);
  padding-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.hero__col { min-width: 0; display: grid; gap: clamp(1.3rem, 2.2vw, 1.9rem); }

.hero__title {
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.038em;
  max-width: 14ch;
}
/* The headline reveal, taken from good-fella.com: two bars sweep across each
   line from the left, then retract to the right, leaving the type behind.

   Each line carries an accent bar and a cream bar. The accent one leads the
   sweep in and trails the sweep out, so the cream sits inside its window and
   you read an accent edge on both sides of the wipe. The line's own text is
   transparent until the bars fully cover it — measured off the reference:
   ~350ms to cover, a short hold, ~450ms to clear, with the cream ~110ms
   inside the accent. */
.hero__title .l { display: block; }
.hero__title .l__in { position: relative; display: inline-block; }
.hero__title .l__t {
  display: block;
  opacity: 0;
  /* a hard switch, not a fade — it happens underneath the bars */
  transition: opacity 1ms linear;
  transition-delay: calc(var(--rv) + .42s);
}
.hero__title .l__bar {
  position: absolute;
  /* bleed past the line box so ascenders and descenders are covered too */
  inset: -.06em -.05em -.16em;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  pointer-events: none;
}
.hero__title .l__bar--a { background: var(--accent); }
.hero__title .l__bar--b { background: var(--cream); }

.hero__title .l { --rv: 2.4s; }
.hero__title .l:nth-child(2) { --rv: 2.53s; }

.hero.is-in .hero__title .l__t { opacity: 1; }
.hero.is-in .hero__title .l__bar--a {
  animation: bar-wipe .9s cubic-bezier(.83, 0, .17, 1) var(--rv) both;
}
.hero.is-in .hero__title .l__bar--b {
  animation: bar-wipe .72s cubic-bezier(.83, 0, .17, 1) calc(var(--rv) + .11s) both;
}

/* The origin flips at the crossover so the bar collapses to the far edge
   rather than back the way it came. The two keyframes 0.5% apart make that
   flip instant instead of interpolated. */
@keyframes bar-wipe {
  0%     { transform: scaleX(0); transform-origin: 0% 50%; }
  44%    { transform: scaleX(1); transform-origin: 0% 50%; }
  44.5%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100%   { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* the intro is split into lines by JS, each riding up behind its own mask */
.rl { display: block; overflow: clip; }
.rl__in {
  display: block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);
  transition-delay: calc(2.95s + var(--i, 0) * .07s);
}
.hero.is-in .rl__in { transform: none; }

/* everything under the headline follows on the same beat */
.hero__actions > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: 3.25s;
}
.hero__actions > *:nth-child(2) { transition-delay: 3.33s; }
.hero.is-in .hero__actions > * { opacity: 1; transform: none; }

/* The strip's own opacity and transform belong to the scroll parallax, so the
   reveal goes on its children instead of fighting for the same properties. */
.hero__clients > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s var(--ease) 3.4s, transform .9s cubic-bezier(.22, .61, .36, 1) 3.4s;
}
.hero.is-in .hero__clients > * { opacity: 1; transform: none; }

.hero__intro {
  font-size: clamp(.95rem, 1.1vw, 1.06rem);
  line-height: 1.6;
  letter-spacing: -.012em;
  color: rgba(230, 231, 224, .62);
  max-width: 50ch;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }

/* the mark */
.hero__art {
  position: relative;
  min-width: 0;
  justify-self: stretch;
  aspect-ratio: 1 / 1;
  max-height: 60svh;
}
.hero__art canvas { width: 100%; height: 100%; display: block; }

/* clients along the bottom left, drifting */
.hero__clients {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding-top: clamp(1rem, 1.8vw, 1.5rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 2.2rem);
  border-top: 1px solid rgba(230, 231, 224, .14);
}
/* good-fella.com shows three marks and then "+ many more", not a full-width
   wall. The window is narrowed to about that many and the track keeps moving,
   so the rest cycle through instead of all showing at once. */
.herowall {
  flex: none;
  width: clamp(230px, 27vw, 430px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
  mask-image: linear-gradient(90deg, #000 72%, transparent);
}
.herowall__row {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker 44s linear infinite;
}
.herowall:hover .herowall__row { animation-play-state: paused; }
.herowall__row { gap: clamp(1.1rem, 1.7vw, 1.6rem); }
.herowall .logo-chip {
  min-width: 0;
  height: clamp(30px, 3.2vw, 40px);
  padding-inline: 0;
}
/* the marks are dark or full colour, so they are inverted to sit on the black */
/* Cap the HEIGHT, not the width: the supplied marks run from 0.84:1 to 6.2:1,
   so a shared width made wordmarks a 14px sliver and square marks 100px tall.
   Both axes are px, because a percentage max-height does not resolve against
   the chip's auto grid row. */
.herowall .logo-chip img {
  opacity: .62;
  width: auto;
  height: auto;
  max-height: var(--mark-h, clamp(24px, 2.3vw, 30px));
  max-width: var(--mark-w, clamp(96px, 9.5vw, 132px));
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .48;
  transition: opacity .3s var(--ease);
}
/* Optical balance: a long wordmark reads lighter than a square mark at the
   same cap height, so the extremes are nudged apart. Each shape also gets its
   own width allowance — otherwise the widest mark hits the width cap first and
   never reaches its height, which is what flattened it to a sliver. */
.herowall .logo-chip img[data-shape="wide"] { --mark-h: clamp(24px, 2.3vw, 30px); --mark-w: 210px; }
.herowall .logo-chip img[data-shape="tall"] { --mark-h: clamp(30px, 3vw, 38px); --mark-w: 70px; }
.herowall .logo-chip:hover img { opacity: 1; }
.herowall__more {
  flex: none;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(230, 231, 224, .45);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}
@media (max-width: 899px) {
  /* stacked: the mark sits above the copy and stays roughly square */
  .hero__art {
    order: -1;
    max-height: 34svh;
    max-width: min(100%, 34svh);
    justify-self: center;
  }
  .hero__grid { gap: 1.2rem; align-content: center; }
  .hero__col { gap: 1.1rem; }
  .hero__clients { flex-wrap: wrap; gap: .5rem 1rem; }
}

/* --------------------------------------------------------------------------
   7b. Studio-at-a-glance band
   -------------------------------------------------------------------------- */
.kpi-band {
  position: relative;
  background: var(--hero-ink);
  color: var(--cream);
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid rgba(230, 231, 224, .14);
}
.kpi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem clamp(1rem, 3vw, 2.5rem);
  text-align: center;
  justify-items: center;
}
.kpi b {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi span {
  display: block;
  margin-top: .45rem;
  font-size: clamp(.78rem, .92vw, .9rem);
  line-height: 1.4;
  color: rgba(230, 231, 224, .6);
  max-width: 24ch;
  margin-inline: auto;
}
@media (min-width: 760px) { .kpi { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   7. Marquee keyframe — still used by the client and partner walls
   -------------------------------------------------------------------------- */
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

/* --------------------------------------------------------------------------
   8. Work — two-column grid
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}
@media (min-width: 840px) {
  .work-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.work-card {
  display: grid;
  gap: .9rem;
  padding: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
}

.work-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .75s var(--ease);
}
.work-card:hover .work-card__media img { transform: scale(1.04); }

.work-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.88);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(42px, 4.2vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              background-color .3s var(--ease);
}
.work-card__play svg {
  width: 26%;
  height: auto;
  fill: #fff;
  margin-left: 9%;   /* optical centring for a triangle */
}
.work-card:hover .work-card__play,
.work-card:focus-visible .work-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(255, 255, 255, .32);
}

/* no hover on touch, and none of the smaller layouts get one, so the play
   affordance stays on rather than hiding behind a hover state */
@media (hover: none), (max-width: 840px) {
  .work-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.work-card__num {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 3;
  padding: .3rem .55rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.work-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
}
.work-card__title { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }
.work-card__blurb { font-size: .92rem; color: var(--ink-3); max-width: 52ch; }

.work-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.work-grid:not(.is-open) .work-card:nth-child(n + 4) { display: none; }
@media (min-width: 840px) {
  .work-grid:not(.is-open) .work-card:nth-child(n + 4) { display: grid; }
  .work-grid:not(.is-open) .work-card:nth-child(n + 9) { display: none; }
}

/* --------------------------------------------------------------------------
   9. Statement + capability word list
   -------------------------------------------------------------------------- */
.statement {
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.034em;
  max-width: 20ch;
}
.statement--wide { max-width: 26ch; }

.capabilities { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.capabilities li {
  padding: .7rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.capabilities li:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.stat-row {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat-row b {
  display: block;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-row span { display: block; margin-top: .6rem; color: var(--ink-3); max-width: 30ch; }

/* --------------------------------------------------------------------------
   10. Capabilities — black band, statement + list, no imagery
   -------------------------------------------------------------------------- */
.section--black {
  background: var(--ink);
  color: var(--bg);
}
.section--black .eyebrow { color: rgba(255, 255, 255, .55); }
.section--black .rule { background: rgba(255, 255, 255, .14); }

.cap-statement {
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.035em;
  max-width: 22ch;
  text-wrap: balance;
}
/* the closing line is an invitation, so it sits at full strength rather than
   trailing off like the muted grey it replaced */
.cap-close {
  display: grid;
  justify-items: end;
  gap: 1.4rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: right;
}
.cap-statement--end {
  margin-left: auto;
  color: var(--bg);
}
.cap-close .link-arrow:hover { color: var(--accent); }

.svc-list {
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.svc {
  display: grid;
  gap: .6rem;
  padding-block: clamp(1.3rem, 2.4vw, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: padding-left .35s var(--ease), background-color .35s var(--ease);
}
.svc:hover { padding-left: .8rem; }
.svc__num {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .42);
  font-variant-numeric: tabular-nums;
}
.svc__title {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.038em;
  line-height: 1.04;
  transition: color .3s var(--ease);
}
.svc:hover .svc__title { color: var(--accent); }
.svc__copy {
  font-size: .96rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
  max-width: 54ch;
}

@media (min-width: 900px) {
  .svc {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   10b. Pipeline — five cards across, one active
   -------------------------------------------------------------------------- */
/* the row is held in a sticky viewport while the cards slide in one at a time */
.pipeline-pin { position: relative; }
.pipeline-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 8vh, 7rem);
}

.pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.55rem, .9vw, .85rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pstep {
  position: relative;
  display: flex;
  flex-direction: column;
  /* icon, number and title at the top; copy pinned to the bottom */
  justify-content: space-between;
  gap: 1.6rem;
  padding: clamp(1.1rem, 1.6vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  background: #141414;
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), transform .45s var(--ease);
}
.pstep:hover { transform: translateY(-3px); }

.pstep__head { display: grid; gap: clamp(1.1rem, 2vw, 1.8rem); }
.pstep__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.pstep__icon {
  width: clamp(26px, 2.2vw, 34px);
  height: clamp(26px, 2.2vw, 34px);
  fill: var(--accent);
  flex: none;
  transition: fill .45s var(--ease);
}
.pstep__num {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .34);
  font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}

.pstep__title {
  font-size: clamp(1.1rem, 1.35vw, 1.42rem);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.12;
  color: var(--bg);
  transition: color .45s var(--ease);
}
.pstep__copy {
  font-size: clamp(.78rem, .88vw, .89rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .56);
  transition: color .45s var(--ease);
}

/* the active card fills with the brand cream rather than the accent — it sits
   better on the black band, and the dark ink on it reads at 15:1 */
.pstep.is-active {
  background: var(--cream);
  border-color: var(--cream);
}
.pstep.is-active .pstep__icon { fill: var(--ink); }
.pstep.is-active .pstep__num { color: rgba(10, 10, 10, .55); }
.pstep.is-active .pstep__title { color: var(--ink); }
.pstep.is-active .pstep__copy { color: rgba(10, 10, 10, .72); }

/* stacked cards stay compact; the tall portrait proportion is for the row */
@media (min-width: 640px)  { .pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .pstep { min-height: clamp(230px, 22vw, 300px); }
}
/* all five across, which is what the row is designed for */
@media (min-width: 1180px) { .pipeline { grid-template-columns: repeat(5, 1fr); } }

/* --------------------------------------------------------------------------
   11. Cards (process, models, testimonials, team)
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.card {
  display: grid;
  gap: .8rem;
  align-content: start;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-3px); }
.card__num {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-3);
}
.card h3 { font-size: var(--t-h3); }
.card p { font-size: .95rem; color: var(--ink-2); }

.quotes {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.quote {
  display: grid;
  gap: 1.8rem;
  align-content: space-between;
  margin: 0;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.quote blockquote {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  letter-spacing: -.016em;
  color: var(--ink);
  text-wrap: pretty;
}
.quote figcaption { font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Client logo wall
   -------------------------------------------------------------------------- */
.logowall {
  display: grid;
  overflow: hidden;
  gap: clamp(.6rem, 1.2vw, 1rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logorow { display: flex; align-items: center; width: max-content; gap: clamp(.6rem, 1.2vw, 1rem); animation: ticker 56s linear infinite; }
.logorow--rev { animation-direction: reverse; }
.logowall:hover .logorow { animation-play-state: paused; }
.logo-chip {
  display: grid;
  place-items: center;
  min-width: clamp(140px, 14vw, 200px);
  height: clamp(58px, 6.2vw, 80px);
  padding-inline: clamp(1rem, 2.4vw, 2.2rem);
}
/* the marks are a mix of square and very wide, so cap BOTH axes in px — a
   percentage max-height does not resolve against an auto grid row */
.logo-chip img {
  width: auto;
  height: auto;
  max-height: var(--mark-h, clamp(30px, 3.1vw, 42px));
  max-width: var(--mark-w, clamp(118px, 12.5vw, 176px));
  object-fit: contain;
  /* the supplied files are a mix of white and full-colour marks, so flatten
     every one to a single light grey and darken it on hover */
  filter: brightness(0);
  opacity: .26;
  transition: opacity .3s var(--ease);
}
/* same optical balance as the hero strip, one step larger */
.logowall .logo-chip img[data-shape="wide"] { --mark-h: clamp(30px, 3.1vw, 40px); --mark-w: 270px; }
.logowall .logo-chip img[data-shape="tall"] { --mark-h: clamp(40px, 4.2vw, 54px); --mark-w: 90px; }
.logo-chip:hover img { opacity: 1; }
/* typographic stand-in until a brand supplies an SVG */
.logo-chip span {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: #C9C9C5;
  transition: color .3s var(--ease);
}
.logo-chip:hover span { color: var(--ink); }

/* --------------------------------------------------------------------------
   13. Team
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.founder { display: grid; gap: 1rem; }
.founder__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--portrait);
  isolation: isolate;
}
.founder__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  /* the photographs are cut out on pure white, so multiply lets the grey
     panel read as the background instead */
  mix-blend-mode: multiply;
  transition: filter .45s var(--ease), transform .7s var(--ease);
}
.founder:hover .founder__portrait img,
.founder:focus-within .founder__portrait img { filter: grayscale(0); transform: scale(1.03); }
.founder__mono {
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -.05em;
  color: rgba(10, 10, 10, .28);
}
.founder__name { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }
.founder__role { font-size: .86rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   14. Closing CTA
   -------------------------------------------------------------------------- */
.cta-panel {
  border-radius: var(--r-xl);
  background: var(--paper);
  padding: clamp(2.2rem, 6vw, 5rem);
  display: grid;
  gap: 1.6rem;
  justify-items: center;
  text-align: center;
}
.cta-panel h2 { font-size: clamp(2rem, 5vw, 4rem); max-width: 16ch; }
.cta-panel p { font-size: var(--t-lead); color: var(--ink-2); max-width: 48ch; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--dark); color: var(--on-dark); padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.8rem; }
.footer__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.footer__sign { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.035em; max-width: 17ch; line-height: 1.15; }
.footer__logo { display: inline-block; color: var(--on-dark); margin-bottom: 1.3rem; }
.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); }
.footer__cols h4 { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 1rem; }
.footer__cols li + li { margin-top: .5rem; }
.footer__cols a { font-size: .93rem; color: var(--on-dark-2); transition: color .22s var(--ease); }
.footer__cols a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: .82rem;
  color: var(--on-dark-2);
}
.footer__bottom a:hover { color: var(--accent); }
.footer__social { display: flex; gap: .5rem; }
.footer__social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.footer__social a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.footer__social svg { width: 15px; height: 15px; fill: currentColor; }

/* --------------------------------------------------------------------------
   17. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 10, 10, .9);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100svh - 2rem);
  overflow: auto;
  background: var(--bg);
  border-radius: var(--r-xl);
  transform: translateY(12px);
  transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__panel { transform: none; }
.lightbox__stage { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.lightbox__stage iframe, .lightbox__stage img { width: 100%; height: 100%; border: 0; object-fit: cover; }
.lightbox__meta { display: grid; gap: .6rem; padding: clamp(1.2rem, 3vw, 1.8rem); }
.lightbox__meta h3 { font-size: var(--t-h2); }
.lightbox__meta p { font-size: .96rem; color: var(--ink-2); max-width: 62ch; }
.lightbox__close {
  position: absolute; top: .8rem; right: .8rem; z-index: 5;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .22s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover { background: var(--accent); color: var(--on-accent); transform: rotate(90deg); }
.lightbox__close svg { width: 14px; height: 14px; stroke: currentColor; }

/* --------------------------------------------------------------------------
   18. Reveal + reduced motion
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);

}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero { position: relative; min-height: 0; }
  .pipeline-pin { height: auto !important; }
  .pipeline-sticky { position: static; min-height: 0; padding-block: var(--sec); }
  .pstep { opacity: 1 !important; transform: none !important; }
  .hero__grid, .hero__clients { transform: none; opacity: 1; }
  /* the whole hero reveal collapses to its end state */
  .hero__title .l__t { opacity: 1; transition: none; }
  .hero__title .l__bar { display: none; }
  .rl__in, .hero__actions > *, .hero__clients > * { transform: none; opacity: 1; transition: none; }
  .loader { display: none; }
  .logorow { animation: none; }
}

/* --------------------------------------------------------------------------
   19. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .header__right .btn--sm { font-size: .72rem; }
}


/* --------------------------------------------------------------------------
   20. Partner wall — fixed, not a marquee
   -------------------------------------------------------------------------- */
.partner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 15vw, 168px), 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.partner-wall .logo-chip { min-width: 0; width: 100%; height: clamp(56px, 5.6vw, 74px); }
/* these are raster marks and some carry a white plate, so they are blended
   rather than flattened with brightness(0) like the vector client marks */
.partner-wall .logo-chip img {
  max-height: calc(clamp(38px, 4.1vw, 52px) * var(--logo-scale, 1));
  max-width: calc(clamp(122px, 12.5vw, 178px) * var(--logo-scale, 1));
  filter: grayscale(1);
  opacity: .46;
  mix-blend-mode: multiply;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.partner-wall .logo-chip:hover img { filter: none; opacity: 1; }

@media (max-width: 899px) {
  .pipeline-pin { height: auto !important; }
  /* the pin is off here, so the band needs the normal section rhythm back */
  .pipeline-sticky { position: static; min-height: 0; padding-block: var(--sec); }
  .pstep { opacity: 1 !important; transform: none !important; }
}