/* ==========================================================================
   THE MOTION SYSTEM — druff.co.za
   Seven sections. Everything here is transform/opacity only, everything
   holds still for prefers-reduced-motion, and nothing is blurred or
   distorted: the work is always shown sharp.
   ========================================================================== */

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

/* --- shared: a line that rises into its own clipping mask ----------------
   The mask has to sit lower than the line box or it shaves the descenders:
   at these tight line-heights (.98 on the statement) a g or p hangs about
   .11em below the box, and .06em of slack cut the tail off "pages". The line
   still starts fully out of sight because the offset carries the same .2em. */
.mline { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.mln {
  display: block;
  transform: translateY(calc(108% + .2em));
  transition: transform 1.05s var(--ease-out) var(--d, 0ms);
  will-change: transform;
}
.is-in .mln, .mrv.is-in { transform: none; }

/* --- shared: a plain element that lifts in ------------------------------- */
.mrv {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease var(--d, 0ms), transform 1s var(--ease-out) var(--d, 0ms);
}
.mrv.is-in { opacity: 1; transform: none; }

/* --- shared: buttons that lean toward the cursor ------------------------- */
.mag { will-change: transform; }
.mag > span { display: inline-block; will-change: transform; }


/* ==========================================================================
   1 — THE BOARD
   Eight pieces filling the screen; the copy sits in a well cut out of them.
   The board re-composes every four seconds — positions and sizes transition,
   staggered, so the whole arrangement travels rather than cutting.
   ========================================================================== */
.board {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 600px;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.bd-grid { position: absolute; inset: clamp(10px, 1.4vw, 22px); }

.bd-t {
  position: absolute; display: block; overflow: hidden;
  border-radius: 10px; background: #080E2E;
  /* The driver hands these in pixels: each piece takes the weight of its
     layout box at its own proportions, so it is neither cropped nor shrunk.
     Pieces overlap where the montage calls for it; they stack in the order
     they appear in the markup, which never changes, and the shadow gives the
     overlap depth. */
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .95);
  opacity: 0; transform: scale(.94) translateY(16px);
  transition:
    opacity .85s ease var(--ld, 0ms),
    transform 1s var(--ease-out) var(--ld, 0ms),
    left 1.5s var(--ease-io) var(--td, 0ms),
    top 1.5s var(--ease-io) var(--td, 0ms),
    width 1.5s var(--ease-io) var(--td, 0ms),
    height 1.5s var(--ease-io) var(--td, 0ms),
    filter .4s ease;
  will-change: left, top, width, height;
}
.board.is-in .bd-t { opacity: 1; transform: none; }
/* a resize re-solves the boxes; it should snap, not slide */
.bd-still .bd-t { transition: none !important; }
.bd-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-t:hover { filter: brightness(1.07); }
.bd-t:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.bd-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 32px 13px 11px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .84), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
.bd-t:hover .bd-cap, .bd-t:focus-visible .bd-cap { opacity: 1; transform: none; }
.bd-cap b { font-size: .76rem; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.bd-cap i {
  font-style: normal; font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--lime);
}

/* the well as it was in the preview — it sinks the pieces behind the copy
   without erasing them, so the board reads as bigger than the screen */
.bd-well {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 80% at 22% 50%,
      rgba(10, 15, 46, .99) 0%, rgba(10, 15, 46, .97) 46%, rgba(10, 15, 46, 0) 82%),
    linear-gradient(90deg, rgba(10, 15, 46, .96) 0%, rgba(10, 15, 46, .7) 34%,
      rgba(10, 15, 46, 0) 56%);
}

.bd-in {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x);
  max-width: min(58%, 940px);
}
.bd-eyebrow {
  margin: 0 0 clamp(16px, 2.4vh, 30px);
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime);
}
/* nowrap keeps the reveal honest; the slack stops a glyph like the G
   in WAITING being shaved off by the mask's own overflow */
