/* ==========================================================================
   Tagthose — motion.css
   The immersive layer: scroll-pinned sections, stacking cards, marquees,
   cursor-driven gestures, CSS-drawn product visuals.
   Loads after style.css. Everything here degrades to a readable static
   layout when JS is off or prefers-reduced-motion is set.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Extra tokens
   -------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.76, 0, .24, 1);
  --vh: 1vh;
}

/* --------------------------------------------------------------------------
   1. Grain + custom cursor
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s, width .3s var(--ease-out), height .3s var(--ease-out),
              background .3s, border-color .3s;
}
.cursor {
  width: 38px; height: 38px;
  border: 1.5px solid var(--brand);
  margin: -19px 0 0 -19px;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--brand);
  margin: -2.5px 0 0 -2.5px;
}
.has-cursor .cursor, .has-cursor .cursor-dot { opacity: 1; }
.has-cursor.cursor-hot .cursor {
  width: 68px; height: 68px;
  margin: -34px 0 0 -34px;
  background: rgba(89,86,233,.12);
  border-color: transparent;
}
.has-cursor.cursor-hot .cursor-dot { opacity: 0; }
.has-cursor.cursor-drag .cursor {
  width: 86px; height: 86px;
  margin: -43px 0 0 -43px;
  background: var(--brand);
  border-color: transparent;
}
.cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  transition: opacity .25s;
}
.has-cursor.cursor-drag .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* --------------------------------------------------------------------------
   2. Page intro wipe
   -------------------------------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: var(--night);
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform 1s var(--ease-io);
}
.intro.is-done { transform: translateY(-101%); }
.intro img { width: 180px; filter: brightness(0) invert(1); animation: introPulse 1.1s var(--ease-out); }
@keyframes introPulse {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
html:not(.js) .intro { display: none; }

/* --------------------------------------------------------------------------
   3. Reveal primitives
   -------------------------------------------------------------------------- */
/* Mask-slide: text rises out of a clipped box.
   The padding/negative-margin pair keeps descenders out of the clip edge. */
.js [data-rise] {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.js [data-rise] > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}
.js [data-rise].is-in > * { transform: none; }

/* Clip reveal for media blocks. */
.js [data-clip] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}
.js [data-clip].is-in { clip-path: inset(0 0 0% 0); }

/* Scale-in for visuals. */
.js [data-pop] {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js [data-pop].is-in { opacity: 1; transform: none; }

/* Stagger children. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
.js [data-stagger].is-in > *:nth-child(7) { transition-delay: .42s; }
.js [data-stagger].is-in > *:nth-child(8) { transition-delay: .49s; }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero-x {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-top: 164px;
  padding-bottom: 152px;
  overflow: hidden;
}
.hero-x__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
}
.hero-x__inner { position: relative; z-index: 1; width: 100%; }

.hero-x__title {
  font-size: clamp(38px, 6.2vw, 92px);
  line-height: 1.035;
  letter-spacing: -0.036em;
  font-weight: 280;
  margin-bottom: 30px;
}
.hero-x__swap {
  position: relative;
  display: inline-grid;
  vertical-align: top;
  overflow: hidden;
  color: var(--brand);
}
.hero-x__swap > span {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
}
.hero-x__swap > span.is-out { animation: swapOut .62s var(--ease-io) forwards; }
.hero-x__swap > span.is-in  { animation: swapUp  .62s var(--ease-out) forwards; }
@keyframes swapUp  { from { transform: translateY(104%); } to { transform: none; } }
@keyframes swapOut { from { transform: none; } to { transform: translateY(-104%); } }

.hero-x__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 4px;
}
.hero-x__note {
  font-size: 15.5px;
  color: var(--ink-3);
  max-width: 38ch;
  line-height: 1.55;
}

.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
}
.scrollcue i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(var(--rule-strong), transparent);
  position: relative;
  overflow: hidden;
}
.scrollcue i::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px; height: 14px;
  background: var(--brand);
  animation: cueRun 1.9s var(--ease-io) infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(-16px); }
  100% { transform: translateY(48px); }
}

/* --------------------------------------------------------------------------
   4b. Floating case-study cards under the hero headline
   -------------------------------------------------------------------------- */
.herofloat {
  position: relative;
  margin-top: clamp(48px, 7vw, 86px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 22px);
  perspective: 1200px;
}
.herofloat__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(116px, 15vw, 208px);
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 22px 48px -24px rgba(16, 15, 35, .42);
  will-change: transform;
  transition: box-shadow .45s var(--ease-out);
}
.herofloat__card:hover { box-shadow: 0 30px 60px -22px rgba(89, 86, 233, .5); }
/* A gentle fan — outer cards sit lower and tilt away from centre. */
.herofloat__card:nth-child(1) { transform: translateY(26px) rotate(-7deg); }
.herofloat__card:nth-child(2) { transform: translateY(6px)  rotate(-3.5deg); }
.herofloat__card:nth-child(3) { transform: translateY(-8px) rotate(0deg); z-index: 2; }
.herofloat__card:nth-child(4) { transform: translateY(6px)  rotate(3.5deg); }
.herofloat__card:nth-child(5) { transform: translateY(26px) rotate(7deg); }

.herofloat__label {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 3;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
  padding: 8px 10px;
}
.herofloat__label b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.herofloat__label span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 3px;
}
.js .herofloat__card { opacity: 0; }
.js .herofloat.is-in .herofloat__card {
  opacity: 1;
  animation: floatIn .9s var(--ease-out) backwards;
}
.js .herofloat.is-in .herofloat__card:nth-child(1) { animation-delay: .04s; }
.js .herofloat.is-in .herofloat__card:nth-child(2) { animation-delay: .12s; }
.js .herofloat.is-in .herofloat__card:nth-child(3) { animation-delay: .20s; }
.js .herofloat.is-in .herofloat__card:nth-child(4) { animation-delay: .28s; }
.js .herofloat.is-in .herofloat__card:nth-child(5) { animation-delay: .36s; }
@keyframes floatIn {
  from { opacity: 0; transform: translateY(54px) rotate(0deg) scale(.94); }
}

/* --------------------------------------------------------------------------
   14b. Video testimonial wall
   -------------------------------------------------------------------------- */
.vidwall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }

.vidcard {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: var(--night-2);
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.vidcard img,
.vidcard video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
}
.vidcard:hover img { transform: scale(1.035); }
.vidcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,15,35,0) 42%, rgba(16,15,35,.78) 100%);
  transition: opacity .35s;
}
.vidcard.is-playing::after,
.vidcard.is-playing .vidcard__play,
.vidcard.is-playing .vidcard__by { opacity: 0; pointer-events: none; }

.vidcard__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid;
  place-items: center;
  transition: transform .35s var(--ease-out), background .3s, opacity .3s;
}
.vidcard:hover .vidcard__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.vidcard__play svg { margin-left: 3px; color: var(--brand); }

.vidcard__by {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 22px 24px;
  transition: opacity .3s;
}
.vidcard__by b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: #fff;
  line-height: 1.2;
}
.vidcard__by span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.8);
  margin-top: 6px;
}
.vidcard__dur {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: #fff;
  background: rgba(16,15,35,.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 99px;
  padding: 4px 10px;
  transition: opacity .3s;
}
.vidcard.is-playing .vidcard__dur { opacity: 0; }

/* Written quotes become a quiet strip beneath the videos. */
.quotestrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--night-rule);
  margin-top: clamp(40px, 5vw, 64px);
}
.quotestrip > figure {
  margin: 0;
  padding: 30px 26px 30px 0;
  border-right: 1px solid var(--night-rule);
}
.quotestrip > figure:last-child { border-right: 0; padding-right: 0; }
.quotestrip blockquote {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.52;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.008em;
}
.quotestrip figcaption { display: flex; align-items: center; gap: 11px; }
.quotestrip img, .quotestrip .ini {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--brand);
}
.quotestrip .ini { display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.quotestrip em {
  font-style: normal;
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.quotestrip i {
  font-style: normal;
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--night-ink-2);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   13b. Let's-talk CTA
   -------------------------------------------------------------------------- */
.talk {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: #fff;
}
.talk__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(96px, 15vh, 190px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.talk__title {
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: .96;
  margin-bottom: 26px;
}
.talk__title u {
  text-decoration: none;
  color: #9D9BF5;
  position: relative;
}
.talk__sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--night-ink-2);
  max-width: 40ch;
}
.talk__side { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.talk__rows { display: flex; flex-direction: column; width: 100%; }
.talk__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--night-rule);
  transition: padding-left .4s var(--ease-out);
}
.talk__row:first-child { border-top: 1px solid var(--night-rule); }
.talk__row:hover { padding-left: 10px; }
.talk__row span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--night-ink-2);
}
.talk__row b { font-size: 16px; font-weight: 700; letter-spacing: -0.016em; }
.talk__glow {
  position: absolute;
  width: 900px; height: 900px;
  left: 58%; top: 42%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89,86,233,.42) 0%, rgba(89,86,233,0) 64%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: 30px;
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee--dark { border-color: var(--night-rule); }
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(40px, 6vw, 92px);
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__track img {
  height: 34px;
  width: auto;
  object-fit: contain;
  /* Client marks run in their own colours — greyscaling them at half
     opacity was reading as placeholder rather than as proof. */
  filter: none;
  opacity: 1;
}
.marquee__track img.is-tall { height: 46px; }

/* Type marquee — big words, used as a divider */
.marquee--type { border: 0; padding-block: 0; }
.marquee--type .marquee__track { animation-duration: 42s; gap: 0; }
.marquee--type span {
  font-size: clamp(42px, 7vw, 104px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.08;
  padding-inline: 28px;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule-strong);
  white-space: nowrap;
}
.marquee--type span.fill {
  color: var(--brand);
  -webkit-text-stroke: 0;
}

/* --------------------------------------------------------------------------
   6. Stat band
   -------------------------------------------------------------------------- */
