/* =============================================================
   VEEDAY CONSULTANTS — clients.css
   The clients page: "the roster". Loaded after veeday.css and pages.css.
   ============================================================= */

.sec-head h2 { font: inherit; letter-spacing: inherit; }

/* ═════════ HERO: the roster ═════════ */
.roster {
  display: flex; flex-direction: column;
  min-height: min(100svh, 900px);
  padding-bottom: 0;
}
.roster__content { position: relative; z-index: 2; margin-top: auto; margin-bottom: auto; }
.roster .phero__title { max-width: 9.6em; font-size: clamp(40px, 5.6vw, 92px); }
.roster .phero__lede { max-width: 47ch; }

/* The stage holds the WebGL canvas. Without it, a drawn plan of the piece stands in. */
.roster__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; touch-action: pan-y; }
.roster__stage canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1.8s var(--ease); touch-action: pan-y; pointer-events: none;
}
.roster__stage.is-live canvas { opacity: 1; }
.roster__stage::before, .roster__stage::after {
  content: ''; position: absolute; left: 76.5%; top: 54%; border-radius: 50%;
  border: 1px solid rgba(250, 250, 248, .16); transform: translate(-50%, -50%) rotate(-2deg);
  transition: opacity 1.2s var(--ease);
}
.roster__stage::before { width: min(42vw, 640px); aspect-ratio: 4.6; }
.roster__stage::after { width: min(15vw, 220px); aspect-ratio: 4.6; margin-top: -4%; border-color: rgba(240, 85, 78, .7); }
.roster__stage.is-live::before, .roster__stage.is-live::after { opacity: 0; }
/* Still frame of the roster, only when the 3D will not appear: no JS / lite device / no WebGL / the
   import failed (all leave html without .roster-on), or .no-3d from the loader (safety timeout, context
   lost). It takes the place of the drawn rings and fades out like them if the 3D arrives late.
   Normal visitors never compute these rules, so the file is never requested. Wide stages: the camera
   fits the drum to the stage width, offset right (76.5%) and a little low (55%), as the still was shot. */
html:not(.roster-on) .roster__stage::before,
.roster__stage.no-3d::before {
  left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0;
  border: 0; border-radius: 0; transform: none;
  background: url("assets/stills/clients-hero-desktop.webp") no-repeat 76.5% 55% / 100% auto;
}
html:not(.roster-on) .roster__stage::after,
.roster__stage.no-3d::after { content: none; }

/* Keeps the headline readable where plates pass behind it */
.roster__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 16, 15, .95) 0%, rgba(18, 16, 15, .9) 36%, rgba(18, 16, 15, .55) 47%, rgba(18, 16, 15, 0) 60%),
    linear-gradient(0deg, rgba(18, 16, 15, .9) 0, rgba(18, 16, 15, 0) 190px);
}

/* Fact strip along the foot of the hero */
.roster__foot { position: relative; z-index: 2; padding-top: clamp(36px, 5vh, 64px); padding-bottom: clamp(22px, 3.5vh, 34px); }
.roster__facts { display: grid; grid-template-columns: .8fr 1.5fr 1.3fr; border-top: 1px solid var(--line); }
.roster__facts > div { padding: 20px 28px 4px 0; }
.roster__facts > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.roster__facts dt { font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.roster__facts dd { font-family: var(--serif); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.35; color: var(--paper); text-wrap: balance; }

/* ═════════ Section intro: a statement beside a short paragraph ═════════ */
.cl-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 110px); align-items: end; margin-bottom: clamp(40px, 5.5vw, 84px); }
.cl-statement { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 60px); line-height: 1.08; letter-spacing: -.02em; color: var(--fg); text-wrap: balance; max-width: 14em; }
.cl-statement em { font-style: italic; color: var(--red); }
.cl-intro__side p { max-width: 46ch; font-size: clamp(15.5px, 1.15vw, 17.5px); }
.cl-intro__side .cl-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--fg); min-height: 44px; }
.cl-more span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.cl-more:hover { color: var(--red); }

/* ═════════ Russian corporate partners: three presentation plates ═════════ */
.cl-russia { overflow: hidden; }
.cl-russia::before {
  content: ''; position: absolute; right: -14vw; top: -22vw; width: 62vw; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(200, 32, 26, .22); pointer-events: none;
}
.cl-russia::after {
  content: ''; position: absolute; right: -4vw; top: -12vw; width: 42vw; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, .08); pointer-events: none;
}
.cl-russia .wrap { position: relative; z-index: 1; }
.cl-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 34px); }
.cl-partner { perspective: 1100px; }
.cl-partner__plate {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10.4; padding: clamp(26px, 3.6vw, 58px);
  background: #fff; border-radius: 4px;
  box-shadow: 0 1px 0 rgba(18, 16, 15, .06), 0 34px 60px -44px rgba(58, 15, 12, .55);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.cl-partner__plate::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(18, 16, 15, .1); border-radius: 2px; pointer-events: none; }