.bd-h1 .mln { white-space: nowrap; }
.bd-h1 .mline { padding-right: .12em; margin-right: -.12em; }
.bd-h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6.4vw, 108px);
  line-height: .9; letter-spacing: -.05em; font-weight: 700;
  text-transform: uppercase; color: var(--cream);
}
.bd-sub {
  margin: clamp(20px, 3vh, 34px) 0 0;
  max-width: calc(clamp(2.4rem, 6.4vw, 108px) * 6.76);   /* the width of STOP WAITING above it */
  font-size: clamp(.95rem, 1.02vw, 1.1rem); line-height: 1.55;
  color: rgba(241, 237, 230, .84);
}
.bd-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(22px, 3.2vh, 36px); }
.bd-proof {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  list-style: none; margin: clamp(24px, 3.4vh, 40px) 0 0;
  padding: 16px 0 0; border-top: 1px solid rgba(241, 237, 230, .16);
}
.bd-proof li {
  position: relative; padding-left: 20px;   /* dot sits 14px from the text on both sides */
  font-size: .82rem; color: rgba(241, 237, 230, .78);
}
.bd-proof li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
}

@media (max-width: 900px) {
  /* the board stops being a column beside the copy and becomes a full-width
     band beneath it, with its own packings */
  .board {
    height: auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .bd-in {
    order: 1; height: auto; max-width: 100%;
    padding: clamp(30px, 6vh, 56px) var(--pad-x) clamp(26px, 4vh, 40px);
  }
  .bd-grid {
    order: 2; position: relative; inset: auto;
    height: clamp(300px, 46vh, 420px);
    margin: 0 clamp(10px, 2vw, 18px) clamp(14px, 2.4vw, 20px);
  }
  .bd-well { display: none; }
  .bd-cap { display: none; }
}
@media (max-width: 640px) {
  .bd-h1 { font-size: clamp(2.2rem, 10.4vw, 56px); }
  .bd-proof { gap: 6px 14px; }
  .bd-proof li { font-size: .76rem; }
  .bd-grid { height: clamp(260px, 40vh, 340px); }
}


/* ==========================================================================
   2 — THE STATEMENT
   ========================================================================== */
.rotsec {
  background: var(--cream); color: var(--ink);
  padding: clamp(80px, 14vh, 180px) var(--pad-x);
}
.rotsec > * { max-width: 1600px; margin-left: auto; margin-right: auto; }
.rot-h {
  margin: 0 auto; max-width: 1600px; padding: 0;
  font-size: clamp(2.2rem, 6.6vw, 116px);
  line-height: .98; letter-spacing: -.045em; font-weight: 700;
  text-transform: none;
}
.rotw { position: relative; z-index: 0; display: inline-block; color: var(--ink); white-space: nowrap; }
/* the rolling word sits on the site's lime marker; it starts a little below the
   line top so the descenders of the line above are never painted over */
.rotw::before {
  content: ''; position: absolute; z-index: -1;
  left: -.16em; right: -.16em; top: -.06em; bottom: -.14em;
  background: var(--lime);
}
.rot-h .mline:first-child { position: relative; z-index: 1; }
.rot-h .mline + .mline { margin-top: .1em; }
.rotw .rw-cur { visibility: hidden; }          /* holds the box before JS runs */
.rw {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  will-change: transform, opacity;
}
.rot-p {
  margin: clamp(26px, 4vh, 46px) 0 0 max(0px, calc((100% - 1600px) / 2)); max-width: 46em;
  font-size: clamp(1rem, 1.1vw, 1.16rem); line-height: 1.6; color: var(--ink-70);
}


/* ==========================================================================
   3 — THE WHEEL
   ========================================================================== */
.wheelsec {
  position: relative; background: var(--ink); color: var(--cream);
  padding: clamp(70px, 11vh, 130px) 0 0;
  overflow: hidden;
}
.wheel-head {
  position: relative; z-index: 2;
  padding: 0 var(--pad-x); max-width: 1600px; margin: 0 auto;
}
.wheel-head .eyebrow { color: var(--lime); }
.wheel-head h2 {
  margin: 14px 0 0;
  font-size: clamp(1.9rem, 4.2vw, 62px); line-height: 1.02;
  letter-spacing: -.04em; font-weight: 600; color: var(--cream);
}
/* The mask is the backstop, not the fix — the overlap itself was geometric and
   is dealt with on .wcard below. Anything that does reach the top edge is cut,
   with the last 90px fading, so a card sinks out of sight rather than stopping
   at a hard line. */
.wheel-stage {
  position: relative;
  height: clamp(400px, 44vw, 660px);
  margin-top: clamp(38px, 6vh, 74px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px);
          mask-image: linear-gradient(180deg, transparent 0, #000 90px);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}
.wheel {
  --R: clamp(1350px, 145vw, 2300px);
  position: absolute; left: 50%; top: calc(100% + var(--R) - clamp(210px, 23vw, 350px));
  width: 0; height: 0;
  transform: rotate(var(--spin, 0deg));
  will-change: transform;
}
/* The card must sit ON the hub before it is thrown out to the rim, because a
   card's rotation centre is its own middle. Centring it with translateY(-50%)
   looked equivalent but is not: that shift happens inside the already-rotated
   frame, so the hub was left half a card-height above each card's true centre
   and the whole ring rode eccentric — every card gained an extra h/2 of lift as
   the spin came round past 180deg, which is what pushed work up into the
   heading. Centring in layout (margin-top = -height/2, height being 3/4 of the
   width) makes the ring truly concentric: the arc no longer wobbles, and the
   top of it stays where the geometry says it should. */
.wcard {
  --cw: clamp(230px, 33vw, 540px);
  position: absolute; left: 0; top: 0;
  width: calc(var(--cw) * var(--s, 1));
  aspect-ratio: 4 / 3;
  margin-left: calc(var(--cw) * var(--s, 1) / -2);
  margin-top: calc(var(--cw) * var(--s, 1) * -0.375);
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1));
  border-radius: 14px; overflow: hidden;
  background: #080E2E;
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .8);
}
.wcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 44px 18px 15px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent);
}
.wc-cap b { font-size: .88rem; font-weight: 600; color: #fff; }
.wc-cap i {
  font-style: normal; font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--lime);
}
@media (max-width: 640px) { .wc-cap { display: none; } }