.statband { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.statband > div {
  padding: 44px 28px 44px 0;
  border-top: 1px solid var(--rule);
}
.statband--dark > div { border-color: var(--night-rule); }
.statband__n {
  display: block;
  font-size: clamp(44px, 6.4vw, 86px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: .94;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.statband__l {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  max-width: 22ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   7. Manifesto — scroll-driven word reveal
   -------------------------------------------------------------------------- */
.manifesto { padding-block: clamp(110px, 16vh, 210px); }
.manifesto__text {
  font-size: clamp(27px, 4.2vw, 56px);
  font-weight: 300;
  letter-spacing: -0.038em;
  line-height: 1.16;
  max-width: 22ch;
}
.manifesto__text .w {
  color: var(--rule-strong);
  transition: color .45s var(--ease-out);
}
.manifesto__text .w.on { color: var(--ink); }
.manifesto__text .w.accent.on { color: var(--brand); }
html:not(.js) .manifesto__text .w { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Sticky stacking cards (services)
   -------------------------------------------------------------------------- */
.stackwrap { position: relative; }
.stackcard {
  position: relative;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  overflow: hidden;
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  will-change: transform;
}
.js .stackwrap .stackcard { position: sticky; }
.stackcard__body { padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; }
.stackcard__num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--brand);
  margin-bottom: auto;
}
.stackcard__title {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 28px 0 16px;
}
.stackcard__line { font-size: 17px; line-height: 1.55; color: var(--ink-3); max-width: 34ch; margin-bottom: 26px; }
.stackcard__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.stackcard__tags span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 13px;
}
.stackcard__art { position: relative; overflow: hidden; background: var(--surface-2); }
.stackcard--dark {
  background: var(--night);
  border-color: var(--night-rule);
  color: #fff;
}
.stackcard--dark .stackcard__line { color: var(--night-ink-2); }
.stackcard--dark .stackcard__tags span { color: var(--night-ink-2); border-color: var(--night-rule); }
.stackcard--dark .stackcard__art { background: var(--night-2); }
.stackcard--brand {
  background: linear-gradient(140deg, #2A2690 0%, var(--brand) 100%);
  border-color: transparent;
  color: #fff;
}
.stackcard--brand .stackcard__num { color: rgba(255,255,255,.72); }
.stackcard--brand .stackcard__line { color: rgba(255,255,255,.84); }
.stackcard--brand .stackcard__tags span { color: #fff; border-color: rgba(255,255,255,.34); }
.stackcard--brand .stackcard__art { background: rgba(0,0,0,.14); }

/* --------------------------------------------------------------------------
   9. Horizontal scroll (pinned)
   -------------------------------------------------------------------------- */
.hscroll { position: relative; }

/* Fallback / no-JS / reduced-motion: an ordinary horizontal scroller. */
.hscroll__viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.hscroll__track {
  display: flex;
  gap: 24px;
  padding-inline: var(--gutter);
  width: max-content;
}

/* Pinned mode, switched on by JS. */
.hscroll.is-pinned .hscroll__viewport { overflow: hidden; }
.hscroll.is-pinned .hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hscroll.is-pinned .hscroll__track { will-change: transform; }

.hpanel {
  flex: 0 0 auto;
  width: min(430px, 78vw);
  border-radius: 0;
  overflow: hidden;
  background: var(--night);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease-out);
}
.hpanel__art { aspect-ratio: 4 / 3.1; position: relative; overflow: hidden; }
.hpanel__meta { padding: 22px 24px 26px; background: var(--surface); flex: 1; }
.hpanel__tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--brand);
  display: block;
  margin-bottom: 10px;
}
.hpanel__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.hpanel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hpanel__chips span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px 10px;
}
.hpanel:hover .vig { transform: scale(1.05); }