.cl-partner__plate::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(60% 80% at var(--gx) var(--gy), rgba(232, 163, 61, .16), rgba(232, 163, 61, 0) 70%);
}
.cl-partner__plate img { width: 100%; height: 100%; object-fit: contain; transform: translateZ(26px); }
.cl-partner__plate i { position: absolute; left: 50%; bottom: 10px; width: 44px; height: 2px; margin-left: -22px; background: var(--red); }
.cl-partner.is-tilting .cl-partner__plate { transition-duration: .18s, .9s; box-shadow: 0 1px 0 rgba(18, 16, 15, .06), 0 54px 70px -40px rgba(58, 15, 12, .6); }
.cl-partner.is-tilting .cl-partner__plate::after { opacity: 1; }
.cl-partner figcaption { display: flex; flex-direction: column-reverse; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.cl-partner figcaption b { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.01em; color: var(--fg); }
.cl-partner figcaption span { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); white-space: nowrap; }

/* ═════════ Global partners: a ruled sheet of plates ═════════ */
.cl-wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.cl-wall li { position: relative; aspect-ratio: 16 / 10; background: #fff; perspective: 700px; }
.cl-wall li:hover { z-index: 2; }
.cl-tile {
  --rx: 0deg; --ry: 0deg;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 1.5vw, 24px) clamp(14px, 1.8vw, 30px);
  background: #fff;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.cl-tile img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cl-wall li:hover .cl-tile {
    transform: translateZ(0) scale(1.09) rotateX(var(--rx)) rotateY(var(--ry));
    box-shadow: 0 0 0 1px rgba(18, 16, 15, .1), 0 34px 54px -26px rgba(18, 16, 15, .5);
    transition-duration: .35s, .5s;
  }
}
/* rows arrive one after another */
.js .cl-wall li { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.js .cl-wall.in li { opacity: 1; transform: none; }
.js .cl-wall[data-reveal] { opacity: 1; transform: none; }
.cl-wall li:nth-child(6n + 2) { --d: .05s; } .cl-wall li:nth-child(6n + 3) { --d: .1s; } .cl-wall li:nth-child(6n + 4) { --d: .15s; }
.cl-wall li:nth-child(6n + 5) { --d: .2s; } .cl-wall li:nth-child(6n + 6) { --d: .25s; }

/* ═════════ Why they return ═════════ */
.cl-close { border-top: 1px solid var(--line); }
.cl-close__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.cl-close .cl-statement { font-size: clamp(30px, 4.3vw, 66px); max-width: 12em; }
.cl-close__side > p { max-width: 46ch; font-size: clamp(15.5px, 1.15vw, 17.5px); }
.cl-licence { margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cl-licence dt { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.cl-licence dd { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; color: var(--fg); }
.cl-close__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn--ink { --b-bg: var(--ink); --b-fg: var(--paper); --b-bd: var(--ink); }
.btn--line { --b-bd: rgba(17, 17, 17, .3); --b-fg: var(--ink); }
@media (hover: hover) {
  .btn--ink:hover { --b-bg: var(--red); --b-bd: var(--red); }
  .btn--line:hover { --b-bg: var(--ink); --b-fg: var(--paper); --b-bd: var(--ink); }
}

/* ═════════ Responsive ═════════ */
@media (max-width: 1180px) {
  .cl-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-wall li:nth-child(n) { --d: 0s; }
  .cl-wall li:nth-child(4n + 2) { --d: .06s; } .cl-wall li:nth-child(4n + 3) { --d: .12s; } .cl-wall li:nth-child(4n + 4) { --d: .18s; }
}
@media (max-width: 899px) {
  .roster { min-height: 0; }
  .roster__content { margin-top: 0; margin-bottom: 0; }
  /* the piece sits in its own band under the headline; the band only exists when 3D will run */
  .roster__stage { position: relative; inset: auto; display: none; height: clamp(250px, 74vw, 430px); margin-top: 6px; }
  .roster-on .roster__stage { display: block; }
  .roster__stage::before, .roster__stage::after { left: 50%; top: 56%; }
  .roster__stage::before { width: 88vw; }
  .roster__stage::after { width: 30vw; }
  .roster__veil { background: linear-gradient(0deg, rgba(18, 16, 15, .92) 0, rgba(18, 16, 15, 0) 150px); }
  .roster__foot { padding-top: 8px; }
  html:not(.roster-on) .roster__foot { padding-top: 44px; }
  .roster__facts { grid-template-columns: 1fr; }
  .roster__facts > div { padding: 16px 0; }
  .roster__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .cl-intro, .cl-close__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cl-trio { grid-template-columns: 1fr; max-width: 560px; gap: 34px; }
  .cl-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-wall li:nth-child(n) { --d: 0s; }
  .cl-licence dd { text-wrap: balance; }
  /* stacked CTA halves: flex-basis 0 in a column collapses each half to its padding and clips the copy */
  .split__half { flex: 0 0 auto; }
}
/* tablets: the three partners side by side again, and a four-across sheet */
@media (min-width: 600px) and (max-width: 899px) {
  .cl-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 18px; }
  .cl-partner__plate { padding: 22px; }
  .cl-partner figcaption span { white-space: normal; }
  .cl-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* landscape phones: the band must never be taller than the screen */
@media (max-width: 899px) and (max-height: 500px) {
  .roster__stage { height: clamp(220px, 70svh, 300px); }
  /* and the headline and both actions fit the first screen */
  .roster { padding-top: 92px; }
  .roster .phero__title { max-width: none; }
  .roster .phero__lede { max-width: 72ch; }
}
@media (max-width: 520px) {
  .cl-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* wider, shorter tiles: the logos stay the same size, the sheet is a screen shorter */
  .cl-wall li { aspect-ratio: 2 / 1; }
  .cl-tile { padding: 12px 16px; }
  .roster .phero__ctas .btn, .cl-close__ctas .btn { flex: 1 1 100%; padding-left: 16px; padding-right: 16px; }
  /* partner plates: a calmer landscape card so the three do not take three screens */
  .cl-trio { gap: 26px; }
  .cl-partner__plate { aspect-ratio: 2 / 1; padding: 24px 30px; }
  .cl-partner__plate img { transform: none; }
  .cl-partner figcaption { margin-top: 14px; padding-top: 12px; gap: 4px; }
  .cl-partner figcaption span { font-size: 11px; }
}
/* Still frame on narrow screens: the band under the headline stays (no shift when the 3D fails late)
   and holds the still. The live camera centres the drum and draws it about 116% of the band's width
   (or 2.09x its height on short bands); the desktop still is scaled so its drum matches that width
   and moved so the drum's centre (76.5% / 55% of the frame) lands at the band's centre.
   (--k: the drum's width per band height; 2.09 on touch / small screens, 1.554 with a mouse, as the camera does.) */
@media (max-width: 899px) {
  html:not(.roster-on) .roster__stage, .roster__stage.no-3d { display: block; overflow: hidden; }
  html:not(.roster-on) .roster__foot { padding-top: 8px; }
  html:not(.roster-on) .roster__stage::before,
  .roster__stage.no-3d::before {
    --sw: calc(min(116vw, clamp(250px, 74vw, 430px) * var(--k, 2.09)) / .42);
    left: calc(50% - var(--sw) * .765); top: calc(52% - var(--sw) / 1.6 * .55);
    width: var(--sw); height: calc(var(--sw) / 1.6);
    background-size: 100% 100%; background-position: 0 0;
  }
}
@media (max-width: 899px) and (max-height: 500px) {
  html:not(.roster-on) .roster__stage::before,
  .roster__stage.no-3d::before { --sw: calc(min(116vw, clamp(220px, 70svh, 300px) * var(--k, 2.09)) / .42); }
}
@media (max-width: 899px) and (min-width: 700px) and (pointer: fine) {
  html:not(.roster-on) .roster__stage::before,
  .roster__stage.no-3d::before { --k: 1.554; }
}
/* Portrait phones download only the phone still, shot at the phone band's own shape */
@media (max-width: 700px) and (orientation: portrait) {
  html:not(.roster-on) .roster__stage::before,
  .roster__stage.no-3d::before {
    left: 0; top: 0; width: 100%; height: 100%;
    background: url("assets/stills/clients-hero-phone.webp") no-repeat 50% 52% / 100% auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cl-partner__plate, .cl-tile, .cl-tile img, .roster__stage canvas { transition: none; }
  .cl-wall li:hover .cl-tile { transform: none; }
  .js .cl-wall li { opacity: 1; transform: none; transition: none; }
}