/* ==========================================================================
   4 — SERVICES AS A STICKY STACK
   ========================================================================== */
.stacksec { background: var(--grey); color: var(--ink); padding: clamp(70px, 11vh, 130px) var(--pad-x) clamp(60px, 9vh, 110px); }
.stack-head { max-width: 1600px; margin: 0 auto clamp(30px, 5vh, 58px); }
.stack-head h2 {
  margin: 14px 0 0; font-size: clamp(1.8rem, 4vw, 58px);
  line-height: 1.04; letter-spacing: -.04em; font-weight: 600;
}
.stack-list { --head: clamp(62px, 6.6vw, 86px); max-width: 1600px; margin: 0 auto; }

/* each card pins one header-height lower than the last, so every number and
   title stays on screen as the stack builds */
.scard { position: sticky; top: calc(var(--nav-h) + 14px + var(--i) * var(--head)); }
.scard + .scard { margin-top: clamp(26px, 4vh, 46px); }
.scard a {
  display: block;
  border-radius: 14px;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  box-shadow: 0 -1px 0 rgba(241, 237, 230, .16), 0 30px 60px -40px rgba(0, 0, 0, .7);
  transition: transform .5s var(--ease-out);
}
.scard a:hover { transform: translateY(-3px); }

/* the header band — this is the part that survives being covered */
.sc-head {
  display: flex; align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  height: var(--head);
  padding: 0 clamp(20px, 3vw, 44px);
  border-bottom: 1px solid rgba(241, 237, 230, .1);
}
.sc-n {
  font-size: clamp(.95rem, 1.4vw, 1.4rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--lime); flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.sc-head h3 {
  margin: 0; min-width: 0;
  font-size: clamp(1.25rem, 2.7vw, 40px);
  line-height: 1.05; letter-spacing: -.035em; font-weight: 600; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-arrow {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; margin-left: auto;
  display: grid; place-items: center;
  border: 1px solid rgba(241, 237, 230, .26); color: var(--cream);
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .5s var(--ease-out);
}
.sc-arrow svg { width: 16px; height: 16px; }
.scard a:hover .sc-arrow {
  background: var(--lime); border-color: var(--lime); color: var(--ink);
  transform: rotate(45deg);
}

/* the body below it */
.sc-body {
  display: block;   /* the thumbnail column was removed — copy runs full width */
  padding: clamp(20px, 2.6vw, 34px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 40px);
}
.sc-copy { display: block; min-width: 0; }
.sc-p {
  display: block; max-width: 58em;
  font-size: clamp(.94rem, 1vw, 1.05rem); line-height: 1.6;
  color: rgba(241, 237, 230, .74);
}
/* with the thumbnail column gone the sub-items spread across the card
   rather than leaving half of it empty */
.sc-sub {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
}
.sc-sub li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(241, 237, 230, .13);
  font-size: .92rem; font-weight: 500; color: rgba(241, 237, 230, .9);
}
.sc-sub li span {
  font-size: .7rem; letter-spacing: .06em; color: rgba(241, 237, 230, .42);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .stack-list { --head: 58px; }
  .sc-head { padding: 0 18px; }
  .sc-body { padding: 18px; }
  .sc-arrow { display: none; }
}


/* ==========================================================================
   5 — THE FEATURED CASES
   ========================================================================== */
.csplit {
  position: relative; background: #040A30; color: var(--cream);
  padding: clamp(70px, 11vh, 130px) var(--pad-x) clamp(50px, 8vh, 90px);
  overflow: hidden;
}
.cs-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  max-width: 1600px; margin: 0 auto clamp(20px, 3vh, 36px);
}
.cs-top .eyebrow { color: var(--lime); }
.cs-since { margin: 0; font-size: .92rem; color: rgba(241, 237, 230, .6); }