/* Pinned-section header + progress */
.hscroll__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin: 0 auto 36px;
  width: 100%;
}
.hscroll__bar {
  position: relative;
  height: 2px;
  background: var(--rule);
  max-width: var(--container);
  margin: 38px auto 0;
  width: calc(100% - var(--gutter) * 2);
}
.hscroll__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 14%;
  background: var(--brand);
  transform-origin: left;
}
.hscroll__hint {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.hscroll__hint svg { animation: nudge 1.8s var(--ease-io) infinite; }
@keyframes nudge { 0%,100% { transform: none; } 50% { transform: translateX(6px); } }

.hscroll.is-pinned.is-grabbing .hpanel { transition: none; }
.hscroll.is-pinned.is-grabbing { cursor: grabbing; }

/* Global smooth scrolling would fight the drag gesture — switch it off while
   a drag is in progress. */
html.is-dragging { scroll-behavior: auto !important; }

/* --------------------------------------------------------------------------
   10. CSS-drawn product vignettes
   Abstract interface art, built from divs — no image assets needed.
   -------------------------------------------------------------------------- */
.vig {
  position: absolute;
  inset: 0;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform .6s var(--ease-out);
}
.vig::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.vig > * { position: relative; }
.vig-a { background: linear-gradient(145deg, #191840 0%, #342C8C 58%, #5956E9 125%); }
.vig-b { background: linear-gradient(145deg, #0E2A31 0%, #14525C 58%, #27A0A6 125%); }
.vig-c { background: linear-gradient(145deg, #2A1330 0%, #6A2256 58%, #C0417D 125%); }
.vig-d { background: linear-gradient(145deg, #101F3B 0%, #1B4986 58%, #3A89D7 125%); }
.vig-e { background: linear-gradient(145deg, #2A1D0D 0%, #784A13 58%, #D7983A 125%); }
.vig-f { background: linear-gradient(145deg, #14231A 0%, #265E3B 58%, #4DAC6C 125%); }
.vig-g { background: linear-gradient(145deg, #241540 0%, #46269B 58%, #7C6BF2 125%); }

/* glass pieces */
.g {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.g--solid { background: rgba(255,255,255,.92); border-color: transparent; }
.vig-row { display: flex; gap: 9px; align-items: stretch; }
.vig-col { display: flex; flex-direction: column; gap: 9px; }
.vig-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.3); }
.vig-bar.w70 { width: 70%; } .vig-bar.w50 { width: 50%; }
.vig-bar.w40 { width: 40%; } .vig-bar.w85 { width: 85%; }
.vig-bar.sm { height: 6px; }
.vig-bar.hot { background: rgba(255,255,255,.72); }
.vig-dot { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.3); flex: 0 0 auto; }
.vig-pad { padding: 13px; }
.vig-grow { flex: 1; }

/* chart */
.vig-chart { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.vig-chart i {
  flex: 1;
  background: rgba(255,255,255,.34);
  border-radius: 0;
  transform-origin: bottom;
  animation: growBar 1.1s var(--ease-out) backwards;
}
.vig-chart i:nth-child(1) { height: 42%; animation-delay: .05s; }
.vig-chart i:nth-child(2) { height: 66%; animation-delay: .12s; }
.vig-chart i:nth-child(3) { height: 34%; animation-delay: .19s; }
.vig-chart i:nth-child(4) { height: 82%; animation-delay: .26s; background: #fff; }
.vig-chart i:nth-child(5) { height: 54%; animation-delay: .33s; }
.vig-chart i:nth-child(6) { height: 72%; animation-delay: .40s; }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* sparkline */
.vig-spark { height: 62px; width: 100%; display: block; }
.vig-spark path { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.vig-spark .area { fill: rgba(255,255,255,.16); stroke: none; }

/* pill row */
.vig-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.vig-pills i {
  height: 18px;
  border-radius: 99px;
  background: rgba(255,255,255,.26);
  display: block;
}
.vig-pills i:nth-child(1) { width: 46px; }
.vig-pills i:nth-child(2) { width: 62px; background: rgba(255,255,255,.66); }
.vig-pills i:nth-child(3) { width: 38px; }
.vig-pills i:nth-child(4) { width: 54px; }

/* big figure inside art */
.vig-figure {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.045em;
  color: #fff;
  line-height: 1;
}
.vig-figure small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   10b. Extra vignette primitives — phase-specific interface art
   -------------------------------------------------------------------------- */
/* Colour swatch row (design phase) */
.vig-swatches { display: flex; gap: 6px; }
.vig-swatches i { width: 26px; height: 26px; border-radius: 0; display: block; }

/* Code lines with a number gutter (build phase) */
.vig-code { display: flex; flex-direction: column; gap: 7px; }
.vig-code span { display: flex; align-items: center; gap: 10px; }
.vig-code b {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  color: rgba(255,255,255,.34);
  flex: 0 0 12px;
  text-align: right;
}
.vig-code i { height: 6px; border-radius: 99px; background: rgba(255,255,255,.3); display: block; }

/* A/B split (validate phase) */
.vig-ab { display: flex; gap: 9px; flex: 1; }
.vig-ab > div { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; }
.vig-win {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  background: #fff;
  color: #1a1a2e;
  border-radius: 99px;
  padding: 3px 8px;
  font-weight: 600;
}

/* Small avatar (research phase) */
.vig-av { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.42); flex: 0 0 auto; }

/* Layers list (design phase) */
.vig-layers { display: flex; flex-direction: column; gap: 6px; }
.vig-layers span { display: flex; align-items: center; gap: 8px; }
.vig-layers u {
  width: 10px; height: 10px; border-radius: 0;
  background: rgba(255,255,255,.4); flex: 0 0 auto; text-decoration: none;
}

/* --------------------------------------------------------------------------
   11b. Compact hover list — used where the sector list is secondary content
   -------------------------------------------------------------------------- */
.hoverlist--compact { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 48px; }
.hoverlist--compact .hoverlist__row {
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 14px;
  padding: 15px 0;
}
.hoverlist--compact .hoverlist__name {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.022em;
}
.hoverlist--compact .hoverlist__n { font-size: 10.5px; }
.hoverlist--compact .hoverlist__who { font-size: 10px; }
.hoverlist--compact .hoverlist__preview { width: 220px; }
@media (hover: hover) {
  .hoverlist--compact .hoverlist__row:hover .hoverlist__name { transform: translateX(9px); }
}
@media (max-width: 760px) {
  .hoverlist--compact { grid-template-columns: 1fr; column-gap: 0; }
}

/* --------------------------------------------------------------------------
   11. Hover list (industries) with cursor-following preview
   -------------------------------------------------------------------------- */
.hoverlist { position: relative; border-top: 1px solid var(--rule); }
.hoverlist__row {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: padding-left .45s var(--ease-out);
}
.hoverlist__row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--brand);
  transition: width .45s var(--ease-out);
  z-index: -1;
}
.hoverlist__n {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
  transition: color .3s;
}
.hoverlist__name {
  font-size: clamp(22px, 2.9vw, 38px);
  font-weight: 300;
  letter-spacing: -0.038em;
  line-height: 1.1;
  transition: transform .45s var(--ease-out), color .3s;
}
.hoverlist__who {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: right;
  transition: color .3s, opacity .3s;
}
@media (hover: hover) {
  .hoverlist__row:hover .hoverlist__name { transform: translateX(16px); }
  .hoverlist__row:hover .hoverlist__n { color: var(--brand); }
  .hoverlist__row:hover .hoverlist__who { color: var(--ink-2); }
}
.hoverlist__preview {
  position: fixed;
  top: 0; left: 0;
  width: 280px;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
  z-index: 60;
  box-shadow: 0 24px 60px -20px rgba(16,15,35,.5);
}
.hoverlist__preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hoverlist__preview > div { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.hoverlist__preview > div.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .hoverlist__preview { display: none; } }

/* --------------------------------------------------------------------------
   12. Quote deck
   -------------------------------------------------------------------------- */
.qdeck { position: relative; }
.qdeck__stage { position: relative; min-height: 290px; }
.qdeck__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  pointer-events: none;
}
.qdeck__item.on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
html:not(.js) .qdeck__item { position: relative; opacity: 1; transform: none; margin-bottom: 40px; }
.qdeck__text {
  font-size: clamp(22px, 3.1vw, 40px);
  font-weight: 300;
  letter-spacing: -0.034em;
  line-height: 1.26;
  margin-bottom: 32px;
  max-width: 24ch;
}
.qdeck__by { display: flex; align-items: center; gap: 15px; }
.qdeck__av {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand);
  flex: 0 0 auto;
}
.qdeck__av--initials { display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 16px; }
.qdeck__name { font-size: 16px; font-weight: 700; display: block; }
.qdeck__role { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); display: block; margin-top: 4px; }
.qdeck__nav { display: flex; gap: 10px; margin-top: 44px; }
.qdeck__nav button {
  width: 44px; height: 3px;
  background: var(--rule-strong);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.qdeck__nav button[aria-selected="true"] { background: var(--rule); }
.qdeck__nav button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brand);
  animation: qbar 7s linear forwards;
}
@keyframes qbar { from { width: 0; } to { width: 100%; } }
.qdeck--dark .qdeck__nav button { background: var(--night-rule); }
.qdeck--dark .qdeck__role { color: var(--night-ink-2); }

/* --------------------------------------------------------------------------
   13. Big CTA with magnetic button
   -------------------------------------------------------------------------- */
.bigcta {
  position: relative;
  padding-block: clamp(90px, 15vh, 190px);
  text-align: center;
  overflow: hidden;
}
.bigcta__title {
  font-size: clamp(34px, 5.4vw, 76px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 38px;
}
.magnet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding-inline: 30px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  will-change: transform;
  transition: background .3s, transform .14s var(--ease-out);
}
.magnet:hover { background: var(--brand-deep); }
.magnet svg { transition: transform .3s var(--ease-out); }
.magnet:hover svg { transform: translateX(5px); }
.bigcta__meta {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.bigcta__glow {
  position: absolute;
  width: 820px; height: 820px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89,86,233,.18) 0%, rgba(89,86,233,0) 66%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Section label (minimal headers)
   -------------------------------------------------------------------------- */
.shead { margin-bottom: clamp(44px, 6vw, 80px); }
.shead__kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.shead__kicker::before {
  content: "";
  width: 32px; height: 1px;
  background: currentColor;
}
.shead__title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.06;
  max-width: 24ch;
}
.shead--dark .shead__kicker { color: #9D9BF5; }

/* Parallax drift helper */
.js [data-drift] { will-change: transform; }

/* --------------------------------------------------------------------------
   15. Reduced motion & no-JS safeguards
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .cursor, .cursor-dot { display: none; }
  .marquee__track { animation: none !important; transform: none !important; }
  .scrollcue i::after { animation: none; }
  .hscroll__hint svg { animation: none; }
  .vig-chart i { animation: none; }
  .qdeck__nav button::after { animation: none; }
  .js [data-rise] > *,
  .js [data-clip],
  .js [data-pop],
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .manifesto__text .w { color: var(--ink) !important; }
  .hscroll.is-pinned .hscroll__viewport { overflow-x: auto !important; }
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .stackcard { grid-template-columns: 1fr; min-height: 0; }
  .stackcard__art { aspect-ratio: 16 / 9; order: -1; }
  .statband { grid-template-columns: 1fr; }
  .statband > div { padding-block: 32px; }
}

@media (max-width: 920px) {
  .hero-x { padding-top: 132px; padding-bottom: 80px; }
  .vidwall { grid-template-columns: 1fr; }
  .quotestrip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quotestrip > figure:nth-child(2) { border-right: 0; padding-right: 0; }
  .quotestrip > figure:nth-child(3) { border-top: 1px solid var(--night-rule); }
  .quotestrip > figure:nth-child(4) { border-top: 1px solid var(--night-rule); }
  .talk__inner { grid-template-columns: 1fr; }
  .scrollcue { display: none; }
  .hoverlist__row { grid-template-columns: 40px minmax(0,1fr); gap: 14px; }
  .hoverlist__who { display: none; }
  .qdeck__stage { min-height: 340px; }
}

@media (max-width: 620px) {
  .hero-x__title { font-size: clamp(34px, 9.6vw, 48px); letter-spacing: -0.04em; }
  /* Keep inline-grid here — switching to `inline` collapses the stacking
     context the word swap relies on and both words render at once. */
  .hero-x__foot { gap: 20px; }
  .hero-x__foot .magnet, .hero-x__foot .btn { width: 100%; justify-content: center; }
  .magnet { height: 52px; font-size: 15.5px; padding-inline: 24px; }
  .marquee--type span { padding-inline: 16px; }
  .statband__n { font-size: 46px; }
  .quotestrip { grid-template-columns: 1fr; }
  .quotestrip > figure { border-right: 0; padding-right: 0; border-top: 1px solid var(--night-rule); }
  .quotestrip > figure:first-child { border-top: 0; }
  .herofloat { gap: 8px; margin-top: 40px; }
  .herofloat__card:nth-child(4),
  .herofloat__card:nth-child(5) { display: none; }
  .vidcard__play { width: 56px; height: 56px; }
  .stackcard__body { padding: 24px; }
  .hpanel { width: 82vw; }
  .vig { padding: 18px; }
  .qdeck__stage { min-height: 400px; }
}

/* --------------------------------------------------------------------------
   Post-label adjustments
   The mono micro-labels ("Phase 01", "Selected work") were removed, so a few
   layouts that leaned on them need their own alignment.
   -------------------------------------------------------------------------- */
/* Card copy centres itself now that the phase label no longer pushes it down. */
.stackcard__body { justify-content: center; }
.stackcard__title { margin-top: 0; }

/* Hover-list rows lost their number column. */
.hoverlist__row--nonum { grid-template-columns: minmax(0, 1fr) auto; }
.hoverlist--compact .hoverlist__row--nonum { grid-template-columns: minmax(0, 1fr) auto; }

/* A section head that is now just a title needs no extra top spacing. */
.shead > .shead__title:only-child { margin-bottom: 0; }

@media (max-width: 920px) {
  .hoverlist__row--nonum { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   11. STACKING WORK CARDS — sharp-cut, full-bleed, real project art
   Pure CSS `position: sticky`. No pin, no JS, no layout thrash.
   Each card parks a few px lower than the last so the stack edge shows.
   ========================================================================== */
.stackwork { padding: var(--pad-chapter) 0 0; background: var(--ground); }

.stackwork__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 56px;
}
.stackwork__head .t-h2 { max-width: 15ch; }

.stackwork__list {
  /* bottom padding gives the last card room to settle */
  padding-bottom: 14vh;
}

.swcard {
  position: sticky;
  top: calc(76px + (var(--i) * 13px));
  margin-bottom: 40px;
}
.swcard:last-child { margin-bottom: 0; }

.swcard__inner {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: #fff;
  text-decoration: none;
  /* sharp cuts — no radius anywhere */
  border-radius: 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.07), 0 30px 70px -40px rgba(11,11,20,.65);
  transition: transform var(--t-med) var(--ease);
}

/* Inverse-scale hover: frame eases in, image eases out */
@media (hover: hover) and (pointer: fine) {
  .swcard__inner:hover { transform: scale(.988); }
  .swcard__inner:hover .swcard__art img { transform: scale(1.055); }
  .swcard__inner:hover .swcard__go .arrow { transform: translateX(5px); }
}

.swcard__art {
  position: relative;
  /* Height tracks the viewport so a parked card — artwork AND detail bar —
     always fits on screen. Fixed aspect ratios push the bar below the fold
     on laptop-height windows. */
  height: clamp(240px, 51vh, 600px);
  overflow: hidden;
  background: #16161f;
}
.swcard__art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform .9s var(--ease);
}
/* a soft floor so the detail bar never fights the artwork */
.swcard__art::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to bottom, rgba(16,15,35,0), rgba(16,15,35,.86));
  pointer-events: none;
}

.swcard__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "id go" "title go" "chips go";
  align-items: center;
  gap: 6px 32px;
  padding: 22px 32px 24px;
  border-top: 1px solid var(--night-rule);
}
.swcard__id    { grid-area: id; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.swcard__title { grid-area: title; margin: 2px 0 0; font-size: clamp(20px, 2.3vw, 30px); font-weight: 400; letter-spacing: -.026em; line-height: 1.16; color: #fff; }
.swcard__chips { grid-area: chips; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.swcard__go    { grid-area: go; }

.swcard__client {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: #fff;
}
.swcard__sector {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--night-ink-2);
}
.swcard__sector::before { content: "— "; }

.swcard__chips span {
  font-size: 12.5px; line-height: 1;
  padding: 7px 11px;
  border: 1px solid var(--night-rule);
  color: var(--night-ink-2);
  border-radius: 0;
}

.swcard__go {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 500; color: #fff;
  white-space: nowrap;
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.3);
}
.swcard__go .arrow { transition: transform var(--t-med) var(--ease); }

/* A metric can ride the artwork when a project has one worth showing */
.swcard__stat {
  position: absolute; left: 32px; bottom: 26px; z-index: 2;
  display: flex; align-items: baseline; gap: 10px;
}
.swcard__stat b {
  font-size: clamp(30px, 4.4vw, 56px); font-weight: 300;
  letter-spacing: -.035em; line-height: 1; color: #fff;
}
.swcard__stat small {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.8); max-width: 16ch;
}

@media (max-width: 860px) {
  .swcard { position: static; margin-bottom: 20px; }
  .swcard__bar {
    grid-template-columns: 1fr;
    grid-template-areas: "id" "title" "chips" "go";
    padding: 20px 20px 22px; gap: 4px;
  }
  .swcard__go { justify-self: start; margin-top: 16px; }
  .swcard__art { height: clamp(200px, 46vw, 340px); }
  .swcard__stat { left: 20px; bottom: 20px; }
}

/* If the viewer prefers less motion, don't stack — just list them. */
@media (prefers-reduced-motion: reduce) {
  .swcard { position: static; }
  .swcard__inner, .swcard__art img { transition: none; }
}

/* ==========================================================================
   12. CASE STUDY PAGES — sharp cuts, full-bleed deck imagery
   ========================================================================== */
.case-hero { padding: 172px 0 0; background: var(--ground); }
.case-hero__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.case-hero__sector {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--brand);
}
.case-hero__client {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
.case-hero__client::before { content: "/ "; }
.case-hero h1 { max-width: 19ch; }
.case-hero__lead { margin: 28px 0 0; max-width: 56ch; }

/* Fact row under the hero */
.case-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 64px;
  background: var(--rule); border: 1px solid var(--rule);
}
.case-facts > div { background: var(--ground); padding: 22px 24px; }
.case-facts dt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px;
}
.case-facts dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.4; }

/* Outcome numbers — the part clients actually scan for */
.case-outcome { background: var(--night); color: #fff; padding: var(--pad-sec) 0; }
.case-outcome__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin-top: 52px; }
.case-outcome__n {
  font-size: clamp(38px, 5vw, 66px); font-weight: 250;
  letter-spacing: -.04em; line-height: 1; color: #fff; display: block;
}
.case-outcome__n .delta { color: var(--brand); }
.case-outcome__l {
  display: block; margin-top: 14px; font-size: 14.5px; line-height: 1.45;
  color: var(--night-ink-2); max-width: 22ch;
}
.case-outcome__was {
  display: block; margin-top: 8px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .08em; color: #6f6e96;
}

/* Text chapters */
.case-chapter { padding: var(--pad-sec) 0; }
.case-chapter + .case-chapter { padding-top: 0; }
.case-chapter__grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.5fr); gap: 56px; }
.case-chapter__num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--brand); display: block; margin-bottom: 16px;
}
.case-chapter h2 { position: sticky; top: 108px; }
.case-chapter__body > * + * { margin-top: 20px; }
.case-chapter__body ul { margin: 20px 0 0; padding: 0; list-style: none; }
.case-chapter__body li {
  position: relative; padding-left: 26px; margin-top: 12px;
  font-size: 17px; line-height: 1.6; color: var(--ink-3);
}
.case-chapter__body li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 1px; background: var(--brand);
}

