/* Every page, matched to baked.design: Inter 15/22 with ss01 + cv11, a
   576px left-aligned column, pill nav and footer, full-band images. */

:root {
  --bg: #fff;
  --ink: #111;
  --muted: #1119;
  --faint: #1113;
  --hair: #11111114;
  --line: #11111180;
  --img-edge: rgb(0 0 0 / .1);
  --surface: #f4f4f2;
  --danger: #c2261b;
  --accent-text: #c8186f;
  --measure: 576px;
  --fs-s: 13px; --lh-s: 18px;
  --fs-m: 15px; --lh-m: 22px;
  --pad: 24px;
  --band: calc(100cqw - 48px);
  --edge: calc((100cqw - var(--band)) / 2);
  --bshift: min(0px, calc(var(--edge) - var(--pad)));
  --r-img: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (width <= 520px) {
  :root { --r-img: 6px; --band: calc(100cqw - 32px); --pad: 16px; }
}
@media (hover: hover) and (width >= 1400px) {
  :root:has(main.case) { --band: calc(100cqw - 224px); }
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  scroll-padding-top: calc(max(6px, env(safe-area-inset-top)) + 44px);
}
body {
  color: var(--ink);
  font: 400 var(--fs-m)/var(--lh-m) InterVariable, Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: -.006em;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  container-type: inline-size;
  overflow-x: clip;
}
p { margin: 0 0 12px; }
h1, h2, h3 { font-size: var(--fs-m); line-height: var(--lh-m); font-weight: 400; text-wrap: balance; }
b, strong { font-weight: 500; }
main p, main li { text-wrap: pretty; }
main ul { list-style-type: disc; }
main ul > li::marker { color: var(--muted); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.sr-only, .vh, .sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
a {
  color: inherit;
  text-decoration: underline; text-decoration-color: var(--faint);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s;
}
a:hover { text-decoration-color: var(--ink); }

.col {
  max-width: var(--measure);
  padding: 56px max(var(--pad), env(safe-area-inset-right, 0px)) 48px max(var(--pad), env(safe-area-inset-left, 0px));
  margin-left: max(0px, calc(var(--edge) - var(--pad)));
  margin-right: auto;
}
@media (width <= 520px) { .col { padding-top: 32px; } }
.lede { color: var(--muted); }
h2.label { font: inherit; margin: 0; }

/* On wide screens a section is three columns under a hairline:
   label, content, and a quote */
.grow { display: grid; gap: 12px; }
@media (width >= 1100px) {
  .grow {
    position: relative; left: var(--bshift); width: var(--band);
    grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0 16px;
    border-top: 1px solid var(--hair); padding-top: 16px;
  }
  .grow > .gwide { grid-column: 2 / -1; }
  /* About has no quotes, so its sections split into two halves */
  .about .grow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── Buttons ───────── */
.pill, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 0; border-radius: 8px;
  font: inherit; font-size: var(--fs-m); line-height: var(--lh-m); font-weight: 400;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease-out, color .15s ease-out, scale .15s ease-out;
}
.pill { color: #fff; background: #111; }
.pill:hover { color: #fff; background: #2b2b2b; }
.btn { color: #111; background: #efefef; }
.btn:hover { color: #111; background: #e4e4e4; }
:is(.pill, .btn):active { scale: .96; }
:is(.pill, .btn):focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* ───────── Nav ───────── */
.wh-nav {
  position: fixed; left: 6px; right: 6px; top: max(6px, env(safe-area-inset-top)); z-index: 45;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  pointer-events: none;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.wh-nav[data-state=away] {
  opacity: 0; visibility: hidden; translate: 0 -12px;
  transition: opacity .2s ease-in, translate .2s ease-in, visibility 0s .2s;
}
@media (width <= 640px) {
  body:has([data-world]) .wh-nav[data-state=top] { opacity: 0; visibility: hidden; translate: 0 -12px; }
}
.wh-links { display: flex; gap: 2px; }
.np {
  position: relative; pointer-events: auto;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 10px; border-radius: 8px;
  background: #efefef; color: #111;
  font-size: var(--fs-m); line-height: var(--lh-m);
  white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease-out, box-shadow .15s ease-out, scale .15s ease-out;
}
.np::after { content: ""; position: absolute; inset: -8px 0 0; }
.np:hover { color: #111; background: #e4e4e4; }
.np:active { scale: .96; }
.np:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.np[aria-current=page] { background: #e4e4e4; font-weight: 500; }
.np-go { color: #fff; background: #111; }
.np-go:hover { color: #fff; background: #2b2b2b; }
.wh-nav[data-state=stuck] .np:not(.np-go) { box-shadow: 0 0 0 1px #1111110f, 0 6px 16px -10px #11111159; }
@media (width <= 520px) { body:has(> .wh-nav):not(:has([data-world])) { padding-top: 32px; } }
@media (width <= 640px) { .wh-links .np-more { display: none; } }
@media (width <= 360px) { .wh-links .np:not(.np-go) { display: none; } }

.skip {
  position: fixed; left: 6px; top: max(6px, env(safe-area-inset-top)); z-index: 60;
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px;
  background: #111; color: #fff; text-decoration: none; translate: 0 -200%;
}
.skip:focus { translate: none; outline: 2px solid #111; outline-offset: 2px; }

/* ───────── Floating call button ───────── */
.wh-float {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center;
  height: 48px; padding: 0 28px; border-radius: 999px;
  background: #111; color: #fff;
  font-size: var(--fs-m); line-height: var(--lh-m); font-weight: 500; text-decoration: none;
  opacity: 0; pointer-events: none; translate: -50% 16px;
  transition: opacity .2s ease-in, translate .2s ease-in, background-color .15s ease-out, scale .15s ease-out;
}
.wh-float.on {
  opacity: 1; pointer-events: auto; translate: -50%;
  transition: opacity .3s var(--ease), translate .3s var(--ease), background-color .15s ease-out, scale .15s ease-out;
}
.wh-float.on.foot { opacity: 0; pointer-events: none; translate: -50% 16px; transition: opacity .2s ease-in, translate .2s ease-in; }
.wh-float.home {
  justify-content: center; padding: 0; font-weight: 400; translate: -50%;
  transform-origin: 50% 100%;
  transition: background-color .15s ease-out, opacity .2s ease-out;
}
.wh-float.home:not(.on) { opacity: 0; pointer-events: none; transition: none; }
.wh-float.home.on.foot { opacity: 0; translate: -50%; }
.wh-float:hover { color: #fff; background: #2b2b2b; }
.wh-float:active { scale: .96; }
.wh-float:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* ───────── Footer ───────── */
.footnav {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 48px; padding: 32px 0 40px;
}
.col .footnav { width: var(--band); max-width: none; margin-left: var(--bshift); }
.footnav ul { display: flex; flex-wrap: wrap; gap: 8px 2px; list-style: none; }
.fp {
  all: unset; box-sizing: border-box; position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border-radius: 8px;
  background: #efefef; color: #111;
  font-size: var(--fs-m); line-height: var(--lh-m);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease-out, scale .15s ease-out;
}
.fp::after { content: ""; position: absolute; inset: -4px 0; }
.fp:hover { color: #111; background: #e4e4e4; }
.fp:active { scale: .96; }
.fp:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.more svg { width: 12px; height: 12px; color: var(--muted); transform: rotate(90deg); transition: transform .2s ease-out; }
.more[aria-expanded=true] { background: #e4e4e4; }
.more[aria-expanded=true] svg { transform: rotate(-90deg); }
.scrap[hidden] { display: none; }
.scrap:not([hidden]) { animation: scrapIn .2s ease-out; }
@keyframes scrapIn { from { opacity: 0; translate: 0 -4px; } }

/* ───────── Quotes, as baked sets them ───────── */
.qc { max-width: var(--measure); margin: 0; padding: 20px; border-radius: 8px; background: var(--surface); }
.qc blockquote { margin: 0 0 12px; text-wrap: pretty; }
.qc figcaption { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); }
.qc figcaption b { color: var(--ink); font-weight: 500; }
.cq { margin: 0; }
.cq blockquote { margin: 0 0 10px; }
.cq figcaption { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.cq figcaption b { color: var(--ink); font-weight: 500; }
.qc .av, .cq .av { width: 24px; height: 24px; }
/* Rotating testimonials: every card in one grid cell, so the spot keeps the
   tallest card's height and nothing below jumps when they change */
.qrot { display: grid; align-self: start; max-width: var(--measure); }
.qrot > .qc { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.qrot > .qc.on { opacity: 1; visibility: visible; transition: opacity .6s ease .15s, visibility 0s; }
.qsoft { color: var(--muted); }
.qsoft .qh { color: var(--ink); font-weight: inherit; }

/* ───────── Home ───────── */
.wh { color: #111; background: #fff; }
.wh-hero { position: relative; height: 240svh; }
.wh-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.wh-world {
  position: absolute; inset: 0;
  perspective: 1100px; perspective-origin: 50%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.wh-world.grab { cursor: grabbing; }
.wc {
  position: absolute; top: 50%; left: 50%;
  visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; border-radius: 8px; background: #f8f8f7;
  cursor: grab; -webkit-user-drag: none;
}
.wc img, .wc video { display: block; max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 3px; pointer-events: none; transition: transform .3s var(--ease); }
.wc:hover img, .wc:hover video { transform: scale(1.04); }
.wh-chip {
  position: fixed; top: 0; left: 0; z-index: 20;
  padding: 4px 10px; border-radius: 999px;
  background: #111; color: #fff; font-size: var(--fs-s); line-height: var(--lh-s); white-space: nowrap;
  pointer-events: none; opacity: 0; scale: .96;
  transition: opacity .15s ease-out, scale .15s ease-out;
}
.wh-chip.on { opacity: 1; scale: 1; }
.wh-center {
  position: absolute; top: calc(50% - 90px); left: 50%; z-index: 5;
  width: min(360px, 100% - 48px);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
}
.wh-mark { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
.wh-lead { margin: 0; font-size: var(--fs-m); line-height: var(--lh-m); font-weight: 400; }
.wh-now { color: var(--muted); }
.wh-book {
  position: absolute; top: 0; left: 50%; z-index: 7;
  display: flex; justify-content: center; align-items: center;
  width: 168px; height: 56px; border-radius: 999px;
  background: #111; color: #fff; text-decoration: none;
  box-shadow: 0 14px 34px -14px #1111118c;
  opacity: 0;
  transition: background-color .15s ease-out, scale .15s ease-out;
}
.wh-book:hover { color: #fff; background: #2b2b2b; }
.wh-book:active { scale: .97; }
.wh-cases {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 6;
  height: 122px; opacity: 0; cursor: grab; touch-action: pan-y;
  perspective: 1100px; perspective-origin: 50%;
}
.cc {
  position: absolute; top: 0; left: 0;
  display: flex; justify-content: center; align-items: center;
  width: 219px; height: 122px; border-radius: 6px;
  background: #f5f5f5; color: var(--muted); text-decoration: none;
  will-change: transform; -webkit-user-drag: none;
}
.cc svg { color: #11111173; pointer-events: none; }
.cc .mk { display: inline-flex; align-items: center; gap: 6px; color: #11111173; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -.01em; }
.cc .mk svg { flex: none; color: inherit; }
.cc .lgi { display: block; object-fit: contain; filter: brightness(0); opacity: .45; pointer-events: none; }  /* same grey as the vector logos */
.cc > :first-child { transform: scaleX(var(--sx, 1)); }  /* set per frame by home.js */
.cc .nm { color: #11111173; font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: -.02em; }
.wh-hint {
  position: absolute; left: 50%; bottom: 24px; z-index: 6;
  margin: 0; padding: 8px 14px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px #11111114;
  color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translate(-50%);
  transition: opacity .3s ease-out;
}
.coarse { display: none; }
@media (pointer: coarse) { .coarse { display: inline; } .fine { display: none; } }
.wh-pause {
  position: fixed; left: 24px; bottom: 24px; z-index: 41;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border: 0; border-radius: 8px;
  background: #efefef; color: #111; font: inherit; font-size: var(--fs-s); line-height: var(--lh-s);
  cursor: pointer;
  transition: opacity .3s var(--ease), visibility, background-color .15s ease-out, scale .15s ease-out;
}
.wh-pause:hover { background: #e4e4e4; }
.wh-pause:active { scale: .96; }
.wh-pause .ic { display: inline-flex; }
.wh-pause .ic-play, .wh-pause[data-paused="1"] .ic-pause { display: none; }
.wh-pause[data-paused="1"] .ic-play { display: inline-flex; }
.wh-pause.gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease-in, visibility 0s .2s; }
@media (width <= 760px) { .wh-pause { bottom: 80px; left: 16px; } }  /* clears the centred call button */

.wh-work { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 12svh; padding: 0 6px 120px; }
.cs-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.wk { display: flex; flex-direction: column; gap: 8px; color: #111; text-decoration: none; }
.wimg { display: block; width: 100%; overflow: hidden; border-radius: 6px; background: #f2f2f0; }
.wzoom { display: block; width: 100%; height: 100%; transition: transform .5s var(--ease); }
.wzoom img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.wk:hover .wzoom { transform: scale(1.03); }

/* Home: a justified gallery under the work wall. Each figure grows by its
   image's width/height, so every image in a row ends up the same height */
.gal { display: grid; gap: 6px; padding: 0 6px 120px; }
.gal-row { display: flex; gap: 6px; }
.gi { flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; border-radius: 6px; background: #f2f2f0; }
.gi img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .gal { padding: 0 16px 64px; } .gal-row { flex-wrap: wrap; } .gi { flex-basis: 40%; } }

/* ───────── Motion: a gentle reveal on scroll (site.js adds .motion) ───────── */
.motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.motion .rv.in { opacity: 1; transform: none; }
.motion .rv img:not(.nx) { transform: scale(1.02); transition: transform 1.2s var(--ease); }
.motion .rv.in img:not(.nx) { transform: none; }
.wmeta { display: flex; flex-direction: column; gap: 2px; }
.wtop { display: flex; justify-content: space-between; gap: 12px; }
.wn { font-size: var(--fs-s); line-height: var(--lh-s); }
.wyc, .wi { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--muted); }
.wyc { white-space: nowrap; }
.cs-quote {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  margin: 0; padding: 32px; border-radius: 6px; background: #f2f2f0; text-align: center;
}
.cs-quote blockquote { max-width: 420px; margin: 0; }
.cs-quote figcaption { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); }
.cs-quote .av, .qc .av, .cq .av {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: #fff; color: #111; font-size: var(--fs-s); font-weight: 500;
  box-shadow: 0 0 0 1px #11111114;
}
.wh .footnav { padding-inline: var(--pad); margin-top: 0; }
@media (width <= 760px) {
  .wh-center { gap: 24px; top: calc(50% - 110px); }
  .wh-book { height: 52px; padding: 0 32px; }
  .wh-cases { height: 96px; bottom: 16px; }
  .cc { width: 150px; height: 96px; }
  .cc .nm, .cc .mk { font-size: 12px; line-height: 14px; }
  .cc .lgi { zoom: .75; }
  .cc .mk svg { zoom: .875; }
  .wh-work { flex-direction: column; gap: 20px; padding: 0 16px 16px; }
  .cs-col { width: 100%; }
}

/* ───────── Case study ───────── */
.case .col { max-width: var(--measure); margin: 0 auto 0 max(0px, calc(var(--edge) - var(--pad))); padding: 0 var(--pad); }
.case .intro { padding-top: 56px; }
.kicker { color: var(--muted); margin: 0 0 10px; }
.case .intro h1 { margin: 0 0 6px; }
.storied h1 { max-width: 32ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 0; margin: 0 0 40px; }
.facts > div { padding-inline-end: 24px; }
.facts dt { color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; }
.wide { display: block; width: var(--band); margin: 0 auto; }
.case .hero { margin-bottom: 48px; }
.case .hero img { width: 100%; height: auto; border-radius: var(--r-img); background: var(--surface); }
.chapter { margin-bottom: 40px !important; }
.chapter.first { margin-top: 8px; }
.chapter .label { color: var(--muted); margin: 0 0 8px; }
.chapter h2 { margin: 0 0 10px; font-weight: 400; }
.chapter .body, .chapter p { margin: 0 0 14px; }
.chapter ul { margin: 0 0 14px; padding-left: 18px; }
.chapter li { margin: 0 0 6px; }
.shots { display: grid; gap: 16px; margin-bottom: 48px; }
.shotrow img { width: 100%; height: auto; border-radius: var(--r-img); background: var(--surface); }
.shotrow.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case .hero img, .shotrow img, .next img { outline: 1px solid var(--img-edge); outline-offset: -1px; }
.vision { margin-top: 16px !important; margin-bottom: 48px !important; }
.vision p { margin: 0; }
.case .words { margin-bottom: 56px !important; }
.cta { margin-bottom: 40px !important; }
.cta p { margin: 0 0 14px; }
.next {
  display: grid; grid-template-columns: 1fr 200px; grid-template-rows: auto 1fr; align-items: start; gap: 4px 24px;
  padding: 20px; border-radius: 12px; background: var(--surface); text-decoration: none;
}
.next .nlabel { color: var(--muted); }
.next .ntitle { grid-column: 1; color: var(--muted); }
.next .ntitle b { display: block; color: var(--ink); font-weight: 400; margin-bottom: 2px; }
.next img { grid-area: 1 / 2 / span 2; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); transition: transform .4s var(--ease); }
.next:hover img { transform: scale(1.03); }
.cfoot { padding: 0 max(var(--pad), env(safe-area-inset-left, 0px)); }
.cfoot .footnav { margin-top: 48px; width: var(--band); margin-left: max(0px, calc(var(--edge) - var(--pad))); }
@media (width <= 620px) {
  .case .intro { padding-top: 32px; }
  .shotrow.two, .next { grid-template-columns: 1fr; }
  .next { padding: 16px; }
  .next img { grid-area: auto / 1; margin-top: 12px; }
}

/* Every case study peeking in from the left edge */
.rail { display: none; }
@media (hover: hover) and (width >= 1024px) {
  .rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 3; display: block;
    width: 180px; padding: 112px 0 88px; overflow: hidden auto;
    pointer-events: none; scrollbar-width: none; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(#0000 64px, #000 132px calc(100% - 88px), #0000);
    mask-image: linear-gradient(#0000 64px, #000 132px calc(100% - 88px), #0000);
  }
  .rail::-webkit-scrollbar { display: none; }
}
.rail ol { display: grid; gap: 8px; list-style: none; }
.rail li { position: relative; height: 44px; }
.rail li:has(a:hover, a:focus-visible) { z-index: 1; }
.rail a {
  --x: -48px;
  position: absolute; top: -4px; left: 0;
  width: 22px; height: 52px; border-radius: 0 8px 8px 0;
  color: var(--muted); text-decoration: none; pointer-events: auto;
}
.rail a:hover, .rail a:focus-visible { width: 156px; color: var(--ink); outline: none; }
@media (width >= 1400px) {
  .rail a { --x: 12px; width: 82px; }
  .rail a:hover, .rail a:focus-visible { width: 156px; }
}
.rail .th {
  position: absolute; top: 4px; left: 0;
  width: 66px; height: 44px; overflow: hidden; border-radius: 6px;
  background: var(--surface); outline: 1px solid var(--img-edge); outline-offset: -1px;
  pointer-events: none; transform-origin: 0; translate: var(--x) 0;
  transition: translate .3s cubic-bezier(.32, .72, 0, 1), scale .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s cubic-bezier(.32, .72, 0, 1);
}
.rail a:hover .th, .rail a:focus-visible .th { translate: 12px; scale: 2; box-shadow: 0 4px 12px -5px #00000073; }
.rail a:focus-visible .th { outline: 1px solid var(--ink); outline-offset: 1px; }
.rail a:active .th { scale: 1.92; }
.rail .th img { width: 100%; height: 100%; object-fit: cover; }
.rail .nm {
  position: absolute; top: 74px; left: 8px;
  max-width: 140px; padding: 1px 4px; border-radius: 4px;
  background: var(--bg); font-size: var(--fs-s); line-height: var(--lh-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0;
}
.rail a:hover .nm, .rail a:focus-visible .nm { opacity: 1; transition: opacity .15s ease-out .12s; }
.rail a[aria-current] .th { outline: 1.5px solid var(--ink); outline-offset: 1.5px; }
.rail a[aria-current] .nm { color: var(--ink); font-weight: 500; }

/* The ruler: a tick per section on the right edge */
.ruler { display: none; }
@media (hover: hover) and (width >= 1280px) {
  .ruler:not([hidden]) {
    position: fixed; top: 50%; right: 0; z-index: 2; translate: 0 -50%;
    display: block; width: 24px; height: min(220px, 30vh);
    touch-action: none; cursor: ns-resize;
  }
}
.ticks { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.ticks i { display: block; height: 1px; width: calc(4px + 10px * var(--k, 0)); background: var(--faint); transition: width .15s ease-out, background-color .15s ease-out; }
.ticks i.lm { width: calc(7px + 7px * var(--k, 0)); background: var(--line); }
.ticks i.near { background: var(--muted); }
.ticks i.on { background: var(--ink); }
.marks { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.marks li { position: absolute; right: 22px; translate: 0 -50%; }
.marks button {
  all: unset; display: block; max-width: 132px; padding: 2px 6px; border-radius: 6px;
  background: var(--bg); color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
  cursor: pointer; opacity: 0; pointer-events: auto;
  transition: opacity .15s ease-out, color .15s ease-out;
}
.ruler:hover .marks button, .ruler:focus-within .marks button { opacity: 1; }
@media (width >= 1400px) { .marks li.cur button { opacity: 1; color: var(--ink); } }
.marks li.cur button, .marks button:hover { color: var(--ink); }
.marks button:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.marks li.crowd { visibility: hidden; }

/* ───────── Case studies index ───────── */
.wkx h1 { margin: 0 0 4px; }
.wkx .lede { margin: 0; }
.wkx .intro { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin: 0 0 24px; }
.surprise { flex: none; width: 136px; color: #111; background: #efefef; }
.surprise:hover { color: #111; background: #e4e4e4; }
.surprise .lbl { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (width <= 520px) { .wkx .intro { flex-direction: column; align-items: flex-start; } }
.tabs { position: sticky; top: calc(max(6px, env(safe-area-inset-top)) + 34px); z-index: 20; margin: 0 0 20px; padding-top: 8px; }
.trow { display: flex; flex-wrap: wrap; gap: 2px; }
.tb {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; margin: 0; border: 0; border-radius: 8px;
  background: #efefef; color: #111; font: inherit; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, scale .15s ease-out;
}
.tb i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); transition: color .15s ease-out; }
.tb::after { content: ""; position: absolute; inset: -8px 0; }
.tb:hover { background: #e4e4e4; }
.tb:active { scale: .96; }
.tb[aria-pressed=true] { color: #fff; background: #111; }
.tb[aria-pressed=true] i { color: #fff9; }
.tb:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
@media (width <= 560px) {
  .trow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), #0000); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), #0000); }
}
.tiles {
  width: var(--band); margin: 0 0 72px var(--bshift);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; list-style: none;
}
@media (width <= 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (width <= 620px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
.it { min-width: 0; }
.it[hidden] { display: none; }
.tile { display: block; color: var(--ink); text-decoration: none; }
.tframe { position: relative; display: block; overflow: hidden; padding: 3px; border-radius: calc(var(--r-img) + 3px); background: var(--surface); }
.tframe img { width: 100%; height: auto; aspect-ratio: 16 / 9;   /* covers are composed at 16:9; any other shape crops them */ object-fit: cover; border-radius: var(--r-img); }
.tframe img.nx {
  position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  opacity: 0; transition: opacity .35s;
}
.tframe img.nx.on { opacity: 1; }
.tile:focus-visible .tframe { box-shadow: 0 0 0 2px var(--ink); outline: 2px solid #0000; }
.tframe .dots {
  position: absolute; right: 9px; bottom: 9px; z-index: 2;
  display: flex; gap: 4px; padding: 4px 6px; border-radius: 999px;
  background: #1111118c; opacity: 0; transition: opacity .2s;
}
.tframe .dots i { width: 5px; height: 5px; border-radius: 50%; background: #ffffff73; }
.tframe .dots i.on { background: #fff; }
.tile:hover .dots, .tile:focus-visible .dots { opacity: 1; }
.tframe > img:not(.nx) { transition: transform .5s var(--ease); }
.tile:hover .tframe > img:not(.nx) { transform: scale(1.03); }
.tcap { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; margin-top: 6px; font-size: var(--fs-s); line-height: var(--lh-s); }
.tcap b { font-weight: 400; white-space: nowrap; }
.tcap .yc { color: var(--muted); font-variant-numeric: tabular-nums; }
.tcap .what { flex-basis: 100%; min-width: 0; color: var(--muted); text-wrap: pretty; }

/* ───────── Services ───────── */
.svc h1 { margin: 0 0 4px; }
.svc .lede { margin: 0 0 40px; }
.list { display: grid; gap: 40px; margin: 0 0 40px; list-style: none; }
.list .ds { color: var(--muted); margin: 0; }
.list .nm { justify-self: start; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.list .nm:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.list .nm svg { width: 16px; height: 16px; flex: none; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.4; transition: color .15s ease-out; }
.list li:hover .nm svg { color: var(--ink); }
.pv { width: var(--band); margin: 0 0 0 var(--bshift); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (width >= 1100px) { .grow > .pv { grid-column: 1 / -1; width: auto; margin: 16px 0 0; } }
.pf { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-img); background: #f5f5f5; transition: transform .15s ease-out; }
.pf img { width: 100%; height: 100%; object-fit: cover; }
.list li:hover .pv > * { transform: translateY(-2px); }
.list .pv:active > * { transform: scale(.96); }
@media (width <= 520px) { .pv { gap: 8px; } }
.svc section p { margin: 0 0 12px; }

/* ───────── About, contact, privacy ───────── */
.trust { padding-bottom: 48px; }
.trust h1 { margin: 0 0 4px; }
.trust .lede, .trust section { margin: 0 0 40px; }
.trust h2.label { color: var(--muted); }
.trust p { margin: 0 0 12px; }
.trust ul { margin: 0; padding-left: 18px; }
.trust li { margin: 0 0 8px; }
.trust a { overflow-wrap: anywhere; }
.tphoto {
  display: block; width: 176px; height: 176px; margin: 20px 0 24px 4px;
  object-fit: cover; border: 5px solid #fff; border-radius: 16px; background: var(--hair);
  box-shadow: 0 1px 2px #0000001f, 0 8px 24px #00000029;
  transform: rotate(-3deg);
}
.grow .tphoto:first-child { margin-top: 0; }

.cform { margin: 0 0 40px; }
.cform form { display: grid; gap: 14px; margin-top: 4px; }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform label { display: grid; gap: 4px; color: var(--muted); }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .cf-send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.cform :is(input, textarea) {
  width: 100%; min-height: 40px; padding: 9px 12px;
  border: 0; border-radius: 8px; outline: none;
  background-color: #f5f5f5; color: var(--ink); font: inherit;
  transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.cform textarea { min-height: 120px; resize: vertical; }
.cform .qc { background: #f5f5f5; }  /* same grey as the fields beside it */
.cform :is(input, textarea):hover { background-color: #efefef; }
.cform :is(input, textarea):focus { background-color: #f5f5f5; box-shadow: inset 0 0 0 2px var(--ink); }
.cform ::placeholder { color: var(--muted); }
@supports (-webkit-touch-callout: none) { input, textarea { font-size: 16px !important; } }
.board { margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: #141413; }
.cform .board:first-child { margin-top: 0; }
.board .bd { aspect-ratio: 119 / 16; }
.board svg { display: block; width: 100%; height: 100%; }
.board circle { fill: #fff4d612; transition: fill .15s ease-out; }
.board circle.on { fill: #ffe9b0; }
.calbox { position: relative; overflow: hidden; margin: 12px 0 2px; border-radius: 10px; background: var(--surface); }
.calbox iframe { position: relative; display: block; width: 100%; height: 560px; border: 0; background: none; }
.calwait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.elsewhere p { margin: 12px 0 0; }
.elsewhere p:first-child { margin-top: 0; }
.elsewhere .socials { display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (width <= 520px) { .board { padding: 12px; } .cform .row2 { grid-template-columns: 1fr; } }

/* ───────── Clients ───────── */
.clients h1 { margin: 0 0 4px; }
.clients .lede { margin: 0 0 32px; }
.clients .grow { margin: 48px 0 0; }
.clients .end { margin: 48px 0 0; }
.clients h2.label { color: var(--muted); margin: 0 0 12px; }
.nums { display: grid; grid-template-columns: repeat(4, 120px); gap: 16px; margin: 0; }
.nums div { display: flex; flex-direction: column-reverse; }
.nums dt { color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); }
.nums dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (width <= 520px) { .nums { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }
.chips { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #efefef; color: #111; }
.chips .n { color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); font-variant-numeric: tabular-nums; }
.rows { list-style: none; }
.rows li { display: grid; gap: 2px; padding: 0 0 12px; }
.rows .top { display: flex; align-items: baseline; gap: 8px; }
.rows .top a, .rows .top b { font-weight: 500; }
.rows .top a { text-decoration: none; }
.rows .top a:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.rows .yc { color: var(--accent-text); font-size: var(--fs-s); line-height: var(--lh-s); }
.rows .meta, .rows .what { font-size: var(--fs-m); }
.rows .meta { color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); }
.words { display: grid; gap: 16px; }

/* ───────── Screens board (the scrapbook) ───────── */
.board-page { position: fixed; inset: 0; overflow: hidden; background: #fafaf9; background-image: radial-gradient(#11111124 1px, transparent 1.3px); background-size: 24px 24px; cursor: grab; touch-action: none; user-select: none; }
.board-page.dragging { cursor: grabbing; }
.board-page.dragging .sc { pointer-events: none; }
.scrap-world { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: repeat(12, 260px); gap: 36px 28px; padding: 80px; transform-origin: 0 0; will-change: transform; }
.sc { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.sc[hidden] { display: none; }
.sc-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #f2f2f0; box-shadow: 0 0 0 1px #1111110f; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sc-meta { display: flex; gap: 6px; font-size: var(--fs-s); line-height: var(--lh-s); }
.scrap-ui { position: fixed; left: 50%; bottom: 20px; z-index: 15; translate: -50%; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: #ffffffeb; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px #11111114, 0 8px 24px -12px #1111114d; cursor: auto; }
.scrap-search input { width: 240px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: #efefef; color: var(--ink); font: inherit; }
.scrap-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.zoom { display: flex; align-items: center; gap: 2px; font-size: var(--fs-s); }
.zoom span { min-width: 44px; text-align: center; color: var(--muted); }
.zoom button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #efefef; cursor: pointer; }
.zoom button:hover { background: #e4e4e4; }
@media (width <= 700px) {
  .scrap-world { grid-template-columns: repeat(8, 200px); gap: 28px 20px; padding: 64px 24px; }
  .scrap-ui { bottom: 14px; width: calc(100vw - 20px); }
  .scrap-ui > .btn { display: none; }
  .scrap-search { flex: 1; } .scrap-search input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; }
  .wh-pause { display: none; }
}
@media print { .wh-nav, .wh-float { display: none; } }

/* ───────── Product-first case studies (Nov 2026) ───────── */
.case .results { margin-bottom: 48px !important; }
.results .label { color: var(--muted); margin: 0 0 12px; }
.cnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.cnums div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.cnums dt { color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); }
.cnums dd { margin: 0; font-variant-numeric: tabular-nums; }
.feature .label .fno { font-variant-numeric: tabular-nums; margin-right: 8px; }
.chapter .why { color: var(--ink); }
.shotfig { margin: 0; }
.shotfig figcaption { display: flex; gap: 8px; max-width: var(--measure); margin: 8px 0 0; color: var(--muted); font-size: var(--fs-s); line-height: var(--lh-s); }
.shotfig .sno { color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
@media (width <= 520px) { .cnums { grid-template-columns: 1fr 1fr; row-gap: 16px; } }