.cs-stage {
  position: relative; max-width: 1600px; margin: 0 auto;
  aspect-ratio: 16 / 8;
  cursor: none;
}
/* the client name, oversized, behind the bands */
.cs-type {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.cs-word {
  font-size: clamp(2.6rem, 10.5vw, 190px);
  line-height: .8; letter-spacing: -.06em; font-weight: 700; text-transform: uppercase;
  color: rgba(241, 237, 230, .96);
  white-space: nowrap;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  transform: translateX(var(--tx, 0));
  transition: transform 1.2s var(--ease-io);
  will-change: transform;
}
.cs-slides { position: absolute; inset: 0; z-index: 2; }
.cs-slides::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 14, .34), rgba(10, 9, 14, .5));
}
.cslide {
  position: absolute; inset: 0;
  display: block; pointer-events: none;
  opacity: 0;
}
.cslide.is-on, .cslide.is-off { opacity: 1; }
.cslide.is-on { pointer-events: auto; z-index: 3; }
.cslide.is-off { z-index: 2; }

/* three vertical columns, together making one image; they travel up and
   down in opposite directions, so the picture splits as it changes */
.cband {
  position: absolute; top: 0; bottom: 0; width: 33.34%;
  left: calc(var(--b) * 33.33%);
  background-size: 300% 100%;
  background-position: calc(var(--b) * 50%) center;
  background-repeat: no-repeat;
  transform: translateY(108%);
  transition: transform 1.1s var(--ease-io);
  transition-delay: calc(var(--b) * 120ms);
}
.cband:nth-child(2) { transform: translateY(-108%); }
.cslide.is-on .cband { transform: none; }
.cslide.is-off .cband { transform: translateY(-106%); }
.cslide.is-off .cband:nth-child(2) { transform: translateY(106%); }