/* The deck itself — the real design work, full width, hard edges */
.case-deck { background: var(--surface-2); padding: var(--pad-sec) 0; }
.case-deck__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.case-deck__frame { border: 1px solid var(--rule); background: #fff; }
.case-deck__frame img { display: block; width: 100%; height: auto; }
.case-deck__cap {
  margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--muted);
}

/* Next project — see section 18 */

@media (max-width: 900px) {
  .case-hero { padding-top: 132px; }
  .case-facts { grid-template-columns: repeat(2, 1fr); }
  .case-outcome__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .case-chapter__grid { grid-template-columns: 1fr; gap: 26px; }
  .case-chapter h2 { position: static; }
}
@media (max-width: 540px) {
  .case-facts { grid-template-columns: 1fr; }
  .case-outcome__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. MID CTA — the pause between work and proof
   ========================================================================== */
.midcta { background: var(--ground); padding: 0 0 var(--pad-sec); text-align: center; }
.midcta .container {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding-top: 84px; border-top: 1px solid var(--rule);
}
.midcta__line {
  margin: 0; max-width: 20ch;
  font-size: clamp(24px, 3.3vw, 42px); font-weight: 300;
  letter-spacing: -.03em; line-height: 1.12; color: var(--ink);
}
.midcta__alt { font-size: 14.5px; }

/* ==========================================================================
   14. WORK INDEX GRID — real project art, sharp cuts
   ========================================================================== */
.wkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
.wkgrid .wkcard:nth-child(6n+1),
.wkgrid .wkcard:nth-child(6n+6) { grid-column: span 2; }

.wkcard { display: block; text-decoration: none; color: inherit; }
.wkcard__art {
  position: relative; overflow: hidden; background: #16161f;
  border: 1px solid var(--rule); aspect-ratio: 16 / 10;
}
.wkcard:nth-child(6n+1) .wkcard__art,
.wkcard:nth-child(6n+6) .wkcard__art { aspect-ratio: 21 / 9; }
.wkcard__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transition: transform .9s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .wkcard:hover .wkcard__art img { transform: scale(1.055); }
  .wkcard:hover .wkcard__title { color: var(--brand); }
}
.wkcard__meta { padding-top: 20px; }
.wkcard__tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); display: block; margin-bottom: 10px;
}
.wkcard__tag b { color: var(--brand); font-weight: 500; }
.wkcard__title {
  font-size: clamp(19px, 2vw, 25px); font-weight: 400;
  letter-spacing: -.025em; line-height: 1.2; margin: 0;
  transition: color var(--t-fast) var(--ease);
}
.wkcard__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.wkcard__chips span {
  font-size: 12.5px; line-height: 1; padding: 7px 11px;
  border: 1px solid var(--rule); color: var(--ink-3);
}
.wkcard__stat {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  display: flex; align-items: baseline; gap: 9px;
  background: rgba(16,15,35,.78); padding: 10px 14px;
}
.wkcard__stat b { font-size: 26px; font-weight: 300; letter-spacing: -.03em; color: #fff; line-height: 1; }
.wkcard__stat small {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.82);
}
@media (max-width: 820px) {
  .wkgrid { grid-template-columns: 1fr; gap: 40px; }
  .wkgrid .wkcard:nth-child(6n+1), .wkgrid .wkcard:nth-child(6n+6) { grid-column: span 1; }
  .wkcard__art, .wkcard:nth-child(6n+1) .wkcard__art,
  .wkcard:nth-child(6n+6) .wkcard__art { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   15. HERO STATS — replaces the floating card deck
   Transparent cells with rule dividers, so the hero dot canvas stays visible
   behind them. Numbers animate via the existing [data-count] counters.
   ========================================================================== */
.herostats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--rule);
}
.herostats > div {
  padding: clamp(24px, 2.6vw, 34px) 24px 0 clamp(20px, 2.2vw, 30px);
  border-left: 1px solid var(--rule);
}
.herostats > div:first-child { border-left: 0; padding-left: 0; }

.herostats__n {
  display: block;
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 250;
  letter-spacing: -.042em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.herostats__n--brand { color: var(--brand); }

.herostats__l {
  display: block;
  margin-top: clamp(10px, 1.1vw, 16px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--muted);
  max-width: 18ch;
}

@media (max-width: 860px) {
  .herostats { grid-template-columns: repeat(2, 1fr); }
  .herostats > div { padding: 22px 16px 22px 20px; border-bottom: 1px solid var(--rule); }
  .herostats > div:nth-child(odd)  { border-left: 0; padding-left: 0; }
  .herostats > div:nth-child(n+3)  { border-bottom: 0; }
}
@media (max-width: 420px) {
  .herostats__l { font-size: 10.5px; letter-spacing: .1em; }
}

/* ==========================================================================
   16. CASE STUDY FIGURES — individual screens, placed deliberately
   Replaces the full-deck page dump. Each screen is its own figure with a
   caption, grouped on a tinted ground so the work reads as exhibits rather
   than a scanned document.
   ========================================================================== */
.cfigs { padding: 0 0 var(--pad-sec); }
.cfigs__ground {
  background: var(--surface-2);
  padding: clamp(26px, 4vw, 60px);
}
.cfigs__ground--dark { background: var(--night); }

.cfigs__lead {
  display: block; margin: 0 0 clamp(22px, 3vw, 38px);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.cfigs__ground--dark .cfigs__lead { color: var(--night-ink-2); }

.cgrid { display: grid; gap: clamp(16px, 2.2vw, 30px); }
.cgrid--2 { grid-template-columns: repeat(2, 1fr); }
.cgrid--3 { grid-template-columns: repeat(3, 1fr); }

.cfig { margin: 0; }
.cfig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); background: #fff;
}
.cfigs__ground--dark .cfig img { border-color: var(--night-rule); }

/* Full-page designs run to 4000px — frame the top of each as a scroll
   rather than printing the whole thing down the page. */
.cfig--tall img {
  height: clamp(380px, 62vh, 720px);
  object-fit: cover; object-position: center top;
}

.cfig figcaption {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); line-height: 1.5;
}
.cfigs__ground--dark .cfig figcaption { color: var(--night-ink-2); }

@media (max-width: 820px) {
  .cgrid--3 { grid-template-columns: repeat(2, 1fr); }
  .cgrid--3 > .cfig:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .cgrid--2, .cgrid--3 { grid-template-columns: 1fr; }
  .cgrid--3 > .cfig:last-child:nth-child(odd) { grid-column: span 1; }
  .cfig--tall img { height: 420px; }
}

/* Multi-column figure rows: give every screen the same frame height and
   `contain` it, so the whole screen stays visible and the captions sit on a
   common baseline instead of stepping down the row.
   `.cfig--tall` opts back into `cover` for full-page scrolls. */
.cgrid--2 > .cfig,
.cgrid--3 > .cfig { display: flex; flex-direction: column; }

.cgrid--2 > .cfig:not(.cfig--tall) img,
.cgrid--3 > .cfig:not(.cfig--tall) img {
  height: clamp(190px, 25vw, 330px);
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.cgrid--2 > .cfig figcaption,
.cgrid--3 > .cfig figcaption { margin-top: 0; padding-top: 14px; }

@media (max-width: 560px) {
  .cgrid--2 > .cfig:not(.cfig--tall) img,
  .cgrid--3 > .cfig:not(.cfig--tall) img { height: 240px; }
}

/* ==========================================================================
   17. CASE STUDY — EDITORIAL SHOWCASE LAYOUT
   One named feature per section. Text column one side, artwork the other,
   artwork bleeding past the container edge. Sides alternate; every third
   section drops to the dark ground so the scroll has a rhythm.
   Sharp cuts and light display type throughout — our language, not the
   reference's heavy 800-weight treatment.
   ========================================================================== */
.csshow { padding: clamp(64px, 8vw, 118px) 0; background: var(--ground); overflow: hidden; }
.csshow--alt  { background: var(--surface-2); }
.csshow--dark { background: var(--night); }

.csshow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}
/* reversed: text first in the DOM, artwork pulled to the right */
.csshow--rev .csshow__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

.csshow__text { max-width: 46ch; }
.csshow--rev .csshow__text { order: -1; }

