/* Homepage only: the 3D stage and the story chapters. Loads after site.v20261109v4.css. */
.bar { position: fixed; inset: 0 0 auto 0; } /* floats over the 3D stage */

/* Lenis (smooth scroll): it drives the scroll itself, so the native smooth behaviour must step aside */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* 3D stage behind everything; chapters scroll over it */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.no-webgl .stage { display: none; }
.tags { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* a jump between far chapters fades through the page colour (home-scroll.js); the header stays */
body::after { content: ""; position: fixed; inset: 0; z-index: 10; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.is-cutting body::after { opacity: 1; transition-duration: 180ms; }

/* back to the top: an icon in the bottom-right corner, shown once the first screen is left (home.js) */
.totop {
  position: fixed; right: var(--margin); bottom: calc(var(--lift, 0px) + 24px); z-index: 19;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--white); color: var(--teal-ink); box-shadow: 0 0 0 1px rgba(17, 28, 38, 0.08), 0 4px 14px rgba(17, 28, 38, 0.12);
  transition: opacity 200ms ease, transform 240ms var(--ease-out), visibility 0s, background-color 180ms ease, color 180ms ease;
}
.js .totop:not(.is-shown) { opacity: 0; visibility: hidden; transform: translateY(8px); transition-delay: 0s, 0s, 200ms, 0s, 0s; }
.totop:focus-visible { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .totop:hover { background: var(--teal); color: var(--white); } }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } .js .totop:not(.is-shown) { transform: none; } }
@media (max-width: 1023px) { .totop { right: 12px; bottom: calc(var(--lift, 0px) + 12px); width: 44px; height: 44px; } }
.tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 var(--fs-small)/1 var(--font); color: var(--ink);
  padding: 8px 11px 8px 10px; background: var(--white); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 32, 43, 0.12), 0 4px 14px rgba(20, 32, 43, 0.08); /* labels float over the model */
  opacity: 0; transition: opacity 180ms ease; will-change: transform;
}
.tag.is-on { opacity: 1; }
.tag i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--teal); }
.tag--bad i { background: var(--red); }
.tag--warn i { background: #e08a2a; }
.tag--plain { background: none; box-shadow: none; padding: 0; color: var(--muted); }

/* ---------- chapters ---------- */
main { position: relative; z-index: 2; }
.ch { position: relative; min-height: 112svh; padding: 0 var(--margin); }
.ch[data-keys="2"] { min-height: 224svh; } /* two 112svh stops: the next chapter stays below the screen at the second one */
.panel { position: sticky; top: calc(var(--bar-h) + 8svh); width: min(46rem, 50vw); padding: 0 0 48px; }
/* chapter text sits on bare paper: on desktop main.js masks the 3D with a soft oval around the text block, and moves
   any label that would land on the text to its right */
.panel--wide { width: min(64rem, 100%); }

.step { margin: 0 0 12px; font-size: 1.1875rem; font-weight: 700; color: var(--teal); } /* logo teal as text: 19px bold */
.step span { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 6px; }
.ch .h2 { font-size: var(--fs-section); line-height: 1.02; letter-spacing: -0.035em; } /* a section of the story opens big */

.ch--hero { min-height: 100svh; }
.ch--hero .panel { position: relative; top: auto; width: min(38rem, 44vw); padding-top: calc(var(--bar-h) + 6svh); }
.hero__foot { position: absolute; left: var(--margin); right: var(--margin); top: calc(100svh - 120px); display: flex; justify-content: flex-end; }
.challenge { margin: 0; display: grid; gap: 4px; text-align: right; }
.challenge > span { color: var(--muted); font-size: var(--fs-small); }


/* trust: its own field so the plan does not run under it */
/* a full screen of its own, like every chapter; content centred below the bar */
.ch[data-k="clients"] { background: var(--paper-2); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--bar-h) + clamp(16px, 4svh, 40px)); padding-bottom: clamp(16px, 4svh, 40px); overflow: hidden; }
.ch[data-k="clients"] .panel { position: relative; top: auto; width: auto; padding: 0; display: grid; justify-items: center; text-align: center; }
.figures { margin: 0 0 clamp(28px, 6svh, 56px); display: flex; justify-content: center; }
.figures > div { display: flex; align-items: baseline; gap: 12px; padding: 0 48px; }
.figures > div + div { border-left: 1px solid rgba(17, 28, 38, 0.12); }
.figures dt { white-space: nowrap; font: 700 clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem)/1 var(--font); letter-spacing: -0.03em; color: var(--teal-on-tint); font-variant-numeric: tabular-nums; }
.figures dd { margin: 0; color: var(--ink-2); }
.trust__title { margin: 0; font: 600 var(--fs-head)/1.1 var(--font); letter-spacing: -0.025em; }
.pause { margin: 16px 0 0; min-height: 44px; padding: 0 18px; background: var(--white); color: var(--ink); border: 1px solid rgba(17, 28, 38, 0.14); border-radius: 8px; font: 400 var(--fs-small)/1 var(--font); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pause:hover { border-color: rgba(17, 28, 38, 0.32); } }
.clients { list-style: none; margin: 0; padding: 0; }
.client { display: grid; justify-items: center; align-content: center; gap: 18px; width: 296px; height: 164px; padding: 20px; background: var(--white); border: 1px solid rgba(17, 28, 38, 0.08); border-radius: 16px; }
.client img { height: 68px; width: auto; max-width: 210px; object-fit: contain; }
.client span { font-weight: 600; color: var(--ink-2); }
.clients--lead { margin-top: 28px; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 28px; }
/* the rest of the references scroll by; the edges fade so cards slide in and out instead of being cut */
.marquee { justify-self: stretch; margin: 28px calc(-1 * var(--margin)) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.clients--track { display: flex; width: max-content; }
.clients--track .client { margin-right: 28px; } /* a margin, not a gap, so half the doubled track is exactly one loop */
@media (prefers-reduced-motion: no-preference) {
  .js .clients--track { animation: marquee 110s linear infinite; }
  .js .marquee.is-paused .clients--track, .js .marquee:hover .clients--track, .js .marquee:focus-within .clients--track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pause { display: none; }
  .marquee { margin-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .clients--track { width: auto; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .clients--track .client { margin: 0; }
}

.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 8px; padding: 12px 16px; background: var(--paper-2); border-radius: 6px; transition: background-color 180ms ease; }
.steps li > span { grid-row: span 2; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.steps strong { font-weight: 600; }
.steps em { font-style: normal; color: var(--ink-2); }
.steps li.is-on { background: var(--teal-tint); }
.steps li.is-on > span, .steps li.is-on strong { color: var(--teal-ink); }

/* after the story */
.plain { position: relative; z-index: 2; background: var(--paper-2); padding: 120px var(--margin); }
.obs { max-width: 52rem; }

/* chapter text arrives once; nothing stays hidden without script */
@media (prefers-reduced-motion: no-preference) {
  /* starts before the chapter arrives and settles with the glide */
  .js .panel > * { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out); }
  .js .panel.is-in > * { opacity: 1; transform: none; }
  .js .panel.is-in > :nth-child(2) { transition-delay: 50ms; }
  .js .panel.is-in > :nth-child(3) { transition-delay: 100ms; }
  .js .panel.is-in > :nth-child(4) { transition-delay: 150ms; }
  .js .panel.is-in > :nth-child(5) { transition-delay: 200ms; }
  /* the first screen is there at once: its text is the largest paint, so it must not wait for a script */
  .js .ch--hero .panel > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- small screens: the 3D on top, each chapter's text riding at the foot of the screen ---------- */
@media (max-width: 1023px) {
  .ch { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 12px; min-height: 120svh; }
  .ch[data-keys="2"] { min-height: 200svh; }
  /* a card taller than the room under the bar (home.js): the chapter opens on the 3D, then the card scrolls by */
  .ch.is-tall { justify-content: flex-start; padding-top: calc(var(--bar-h) + 40svh); }
  .ch.is-tall .panel { position: relative; bottom: auto; }
  /* a label wider than a narrow phone wraps */
  .tag { width: max-content; max-width: calc(100vw - 24px); white-space: normal; line-height: 1.25; }
  .panel, .panel--wide {
    width: auto; top: auto; bottom: 12px; margin-top: 0; padding: 20px 20px 22px;
    background: rgba(241, 249, 251, 0.96); border-radius: 10px; /* a tone step, not a shadow, separates it from the white model */
  }
  .ch[data-k="clients"] { justify-content: center; min-height: 100svh; padding-top: calc(var(--bar-h) + 24px); padding-bottom: 24px; }
  .ch[data-k="clients"] .panel { background: none; padding: 0; }
  .panel .step, .panel .statement, .panel .link { color: var(--teal-on-tint); } /* teal text on the blue panel */
  .figures { margin-bottom: 36px; }
  .ch[data-k="clients"] .panel { grid-template-columns: minmax(0, 1fr); }
  .figures > div { display: grid; gap: 4px; padding: 0 14px; text-align: center; }
  .figures dt { font-size: 1.75rem; }
  .figures dd { font-size: var(--fs-small); }
  /* the three lead references stack as rows: logo on the left, figure beside it */
  .clients--lead { grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
  .clients--lead .client { width: auto; height: auto; min-height: 96px; grid-template-columns: 108px 1fr; justify-items: start; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; text-align: left; }
  .clients--lead .client img { height: 52px; max-width: 108px; justify-self: center; }
  .clients--lead .client span { font-size: var(--fs-small); } /* one line on a 390px phone */
  .clients--track .client { width: 220px; height: 132px; margin-right: 12px; gap: 12px; }
  .clients--track .client img { height: 48px; max-width: 170px; }
  /* the hero reads like every chapter: the 3D on top, the text pinned at the foot of the first screen */
  .ch--hero { justify-content: flex-end; min-height: 100svh; padding-bottom: 12px; }
  .ch--hero .panel { position: relative; bottom: auto; margin-top: 0; padding-top: 20px; width: auto; }
  .ch--hero .display { font-size: 2.125rem; }
  .ch--hero .button--lg { min-height: 52px; }
  .ch--hero .statement { margin-top: 10px; font-size: 1.25rem; font-weight: 700; line-height: 1.3; } /* 20px bold: large text, 3:1 */
  .hero__foot { position: static; justify-content: flex-start; padding: 12px 4px 0; }
  .challenge { text-align: left; }
  .lead { margin-top: 12px; }

  .kicker, .step { margin-bottom: 8px; }
  .points { margin-top: 12px; gap: 4px; }
  .actions { margin-top: 14px; gap: 8px 20px; }
  .steps { gap: 6px; margin-top: 14px; }
  .steps li { padding: 8px 12px; background: #ffffff; }
}
/* the 60-second challenge needs a bigger screen: phones (and phones held sideways) do not get its link */
@media (max-width: 767px), (max-height: 520px) and (pointer: coarse) {
  .hero__foot { display: none; }
}