.cs-cursor {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: clamp(96px, 9vw, 132px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(241, 237, 230, .8);
  background: rgba(10, 15, 46, .3);
  backdrop-filter: blur(2px);
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.55);
  transition: opacity .3s ease, transform .5s var(--ease-out);
}
.cs-cursor i {
  font-style: normal; font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cream);
}
.cs-stage.is-hover .cs-cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) {
  .cs-stage { cursor: pointer; }
  .cs-cursor { display: none; }
}

.cs-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  max-width: 1600px; margin: 22px auto 0;
}
.cs-meta { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; min-width: 0; }
.cs-name { font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; }
.cs-tags, .cs-yrs { font-size: .84rem; color: rgba(241, 237, 230, .58); }
.cs-yrs { color: var(--lime); }
.cs-meta > span { display: inline-block; }
.cs-meta.swap > span { animation: cs-up .5s var(--ease-out) both; }
.cs-meta.swap > span:nth-child(2) { animation-delay: .06s; }
.cs-meta.swap > span:nth-child(3) { animation-delay: .12s; }
@keyframes cs-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.cs-nav { display: flex; gap: 8px; }
.cdot {
  width: 46px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: none; color: rgba(241, 237, 230, .45);
  font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  position: relative;
  transition: color .3s ease;
}
.cdot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(241, 237, 230, .18);
}
.cdot::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; z-index: 1;
  width: 100%; background: var(--lime);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.cdot.is-on { color: var(--cream); }
.cdot:hover { color: var(--cream); }
.cdot:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 780px) { .cs-stage { aspect-ratio: 4 / 3; } }


/* ==========================================================================
   6 — THE INDEX
   ========================================================================== */
.wlist { background: var(--cream); color: var(--ink); padding: clamp(70px, 11vh, 130px) var(--pad-x); }
.wl-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  max-width: 1600px; margin: 0 auto clamp(30px, 4.6vh, 54px);
}
.wl-head h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 3.6vw, 52px); line-height: 1.04;
  letter-spacing: -.04em; font-weight: 600;
}
.wl-head .cta-underline { margin-top: 4px; }
.wl-rows { list-style: none; margin: 0 auto; padding: 0; max-width: 1600px; }
.wl-row + .wl-row > a { border-top: 1px solid rgba(10, 15, 46, .13); }

/* the meta column keeps every client name starting on the same line down the
   page; the gutter it leaves is where the thumbnail arrives */
.wl-row > a {
  display: grid;
  grid-template-columns: minmax(140px, 22%) minmax(0, 1fr) clamp(150px, 13%, 215px) auto 40px;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  min-height: clamp(62px, 5.8vw, 88px);
  padding: 0 clamp(10px, 1.6vw, 22px);
  border-radius: 14px;
  color: var(--ink);
  transition: min-height .5s var(--ease-out), background .4s ease,
              color .4s ease, padding .45s var(--ease-out);
}
.wl-meta {
  display: flex; align-items: baseline; gap: 12px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(10, 15, 46, .46);
  transition: color .4s ease;
}
.wl-meta i { font-style: normal; color: rgba(10, 15, 46, .3); transition: color .4s ease; }
.wl-meta em { font-style: normal; }
.wl-mid { display: flex; align-items: center; gap: 0; min-width: 0; }
.wl-mid .wl-name { min-width: 0; }
.wl-thumb {
  display: block; flex: 0 0 auto;
  width: 0; aspect-ratio: 3 / 2;
  border-radius: 7px; overflow: hidden;
  opacity: 0;
  transition: width .5s var(--ease-out), opacity .35s ease, margin .5s var(--ease-out);
}
.wl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-name {
  font-size: clamp(1.25rem, 2.7vw, 42px); line-height: 1;
  letter-spacing: -.038em; font-weight: 700; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  transition: color .4s ease;
}
/* the disciplines fill the right of the row, so it is never half-empty */
.wl-tags {
  justify-self: end; text-align: right;
  font-size: .8rem; color: rgba(10, 15, 46, .44);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .4s ease;
}
.wl-pill {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  height: 28px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0; padding: 0;
  transition: max-width .5s var(--ease-out), opacity .35s ease,
              padding .5s var(--ease-out);
}
.wl-ico {
  width: 34px; height: 34px; border-radius: 50%; justify-self: end;
  display: grid; place-items: center;
  color: rgba(10, 15, 46, .42);
  transition: color .4s ease, transform .5s var(--ease-out);
}
.wl-ico svg { width: 16px; height: 16px; }