.csshow__eyebrow {
  display: block; margin-bottom: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--brand);
}
.csshow--dark .csshow__eyebrow { color: #9c99ff; }

.csshow__h {
  margin: 0; font-size: clamp(27px, 3.9vw, 52px); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.06; color: var(--ink);
}
.csshow--dark .csshow__h { color: #fff; }

.csshow__p { margin: 22px 0 0; font-size: 17px; line-height: 1.62; color: var(--ink-3); }
.csshow--dark .csshow__p { color: var(--night-ink-2); }

/* The artwork breaks the gutter — the move that makes this layout read
   as editorial rather than as a slide. */
.csshow__media { position: relative; }
.csshow__media img {
  display: block; width: calc(100% + var(--bleed, 7vw)); max-width: none;
  height: auto; border: 1px solid var(--rule); background: #fff;
  margin-left: calc(var(--bleed, 7vw) * -1);
}
.csshow--rev .csshow__media img { margin-left: 0; margin-right: calc(var(--bleed, 7vw) * -1); }
.csshow--dark .csshow__media img { border-color: var(--night-rule); }

/* Tall portrait screens shouldn't run to 3000px in a showcase slot */
.csshow__media--tall img {
  height: clamp(380px, 56vh, 620px);
  object-fit: cover; object-position: center top;
}

/* ---- Intro split: the challenge beside the response -------------------- */
.csintro { padding: clamp(56px, 7vw, 104px) 0; }
.csintro__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.csintro h2 {
  margin: 0 0 18px; font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 500; letter-spacing: -.022em; line-height: 1.2;
}
.csintro__col > p { margin: 0 0 16px; font-size: 17px; line-height: 1.62; color: var(--ink-3); }
.csintro__col > p:last-child { margin-bottom: 0; }

/* ---- Persona card ------------------------------------------------------ */
.cspersona { padding: 0 0 clamp(40px, 5vw, 72px); }
.cspersona__card { border: 1px solid var(--rule); background: var(--surface); padding: clamp(24px, 3.4vw, 46px); }
.cspersona__card + .cspersona__card { margin-top: 22px; }

.cspersona__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.cspersona__av {
  width: clamp(76px, 8vw, 112px); aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--rule); display: block;
}
.cspersona__av--initials {
  display: grid; place-items: center; background: var(--brand-soft);
  color: var(--brand); font-size: 26px; font-weight: 500; letter-spacing: -.02em;
}
.cspersona__name { margin: 0; font-size: clamp(19px, 2vw, 25px); font-weight: 500; letter-spacing: -.024em; }
.cspersona__role {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.cspersona__bio { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-3); }

.cspersona__traits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cspersona__traits span {
  font-size: 12.5px; line-height: 1; padding: 7px 11px;
  border: 1px solid var(--brand-line); color: var(--brand-deep); background: var(--brand-soft);
}

.cspersona__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px);
  margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rule);
}
.cspersona__cols h4 {
  margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--brand); font-weight: 500;
}
.cspersona__cols ul { margin: 0; padding: 0; list-style: none; }
.cspersona__cols li {
  position: relative; padding-left: 010px; padding-left: 20px; margin-bottom: 11px;
  font-size: 15px; line-height: 1.52; color: var(--ink-3);
}
.cspersona__cols li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 9px; height: 1px; background: var(--rule-strong);
}

/* ---- Conclusion -------------------------------------------------------- */
.csconclusion { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--rule); }
.csconclusion__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); }
.csconclusion p { margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; color: var(--ink-3); }
.csconclusion p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .csshow__grid, .csshow--rev .csshow__grid { grid-template-columns: 1fr; gap: 30px; }
  .csshow__text, .csshow--rev .csshow__text { order: 0; max-width: none; }
  .csshow__media img,
  .csshow--rev .csshow__media img {
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(var(--gutter) * -1); margin-right: 0;
  }
  .csshow__media--tall img { height: clamp(300px, 46vh, 420px); }
  .csintro__grid, .csconclusion__grid { grid-template-columns: 1fr; gap: 26px; }
  .cspersona__cols { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 620px) {
  .cspersona__top { grid-template-columns: 1fr; }
}

/* Hero: a brand rule beside the headline, and a full-bleed lead image */
.case-hero h1 { position: relative; padding-left: clamp(18px, 2.2vw, 30px); }
.case-hero h1::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .14em;
  width: 4px; background: var(--brand);
}
/* Lead product snapshot — contained 16:9, sitting between the fact row and
   the challenge. Full-bleed read as a banner; this reads as a product. */
.case-lead-media { background: var(--ground); padding-top: clamp(40px, 5.5vw, 72px); }
.case-lead-media figure { margin: 0; max-width: 1000px; }
.case-lead-media img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--rule); background: #fff;
}
.case-lead-media figcaption {
  margin-top: 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; color: var(--muted);
}
@media (max-width: 700px) { .case-lead-media img { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   18. CASE PAGE — NEXT CASE STUDY + CLOSING CTA
   The case pages reused `.talk` with a plain `.container`, so they never
   picked up `.talk__inner`'s vertical padding and ran a full `t-h1` (88px)
   hard against the section edges. Both get their own sizing here.
   ========================================================================== */
.case-next { border-top: 1px solid var(--rule); background: var(--ground); }
.case-next__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(44px, 6vw, 76px) 0;
  text-decoration: none; color: inherit;
}
.case-next__l {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.case-next__t {
  display: block;
  font-size: clamp(22px, 2.9vw, 38px); font-weight: 300;
  letter-spacing: -.028em; line-height: 1.12; max-width: 20ch;
  transition: color var(--t-fast) var(--ease);
}
.case-next__thumb {
  width: clamp(120px, 15vw, 200px); aspect-ratio: 16/10;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--rule); display: block;
  transition: transform var(--t-med) var(--ease);
}
/* The affordance the row was missing */
.case-next__go {
  display: grid; place-items: center;
  width: clamp(52px, 5vw, 66px); aspect-ratio: 1;
  border: 1px solid var(--brand); color: var(--brand);
  border-radius: 50%; flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.case-next__go svg { transition: transform var(--t-med) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .case-next__link:hover .case-next__t     { color: var(--brand); }
  .case-next__link:hover .case-next__thumb { transform: scale(1.04); }
  .case-next__link:hover .case-next__go    { background: var(--brand); color: #fff; }
  .case-next__link:hover .case-next__go svg{ transform: translateX(3px); }
}
.case-next__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* Closing CTA — sized for a case page, not the homepage */
.case-cta { background: var(--night); color: #fff; }
.case-cta .container { padding-block: clamp(72px, 11vh, 132px); }
.case-cta__h {
  margin: 0; max-width: 18ch;
  font-size: clamp(28px, 4.4vw, 58px); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.08; color: #fff;
}
.case-cta__p {
  margin: 20px 0 0; max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; color: var(--night-ink-2);
}
.case-cta__act { margin: clamp(30px, 4vw, 44px) 0 0; }

@media (max-width: 820px) {
  .case-next__link { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
  .case-next__thumb { display: none; }
}

/* ==========================================================================
   19. NATIVE CONTENT BLOCKS
   Deck slides that are purely text — pillars, process rails, metric lists,
   research figures — are rebuilt as real typography instead of screenshots.
   Screenshots are reserved for flow diagrams, system sheets and real UI.
   ========================================================================== */

/* -- Pillars / capabilities ---------------------------------------------- */
.cnum { padding: clamp(56px, 7vw, 100px) 0; }
.cnum__grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cnum__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cnum__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cnum__cell { background: var(--ground); padding: clamp(26px, 3.2vw, 44px); }
.cnum__n {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--brand);
}
.cnum__h {
  margin: 0 0 12px; font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 500; letter-spacing: -.022em; line-height: 1.22;
}
.cnum__b { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-3); }

/* -- Process rail --------------------------------------------------------- */
.csteps { padding: clamp(48px, 6vw, 88px) 0; }
.csteps__rail { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.csteps__step { flex: 1 1 0; min-width: 150px; position: relative; padding-right: 24px; }
.csteps__step::before {
  content: ""; display: block; height: 1px; background: var(--rule-strong); margin-bottom: 22px;
}
.csteps__step:first-child::before { background: var(--brand); }
.csteps__n {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--brand);
}
.csteps__h { margin: 0; font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; letter-spacing: -.02em; }
.csteps__b { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* -- Definition list (metrics, criteria) ---------------------------------- */
.cdefs { padding: clamp(56px, 7vw, 100px) 0; }
.cdefs__list { margin: 0; }
.cdefs__row {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: clamp(16px, 3vw, 48px);
  padding: 20px 0; border-top: 1px solid var(--rule);
}
.cdefs__row:last-child { border-bottom: 1px solid var(--rule); }
.cdefs__t { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.018em; color: var(--ink); }
.cdefs__d { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-3); }

/* -- Research figures ----------------------------------------------------- */
.cstats { padding: clamp(56px, 7vw, 100px) 0; background: var(--night); color: #fff; }
.cstats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.cstats__n {
  display: block; font-size: clamp(42px, 5.6vw, 76px); font-weight: 250;
  letter-spacing: -.045em; line-height: 1; color: #fff;
}
.cstats__l {
  display: block; margin-top: 16px; font-size: 15.5px; line-height: 1.5;
  color: var(--night-ink-2); max-width: 22ch;
}
.cstats__note { margin: clamp(32px, 4vw, 52px) 0 0; }
.cstats__note li {
  position: relative; padding-left: 22px; margin-top: 11px;
  font-size: 16px; line-height: 1.58; color: var(--night-ink-2); list-style: none;
}
.cstats__note li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 10px; height: 1px; background: var(--brand);
}
.cstats__note { padding: 0; }

@media (max-width: 900px) {
  .cnum__grid--3, .cnum__grid--2 { grid-template-columns: 1fr; }
  .cstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdefs__row { grid-template-columns: 1fr; gap: 6px; }
  .csteps__step { flex: 1 1 44%; min-width: 0; margin-bottom: 26px; }
}
@media (max-width: 520px) {
  .cstats__grid { grid-template-columns: 1fr; }
  .csteps__step { flex: 1 1 100%; }
}

/* ==========================================================================
   20. NO-CROP IMAGE POLICY
   Every artwork on a case study is either fully visible or not shown. The
   earlier treatment bled showcase images past the gutter and cropped frames
   with `object-fit: cover`, which sliced text off the edges of real screens.
   These rules supersede that. Nothing here crops.
   ========================================================================== */

/* -- Showcase artwork: no bleed, no crop, natural proportions ------------- */
.csshow__media img,
.csshow--rev .csshow__media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  object-fit: fill;              /* natural ratio, so `fill` never distorts */
}

/* Long full-page scrolls: shown whole, in a narrower column so the page
   stays navigable. Previously cropped to a 620px window. */
.csshow__media--tall { display: flex; justify-content: center; }
.csshow__media--tall img {
  height: auto;
  max-width: min(360px, 100%);
  object-fit: fill;
}
.cfig--tall img {
  height: auto;
  object-fit: fill;
}
.cgrid--3 > .cfig--tall img,
.cgrid--2 > .cfig--tall img { max-width: 100%; }

/* -- Figure grids: contain already, just make the frame breathe ----------- */
.cgrid--2 > .cfig:not(.cfig--tall) img,
.cgrid--3 > .cfig:not(.cfig--tall) img {
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}

/* -- Lead product snapshot: whole image, never a 16:9 crop ---------------- */
.case-lead-media img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* -- Cards carry purpose-made 16:9 banners, so the frame matches exactly -- */
.swcard__art img { object-fit: contain; background: #0d0d14; }
/* the banners already carry their own title, so the gradient scrim would
   only muddy them */
.swcard__art::after { display: none; }

.wkcard__art,
.wkgrid .wkcard:nth-child(6n+1) .wkcard__art,
.wkgrid .wkcard:nth-child(6n+6) .wkcard__art { aspect-ratio: 16 / 9; }
.wkcard__art img { object-fit: contain; background: #0d0d14; }

.case-next__thumb { aspect-ratio: 16 / 9; object-fit: contain; background: #0d0d14; }

@media (max-width: 900px) {
  .csshow__media img,
  .csshow--rev .csshow__media img { width: 100%; margin: 0; }
  .csshow__media--tall img { max-width: min(300px, 100%); }
}
@media (max-width: 820px) {
  .wkcard__art { aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .swcard__art { height: auto; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   21. HOME WORK SECTION — one fold
   Heading, a full uncut 16:9 banner and its label bar all have to land in a
   single viewport. The card can't be full-container width and 16:9 at once
   without overflowing, so the ARTWORK HEIGHT drives the card width: the art
   is a share of the viewport, and the card is exactly 16/9 of that. Nothing
   is cropped; the card simply narrows on short screens.
   ========================================================================== */
.stackwork {
  --artH: clamp(220px, 44vh, 560px);
  padding: clamp(56px, 6.5vw, 88px) 0 0;
}

.stackwork__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px 40px; flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.stackwork__title {
  margin: 0;
  font-size: clamp(27px, 3.5vw, 46px); font-weight: 300;
  letter-spacing: -.03em; line-height: 1.1;
}
.stackwork__title em { font-style: normal; color: var(--brand); }
.stackwork__note {
  margin: 0; max-width: 38ch;
  font-size: 15.5px; line-height: 1.58; color: var(--ink-3);
}

/* Card width follows the artwork height, so 16:9 is never cropped */
.swcard__inner { max-width: min(100%, calc(var(--artH) * 16 / 9)); margin-inline: auto; }
.swcard__art   { aspect-ratio: 16 / 9; height: auto; }
.swcard        { margin-bottom: clamp(20px, 2.4vw, 32px); }
.stackwork__list { padding-bottom: 10vh; }

/* The label bar sits under the banner — tighter, so the fold holds */
.swcard__bar { padding: 16px 22px 18px; gap: 4px 24px; }
.swcard__title { font-size: clamp(17px, 1.7vw, 22px); margin-top: 1px; }
.swcard__chips { margin-top: 8px; }
.swcard__chips span { padding: 5px 9px; font-size: 12px; }
.swcard__go { padding: 10px 16px; font-size: 13.5px; }

@media (max-width: 860px) {
  .stackwork { --artH: clamp(180px, 34vh, 320px); }
  .swcard__inner { max-width: 100%; }
  .swcard__art { aspect-ratio: 16 / 9; }
  .stackwork__note { max-width: none; }
}

/* ==========================================================================
   22. HOME WORK — PINNED HORIZONTAL TRACK
   Case studies sit side by side; scrolling down pans the track across.
   Panel width is derived from the artwork height so the 16:9 banner is
   never cropped, and the whole unit — heading, banner, label — holds one
   fold. Below 780px motion.js leaves it as a native swipe scroller.
   ========================================================================== */
.hscroll {
  --artH: clamp(200px, 45vh, 500px);
  background: var(--ground);
}
.hscroll__sticky { padding: clamp(40px, 5vw, 72px) 0 clamp(20px, 3vw, 34px); }

.hscroll__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap;
  margin-bottom: clamp(22px, 2.8vw, 36px);
}
.hscroll__title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 44px); font-weight: 300;
  letter-spacing: -.03em; line-height: 1.1;
}
.hscroll__title em { font-style: normal; color: var(--brand); }

/* -- Panels -------------------------------------------------------------- */
.hscroll__track { gap: clamp(16px, 1.8vw, 26px); padding-inline: var(--gutter); align-items: stretch; }

.hpanel {
  width: calc(var(--artH) * 16 / 9);
  max-width: 88vw;
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  background: var(--night); color: #fff;
  text-decoration: none; border-radius: 0;
  box-shadow: 0 24px 60px -44px rgba(11,11,20,.6);
}
.hpanel__art {
  aspect-ratio: 16 / 9;
  position: relative; overflow: hidden; background: #0d0d14;
}
.hpanel__art img {
  width: 100%; height: 100%;
  object-fit: contain;            /* banners are 16:9 — nothing is cropped */
  display: block;
  transition: transform .9s var(--ease);
}
.hpanel__meta {
  flex: 1; background: var(--night);
  padding: 16px 22px 20px;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "tag go" "title go" "chips go";
  align-items: center; gap: 4px 20px;
  border-top: 1px solid var(--night-rule);
}
.hpanel__tag {
  grid-area: tag;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--night-ink-2);
}
.hpanel__tag b { color: #fff; font-weight: 500; }
.hpanel__title {
  grid-area: title; margin: 2px 0 0;
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 400;
  letter-spacing: -.022em; line-height: 1.2; color: #fff;
}
.hpanel__chips { grid-area: chips; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hpanel__chips span {
  font-size: 11.5px; line-height: 1; padding: 5px 9px;
  border: 1px solid var(--night-rule); color: var(--night-ink-2);
}
.hpanel__go {
  grid-area: go;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: #fff;
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.3);
}
.hpanel__go .arrow { transition: transform var(--t-med) var(--ease); }

.hpanel__stat {
  position: absolute; left: 18px; bottom: 16px; z-index: 2; margin: 0;
  display: flex; align-items: baseline; gap: 8px;
  background: rgba(13,13,20,.74); padding: 8px 12px;
}
.hpanel__stat b { font-size: clamp(20px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: #fff; }
.hpanel__stat small {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: rgba(255,255,255,.82);
}

/* Closing panel — no artwork, just the route to everything else */
.hpanel--more {
  width: calc(var(--artH) * 0.62);
  background: var(--brand); justify-content: flex-end;
}
.hpanel--more .hpanel__meta {
  background: transparent; border-top: 0;
  grid-template-columns: 1fr; grid-template-areas: "tag" "title" "go";
  align-content: end; padding: 26px 24px;
}
.hpanel--more .hpanel__tag { color: rgba(255,255,255,.75); }
.hpanel--more .hpanel__title { margin-bottom: 20px; }
.hpanel--more .hpanel__go { border-color: rgba(255,255,255,.55); justify-self: start; }

@media (hover: hover) and (pointer: fine) {
  .hpanel:hover .hpanel__art img { transform: scale(1.03); }
  .hpanel:hover .hpanel__go .arrow { transform: translateX(4px); }
}

@media (max-width: 780px) {
  .hscroll { --artH: clamp(170px, 40vw, 280px); }
  .hpanel { width: min(86vw, 460px); }
  .hpanel--more { width: min(60vw, 260px); }
  .hpanel__meta { grid-template-columns: 1fr; grid-template-areas: "tag" "title" "chips" "go"; }
  .hpanel__go { justify-self: start; margin-top: 14px; }
}

/* ==========================================================================
   23. PANEL TAGS — frosted glass, legible text
   The legacy `.hpanel__chips span` rule (written for the old light panels)
   still supplied a pale `--surface-2` background, while the dark-panel rule
   supplied muted light text. Pale chip + pale text = unreadable. Everything
   is declared explicitly here so nothing leaks from the older rule.
   ========================================================================== */
.hpanel__chips span,
.swcard__chips span {
  /* frosted pane: a soft top-lit gradient rather than a flat wash */
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .005em;
  padding: 6px 11px;
  white-space: nowrap;
}

/* The stat badge sits over artwork, so it gets a real blur */
.hpanel__stat {
  background: rgba(13,13,20,.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
}

/* ==========================================================================
   24. FEATURED TESTIMONIAL — one video, then the written ones
   Sits directly under the hero stats: a single large 16:9 rectangle doing
   the credibility work, with the remaining testimonials as text beneath.
   Reuses `.vidcard` so motion.js's click-to-play binds without changes —
   nothing downloads until someone presses play.
   ========================================================================== */
.tfeat { background: var(--night); color: #fff; padding: clamp(64px, 8vw, 112px) 0; }

.tfeat__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 44px);
}
.tfeat__title {
  margin: 0; font-size: clamp(28px, 3.8vw, 50px); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.08; color: #fff;
}
.tfeat__note {
  margin: 0; max-width: 40ch; font-size: 15.5px; line-height: 1.58;
  color: var(--night-ink-2);
}

/* The rectangle */
.tfeat__video {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  padding: 0; border: 1px solid var(--night-rule); background: #0d0d14;
  cursor: pointer; border-radius: 0;
}
.tfeat__video img,
.tfeat__video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tfeat__video img { transition: transform .9s var(--ease); }
.tfeat__video::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to bottom, rgba(13,13,20,0), rgba(13,13,20,.86));
  pointer-events: none; transition: opacity var(--t-med) var(--ease);
}
.tfeat__video.is-playing::after,
.tfeat__video.is-playing .vidcard__play,
.tfeat__video.is-playing .tfeat__by { opacity: 0; pointer-events: none; }
.tfeat__video.is-playing img { display: none; }
.tfeat__video video { position: absolute; inset: 0; z-index: 3; }

.tfeat__video .vidcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: grid; place-items: center;
  width: clamp(62px, 6vw, 86px); aspect-ratio: 1; border-radius: 50%;
  background: var(--brand); color: #fff;
  box-shadow: 0 0 0 10px rgba(89,86,233,.22);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.tfeat__by {
  position: absolute; left: clamp(20px, 3vw, 38px); bottom: clamp(18px, 2.6vw, 32px);
  z-index: 2; text-align: left;
}
.tfeat__by b {
  display: block; font-size: clamp(17px, 1.9vw, 24px); font-weight: 500;
  letter-spacing: -.022em; color: #fff;
}
.tfeat__by span {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.78);
}
@media (hover: hover) and (pointer: fine) {
  .tfeat__video:hover img { transform: scale(1.03); }
  .tfeat__video:hover .vidcard__play {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 0 0 16px rgba(89,86,233,.18);
  }
}

/* Written testimonials underneath */
.tfeat__quotes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(32px, 4vw, 56px);
  background: var(--night-rule); border: 1px solid var(--night-rule);
}
.tfeat__quotes figure { margin: 0; background: var(--night); padding: clamp(22px, 2.4vw, 30px); }
.tfeat__quotes blockquote {
  margin: 0; font-size: 15.5px; line-height: 1.6; color: #E6E5F5;
}
.tfeat__quotes figcaption {
  display: flex; align-items: center; gap: 11px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--night-rule);
}
.tfeat__quotes figcaption img,
.tfeat__quotes figcaption .ini {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.tfeat__quotes figcaption .ini {
  display: grid; place-items: center; background: var(--brand);
  font-size: 12px; font-weight: 600; color: #fff;
}
.tfeat__quotes figcaption em { display: block; font-style: normal; font-size: 14.5px; font-weight: 500; color: #fff; }
.tfeat__quotes figcaption i {
  display: block; font-style: normal; margin-top: 3px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--night-ink-2);
}

@media (max-width: 980px) { .tfeat__quotes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .tfeat__quotes { grid-template-columns: 1fr; }
  .tfeat__video { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   25. TESTIMONIALS — THE REST
   The CEQUENS film carries the top of the page on its own. Everything else
   — the Studybase film and the written quotes — lands after the work, where
   a visitor has seen the projects and is weighing them up. Smaller video,
   quotes beside it, so it reads as a second helping rather than a repeat.
   ========================================================================== */
.tmore { background: var(--night); color: #fff; padding: clamp(64px, 8vw, 110px) 0; }

.tmore__title {
  margin: 0 0 clamp(28px, 3.6vw, 48px);
  font-size: clamp(26px, 3.4vw, 44px); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.08; color: #fff;
}

.tmore__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}

.tmore__video {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  padding: 0; border: 1px solid var(--night-rule); background: #0d0d14;
  cursor: pointer; border-radius: 0;
}
.tmore__video img,
.tmore__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmore__video img { transition: transform .9s var(--ease); }
.tmore__video::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 48%;
  background: linear-gradient(to bottom, rgba(13,13,20,0), rgba(13,13,20,.88));
  pointer-events: none;
}
.tmore__video .vidcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: grid; place-items: center;
  width: clamp(52px, 4.6vw, 68px); aspect-ratio: 1; border-radius: 50%;
  background: var(--brand); color: #fff;
  box-shadow: 0 0 0 8px rgba(89,86,233,.2);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.tmore__video .tfeat__by { left: clamp(16px, 2vw, 26px); bottom: clamp(14px, 1.8vw, 22px); }
.tmore__video .tfeat__by b { font-size: clamp(16px, 1.6vw, 20px); }
.tmore__video.is-playing::after,
.tmore__video.is-playing .vidcard__play,
.tmore__video.is-playing .tfeat__by { opacity: 0; pointer-events: none; }
.tmore__video.is-playing img { display: none; }
.tmore__video video { position: absolute; inset: 0; z-index: 3; }

@media (hover: hover) and (pointer: fine) {
  .tmore__video:hover img { transform: scale(1.03); }
  .tmore__video:hover .vidcard__play {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 0 0 13px rgba(89,86,233,.16);
  }
}

/* Written quotes, 2 x 2 beside the film */
.tmore__quotes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--night-rule);
  border: 1px solid var(--night-rule);
}
.tmore__quotes figure { margin: 0; background: var(--night); padding: clamp(18px, 1.9vw, 24px); }
.tmore__quotes blockquote { margin: 0; font-size: 14.5px; line-height: 1.58; color: #E6E5F5; }
.tmore__quotes figcaption {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--night-rule);
}
.tmore__quotes figcaption img,
.tmore__quotes figcaption .ini {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.tmore__quotes figcaption .ini {
  display: grid; place-items: center; background: var(--brand);
  font-size: 11px; font-weight: 600; color: #fff;
}
.tmore__quotes figcaption em { display: block; font-style: normal; font-size: 13.5px; font-weight: 500; color: #fff; }
.tmore__quotes figcaption i {
  display: block; font-style: normal; margin-top: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--night-ink-2);
}

@media (max-width: 980px) {
  .tmore__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tmore__quotes { grid-template-columns: 1fr; }
  .tmore__video { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   26. INDUSTRIES — MENTION ONLY
   The sectors list is now informational rather than a route: the dedicated
   industries page is gone, so these rows are plain elements. The hover
   preview still follows the cursor (motion.js binds by class, not by tag),
   but nothing signals that a row can be clicked.
   ========================================================================== */
.hoverlist__row--static { cursor: default; }
.hoverlist__row--static:hover { padding-left: 0; }
.hoverlist__row--static::before { display: none; }
.hoverlist__row--static .hoverlist__name { transition: color var(--t-fast) var(--ease); }
.hoverlist__row--static:hover .hoverlist__name { color: var(--brand); }

/* ==========================================================================
   27. CONTACT — CAL.COM BOOKING
   The page is the calendar. No enquiry form, so nothing to wire up, nothing
   to lose, and no gap between intent and a booked slot.
   ========================================================================== */
.calwrap {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: clamp(10px, 1.4vw, 18px);
}
.calwrap__embed {
  width: 100%;
  min-height: clamp(560px, 78vh, 820px);
  overflow: auto;
}
/* Cal injects its own iframe; keep it filling the frame */
.calwrap__embed iframe { width: 100% !important; border: 0; display: block; }

.calwrap__fallback {
  margin: 0; padding: clamp(28px, 4vw, 48px);
  font-size: 17px; line-height: 1.6; color: var(--ink-3); text-align: center;
}
@media (max-width: 640px) {
  .calwrap { padding: 0; border-left: 0; border-right: 0; }
  .calwrap__embed { min-height: 640px; }
}

/* ==========================================================================
   28. FEATURED FILM + STATIC LOGO ROW
   The film sits straight under the hero stats on the same light ground —
   no heading, no strapline, no dark band. The client marks sit below it as
   a fixed row rather than a moving marquee.
   ========================================================================== */
.tfeat {
  background: var(--ground);
  color: var(--ink);
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(28px, 3.5vw, 48px);
}
/* the film's own frame carries the contrast now, not a section background */
.tfeat__video { border-color: var(--rule); }
.tfeat__by b { color: #fff; }

/* -- Static client row ---------------------------------------------------- */
.logorow {
  background: var(--ground);
  padding: clamp(18px, 2.4vw, 34px) 0 clamp(40px, 5vw, 72px);
}
.logorow__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(22px, 4vw, 64px); flex-wrap: wrap;
}
.logorow img {
  height: 34px; width: auto; object-fit: contain;
  filter: none; opacity: 1;          /* client marks in their own colours */
}
.logorow img.is-tall { height: 46px; }

@media (max-width: 760px) {
  .logorow__inner { justify-content: center; gap: 24px 32px; }
  .logorow img { height: 26px; }
  .logorow img.is-tall { height: 34px; }
}

/* ==========================================================================
   29. SERVICE PHASES — REAL ARTEFACTS
   The abstract bar-and-block vignettes said nothing about the phase they
   sat beside. Each card now shows an actual artefact from our own work:
   an audit scoring sheet, a colour system, a component library, a measured
   result. Contained, never cropped, on a neutral backing.
   ========================================================================== */
.stackcard__art {
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 34px);
  background: var(--surface-2);
}
.stackcard__art img {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rule);
}
.stackcard--dark .stackcard__art { background: var(--night-2); }
.stackcard--dark .stackcard__art img { border-color: var(--night-rule); }
.stackcard--brand .stackcard__art { background: rgba(255,255,255,.14); }
.stackcard--brand .stackcard__art img { border-color: rgba(255,255,255,.3); }

@media (max-width: 820px) {
  .stackcard__art { padding: 16px; }
  .stackcard__art img { max-height: 320px; }
}

/* ==========================================================================
   30. CLIENT MARKS — OPTICAL SIZING
   The marks were all set to one height, which is the wrong measure: a wide
   wordmark (CEQUENS, 6.5:1) reads huge at the same height a near-square
   lockup (Adani, 1.45:1) reads tiny. Heights below are derived from equal
   visual AREA, then nudged so wordmarks stay readable. Source files have
   had their white grounds and transparent padding stripped.
   ========================================================================== */
.logorow img { height: auto; opacity: 1; filter: none; }
.logorow img[data-logo="adani"]   { height: 54px; }   /* 1.45:1 lockup */
.logorow img[data-logo="fifa"]    { height: 40px; }   /* 3.03:1 */
.logorow img[data-logo="yrefy"]   { height: 38px; }   /* 3.31:1 */
.logorow img[data-logo="weteams"] { height: 32px; }   /* 5.14:1 */
.logorow img[data-logo="cequens"] { height: 28px; }   /* 6.51:1 wordmark */

@media (max-width: 760px) {
  .logorow img[data-logo="adani"]   { height: 42px; }
  .logorow img[data-logo="fifa"]    { height: 31px; }
  .logorow img[data-logo="yrefy"]   { height: 30px; }
  .logorow img[data-logo="weteams"] { height: 25px; }
  .logorow img[data-logo="cequens"] { height: 24px; }
}

/* ==========================================================================
   31. PLAY BUTTON — true circle, with a pulse that invites the click
   A legacy rule set `height: 72px`, and an explicit height beats
   `aspect-ratio`, so the button rendered as an ellipse whenever the clamped
   width resolved to anything other than 72px. Both axes are now driven by
   one custom property.
   ========================================================================== */
.tfeat__video .vidcard__play,
.tmore__video .vidcard__play {
  --play-size: clamp(64px, 6vw, 92px);
  width: var(--play-size);
  height: var(--play-size);
  aspect-ratio: auto;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: 0 0 0 0 rgba(89,86,233,.55), 0 0 30px 2px rgba(89,86,233,.35);
  animation: playPulse 2.6s var(--ease-io, ease-in-out) infinite;
}
.tmore__video .vidcard__play { --play-size: clamp(54px, 4.8vw, 72px); }

.tfeat__video .vidcard__play svg,
.tmore__video .vidcard__play svg { margin-left: 3px; color: var(--brand); }

@keyframes playPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(89,86,233,.5), 0 0 26px 2px rgba(89,86,233,.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 0 0 20px rgba(89,86,233,0), 0 0 54px 8px rgba(89,86,233,.55);
  }
}

/* Hover quickens the pulse rather than fighting it with a second transform */
@media (hover: hover) and (pointer: fine) {
  .tfeat__video:hover .vidcard__play,
  .tmore__video:hover .vidcard__play { animation-duration: 1.1s; background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .tfeat__video .vidcard__play,
  .tmore__video .vidcard__play {
    animation: none;
    box-shadow: 0 0 0 8px rgba(89,86,233,.25);
  }
}

/* ==========================================================================
   32. STUDIO PAGE — CLIENTS + VIDEO TESTIMONIALS
   The old clients block stacked four things: a heading, an aside paragraph,
   a logo wall and a four-column sector list, then a trailing line. It read
   as congested because it was. The marks alone carry it; the films that
   follow do the persuading.
   ========================================================================== */
.logorow--inpage { background: transparent; padding: clamp(14px, 2vw, 26px) 0 clamp(44px, 5vw, 76px); }

.vidpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.vidpair__item {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  padding: 0; border: 1px solid var(--rule); background: #0d0d14;
  cursor: pointer; border-radius: 0;
}
.vidpair__item img,
.vidpair__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vidpair__item img { transition: transform .9s var(--ease); }
.vidpair__item::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 50%;
  background: linear-gradient(to bottom, rgba(13,13,20,0), rgba(13,13,20,.88));
  pointer-events: none;
}
.vidpair__item .vidcard__play {
  --play-size: clamp(54px, 4.6vw, 70px);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: grid; place-items: center;
  width: var(--play-size); height: var(--play-size); aspect-ratio: auto;
  border-radius: 50%; background: #fff; color: var(--brand);
  animation: playPulse 2.6s ease-in-out infinite;
}
.vidpair__item .vidcard__play svg { margin-left: 3px; color: var(--brand); }
.vidpair__item .tfeat__by { left: clamp(16px, 2vw, 24px); bottom: clamp(14px, 1.8vw, 20px); z-index: 2; }
.vidpair__item.is-playing::after,
.vidpair__item.is-playing .vidcard__play,
.vidpair__item.is-playing .tfeat__by { opacity: 0; pointer-events: none; }
.vidpair__item.is-playing img { display: none; }
.vidpair__item video { position: absolute; inset: 0; z-index: 3; }

@media (hover: hover) and (pointer: fine) {
  .vidpair__item:hover img { transform: scale(1.03); }
  .vidpair__item:hover .vidcard__play { animation-duration: 1.1s; }
}
@media (max-width: 820px) { .vidpair { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .vidpair__item .vidcard__play { animation: none; box-shadow: 0 0 0 8px rgba(89,86,233,.25); }
}

/* ==========================================================================
   33. STUDIO — TEAM PHOTOGRAPH
   A dim, warm room shot. Putting it on the dark ground lets the photo's own
   shadows run to the edge of the band instead of being boxed against white,
   so it reads as a feature rather than an inserted snapshot.
   ========================================================================== */
.teamshot {
  background: var(--night);
  color: #fff;
  padding: clamp(56px, 7vw, 100px) 0 clamp(52px, 6.5vw, 92px);
}
.teamshot__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 48px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 44px);
}
.teamshot__title {
  margin: 0; font-size: clamp(27px, 3.6vw, 46px); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.08; color: #fff;
}
.teamshot__note {
  margin: 0; max-width: 42ch; font-size: 15.5px; line-height: 1.6;
  color: var(--night-ink-2);
}

.teamshot__figure { margin: 0; position: relative; }
.teamshot__figure img {
  display: block; width: 100%; height: auto;
  /* the photograph is 5:4 and already holds the whole group — no crop */
  border: 1px solid var(--night-rule);
}
.teamshot__figure figcaption {
  margin-top: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--night-ink-2);
}