/* the open row */
.wl-row > a:hover, .wl-row > a:focus-visible {
  min-height: clamp(104px, 10vw, 156px);
  background: var(--ink); color: var(--cream);
  padding-left: clamp(14px, 2vw, 26px); padding-right: clamp(14px, 2vw, 26px);
  border-top-color: transparent;
}
.wl-row > a:hover .wl-meta, .wl-row > a:focus-visible .wl-meta { color: rgba(241, 237, 230, .6); }
.wl-row > a:hover .wl-meta i, .wl-row > a:focus-visible .wl-meta i { color: var(--lime); }
.wl-row > a:hover .wl-name, .wl-row > a:focus-visible .wl-name { color: var(--cream); }
.wl-row > a:hover .wl-tags, .wl-row > a:focus-visible .wl-tags { color: var(--lime); }
.wl-row > a:hover .wl-thumb, .wl-row > a:focus-visible .wl-thumb {
  width: clamp(110px, 11vw, 182px); opacity: 1;
  margin-left: clamp(-152px, -12vw, -70px); margin-right: clamp(14px, 1.8vw, 26px);
}
.wl-row > a:hover .wl-pill, .wl-row > a:focus-visible .wl-pill {
  max-width: 150px; opacity: 1; padding: 0 14px;
}
.wl-row > a:hover .wl-ico, .wl-row > a:focus-visible .wl-ico {
  color: var(--lime); transform: rotate(45deg);
}

/* below this the disciplines drop out, so the row goes back to four tracks
   and the long client names truncate rather than squeezing the pill */