/* A slow, subtle lift as it enters — enough to feel deliberate, not showy */
@media (hover: hover) and (pointer: fine) {
  .teamshot__figure img { transition: transform 1.1s var(--ease); }
  .teamshot__figure:hover img { transform: scale(1.012); }
}
@media (max-width: 700px) {
  .teamshot__note { max-width: none; }
}

/* ==========================================================================
   34. JOURNAL — listing, cards, post body
   ========================================================================== */
.bloggrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(22px, 3vw, 40px); }
.bloggrid .blogcard--lead { grid-column: 1 / -1; }

.blogcard { display: block; text-decoration: none; color: inherit; }
.blogcard__art {
  display: block; overflow: hidden; border: 1px solid var(--rule);
  background: #0d0d14; aspect-ratio: 16 / 9;
}
.blogcard--lead .blogcard__art { aspect-ratio: 21 / 9; }
.blogcard__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transition: transform .9s var(--ease);
}
.blogcard__body { display: block; padding-top: 18px; }
.blogcard__meta {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.blogcard__title {
  display: block; font-size: clamp(19px, 2.1vw, 27px); font-weight: 400;
  letter-spacing: -.026em; line-height: 1.18;
  transition: color var(--t-fast) var(--ease);
}
.blogcard--lead .blogcard__title { font-size: clamp(23px, 2.9vw, 36px); max-width: 24ch; }
.blogcard__excerpt {
  display: block; margin-top: 12px; max-width: 54ch;
  font-size: 16px; line-height: 1.6; color: var(--ink-3);
}
.blogcard__go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 14.5px; font-weight: 500; color: var(--brand);
}
.blogcard__go .arrow { transition: transform var(--t-med) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .blogcard:hover .blogcard__art img { transform: scale(1.04); }
  .blogcard:hover .blogcard__title { color: var(--brand); }
  .blogcard:hover .blogcard__go .arrow { transform: translateX(4px); }
}

/* ---- Post ---------------------------------------------------------------- */
.post-hero { padding: 160px 0 0; background: var(--ground); }
.post-hero__title {
  margin: 18px 0 0; font-size: clamp(30px, 4.4vw, 56px); font-weight: 300;
  letter-spacing: -.034em; line-height: 1.07; max-width: 20ch;
}
.post-hero__meta {
  display: flex; gap: 10px 18px; flex-wrap: wrap; margin: 22px 0 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
.post-hero__meta > * + *::before { content: "· "; }

/* The block an answer engine is most likely to lift */
.post-answer { background: var(--ground); padding: clamp(28px, 4vw, 44px) 0 0; }
.post-answer__box { border-left: 4px solid var(--brand); background: var(--surface); padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px); }
.post-answer__label {
  margin: 0 0 10px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--brand);
}
.post-answer__text { margin: 0; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-2); }

.post-media { background: var(--ground); padding: clamp(32px, 4.5vw, 56px) 0 0; }
.post-media img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }

.post-body { padding: clamp(44px, 6vw, 80px) 0 clamp(20px, 3vw, 40px); }
.post-body h2 {
  margin: clamp(34px, 4.4vw, 56px) 0 16px;
  font-size: clamp(22px, 2.5vw, 31px); font-weight: 400; letter-spacing: -.026em; line-height: 1.18;
}
.post-body h2:first-child { margin-top: 0; }
.post-body p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.68; color: var(--ink-3); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body ul { margin: 0 0 20px; padding: 0; list-style: none; }
.post-body li {
  position: relative; padding-left: 24px; margin-bottom: 12px;
  font-size: 17.5px; line-height: 1.62; color: var(--ink-3);
}
.post-body li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 11px; height: 1px; background: var(--brand);
}
.table-wrap { overflow-x: auto; margin: 0 0 24px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-body th, .post-body td {
  text-align: left; padding: 13px 16px; border: 1px solid var(--rule); vertical-align: top;
}
.post-body th { background: var(--surface-2); font-weight: 500; color: var(--ink); }
.post-body td { color: var(--ink-3); }

.post-faq { padding: clamp(32px, 4.5vw, 56px) 0; background: var(--surface-2); }

/* ---- Share --------------------------------------------------------------- */
.post-share { padding: clamp(32px, 4vw, 52px) 0; border-bottom: 1px solid var(--rule); }
.post-share__label {
  margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--muted);
}
.post-share__row { display: flex; gap: 10px; flex-wrap: wrap; }
.post-share__btn {
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 11px 18px; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); text-decoration: none;
  cursor: pointer; border-radius: 0;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.post-share__btn:hover { border-color: var(--brand); color: var(--brand); }
.post-share__btn.is-copied { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- Comments ------------------------------------------------------------ */
.post-comments { padding: clamp(40px, 5vw, 68px) 0; }
.post-comments__fallback {
  margin: 0; padding: clamp(22px, 3vw, 32px);
  border: 1px dashed var(--rule-strong); background: var(--surface-2);
  font-size: 16px; line-height: 1.6; color: var(--ink-3);
}

/* ---- Prev / next --------------------------------------------------------- */
.post-next { border-top: 1px solid var(--rule); }
.post-next__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px, 3vw, 44px); padding: clamp(36px, 5vw, 60px) var(--gutter);
}
.post-next__item { text-decoration: none; color: inherit; display: block; }
.post-next__item--fwd { text-align: right; }
.post-next__l {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.post-next__t {
  display: block; font-size: clamp(17px, 1.8vw, 22px); font-weight: 400;
  letter-spacing: -.022em; line-height: 1.22;
  transition: color var(--t-fast) var(--ease);
}
.post-next__item:hover .post-next__t { color: var(--brand); }

/* ---- Journal strip on the homepage --------------------------------------- */
.homeblog { padding: clamp(60px, 7.5vw, 104px) 0; }
.homeblog__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 44px);
}
.homeblog__title {
  margin: 0; font-size: clamp(27px, 3.5vw, 46px); font-weight: 300;
  letter-spacing: -.032em; line-height: 1.08;
}
.homeblog__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.6vw, 34px); }

@media (max-width: 900px) {
  .bloggrid, .homeblog__grid { grid-template-columns: 1fr; }
  .bloggrid .blogcard--lead .blogcard__art { aspect-ratio: 16 / 9; }
  .post-next__grid { grid-template-columns: 1fr; }
  .post-next__item--fwd { text-align: left; }
}
@media (max-width: 620px) { .post-hero { padding-top: 128px; } }

/* Footer address */
.foot-addr {
  margin: 18px 0 0; font-style: normal;
  font-size: 14.5px; line-height: 1.62; color: var(--muted);
}

/* ==========================================================================
   35. HERO FIELD
   The canvas sits at z-index 0 beneath `.hero-x__inner`, so pointer events
   over the headline and stats never reached it — the field only responded
   along the thin margins. Events are now listened for on the section and the
   canvas is explicitly transparent to them.
   A static CSS lattice sits underneath as the reduced-motion / no-JS state,
   so the hero is never actually blank.
   ========================================================================== */
.hero-x { position: relative; isolation: isolate; }
.hero-x__canvas { pointer-events: none; }

/* Static lattice — only visible when the canvas is not drawing */
.hero-x::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(89,86,233,.16) 1px, transparent 0);
  background-size: 34px 34px;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
/* `html.js` is set by motion.js; without it, or under reduced motion, show it */
html:not(.js) .hero-x::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-x::before { opacity: 1; }
}

/* ==========================================================================
   36. HERO WASH + SOFTENED FIELD
   A brand gradient starts at the very top of the document — behind the
   transparent header — and resolves to pure white just before the stats row
   begins. Where that row begins, measured as a share of hero height:

       375px  55.6%      1009px  61.0%
       753px  51.9%      1425px  62.5%      1665px  62.8%

   so the stop is 60% above 860px and 50% below it (the 2x2 stats grid is
   250px tall on phones, which pulls the row up proportionally). Tune the
   fade by changing `--wash-end` alone — every stop is a fraction of it, so
   the curve keeps its shape.

   Each stop is the same hue with only alpha moving; ending on transparent
   white instead would pick up a grey cast through the middle of the ramp.
   ========================================================================== */
.hero-x--wash {
  --wash-end: 60%;
  background-image: linear-gradient(
    to bottom,
    rgba(89, 86, 233, 0.130) 0%,
    rgba(89, 86, 233, 0.112) calc(var(--wash-end) * 0.22),
    rgba(89, 86, 233, 0.088) calc(var(--wash-end) * 0.44),
    rgba(89, 86, 233, 0.062) calc(var(--wash-end) * 0.62),
    rgba(89, 86, 233, 0.038) calc(var(--wash-end) * 0.78),
    rgba(89, 86, 233, 0.019) calc(var(--wash-end) * 0.89),
    rgba(89, 86, 233, 0.006) calc(var(--wash-end) * 0.96),
    rgba(89, 86, 233, 0.000) var(--wash-end)
  );
  background-repeat: no-repeat;
}
@media (max-width: 860px) { .hero-x--wash { --wash-end: 50%; } }

/* The dot field read as hard pixels against the wash. A 1.15px composite
   blur softens every dot and line in one pass — cheaper than blurring each
   dot in canvas — and the alphas in motion.js were pulled back so the
   pointer halo glows rather than darkens. */
.hero-x__canvas { filter: blur(1.15px); }
@media (prefers-reduced-motion: reduce) { .hero-x__canvas { filter: none; } }