@media (max-width: 1400px) {
  .wl-tags { display: none; }
  .wl-row > a { grid-template-columns: minmax(140px, 26%) minmax(0, 1fr) auto 40px; }
  .wl-name { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 900px) {
  .wl-row > a {
    grid-template-columns: minmax(0, 1fr) 32px;
    row-gap: 4px; padding: 15px 10px; min-height: 0; border-radius: 10px;
  }
  .wl-meta { grid-column: 1; }
  .wl-mid { grid-column: 1; }
  .wl-ico { grid-row: 1 / span 2; grid-column: 2; }
  .wl-row > a:hover { min-height: 0; }
  .wl-row > a:hover .wl-thumb { width: 82px; margin-left: 0; margin-right: 14px; }
  .wl-pill { display: none; }
  .wl-name { font-size: clamp(1.15rem, 5.4vw, 1.6rem); }
}


/* ==========================================================================
   7 — THE CLOSER
   ========================================================================== */
.collab {
  position: relative; overflow: hidden;
  background: var(--white); color: var(--ink);
  padding: clamp(90px, 17vh, 210px) var(--pad-x);
  text-align: center;
  isolation: isolate;
}
/* the same bloom, inverted: a faint lime wash on white rather than a glow
   on ink */
.cb-glow {
  position: absolute; z-index: 0; left: 50%; top: 34%;
  width: min(120vw, 1500px); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(200, 255, 0, .20) 0%, rgba(200, 255, 0, .06) 42%, transparent 74%);
  pointer-events: none;
}
.collab > *:not(.cb-glow) { position: relative; z-index: 1; }
.cb-eye {
  display: inline-block;
  margin: 0 0 clamp(20px, 3vh, 34px);
  padding: 5px 12px 4px;
  background: var(--lime); color: var(--ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
/* the two lines are scrubbed apart and back together by scroll position,
   so scrolling up reverses the move rather than replaying it */
.cb-l {
  display: block;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.cb-h {
  margin: 0;
  font-size: clamp(2.8rem, 11vw, 190px);
  line-height: .92; letter-spacing: -.05em; font-weight: 300;
  color: var(--ink);
}
.cb-p {
  margin: clamp(26px, 4vh, 44px) auto 0; max-width: 40em;
  font-size: clamp(1rem, 1.1vw, 1.14rem); line-height: 1.6;
  color: var(--ink-70);
}
.cb-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(26px, 4vh, 42px); }
/* the outline button needs the light-ground treatment */
.collab .btn-line { color: var(--ink); border-color: rgba(10, 15, 46, .28); }
.collab .btn-line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.collab .btn-ink { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.collab .btn-ink:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }


/* ==========================================================================
   REDUCED MOTION — everything lands, nothing travels
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mln, .mrv { transform: none !important; opacity: 1 !important; transition: none !important; }
  .dh-run { animation: none !important; }
  .kl-s, .cband, .cs-word { transition: none !important; }
  .wheel { transform: none !important; }
  .cs-cursor { display: none; }
  .scard { position: static; }
  .bd-t { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   THE MARKER — a lime block behind a phrase, the way a highlighter works
   ========================================================================== */
/* An inline background paints the full font content box, which at these tight
   heading line-heights reaches ~8px into the line above and swallows its
   descenders — the g in "Everything". Painting the block as a gradient lets it
   start below that line instead, without loosening the type. */
.mk {
  color: var(--ink);
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position: 0 .18em;
  background-size: 100% calc(100% - .18em);
  padding: 0 .14em .04em; margin: 0 -.04em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.on-dark .mk, .waiting .mk, .guard .mk, .collab .mk { color: var(--ink); }


/* ==========================================================================
   THE HONEST ANSWER — what a hire actually costs
   Two bars on one scale. Both grow from zero when the section arrives and the
   totals count with them; every segment is direct-labelled in the key, so
   nothing is carried by colour alone.
   ========================================================================== */
.hc {
  max-width: 1600px; margin: clamp(40px, 7vh, 84px) auto 0; padding: 0;
}
.hc-row {
  display: grid;
  grid-template-columns: minmax(190px, 22%) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}
.hc-lab b { display: block; font-size: clamp(1rem, 1.3vw, 1.22rem); font-weight: 600;
            letter-spacing: -.02em; color: var(--ink); }
.hc-lab em { display: block; margin-top: 3px; font-style: normal;
             font-size: .82rem; color: var(--ink-70); }
.hc-bar {
  display: flex; gap: 2px;                    /* the 2px surface gap between fills */
  height: clamp(38px, 4.4vw, 58px);
  align-items: stretch;
}
.hc-seg {
  display: block; width: var(--w); background: var(--c);
  /* scrubbed by scroll, so no transition: the value is the position */
  transform: scaleX(var(--g, 0)); transform-origin: left center;
  transition: filter .25s ease;
}
.hc-seg:first-child { border-radius: 4px 0 0 4px; }
.hc-seg:last-child  { border-radius: 0 4px 4px 0; }
.hc-bar > .hc-seg:only-child { border-radius: 4px; }
.hc-tot { text-align: right; white-space: nowrap; }
.hc-tot b { display: block; font-size: clamp(1.3rem, 2.4vw, 2.1rem); font-weight: 700;
            letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hc-tot em { font-style: normal; font-size: .78rem; color: var(--ink-70); }

.hc-key {
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2.4vw, 34px);
  list-style: none; margin: 16px 0 clamp(34px, 5vh, 56px);
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.hc-key li { display: flex; align-items: center; gap: 9px; font-size: .86rem; }
.hc-key i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.hc-key .k-l { color: var(--ink-70); }
.hc-key .k-v { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

.hc-inc {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px clamp(18px, 2.4vw, 40px);
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.hc-inc li {
  position: relative; padding-left: 20px;
  font-size: .88rem; color: var(--ink-70);
}
.hc-note { margin: 18px 0 0; font-size: .8rem; color: var(--ink-55); }
.hc-inc li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--deep-lime);
}

/* hovering a segment lifts it and dims its neighbours, so the key row it
   belongs to is easy to find */
.hc-bar:hover .hc-seg { filter: saturate(.6) opacity(.55); }
.hc-bar .hc-seg:hover { filter: none; }

@media (max-width: 980px) { .hc-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) {
  .hc-inc { grid-template-columns: 1fr; }
  .hc-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .hc-lab { grid-column: 1; }
  .hc-tot { grid-column: 2; grid-row: 1; align-self: start; }
  .hc-bar { grid-column: 1 / -1; height: 34px; }
  .hc-key { gap: 8px 18px; }
  .hc-key li { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-seg { transform: scaleX(1) !important; }
}


/* --- the comparison table arrives a row at a time ----------------------- */
.cmp-wrap { position: relative; }
.cmp-wrap thead tr, .cmp-wrap tbody tr {
  opacity: 0;
  transform: translate3d(-28px, 0, 0);
  transition: opacity .55s ease var(--r, 0ms),
              transform .75s var(--ease-out) var(--r, 0ms);
}
.cmp-wrap.is-rows thead tr, .cmp-wrap.is-rows tbody tr {
  opacity: 1; transform: none;
}
/* the Druff column fills down as the rows land */
.cmp-wrap .cmp { position: relative; }
.cmp-wrap::after {
  content: ''; position: absolute; z-index: 0;
  right: 0; top: 0; width: var(--druff-w, 0px); height: 100%;
  background: var(--ink);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.15s var(--ease-io) .1s;
  pointer-events: none; border-radius: 0 12px 12px 0;
}
.cmp-wrap.is-rows::after { transform: scaleY(1); }
.cmp-wrap .cmp { z-index: 1; }
/* once the table scrolls sideways the wrapper edge is no longer the column edge */
@media (max-width: 900px) { .cmp-wrap::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cmp-wrap thead tr, .cmp-wrap tbody tr {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .cmp-wrap::after { display: none; }
}


/* ==========================================================================
   HOW WE WORK — the five steps light up as the rail runs through them
   ========================================================================== */
.p-steps { position: relative; }
.p-rail {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(10, 15, 46, .12);
  /* the token is far taller than the rail, so this cannot clip */
  overflow: visible;
}
.p-rail i {
  display: block; height: 100%; background: var(--lime);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}
/* one brief, travelling. It rides the rail and lights each station as it
   arrives, so the section shows the thing it is describing rather than
   five features sitting in a row. */
.p-tok {
  position: absolute; top: 50%; left: calc(var(--p, 0) * 100%);
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 6px rgba(200, 255, 0, .22);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s ease;
}
.p-tok::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
}
.p-steps.is-live .p-tok { opacity: 1; }
.p-step {
  transition: opacity .5s ease;
  outline: none;
}
.p-step .pn { transition: color .4s ease; }
.p-step h3 { transition: color .4s ease; }
.p-step p { transition: color .4s ease; }
.p-step .p-ico {
  transition: background .45s var(--ease-out), border-color .45s ease,
              color .45s ease, transform .5s var(--ease-out);
}
/* the resting state is quiet, so the lit one reads */
.p-steps.is-live .p-step { opacity: .48; }
.p-steps.is-live .p-step.is-on { opacity: 1; }
.p-step.is-on .pn { color: var(--ink); font-weight: 700; }
.p-step.is-on .p-ico {
  background: var(--lime); border-color: var(--lime); color: var(--ink);
  transform: scale(1.08);
}
/* pointing at a step takes over from the scroll */
.p-steps.is-live .p-step:hover,
.p-steps.is-live .p-step:focus-visible { opacity: 1; }
.p-step:hover .p-ico, .p-step:focus-visible .p-ico {
  background: var(--ink); border-color: var(--ink); color: var(--lime);
  transform: scale(1.12) translateY(-2px);
}
.p-step:focus-visible { outline: 2px solid var(--lime); outline-offset: 8px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .p-steps.is-live .p-step { opacity: 1; }
  .p-step { transform: none !important; }
  .p-rail i { transform: scaleX(1); }
  .p-tok { left: 100%; }
  .p-step .p-ico, .p-step { transition: none !important; }
}