/* Layout concept: a poster-cover home — giant PORTFOLIO type behind a 3D card
   carousel whose colour drives the whole stage — then an "About me" sheet and
   a monochrome contact band. A deliberate single, bright look. */
:root {
  color-scheme: light;
  --paper: #f6f4ef;
  --sheet: #ffffff;
  --ink: #16161a;
  --ink-2: #4f4f57;
  --ink-3: #66666e;
  --line: rgba(22, 22, 26, 0.1);
  --night: #0e0e10;

  /* card colours (from the reference's green / blue / red / yellow family) */
  --c-intro: #e5483d;
  --c-samsung: #2a5fe0;
  --c-ibm: #18924f;
  --c-hotelhub: #f0a81b;
  --c-tiny: #d9661a;

  --f-ui: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --turn: 1050ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px), 3vw); padding-right: max(16px, env(safe-area-inset-right, 0px), 3vw); }
.wrap { max-width: 1240px; margin: 0 auto; }

/* ---------- top bar ---------- */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; min-height: 44px; }
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.top nav { display: flex; gap: 4px; align-items: center; }
.top nav a { text-decoration: none; padding: 10px 14px; border-radius: 999px; font-weight: 500; font-size: 15px; transition: background-color .2s; }
.top nav a:hover { background: rgba(255, 255, 255, 0.55); }
.top nav .pill { background: var(--ink); color: #fff; }
.top nav .pill:hover { background: var(--ink); opacity: .86; }

/* ---------- hero stage ---------- */
.stage {
  --tint: #fbe4e0;
  --accent: var(--c-intro);
  position: relative;
  min-height: max(720px, 100svh);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 55%, #fff) 0%, var(--tint) 100%);
  transition: --tint var(--turn) var(--ease);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding-top: calc(env(safe-area-inset-top, 0px) + 84px);
}
@property --tint { syntax: '<color>'; inherits: true; initial-value: #fbe4e0; }

.cover {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none; user-select: none; padding-bottom: 4vh;
}
.cover__kicker { font-weight: 600; letter-spacing: 0.6em; text-transform: uppercase; font-size: clamp(11px, 0.8vw + 6px, 15px); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); transition: color var(--turn) var(--ease); margin-right: -0.6em; }
.cover__word {
  font-size: min(16.5vw, 290px); font-weight: 900; letter-spacing: -0.06em; line-height: .82;
  color: color-mix(in srgb, var(--accent) 22%, transparent);
  transition: color var(--turn) var(--ease);
}
.cover__row { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: clamp(12px, 1vw + 6px, 17px); color: color-mix(in srgb, var(--accent) 60%, var(--ink)); transition: color var(--turn) var(--ease); padding: 0 1.2vw; }
.cover__row span:last-child { letter-spacing: 0.5em; margin-right: -0.5em; }

.carousel { position: relative; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 40%; min-height: 0; }
.slides { position: relative; width: min(380px, 66vw); aspect-ratio: 3 / 4; }

.slide { position: absolute; inset: 0; transform-style: preserve-3d; }
.slide__card {
  position: absolute; inset: 0; display: block; text-decoration: none;
  border-radius: clamp(26px, 3vw, 40px); background: var(--c);
  color: #fff; transform-style: preserve-3d;
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--c) 70%, #000), 0 2px 0 rgba(255,255,255,.18) inset;
}
.slide__top, .slide__bottom {
  position: absolute; left: 0; right: 0; text-align: center; font-weight: 600;
  font-size: clamp(24px, 2.6vw + 8px, 40px); letter-spacing: -0.03em; line-height: 1.02;
  transform: translateZ(60px); text-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.slide__top { top: 7%; }
.slide__bottom { bottom: 7%; }
.slide[data-c="hotelhub"] .slide__card { color: #1d1606; }

.orb {
  position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(85px);
  background: color-mix(in srgb, #fff 26%, var(--c));
  box-shadow: 0 0 0 12px color-mix(in srgb, #fff 12%, transparent), 0 26px 50px -18px rgba(0,0,0,.45);
  overflow: hidden; display: grid; place-items: center;
}
.orb img { width: 100%; height: 100%; object-fit: cover; }
.orb svg { width: 72%; height: auto; }

/* floating chips: they hang off the card's left or right edge, in clear
   bands that avoid the two titles. One shape, one icon size, one rhythm. */
.chip {
  --pad: 8px;
  position: absolute; top: var(--y); z-index: 2;
  transform: translateZ(calc(var(--z, 90px) + 70px));
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px 0 var(--pad); border-radius: 16px;
  background: #fff; color: var(--ink);
  box-shadow: 0 18px 36px -16px rgba(10, 10, 20, .4), 0 1px 3px rgba(10, 10, 20, .08);
  white-space: nowrap;
}
.chip--l { right: calc(100% - var(--a)); }
.chip--r { left: var(--a); }
.chip__ic { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.chip__ic svg { width: 18px; height: 18px; display: block; }
.slide[data-c="hotelhub"] .chip__ic { color: #a86c00; background: #fdf1d6; }
.chip__tx { display: grid; gap: 2px; }
.chip__t { font-size: 14px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.chip__s { font-size: 12px; font-weight: 500; line-height: 1.1; color: var(--ink-3); }
.chip--img { height: auto; padding: 6px; border-radius: 16px; }
.chip--img img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; display: block; }

@media (max-width: 600px) {
  .carousel { perspective: 1800px; }
  .chip { --z: 0px !important; }
  .orb { transform: translate(-50%, -50%) translateZ(24px); }
  .slide__top, .slide__bottom { transform: translateZ(16px); }
  .chip--opt { display: none !important; }
  .chip { height: 42px; gap: 8px; padding: 0 12px 0 6px; border-radius: 12px; }
  .chip { top: var(--ym, var(--y)); }
  .chip--l { right: auto; left: -7%; }
  .chip--r { left: auto; right: -7%; }
  .chip__ic { width: 30px; height: 30px; border-radius: 12px; }
  .chip__ic svg { width: 15px; height: 15px; }
  .chip__t { font-size: 12px; }
  .chip__s { font-size: 10.5px; }
  .chip--img { padding: 5px; border-radius: 16px; }
  .chip--img img { width: 60px; height: 60px; border-radius: 12px; }
}

/* ---------- the turn (matched to the reference recording) ----------
   One card spins on its own vertical axis: it accelerates away to edge-on,
   then the next card continues the same spin from the other edge and
   eases to rest. Chips hang in front of the card at their own depths, so
   they swing wider than the card and settle a beat later. */
.carousel { perspective: 1100px; }
.tilt, .slides, .slide, .slide__card { transform-style: preserve-3d; }
.slide { transform-origin: 50% 50%; backface-visibility: hidden; }
.slide[data-state="active"] {
  visibility: visible; pointer-events: auto; transform: rotateY(0deg) scale(1);
  transition: transform 560ms cubic-bezier(.1, .7, .25, 1) 340ms, visibility 0s 340ms;
}
.slide[data-state="prev"], .slide[data-state="next"] {
  visibility: hidden; pointer-events: none;
  transition: transform 360ms cubic-bezier(.6, 0, .95, .45), visibility 0s 360ms;
}
.slide[data-state="prev"] { transform: rotateY(-90deg) scale(.96); }
.slide[data-state="next"] { transform: rotateY(90deg) scale(.96); }
.slide { opacity: 1; }
.slide.no-anim, .slide.no-anim .chip { transition: none !important; }

.chip { opacity: 1; }
.slide[data-state="active"] .chip {
  opacity: 1;
  transform: translateZ(calc(var(--z, 90px) + 70px));
  transition: transform 760ms cubic-bezier(.16, 1, .3, 1) calc(420ms + var(--i, 0) * 60ms), opacity 260ms ease calc(400ms + var(--i, 0) * 60ms);
}
/* leaving: chips ride the spin, then reset once the card is edge-on */
.slide:not([data-state="active"]) .chip {
  opacity: 0;
  transform: translateZ(calc(var(--z, 90px) + 70px)) translateX(calc(var(--fx, 0px) * 1.6)) scale(.8);
  transition: opacity 120ms linear 300ms, transform 0s 420ms;
}

/* ---------- stage controls ---------- */
.dock {
  position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 18px 0 calc(env(safe-area-inset-bottom, 0px) + 34px);
}
.caption { text-align: center; display: grid; gap: 4px; min-height: 52px; }
.caption__role { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.caption__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; text-decoration: none; justify-self: center; padding: 4px 2px; border-bottom: 2px solid currentColor; }
.caption__go svg { width: 18px; height: 18px; transition: transform .2s; }
.caption__go:hover svg { transform: translateX(4px); }
.controls {
  display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 6px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .04);
}
.ctrl { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background-color .2s; }
.ctrl:hover { background: rgba(0, 0, 0, 0.06); }
.ctrl svg { width: 18px; height: 18px; display: block; }
.ctrl__ic { display: grid; place-items: center; }
.ctrl__ic[hidden] { display: none; }
.ctrl[data-play] { margin-left: 2px; position: relative; }
.ctrl[data-play]::before { content: ""; position: absolute; left: -4px; top: 11px; bottom: 11px; width: 1px; background: rgba(0, 0, 0, .1); }
.dots { display: flex; align-items: center; height: 40px; padding: 0 2px; }
.dot { height: 40px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; }
.dot__track {
  position: relative; display: block; width: 8px; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(0, 0, 0, 0.2); transition: width .4s var(--ease-out), background-color .3s;
}
.dot:hover .dot__track { background: rgba(0, 0, 0, 0.35); }
.dot[aria-current="true"] .dot__track { width: 32px; background: rgba(0, 0, 0, 0.12); }
.dot__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); }
.dot[aria-current="true"] .dot__fill { animation: fill var(--dwell, 4200ms) linear forwards; }
.is-paused .dot[aria-current="true"] .dot__fill { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* ---------- about sheet ---------- */
.about { padding-block: clamp(56px, 8vw, 110px); }
.sheet {
  background: var(--sheet); border-radius: clamp(28px, 4vw, 48px); padding: clamp(28px, 5vw, 64px);
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.35);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center;
}
.sheet__label { font-family: var(--f-hand); font-size: 30px; color: var(--ink-3); transform: rotate(-3deg); display: inline-block; }
.sheet__name { font-size: clamp(48px, 6.5vw, 96px); font-weight: 900; letter-spacing: -0.05em; line-height: .86; text-transform: uppercase; margin-top: 18px; position: relative; width: fit-content; }
.sheet__name span { display: block; color: var(--c-samsung); }
.sheet__aka { font-weight: 600; margin-top: 14px; color: var(--ink-2); }
.sheet__hi { margin-top: 22px; font-size: clamp(17px, 0.5vw + 15px, 20px); max-width: 30rem; color: var(--ink-2); }
.sheet__hi b { font-family: var(--f-hand); font-size: 1.9em; color: var(--ink); font-weight: 700; margin-right: 4px; line-height: .8; }
.sheet__photo { position: relative; justify-self: center; width: min(100%, 420px); }
.sheet__photo .ring { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #efe9df; border: 10px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.sheet__photo .ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.doodle { position: absolute; color: var(--ink); pointer-events: none; }
.doodle--arrow { left: -26%; top: 6%; width: 34%; }
.doodle--spark { right: 4%; top: -4%; width: 13%; color: var(--c-intro); }
.sheet__links { display: grid; gap: 8px; margin-top: 18px; justify-items: center; font-weight: 600; font-size: 15px; }
.sheet__links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 32px; }
.sheet__links svg { width: 18px; height: 18px; }

.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); padding-top: clamp(24px, 4vw, 44px); border-top: 2px dashed var(--line); }
.facts h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.facts h3 svg { width: 26px; height: 26px; color: var(--c-intro); }
.facts li { color: var(--ink-2); font-size: 15px; padding-left: 16px; position: relative; }
.facts li + li { margin-top: 6px; }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tools span { font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 12px; background: #f1efe9; }

/* ---------- worked with ---------- */
.worked { padding-bottom: clamp(56px, 8vw, 110px); }
.worked p { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); text-align: center; margin-bottom: 18px; }
.worked ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; font-weight: 800; font-size: clamp(18px, 1vw + 12px, 26px); letter-spacing: -0.03em; color: #b5b2aa; }

/* ---------- contact band ---------- */
.band { background: var(--night); color: #f4f2ee; position: relative; overflow: hidden; }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: stretch; min-height: 640px; }
.band__copy { padding-block: clamp(64px, 9vw, 120px); display: flex; flex-direction: column; justify-content: center; gap: 28px; position: relative; z-index: 2; }
.band h2 { font-size: clamp(54px, 8vw, 132px); font-weight: 900; letter-spacing: -0.06em; line-height: .84; }
.band h2 em { font-family: var(--f-hand); font-style: normal; font-weight: 700; letter-spacing: 0; color: #f7c948; font-size: .62em; display: block; margin-top: .1em; transform: rotate(-3deg); transform-origin: left; }
.mail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail span { font-size: clamp(18px, 1vw + 14px, 24px); font-weight: 600; user-select: all; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s, transform .15s; }
.btn:active { transform: scale(.97); }
.btn--light { background: #f4f2ee; color: var(--night); }
.btn--line { border: 1.5px solid rgba(244, 242, 238, 0.35); }
.btn--line:hover { background: #f4f2ee; color: var(--night); }
.btn svg { width: 16px; height: 16px; }
.band__links { display: flex; flex-wrap: wrap; gap: 8px; }
.band__photo { position: relative; min-height: 420px; }
.band__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; mask-image: linear-gradient(90deg, transparent, #000 30%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px calc(env(safe-area-inset-bottom, 0px) + 22px); border-top: 1px solid rgba(244, 242, 238, 0.12); font-size: 13px; color: rgba(244, 242, 238, 0.55); position: relative; z-index: 2; }

/* ---------- case study pages ---------- */
.case-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 50%, #fff), var(--tint)); padding-top: calc(env(safe-area-inset-top, 0px) + 100px); overflow: hidden; }
.case-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-bottom: clamp(48px, 7vw, 96px); }
.case-hero .kicker { font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.case-hero h1 { font-size: clamp(32px, 3.6vw + 16px, 72px); font-weight: 800; letter-spacing: -0.05em; line-height: .92; margin-top: 16px; }
.case-hero .lede { font-size: clamp(16px, .4vw + 14.5px, 19px); color: var(--ink-2); margin-top: 14px; max-width: 32rem; }
.case-hero .stage-mini { perspective: 1400px; display: grid; place-items: center; }
.case-hero .slides { width: min(360px, 74vw); }
.case-hero .slide { opacity: 1; visibility: visible; pointer-events: auto; animation: swing-in 620ms cubic-bezier(.1, .7, .25, 1) 150ms both; }
.case-hero .slide .chip { opacity: 1; transform: translateZ(calc(var(--z, 90px) + 70px)); animation: chip-in 760ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(420ms + var(--i, 0) * 60ms); }
@keyframes swing-in { from { transform: rotateY(90deg) scale(.96); } }
@keyframes chip-in { from { opacity: 0; transform: translateZ(calc(var(--z, 90px) + 70px)) translate(var(--fx, 0), 18px) scale(.6); } }
.back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-height: 44px; }
.back svg { width: 18px; height: 18px; }
.case-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.case-facts div { background: rgba(255, 255, 255, 0.72); border-radius: 16px; padding: 10px 16px; }
.case-facts dt { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.case-facts dd { font-weight: 700; font-size: 15px; }
.case-body { padding-block: clamp(56px, 8vw, 104px); }
.case-body__in { display: grid; gap: clamp(32px, 5vw, 56px); max-width: 860px; }
.block h2 { font-size: clamp(26px, 1.4vw + 18px, 36px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 18px; }
.list { display: grid; gap: 10px; }
.list li { background: var(--sheet); border-radius: 16px; padding: 16px 18px 16px 52px; position: relative; font-size: 17px; box-shadow: 0 10px 30px -24px rgba(0,0,0,.4); }
.list li::before { content: counter(item, decimal-leading-zero); counter-increment: item; position: absolute; left: 18px; top: 17px; font-weight: 800; font-size: 13px; color: var(--accent); }
.list { counter-reset: item; }
.soon { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border: 2px dashed var(--line); border-radius: 24px; color: var(--ink-2); }
.soon b { color: var(--ink); }
.soon svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.next { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(24px, 4vw, 40px); border-radius: 32px; background: var(--c-next); color: #fff; text-decoration: none; transition: transform .3s var(--ease-out); }
.next:hover { transform: translateY(-4px); }
.next small { display: block; font-weight: 600; opacity: .8; font-size: 14px; }
.next strong { display: block; font-size: clamp(24px, 2vw + 14px, 40px); letter-spacing: -0.04em; font-weight: 800; line-height: 1.05; margin-top: 4px; }
.next svg { width: 36px; height: 36px; flex: none; }
.next--dark { color: #1d1606; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet__photo { width: min(80%, 340px); grid-row: 1; }
  .doodle--arrow { display: none; }
  .facts { grid-template-columns: 1fr; }
  .band__in { grid-template-columns: 1fr; min-height: 0; }
  .band__photo { min-height: 360px; order: -1; }
  .band__photo img { mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); object-position: 30% 40%; }
  .band__copy { padding-top: 0; margin-top: -60px; }
  .case-hero__in { grid-template-columns: 1fr; }
  .case-hero .stage-mini { order: -1; padding: 10px 0 20px; }
}
@media (max-width: 600px) {
  .top nav a:not(.pill) { display: none; }
  .stage { min-height: max(660px, 100svh); padding-top: calc(env(safe-area-inset-top, 0px) + 92px); }
  .slides { width: min(300px, 64vw); }
  .cover__row { display: none; }
  .cover { place-content: start center; padding-top: calc(env(safe-area-inset-top, 0px) + 74px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide[data-state] { transform: none !important; transition: opacity 300ms ease, visibility 0s 300ms !important; }
  .slide[data-state="prev"], .slide[data-state="next"] { opacity: 0; }
  .slide[data-state="active"] { transition: opacity 300ms ease, visibility 0s !important; }
  .slide .chip, .slide[data-state="active"] .chip { transition: none !important; transform: translateZ(var(--z, 90px)) !important; }
  .stage { transition: none; }
  .case-hero .slide, .case-hero .slide .chip { animation: none; }
  .dot[aria-current="true"] .dot__fill { animation: none; width: 100%; }
}


/* ==========================================================================
   Case study body
   ========================================================================== */
.glance { padding-block: 28px 4px; }
.glance__in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 32px; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--line); }
.glance__in div { min-width: 0; }
.glance__in dt { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.glance__in dd { margin: 3px 0 0; font-weight: 600; font-size: 15px; line-height: 1.35; }
.glance__empty { color: var(--ink-3); font-weight: 400; }
.slot { margin: clamp(28px, 4vw, 48px) 0 0; border-radius: 32px; background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 12px, transparent 12px 24px),
    color-mix(in srgb, var(--tint) 60%, #fff);
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent); display: grid; place-items: center; text-align: center; overflow: hidden; max-width: 100%; }
.slot__in { padding: 24px; display: grid; justify-items: center; gap: 6px; max-width: 30rem; }
.slot__in svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.slot__label { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.slot__hint { color: var(--ink-2); font-size: 14.5px; }
.slot__size { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); margin-top: 6px; }
.slot--hero { border-radius: 32px; }
.slot--hero .slot__label { font-size: 22px; }
.case-body { padding-block: clamp(48px, 7vw, 96px); }
.case-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 24px; }
.toc__t { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.toc ol { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 7px 14px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 15px; transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.is-on { color: var(--ink); border-left-color: var(--accent); }
.case-main { display: grid; gap: clamp(56px, 7vw, 96px); min-width: 0; }
.cs { scroll-margin-top: 24px; display: grid; gap: 16px; }
.cs__n { font-weight: 800; color: var(--accent); font-size: 14px; letter-spacing: .06em; }
.cs h2 { font-size: clamp(30px, 2.2vw + 18px, 48px); font-weight: 800; letter-spacing: -0.045em; margin-bottom: 6px; }
.cs__p { font-size: clamp(17px, .4vw + 15px, 19px); line-height: 1.6; max-width: 40rem; color: var(--ink-2); }
.cs__p:first-of-type { color: var(--ink); }
.cs__aside { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; max-width: 40rem; }
.todo { color: var(--ink-3); font-style: normal; font-size: .94em; }
.todo__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, var(--ink)); margin-right: 8px; }
.todo__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.todo--inline { font-weight: 500; }
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.steps li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--sheet); font-weight: 700; font-size: 14.5px; box-shadow: 0 10px 24px -18px rgba(0,0,0,.45); }
.steps span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); font-size: 11px; }
.decisions { display: grid; gap: 12px; }
.decision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--sheet); border-radius: 24px; overflow: hidden; box-shadow: 0 14px 34px -26px rgba(0,0,0,.5); }
.decision > div { padding: 18px 20px; min-width: 0; }
.decision > div + div { border-left: 1px solid var(--line); }
.decision__k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.decision > div:nth-child(2) .decision__k { color: var(--ink-3); }
.decision__v { font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.decision__v--muted { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 50%, transparent); }
.decision__v--muted .todo { text-decoration: none; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metric { background: var(--sheet); border-radius: 24px; padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: 0 14px 34px -26px rgba(0,0,0,.5); }
.metric__n { font-size: 40px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--accent); }
.metric--todo { background: transparent; border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: none; }
.metric--todo .metric__n { color: color-mix(in srgb, var(--accent) 45%, transparent); }
.metric__l { font-weight: 600; }
.gallery { display: grid; gap: 12px; }
.gallery .slot { margin: 0; aspect-ratio: 4 / 3 !important; }
.gallery--3 .slot:last-child { aspect-ratio: 21 / 9 !important; }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--3 .slot:last-child { grid-column: 1 / -1; }
.case-next-wrap { padding-bottom: clamp(56px, 8vw, 104px); }
@media (max-width: 960px) {
  .glance__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .toc a { border: 1.5px solid var(--line); border-radius: 999px; margin: 0; padding: 7px 12px; font-size: 14px; }
  .toc a:hover, .toc a.is-on { border-color: var(--accent); }
}
@media (max-width: 640px) {
  .glance__in { grid-template-columns: 1fr; }
  .decision { grid-template-columns: 1fr; }
  .decision > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .metrics { grid-template-columns: 1fr; }
  .gallery--2, .gallery--3 { grid-template-columns: 1fr; }
  .slot--hero { aspect-ratio: 4 / 3 !important; }
  .gallery--3 .slot:last-child { aspect-ratio: 4 / 3 !important; }
}

@media (max-width: 960px) {
  .glance__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .glance__in { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 20px; }
  .glance__in div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .case-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
  .case-hero__in { gap: 8px; padding-bottom: 28px; }
  .case-hero .slides { width: min(240px, 60vw); }
  .slot { border-radius: 24px; }
  .slot--hero { margin-top: 20px; }
  .slot__in { padding: 16px; }
  .slot__label { font-size: 16px; }
  .slot__hint { font-size: 13.5px; }
  .cs h2 { font-size: 28px; }
  .case-main { gap: 56px; }
}

.ctrl__ic[data-icon-play] svg { width: 15px; height: 15px; margin-left: 2px; }

@media (max-width: 360px) {
  .chip--img img { width: 48px; height: 48px; }
  .chip__s { display: none; }
  .chip { height: 36px; }
}

/* open-to-work status */
.top__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: #1fa45a; box-shadow: 0 0 0 0 rgba(31, 164, 90, .5); animation: live 2.4s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(31, 164, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 164, 90, 0); } }
.status--dark { background: rgba(244, 242, 238, .08); color: #f4f2ee; box-shadow: 0 0 0 1px rgba(244, 242, 238, .14); width: fit-content; }
.status--dark .status__dot { background: #3ddc84; }

/* WhatsApp */
.wa { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; padding: 12px 18px 12px 12px; border-radius: 24px;
  background: #25d366; color: #06301a; text-decoration: none; transition: transform .2s var(--ease-out), box-shadow .2s; box-shadow: 0 16px 40px -18px rgba(37, 211, 102, .7); }
.wa:hover { transform: translateY(-2px); }
.wa > svg:first-child { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .35); flex: none; }
.wa > svg:last-child { width: 20px; height: 20px; flex: none; }
.wa b { display: block; font-size: 17px; font-weight: 800; }
.wa small { display: block; font-size: 13px; font-weight: 500; opacity: .8; }
.wa-fab { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border-radius: 999px;
  background: #25d366; color: #06301a; font-weight: 800; text-decoration: none; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .35); transition: transform .2s var(--ease-out); }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .top .status { padding: 7px 11px 7px 9px; font-size: 12.5px; }
  .brand__name { display: none; }
  .wa-fab span { display: none; }
  .wa-fab { width: 52px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .status__dot { animation: none; } }
/* floating WhatsApp: appears once the hero is passed, steps aside at the contact band */
.js-fab .wa-fab { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease-out); }
.js-fab .wa-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* recommendations */
.recs { padding-bottom: clamp(56px, 8vw, 104px); }
.recs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.recs__head h2 { font-size: clamp(36px, 3vw + 20px, 64px); font-weight: 900; letter-spacing: -0.05em; }
.recs__head a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; min-height: 44px; }
.recs__head svg { width: 18px; height: 18px; }
.recs__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rec { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 32px; background: var(--sheet);
  box-shadow: 0 24px 60px -44px rgba(0, 0, 0, .45); min-width: 0; }
.rec__mark { font-size: 64px; line-height: .6; font-weight: 900; color: var(--c-intro); height: 28px; }
.rec blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); flex: 1; }
.rec figcaption { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.rec figcaption b { font-size: 15px; }
.rec figcaption span { font-size: 14px; color: var(--ink-2); }
.rec figcaption small { font-size: 13px; color: var(--ink-3); }
.rec--todo { background: transparent; border: 2px dashed var(--line); box-shadow: none; --accent: var(--c-intro); }
.rec--todo .rec__mark { color: color-mix(in srgb, var(--c-intro) 35%, transparent); }
.rec__todo { flex: 1; color: var(--ink-3); font-size: 15px; }
.rec--todo figcaption { color: var(--ink-3); }
.rec--todo figcaption b, .rec--todo figcaption span { color: var(--ink-3); font-weight: 600; }
@media (max-width: 860px) { .recs__row { grid-template-columns: 1fr; } }

.status__short { display: none; }
@media (max-width: 600px) { .top .status__long { display: none; } .top .status__short { display: inline; } }

/* ==========================================================================
   Card polish
   ========================================================================== */
/* cards: a soft light-to-deep gradient and a fine inner highlight */
.slide__card {
  background:
    radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, #fff 22%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 88%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--c) 75%, #000), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* titles: a quiet kicker on top, the name or company large at the bottom */
.slide__top { font-size: clamp(17px, 1vw + 10px, 22px); font-weight: 500; letter-spacing: -0.01em; opacity: .92; top: 8%; }
.slide__bottom { font-size: clamp(30px, 3vw + 10px, 46px); font-weight: 800; letter-spacing: -0.04em; bottom: 8%; }
/* portrait / icon disc: crisp ring, no grey halo */
.orb { width: 62%; top: 47%;
  background: color-mix(in srgb, #fff 22%, var(--c));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 30px 50px -22px rgba(0, 0, 0, .5); }
.slide[data-c="intro"] .orb { background: #efe7dc; }

/* photo chip: a tilted print with a white border */
.chip--img { padding: 5px; border-radius: 16px; transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(-6deg); }
.slide[data-state="active"] .chip--img { transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(-6deg); }
.chip--img img { width: 84px; height: 84px; border-radius: 12px; }

/* toolkit chip: a stack of tool initials, same height as every other chip */
.chip--tools { padding-left: 10px; }
.stack { display: flex; flex: none; }
.mono-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); background: #f1eef9; box-shadow: 0 0 0 2.5px #fff; }
.mono-mark + .mono-mark { margin-left: -9px; }
.mono-mark:nth-child(1) { background: #fde8e4; }
.mono-mark:nth-child(2) { background: #f6eadf; }
.mono-mark:nth-child(3) { background: #e3f2ea; }

@media (max-width: 600px) {
  .slides { aspect-ratio: 5 / 7; }
  .orb { width: 56%; }
  .chip--img img { width: 58px; height: 58px; border-radius: 12px; }
  .chip--img { padding: 4px; border-radius: 12px; }
  .mono-mark { width: 26px; height: 26px; font-size: 10px; }
  .mono-mark + .mono-mark { margin-left: -8px; }
  .slide__top { font-size: 16px; }
  .slide__bottom { font-size: 30px; }
  .dock { padding-top: 22px; }
}

/* round icon bubbles: one icon, centred, same size everywhere */
.chip--icon { width: 52px; height: 52px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; color: var(--c); }
.chip--icon svg { width: 22px; height: 22px; display: block; }
@media (max-width: 600px) {
  .chip--icon { width: 42px; height: 42px; padding: 0; }
  .chip--icon svg { width: 18px; height: 18px; }
  .chip--icon.chip--l { left: -6%; }
  .chip--icon.chip--r { right: -6%; }
}

/* floating objects (camera, drone): no chip background, a real cast shadow */
.chip--obj { height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.chip--obj img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 22px rgba(20, 10, 10, .32)); }
.chip--obj-camera { width: 24%; }
.chip--obj-drone { width: 52%; }
.chip--obj-camera.chip--l { right: auto; left: -3%; }
.slide[data-state="active"] .chip--obj-camera { transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(-8deg); }
@media (max-width: 600px) {
  .chip--obj { height: auto; padding: 0; }
  .chip--obj-camera.chip--l { left: -9%; }
  .chip--obj-drone.chip--r { right: -12%; }
  .chip--obj-camera { width: 26%; }
  .chip--obj-drone { width: 54%; }
}

/* ==========================================================================
   Card kit, after the reference: cut-out objects, a content card, a badge
   ========================================================================== */
.chip--obj svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 20px rgba(15, 10, 30, .3)); }
.chip--obj-headphones { width: 30%; }
.chip--obj-chip { width: 32%; }
.chip--obj-spark { width: 28%; }
.chip--obj-suitcase { width: 30%; }
.chip--obj-car { width: 46%; }
.slide[data-state="active"] .chip--obj-headphones { transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(10deg); }
.slide[data-state="active"] .chip--obj-chip { transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(-10deg); }
.slide[data-state="active"] .chip--obj-suitcase { transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(8deg); }

.chip--card { height: auto; padding: 8px 16px 8px 8px; gap: 12px; border-radius: 16px; }
.ccard__thumb { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: none; }
.ccard__thumb svg { display: block; width: 100%; height: 100%; }
.chip--card .chip__tx { gap: 3px; }
.ccard__pill { justify-self: start; margin-top: 3px; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 85%, #000); font-variant-numeric: tabular-nums; }
.slide[data-c="hotelhub"] .ccard__pill { background: #fdf0d2; color: #8a5a00; }

@media (max-width: 600px) {
  .chip--obj.chip--r { left: auto; right: -11%; }
  .chip--obj.chip--l { right: auto; left: -9%; }
  .chip--obj-headphones { width: 30%; }
  .chip--obj-car { width: 50%; }
  .chip--card { padding: 6px 12px 6px 6px; gap: 9px; border-radius: 16px; }
  .chip--card.chip--l { left: -6%; }
  .chip--card.chip--r { right: -6%; }
  .ccard__thumb { width: 44px; height: 44px; border-radius: 12px; }
  .ccard__pill { font-size: 9.5px; padding: 3px 7px; }
}
@media (max-width: 420px) { .chip--obj-drone { width: 44%; } }

/* ==========================================================================
   Index cards (direction C): white card, numbered, photo or product panel,
   name + accent line, four facts. Objects break out of the panel edges.
   ========================================================================== */
.slide__card.ix {
  
  display: flex; flex-direction: column; padding: 6cqi 6cqi 6.4cqi;
  background: #fff; color: var(--ink, #111);
  border-radius: clamp(24px, 7cqi, 34px);
  box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--c) 70%, #000), 0 2px 6px rgba(0,0,0,.05);
}
.ix__top { display: flex; justify-content: space-between; align-items: center; font-size: 3.2cqi; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #66666e; transform: translateZ(10px); }
.ix__top b { color: var(--c); font-variant-numeric: tabular-nums; }
.slide[data-c="hotelhub"] .ix__top b, .slide[data-c="hotelhub"] .ix__title em { color: #b57800; }
.ix__flag { display: inline-flex; align-items: center; gap: 2cqi; }
.ix__dot { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: #1fbf5f; box-shadow: 0 0 0 1.2cqi rgba(31,191,95,.2); }
.ix__panel {
  position: relative; flex: 1 1 auto; min-height: 0; margin-top: 4cqi; border-radius: 5cqi;
  background: radial-gradient(90% 70% at 20% 0%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
  transform-style: preserve-3d; transform: translateZ(20px);
}
.ix__who { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
.ix__screen { position: absolute; left: 7%; right: 7%; top: 50%; transform: translateY(-46%); }
.ix__screen svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.22)); border-radius: 3cqi; }
.slide[data-c="hotelhub"] .ix__screen svg, .slide[data-c="tiny"] .ix__screen svg { border-radius: 0; }
.ix__title { margin-top: 4.6cqi; font-size: 8.6cqi; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; display: grid; transform: translateZ(14px); }
.ix__title em { font-style: normal; color: var(--c); white-space: nowrap; }
.ix__facts { margin-top: 4cqi; padding-top: 3.6cqi; border-top: 1px solid #ececef; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqi 4cqi; transform: translateZ(8px); }
.ix__f { display: grid; gap: .8cqi; min-width: 0; }
.ix__f small { font-size: 2.7cqi; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #66666e; }
.ix__f b { font-size: 3.6cqi; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix__f b.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 3.3cqi; letter-spacing: -.01em; }

/* break-out objects */
.slide .chip.ixo { left: var(--x); right: auto; top: var(--y); width: var(--w); height: auto; padding: 0; z-index: 3; }
.slide[data-state="active"] .chip.ixo { transform: translateZ(calc(var(--z, 90px) + 70px)) rotate(var(--r)); }
.chip.ixo img, .chip.ixo svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 20px rgba(20, 12, 20, .3)); }

.slides { width: min(380px, 66vw); aspect-ratio: 3 / 4.1; }
@media (max-width: 600px) {
  .slides { width: min(330px, 80vw); aspect-ratio: 3 / 4.3; }
  .slide .chip.ixo { left: var(--xm); top: var(--ym); right: auto; }
  .ix__f b { font-size: 3.9cqi; }
  .ix__f b.mono { font-size: 3.5cqi; }
  .ix__f small { font-size: 2.9cqi; }
  .ix__top { font-size: 3.4cqi; }
  .case-hero .slides { width: min(260px, 70vw); }
}
.slide .chip.ixo { --z: 0px; }
@media (max-width: 600px) { .slides { width: min(330px, 76vw); } }
.slides { container-type: inline-size; }
.slide__card.ix { padding: 5.4cqi 5.4cqi 5.8cqi; }
.ix__top { font-size: 2.9cqi; }
.ix__panel { margin-top: 3.6cqi; }
.ix__title { margin-top: 4cqi; font-size: 7.2cqi; }
.ix__facts { margin-top: 3.4cqi; padding-top: 3.2cqi; gap: 2.8cqi 4cqi; }
.ix__f small { font-size: 2.5cqi; }
.ix__f b { font-size: 3.4cqi; }
.ix__f b.mono { font-size: 3.1cqi; }
@media (max-width: 600px) {
  .ix__top { font-size: 3.1cqi; }
  .ix__f small { font-size: 2.7cqi; }
  .ix__f b { font-size: 3.6cqi; }
  .ix__f b.mono { font-size: 3.3cqi; }
}

/* ==========================================================================
   Journey backdrop: Kerala → Bangalore → Canada → Norway. The panorama
   pans with the cards, one step per card.
   ========================================================================== */
.journey { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #efe7d8; }
.journey img {
  position: absolute; top: 0; left: 0; height: 100%; width: auto; min-width: 100%; max-width: none; object-fit: cover;
  transform: translate3d(calc(var(--pan, 0) * (100vw - 100%)), 0, 0);
  transition: transform 1400ms cubic-bezier(.45, .05, .2, 1);
  will-change: transform;
}
/* a soft veil: keeps the top bar and the caption readable, lets the middle breathe */
.journey::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 240, 228, .78) 0%, rgba(246, 240, 228, 0) 22%, rgba(246, 240, 228, 0) 64%, rgba(246, 240, 228, .9) 88%, #f6f0e4 100%),
    rgba(246, 240, 228, .12);
}
.stage:has(.journey) { background: #f6f0e4; }
.stage:has(.journey) .cover { display: none; }
@media (max-width: 600px) {
  .journey img { height: 78%; top: 6%; }
}
@media (prefers-reduced-motion: reduce) { .journey img { transition: none; } }

/* journey v2: a shorter band that melts into the page; the cover text returns */
.stage:has(.journey) .cover { display: grid; }
.journey { background: none; }
.journey::after { display: none; }
.journey img {
  top: 50%; height: 62%; margin-top: -2%;
  translate: 0 -50%;
  mix-blend-mode: multiply; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
.journey { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
                   mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
@media (max-width: 600px) {
  .journey img { top: 50%; height: 52%; }
}
/* desktop: the cover text sits in clear air above, the journey band below */
@media (min-width: 601px) {
  .stage:has(.journey) .cover { place-content: start center; padding-top: calc(env(safe-area-inset-top, 0px) + 96px); padding-bottom: 0; z-index: 0; }
  .stage:has(.journey) .cover__word { font-size: min(15vw, 250px); }
  .journey img { top: 66%; height: 56%; }
}
@media (min-width: 601px) {
  .journey img { top: 62%; height: 58%; width: max(125vw, 145svh); object-fit: cover; object-position: 50% 42%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 90%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 90%); }
}
.stage:has(.journey) .dock { position: relative; z-index: 1; }

/* portrait sits right of centre, leaving room for the camera and drone */
.slide[data-c="intro"] .ix__panel { overflow: hidden; }
.slide[data-c="intro"] .ix__who { left: auto; right: -9%; transform: none; }
/* one-line captions; if a phone is very narrow they balance over two lines */
.caption__role { text-wrap: balance; max-width: 46ch; margin-inline: auto; }

/* ==========================================================================
   Micro-animations for cards 2–5: they play once each time a card lands,
   then the object keeps a slow idle float.
   ========================================================================== */
.ix__screen :is(.m-node,.m-pop,.m-nav,.m-row,.m-twinkle,.m-pulse,.m-slide) { transform-box: fill-box; }
.slide[data-state="active"] .m-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: m-draw 700ms cubic-bezier(.3,.7,.2,1) calc(700ms + var(--d, 0s)) forwards; }
.slide[data-state="active"] .m-node { transform-origin: center; animation: m-pop 420ms cubic-bezier(.3,1.6,.5,1) 1050ms both, m-breathe 2.4s ease-in-out 1.6s infinite; }
.slide[data-state="active"] .m-pop  { transform-origin: center; animation: m-pop 460ms cubic-bezier(.3,1.6,.5,1) 1350ms both; }
.slide[data-state="active"] .m-nav  { transform-origin: left center; animation: m-grow 600ms ease 700ms both; }
.slide[data-state="active"] .m-row  { animation: m-rise 520ms cubic-bezier(.2,.8,.2,1) calc(700ms + var(--d, 0s)) both; }
.slide[data-state="active"] .m-twinkle { transform-origin: center; animation: m-twinkle 2.2s ease-in-out 1.2s infinite; }
.slide[data-state="active"] .m-pulse { transform-origin: center; animation: m-breathe 1.8s ease-in-out 1.3s infinite; }
.slide[data-state="active"] .m-slide { animation: m-slide-in 640ms cubic-bezier(.2,.8,.2,1) 900ms both; }
.slide[data-state="active"] .m-tile { transform-box: view-box; animation: m-pop 420ms cubic-bezier(.3,1.6,.5,1) calc(700ms + var(--d, 0s)) both; }
.slide[data-state="active"] .m-plus { transform-box: view-box; animation: m-pop 420ms cubic-bezier(.3,1.6,.5,1) 1250ms both, m-breathe 1.8s ease-in-out 1.8s infinite; }

/* break-out objects on cards 2–5: a slow idle drift once they land */
.slide[data-state="active"]:not([data-c="intro"]) .chip.ixo > * { animation: m-float 4.2s ease-in-out 1.4s infinite; }
.slide[data-state="active"][data-c="ibm"] .chip.ixo > * { animation: m-spin 6s ease-in-out 1.4s infinite; }
.slide[data-state="active"][data-c="tiny"] .chip.ixo > * { animation: m-drive 900ms cubic-bezier(.2,.8,.2,1) 650ms both, m-bob 1.6s ease-in-out 1.6s infinite; }

@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes m-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes m-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes m-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(20deg); } }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes m-spin { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(18deg) scale(1.06); } }
@keyframes m-drive { from { transform: translateX(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .slide .m-draw, .slide .m-node, .slide .m-pop, .slide .m-nav, .slide .m-row, .slide .m-twinkle, .slide .m-pulse,
  .slide .m-slide, .slide .m-tile, .slide .m-plus, .slide .chip.ixo > * { animation: none !important; stroke-dashoffset: 0; }
}

/* case study: product feature grid */
.features { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feature { background: var(--sheet, #fff); border-radius: 24px; padding: 20px 22px; display: grid; gap: 6px; box-shadow: 0 14px 34px -26px rgba(0,0,0,.5); }
.feature b { font-size: 17px; letter-spacing: -0.01em; }
.feature span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }

/* ==========================================================================
   Case pages use the full browser width; real screenshots in figures
   ========================================================================== */
.page-case .wrap { max-width: 1680px; }
.page-case .cs__p { max-width: 54rem; }
.page-case .case-hero .lede { max-width: 40rem; }
@media (min-width: 961px) { .page-case .case-grid { grid-template-columns: 220px minmax(0, 1fr); } }
.shot { margin: clamp(28px, 4vw, 48px) 0 0; display: grid; gap: 12px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 24px; background: #ece7df;
  box-shadow: 0 30px 60px -36px rgba(20, 15, 40, .45), 0 0 0 1px rgba(0,0,0,.05); }
.shot--hero img { border-radius: 32px; }
.shot figcaption { font-size: 14.5px; color: var(--ink-3, #6b6b72); line-height: 1.45; }
.gallery .shot { margin: 0; }
.gallery--3 .shot:last-child { grid-column: 1 / -1; }
.gallery .shot img { border-radius: 24px; }
@media (max-width: 640px) { .shot img, .gallery .shot img { border-radius: 16px; } .shot--hero img { border-radius: 24px; } }

/* photo panel on a card (Puffy) and case-page link buttons */
.ix__screen--img { left: 10%; right: 10%; }
.ix__screen--img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(40, 25, 0, .35)); }
.cs-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.cs-links a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 600;
  text-decoration: none; color: var(--ink, #111); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 20px -14px rgba(0,0,0,.4); }
.cs-links a:hover { box-shadow: 0 0 0 1.5px var(--accent, #111), 0 8px 20px -14px rgba(0,0,0,.4); }
.gallery .shot--wide { grid-column: 1 / -1; }
.ix__screen--img img { mix-blend-mode: multiply; }
.slide[data-c="puffy"] .ix__panel { background: linear-gradient(160deg, #fbf6ec, #efe2c6); }
.ix__screen--img img { filter: none; transform: scale(1.12); }
.slide[data-c="puffy"] .ix__panel { background: #fff; box-shadow: inset 0 0 0 1.5px #e8dcc2; }
.case-art { display: grid; place-items: center; }
.case-art img { display: block; width: min(100%, 560px); height: auto; filter: drop-shadow(0 40px 50px rgba(60, 40, 0, .22)); animation: art-in 900ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes art-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) { .case-art { order: -1; } .case-art img { width: min(78%, 420px); } }
@media (prefers-reduced-motion: reduce) { .case-art img { animation: none; } }
/* Puffy card: transparent artwork fills the panel */
.slide[data-c="puffy"] .ix__panel { background: radial-gradient(90% 70% at 30% 10%, #fffaf0, #f4e7cb); box-shadow: none; overflow: hidden; }
.slide[data-c="puffy"] .ix__screen--img { left: 0; right: 0; top: 0; bottom: 0; transform: none; display: grid; place-items: center; }
.slide[data-c="puffy"] .ix__screen--img img { mix-blend-mode: normal; transform: none; width: auto; height: 112%; max-width: none; }
.slide[data-c="puffy"] .ix__screen--img img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: contain; }
.gallery .shot--tall, .shot--tall { grid-column: 1 / -1; width: min(100%, 980px); justify-self: center; }
.shot img[src$=".webp"][src*="puffy/pf-studio."], .shot img[src*="puffy/pf-lux"], .shot img[src*="puffy/pf-wrong"], .shot img[src*="puffy/pf-first"] { background: transparent; box-shadow: none; border-radius: 0; }
.shot img[src*="puffy/pf-studio-intro"] { background: transparent; box-shadow: none; border-radius: 0; }
.shot img[src*="puffy/pf-results"] { background: transparent; box-shadow: none; border-radius: 0; }
.slide[data-c="puffy"] .ix__screen--img img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; transform: scale(1.18); transform-origin: 50% 60%; }

/* Tiny Torque card: the app's own dark UI and amber brand */
.slide[data-c="tiny"] .ix__panel { background: radial-gradient(80% 70% at 70% 15%, rgba(255,158,26,.28), transparent 60%), linear-gradient(160deg, #1a1d2e, #07080c); overflow: hidden; }
.slide[data-c="tiny"] .ix__screen--img { left: 0; right: 0; top: 0; bottom: 0; transform: none; }
.slide[data-c="tiny"] .ix__screen--img img { position: absolute; left: 50%; top: 9%; width: 52%; height: auto; transform: translateX(-30%); mix-blend-mode: normal; filter: none; }
.slide[data-c="tiny"] .ix__top b, .slide[data-c="tiny"] .ix__title em { color: #c4540f; }
.slide[data-state="active"][data-c="tiny"] .chip.ixo > * { animation: m-drive 900ms cubic-bezier(.2,.8,.2,1) 650ms both, m-bob 1.6s ease-in-out 1.6s infinite; }
.cs-links--hero { margin-top: 22px; }
.cs-links--hero a:first-child { background: var(--ink, #111); color: #fff; }
.cs-links a svg { width: 16px; height: 16px; }

/* ==========================================================================
   Welcome band: greeting, Bengaluru time and weather, playlist
   ========================================================================== */
.hello { padding-top: clamp(56px, 8vw, 96px); }
.hello__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.hello__in--solo { grid-template-columns: 1fr; }
.hello__card { background: #fff; border-radius: 32px; padding: clamp(28px, 4vw, 52px); box-shadow: 0 30px 60px -44px rgba(30, 20, 10, .45); display: grid; align-content: center; gap: 14px; }
.hello__k { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-intro, #e5483d); margin: 0; }
.hello h2 { font-size: clamp(28px, 2.2vw + 16px, 46px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 0; }
.hello__p { font-size: 17px; line-height: 1.55; color: var(--ink-2, #444); max-width: 36rem; margin: 0; }
.hello__now { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hello__chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 16px; background: #f6f0e4; }
.hello__chip svg, .hello__wx { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; padding: 8px; color: var(--c-intro, #e5483d); font-size: 18px; }
.hello__chip small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #66666e; }
.hello__chip b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hello__music { background: #121212; border-radius: 32px; padding: 22px; display: grid; gap: 12px; align-content: start; }
.hello__music .hello__k { color: #1ed760; }
.hello__music iframe { border: 0; border-radius: 16px; display: block; }
.hello__open { color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; opacity: .8; }
.hello__open:hover { opacity: 1; }
@media (max-width: 860px) { .hello__in { grid-template-columns: 1fr; } }

/* Welcome, minimal: one line and a quiet meta row */
.hello { padding-top: clamp(64px, 9vw, 120px); padding-bottom: 0; }
.hello__in { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; }
.hello h2 { font-size: clamp(30px, 2.6vw + 16px, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0; }
.hello__meta { margin: 0; font-size: 15px; color: #66666e; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hello__meta i { font-style: normal; margin: 0 6px; opacity: .6; }
.hello__music { width: min(100%, 560px); margin-top: 18px; text-align: left; }
.wave { display: inline-block; transform-origin: 70% 75%; animation: wave 2.6s ease-in-out .6s infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-9deg); } 30% { transform: rotate(16deg); } 40% { transform: rotate(-5deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } }

/* Inner pages: white background; white cards get a hairline so they still read */
body.page-case { background: #fff; }
.page-case .case-hero { background: #fff; }
.page-case .glance__in { border-top-color: #ece9e2; }
.page-case :is(.decision, .metric, .feature, .steps li, .cs-links a:not(:first-child), .cs-links:not(.cs-links--hero) a) {
  box-shadow: 0 0 0 1px #ebe7df, 0 12px 28px -24px rgba(0,0,0,.35); }
.page-case .shot img { background: #f6f4ef; }
/* Puffy, Deliverable 2: flat images with a 1px very light stroke */
.page-case #process .shot img { box-shadow: none !important; border: 1px solid #efece6; background: transparent; }

/* ==========================================================================
   Outcome list, redesigned: light line icons, hairline columns, no heavy cards
   ========================================================================== */
.metrics { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #ece9e2; }
.page-case .metric, .metric { background: none; box-shadow: none !important; border: 0; border-radius: 0; padding: 22px 28px 6px 0; gap: 14px; display: grid; align-content: start; }
.metric + .metric { padding-left: 28px; border-left: 1px solid #ece9e2; }
.metric__n { width: 28px; height: 28px; color: var(--accent); font-size: 0; }
.metric__n svg { width: 100%; height: 100%; display: block; }
.metric__l { font-size: 16.5px; font-weight: 500; line-height: 1.45; color: var(--ink, #151515); }
.metric--todo { background: none; border: 0; }
.metric--todo .metric__n { color: color-mix(in srgb, var(--accent) 45%, #bbb); }
@media (max-width: 640px) {
  .metrics { grid-template-columns: 1fr; }
  .metric, .metric + .metric { padding: 16px 0; border-left: 0; border-bottom: 1px solid #ece9e2; grid-template-columns: 28px 1fr; align-items: center; }
}

/* ==========================================================================
   Micro-animations across the site (only when JS confirms motion is OK)
   ========================================================================== */
.js-rv .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.75,.1,1), transform .8s cubic-bezier(.2,.75,.1,1); transition-delay: calc(var(--rv, 0) * 70ms); }
.js-rv .rv.in { opacity: 1; transform: none; }
/* check icons draw themselves in */
.js-rv .metric .ck-ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1) calc(var(--i,0) * 120ms + 150ms); }
.js-rv .metric .ck-tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease calc(var(--i,0) * 120ms + 700ms); }
.js-rv .metrics.in .ck-ring, .js-rv .metrics.in .ck-tick { stroke-dashoffset: 0; }
/* hover lifts */
.feature, .decision, .steps li, .shot img, .cs-links a, .btn, .wa, .toc a, .next, .hello h2 .wave { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .2s, color .2s, background-color .2s; }
.feature:hover, .decision:hover { transform: translateY(-3px); }
.cs-links a:hover, .btn:hover { transform: translateY(-2px); }
.shot:hover img { transform: translateY(-4px) scale(1.005); }
.next:hover { transform: translateY(-3px); }
.toc a:hover { transform: translateX(3px); }
.metric:hover .metric__n { animation: ck-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes ck-pop { 40% { transform: scale(1.18); } }
.cs__n { display: inline-block; }
.js-rv .cs.in .cs__n { animation: n-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes n-in { from { opacity: 0; letter-spacing: .4em; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv { opacity: 1; transform: none; transition: none; }
  .js-rv .metric .ck-ring, .js-rv .metric .ck-tick { stroke-dashoffset: 0; transition: none; }
  .feature:hover, .decision:hover, .cs-links a:hover, .btn:hover, .shot:hover img, .next:hover, .toc a:hover { transform: none; }
  .metric:hover .metric__n, .js-rv .cs.in .cs__n { animation: none; }
}


.hello__quote { margin: 22px 0 0; max-width: 34rem; animation: q-in 1s cubic-bezier(.2,.75,.1,1) .2s both; }
.hello__quote blockquote { margin: 0; font-family: "Caveat", cursive; font-weight: 600; font-size: clamp(24px, 1.2vw + 18px, 32px); line-height: 1.15; color: #2b2b30; }
.hello__quote figcaption { margin-top: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #66666e; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hello__quote { animation: none; } }
.hello__meta [data-weather] { white-space: nowrap; } @media (max-width: 600px) { .hello__meta [data-weather] { display: block; } .hello__meta [data-weather] > i:first-child { display: none; } }

/* reading progress bar (case pages): a branch with a lazy monkey hanging from it */
.readbar { position: fixed; top: 0; left: 0; right: 0; height: 7px; z-index: 75; pointer-events: none;
  background: color-mix(in srgb, #7a5234 14%, transparent); --p: 0; }
.readbar__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(180deg, #b0855c 0%, #8a5f3c 55%, #6b4329 100%); border-radius: 0 4px 4px 0; transition: transform .08s linear; }
.readbar__fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(60,35,15,.35) 22px 24px, transparent 24px 38px, rgba(255,240,220,.18) 38px 40px); }
.lazym { position: absolute; top: -4px; left: clamp(28px, calc(var(--p) * 100%), calc(100% - 28px)); width: 44px; margin-left: -22px;
  opacity: 0; transform: translateY(-30px); transition: opacity .35s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.readbar.is-on .lazym { opacity: 1; transform: none; }
.lazym__swing { display: block; transform-origin: 56% 4%; animation: lm-sway 1.3s ease-in-out infinite; }
.readbar.is-asleep .lazym__swing { animation: lm-doze 3.4s ease-in-out infinite; }
.readbar.is-moving .lazym__swing { animation: lm-sway .7s ease-in-out infinite; }
.lazym svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgba(40,20,5,.22)); }
.lm-fur { fill: #8a5a3b; } .lm-dk { fill: #6b4329; } .lm-face { fill: #f1d2ad; } .lm-ink { fill: #2a1a10; }
.lm-limb { fill: none; stroke: #8a5a3b; stroke-width: 5; stroke-linecap: round; }
.lm-tail { fill: none; stroke: #6b4329; stroke-width: 3.6; stroke-linecap: round; }
.lm-mouth, .lm-shut { fill: none; stroke: #2a1a10; stroke-width: 1.5; stroke-linecap: round; }
.lm-shut { display: none; }
.readbar.is-asleep .lm-open { display: none; } .readbar.is-asleep .lm-shut { display: inline; }
.readbar.is-asleep .lm-mouth { d: path("M24 57 Q25.5 57.8 27 57"); }
.lm-arms { transform-box: view-box; transform-origin: 25px 35px; }
.readbar.is-moving .lm-arms { animation: lm-arms .35s ease-in-out infinite alternate; }
.readbar.is-done .lazym__swing { animation: lm-happy .5s ease-in-out infinite alternate; }
.lazym__z { position: absolute; left: 30px; top: 46px; font: 700 18px/1 "Caveat", "Segoe Print", cursive; color: #8a7a68; opacity: 0; }
.readbar.is-asleep .lazym__z { animation: lm-z 2.4s ease-in infinite; }
.readbar.is-asleep .lazym__z:nth-of-type(2) { animation-delay: .8s; }
.readbar.is-asleep .lazym__z:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes lm-sway { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
@keyframes lm-doze { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
@keyframes lm-arms { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes lm-happy { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes lm-z { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, 26px) scale(1.25); } }
@media (max-width: 600px) { .lazym { width: 36px; margin-left: -18px; } }
@media (prefers-reduced-motion: reduce) { .lazym__swing, .lm-arms, .lazym__z { animation: none !important; } .lazym { transition: opacity .2s; transform: none; } }

/* ==========================================================================
   Floating glass dock (Apple-style). Appears once the top bar scrolls away.
   ========================================================================== */
.ndock {
  --dock-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed; z-index: 60; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px);
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  transform: translate(-50%, 0); opacity: 1;
  background: rgba(250, 249, 246, .78); color: #2c2c31;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(0,0,0,.07), 0 20px 44px -16px rgba(20,15,35,.32);
  transition: transform .6s var(--dock-ease), opacity .4s ease, visibility 0s;
  color-scheme: light;
}
.js-dock .ndock:not(.is-on) { transform: translate(-50%, 28px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .5s var(--dock-ease), opacity .3s ease, visibility 0s .5s; }

.ndock__i {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 42px; min-width: 42px; padding: 0 11px;
  border: 0; border-radius: 999px; background: transparent; color: #2c2c31; text-decoration: none; cursor: pointer;
  font: 600 14px/1 Figtree, system-ui, sans-serif; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, padding .5s var(--dock-ease), box-shadow .3s ease;
}
.ndock__ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.ndock__ic svg { width: 20px; height: 20px; stroke-width: 1.6; }
.ndock__t { display: inline-block; overflow: hidden; max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .5s var(--dock-ease), opacity .3s ease, margin-left .5s var(--dock-ease); }
/* expanded state (hover / keyboard) */
@media (hover: hover) and (min-width: 761px) {
  .ndock:hover .ndock__t, .ndock:focus-within .ndock__t { max-width: 130px; opacity: 1; margin-left: 8px; transition-delay: .06s; }
  .ndock:hover .ndock__i, .ndock:focus-within .ndock__i { padding: 0 15px 0 12px; }
}
.ndock__i:hover, .nwork:hover > .ndock__i, .nwork.is-open > .ndock__i { background: rgba(255,255,255,.85); }
.ndock__i:hover .ndock__ic { transform: translateY(-1px) scale(1.06); }
.ndock__i[aria-current="page"], .nwork__btn[data-current] { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 14px -8px rgba(0,0,0,.25); }
.ndock__i:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
/* Résumé: always labelled, the one dark action */
.ndock .ndock__i--cv { background: #141416; color: #fff; margin-left: 4px; padding: 0 16px 0 12px; }
.ndock .ndock__i--cv .ndock__t { max-width: 130px; opacity: 1; margin-left: 8px; }
.ndock .ndock__i--cv:hover { background: #000; }

/* "Case studies" list, centred above the whole dock */
.nwork { display: flex; }
.nwork__menu {
  position: absolute; left: 50%; bottom: calc(100% + 12px); width: 312px; padding: 8px; border-radius: 24px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px) scale(.97); transform-origin: 50% 100%;
  background: rgba(252, 251, 248, .97); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.07), 0 28px 56px -20px rgba(20,15,35,.4);
  transition: opacity .3s ease .25s, transform .45s var(--dock-ease) .25s, visibility 0s .7s;   /* close: wait, then ease out */
}
.nwork__menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nwork:hover .nwork__menu, .nwork:focus-within .nwork__menu, .nwork.is-open .nwork__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity .35s ease .12s, transform .55s var(--dock-ease) .12s, visibility 0s .12s;   /* open: brief intent delay */
}
.nwork__h { margin: 8px 12px 6px; font: 700 11px/1 Figtree, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #66666e; }
.nwork__a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px;
  text-decoration: none; color: #151517; opacity: 0; transform: translateY(8px);
  transition: background-color .2s ease, opacity .3s ease, transform .45s var(--dock-ease); }
.nwork:hover .nwork__a, .nwork:focus-within .nwork__a, .nwork.is-open .nwork__a { opacity: 1; transform: none; }
.nwork:hover .nwork__a:nth-of-type(1), .nwork.is-open .nwork__a:nth-of-type(1) { transition-delay: 0s, .18s, .18s; }
.nwork:hover .nwork__a:nth-of-type(2), .nwork.is-open .nwork__a:nth-of-type(2) { transition-delay: 0s, .23s, .23s; }
.nwork:hover .nwork__a:nth-of-type(3), .nwork.is-open .nwork__a:nth-of-type(3) { transition-delay: 0s, .28s, .28s; }
.nwork:hover .nwork__a:nth-of-type(4), .nwork.is-open .nwork__a:nth-of-type(4) { transition-delay: 0s, .33s, .33s; }
.nwork:hover .nwork__a:nth-of-type(5), .nwork.is-open .nwork__a:nth-of-type(5) { transition-delay: 0s, .38s, .38s; }
.nwork__a:hover, .nwork__a:focus-visible { background: #fff; }
.nwork__a[aria-current="page"] { background: color-mix(in srgb, var(--c) 9%, #fff); }
.nwork__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.nwork__ic svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nwork__a:hover .nwork__ic { transform: scale(1.08) rotate(-4deg); }
.nwork__tx { display: grid; gap: 3px; min-width: 0; text-align: left; }
.nwork__tx b { font: 700 14.5px/1.15 Figtree, system-ui, sans-serif; letter-spacing: -0.01em; }
.nwork__tx small { font: 500 12.5px/1.2 Figtree, system-ui, sans-serif; color: #7c7c84; }
.nwork__n { font: 700 11px/1 Figtree, system-ui, sans-serif; color: #b0b0b6; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .ndock { padding: 4px; }
  .ndock__i { height: 42px; min-width: 44px; padding: 0 11px; }
  .nwork__menu { width: min(312px, calc(100vw - 32px)); }
  .js-fab .wa-fab { bottom: calc(max(18px, env(safe-area-inset-bottom, 0px) + 12px) + 62px); }
}
@media (prefers-reduced-motion: reduce) {
  .ndock, .ndock__i, .ndock__t, .nwork__menu, .nwork__a, .ndock__ic, .nwork__ic { transition: opacity .2s ease, visibility 0s !important; }
  .js-dock .ndock:not(.is-on), .nwork__menu, .nwork__a { transform: translate(-50%, 0); }
  .nwork__a { transform: none; }
}
.stage { padding-bottom: 80px; }
.ndock { z-index: 80; background: rgba(250, 249, 246, .9); }

/* Readability: caption and controls sit on calm cream, never on the busy backdrop */
.dock { position: relative; z-index: 2; }
.caption { position: relative; padding: 12px 22px 10px; border-radius: 24px; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px);
  background: rgba(250, 246, 238, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset; }
.caption__role { color: #2c2c31; font-weight: 500; }
.stage { padding-bottom: 28px; }
@media (max-width: 600px) {
  .journey img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 58%, transparent 80%); mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 58%, transparent 80%); }
  .caption { padding: 10px 18px 8px; }
  .caption__role { font-size: 13.5px; }
}
/* the floating dock never covers the last lines of a page */
.foot { padding-bottom: 92px; }
.hello__meta [data-weather][hidden] { display: none !important; }

/* ==========================================================================
   Behance: profile card + fanned covers
   ========================================================================== */
.be { padding-block: clamp(64px, 9vw, 120px) clamp(24px, 4vw, 48px); }
.be__k { margin: 0; font: 700 12px/1 Figtree, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #1769ff; }
.be h2 { margin: 12px 0 0; font-size: clamp(32px, 2.8vw + 16px, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.be__in { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.be__profile { background: #fff; border-radius: 32px; padding: 28px; box-shadow: 0 30px 60px -40px rgba(30, 20, 10, .5), 0 0 0 1px rgba(0,0,0,.04); }
.be__who { display: flex; gap: 14px; align-items: center; }
.be__who img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e8e3d9; }
.be__who b { display: block; font-size: 19px; letter-spacing: -0.01em; }
.be__who small { color: #7c7c84; font-size: 13.5px; }
.be__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; padding-top: 22px; border-top: 1px solid #eee; }
.be__st b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.be__st span { font-size: 13px; color: #7c7c84; }
.be__follow { display: flex; justify-content: center; align-items: center; gap: 8px; height: 50px; border-radius: 999px; background: #1769ff; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 24px -12px rgba(23,105,255,.7); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.be__follow svg { width: 18px; height: 18px; }
.be__follow:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(23,105,255,.8); }

.be__fan { position: relative; height: 430px; }
.be__card {
  --x: calc(var(--i) * 115px); --r: calc(var(--i) * 5deg); --y: calc((var(--i) * var(--i)) * 6px);
  position: absolute; left: 50%; top: 24px; width: 290px; padding: 10px; border-radius: 24px; background: #fff; color: #151517; text-decoration: none;
  z-index: calc(10 - (var(--i) * var(--i)));
  transform: translateX(-50%) translate(var(--x), var(--y)) rotate(var(--r));
  box-shadow: 0 30px 50px -30px rgba(20, 15, 35, .55), 0 0 0 1px rgba(0,0,0,.04);
  transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.be__fan:hover .be__card { --x: calc(var(--i) * 170px); --r: calc(var(--i) * 7deg); --y: calc((var(--i) * var(--i)) * 10px); }
.be__fan .be__card:hover { transform: translateX(-50%) translate(var(--x), calc(var(--y) - 18px)) rotate(calc(var(--r) * .4)) scale(1.04); z-index: 20; box-shadow: 0 40px 60px -28px rgba(20,15,35,.6); }
.be__cover { display: block; height: 210px; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, var(--c1), var(--c2)); }
.be__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.be__card:hover .be__cover img { transform: scale(1.06); }
.be__art { display: flex; align-items: flex-end; height: 100%; padding: 18px; font-weight: 800; font-size: 24px; line-height: 1.02; letter-spacing: -0.03em; color: rgba(255,255,255,.92);
  background: radial-gradient(80% 60% at 80% 10%, rgba(255,255,255,.28), transparent 60%); }
.be__meta { display: grid; gap: 2px; padding: 12px 6px 4px; }
.be__meta b { font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be__meta small { font-size: 12.5px; color: #7c7c84; }
.be__meta em { font-style: normal; font-size: 12px; font-weight: 600; color: #1769ff; margin-top: 4px; }
/* deal the cards in when the section arrives */
.js-rv .be__fan.rv .be__card { transform: translateX(-50%) translate(0, 60px) rotate(0); opacity: 0; }
.js-rv .be__fan.rv.in .be__card { opacity: 1; transform: translateX(-50%) translate(var(--x), var(--y)) rotate(var(--r)); transition-delay: calc((2 - var(--i) * var(--i) / 2) * 0s + (var(--i) + 2) * 80ms); }
.js-rv .be__fan.rv { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .be__in { grid-template-columns: 1fr; }
  .be__fan { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .be__fan::-webkit-scrollbar { display: none; }
  .be__card, .be__fan:hover .be__card, .js-rv .be__fan.rv .be__card, .js-rv .be__fan.rv.in .be__card { position: relative; left: auto; top: auto; flex: none; width: 250px; transform: none; opacity: 1; scroll-snap-align: start; z-index: auto; }
  .be__fan .be__card:hover { transform: translateY(-4px); }
  .be__cover { height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .be__card { transition: none; } }
.be__card { --x: calc(var(--i) * 100px); }
.be__fan:hover .be__card { --x: calc(var(--i) * 132px); --r: calc(var(--i) * 6deg); --y: calc((var(--i) * var(--i)) * 8px); }
@media (min-width: 961px) and (max-width: 1240px) { .be__card { width: 250px; --x: calc(var(--i) * 80px); } .be__fan:hover .be__card { --x: calc(var(--i) * 100px); } .be__cover { height: 180px; } }
@media (max-width: 960px) { .be__fan { scroll-padding-inline: 16px; } }
@media (min-width: 961px) and (max-width: 1240px) { .be__card { width: 230px; --x: calc(var(--i) * 62px); } .be__fan:hover .be__card { --x: calc(var(--i) * 76px); } .be__cover { height: 165px; } }

/* Behance fan, hover v2: the fan holds still; the card under the pointer lifts to the front */
.be__fan:hover .be__card { --x: calc(var(--i) * 100px); --r: calc(var(--i) * 5deg); --y: calc((var(--i) * var(--i)) * 6px); }
.be__fan .be__card, .js-rv .be__fan.rv.in .be__card { transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, opacity .5s ease; }
.js-rv .be__fan.rv.in:hover .be__card { transition-delay: 0s; }
.be__fan .be__card.is-hot, .be__fan .be__card:focus-visible,
.js-rv .be__fan.rv.in .be__card.is-hot, .js-rv .be__fan.rv.in .be__card:focus-visible {
  z-index: 30; transition-delay: 0s;
  transform: translateX(-50%) translate(var(--x), calc(var(--y) - 26px)) rotate(0deg) scale(1.06);
  box-shadow: 0 46px 70px -30px rgba(20,15,35,.6), 0 0 0 1px rgba(0,0,0,.04);
}
/* neighbours ease aside a little */
.be__fan:has(.is-hot) .be__card:not(.is-hot) { filter: saturate(.8) brightness(.96); }
.be__card { transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, opacity .5s ease, filter .35s ease; }
.be__card.is-hot .be__cover img { transform: scale(1.06); }
@media (min-width: 961px) and (max-width: 1240px) { .be__fan:hover .be__card { --x: calc(var(--i) * 62px); } }
@media (max-width: 960px) {
  .be__fan .be__card:hover, .js-rv .be__fan.rv.in .be__card:hover { transform: translateY(-4px); }
}
.be__cover img[src*="infographic-resume"] { object-position: 62% 30%; }
.be__cover img[src*="fruit-dial"] { object-position: 45% 50%; }
.be__cover img[src*="recipe-search"] { object-position: 55% 45%; }
.be__cover img[src*="blue-whale"] { object-position: 35% 55%; }

/* about: portrait sits on the right edge */
@media (min-width: 861px) { .sheet__photo { justify-self: end; } }

/* hero backdrop sits on the bottom edge of the section */
.journey img { top: auto !important; bottom: 0; margin-top: 0; translate: 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 90%, transparent 100%); }
@media (max-width: 600px) { .journey img { height: 48%; } }

/* ==========================================================================
   Boarding-pass cards: route, three ticket fields, a tear line and a stub
   that carries the summary and the call to action. Replaces the caption.
   ========================================================================== */
.slides { aspect-ratio: 3 / 4.85; }
@media (max-width: 600px) { .slides { aspect-ratio: 3 / 5.1; } }
.caption { display: none; }
.ix__title { margin-top: 3.4cqi; }
.ix__route { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 3cqi; margin-top: 3.4cqi; transform: translateZ(8px); }
.ix__end { display: grid; gap: .6cqi; min-width: 0; }
.ix__end--to { text-align: right; }
.ix__end small, .ix__f small { font-size: 2.4cqi; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #66666e; }
.ix__end b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 5.4cqi; font-weight: 600; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.ix__plane { color: var(--c); padding-bottom: .8cqi; min-width: 0; }
.ix__plane svg { display: block; width: 100%; height: 3.6cqi; }
.ix__plane path:first-child { vector-effect: non-scaling-stroke; }
.ix__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; margin-top: 3.2cqi; padding-top: 3cqi; }
.ix__f b { font-size: 3.1cqi; white-space: normal; overflow: visible; line-height: 1.25; }
.ix__tear { position: relative; display: block; margin: 4.2cqi -5.4cqi 0; border-top: 2px dashed #e6e3dc; transform: translateZ(4px); }
.ix__tear::before, .ix__tear::after { content: ""; position: absolute; top: -3.4cqi; width: 6.4cqi; height: 6.4cqi; border-radius: 50%; background: #f6f0e4; }
.ix__tear::before { left: -3.2cqi; } .ix__tear::after { right: -3.2cqi; }
.ix__stub { display: flex; align-items: center; justify-content: space-between; gap: 4cqi; margin-top: 4cqi; transform: translateZ(10px); }
.ix__sum { font-size: 3.3cqi; line-height: 1.35; color: #55555c; min-width: 0; text-wrap: balance; }
.ix__go { flex: none; display: inline-flex; align-items: center; gap: 1.6cqi; padding: 2.6cqi 4.2cqi; border-radius: 999px; background: var(--c); color: #fff; font-size: 3.5cqi; font-weight: 700; }
.ix__go svg { width: 3.8cqi; height: 3.8cqi; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.slide__card.ix:hover .ix__go svg, .slide__card.ix:focus-visible .ix__go svg { transform: translateX(1cqi); }
.slide[data-c="hotelhub"] .ix__go { background: #b57800; }
.slide[data-c="hotelhub"] .ix__plane { color: #b57800; }
.slide[data-c="tiny"] .ix__go { background: #c4540f; }
.stage-mini .ix__go, .case-hero .ix__go { display: none; }
@media (max-width: 600px) {
  .ix__end small, .ix__f small { font-size: 2.6cqi; }
  .ix__f b { font-size: 3.3cqi; }
  .ix__sum { font-size: 3.5cqi; }
}
@media (prefers-reduced-motion: reduce) { .ix__go svg { transition: none; } }
.page-case .ix__tear::before, .page-case .ix__tear::after { background: #fff; }

/* ticket: identical rhythm on every card */
.ix__plane { display: flex; align-items: center; gap: 1.6cqi; padding-bottom: 1cqi; }
.ix__plane i { flex: 1; height: 0; border-top: 2px dotted currentColor; opacity: .55; }
.ix__plane svg { flex: none; width: 5cqi; height: 5cqi; transform: rotate(90deg); }
.ix__title { min-height: calc(2 * 1.02em); }
.ix__f b { display: block; min-height: calc(2 * 1.25em); }
.ix__sum { display: block; min-height: calc(2 * 1.35em); }
.ix__end b { overflow: hidden; text-overflow: ellipsis; }
.ix__sum { display: flex; align-items: center; }
/* backdrop pushed lower: the top of the panorama starts nearer the card's base */
.journey img { bottom: -12%; }
@media (max-width: 600px) { .journey img { bottom: -6%; } }

/* ==========================================================================
   Home entrance: after the loader lifts, the hero assembles itself, then
   the carousel starts turning.
   ========================================================================== */
.intro-wait .top, .intro-wait .stage .cover__kicker, .intro-wait .stage .cover__word, .intro-wait .stage .cover__row,
.intro-wait .stage .journey, .intro-wait .stage .carousel, .intro-wait .stage .dock { opacity: 0; }
.intro-play .top { animation: in-down .9s cubic-bezier(.2,.8,.2,1) .25s both; }
.intro-play .stage .journey { animation: in-rise 1.7s cubic-bezier(.2,.8,.2,1) 0s both; }
.intro-play .stage .cover__kicker { animation: in-track 1s cubic-bezier(.2,.8,.2,1) .15s both; }
.intro-play .stage .cover__word { animation: in-word 1.3s cubic-bezier(.2,.8,.2,1) .05s both; }
.intro-play .stage .cover__row span:first-child { animation: in-left 1s cubic-bezier(.2,.8,.2,1) .85s both; }
.intro-play .stage .cover__row span:last-child { animation: in-right 1s cubic-bezier(.2,.8,.2,1) .85s both; }
.intro-play .stage .carousel { animation: in-fade .5s ease .45s both; }
.intro-play .stage .slides { animation: in-flip 1.5s cubic-bezier(.2,.9,.25,1) .45s both; }
.intro-play .stage .dock { animation: in-up .9s cubic-bezier(.2,.8,.2,1) 1.15s both; }
.intro-play .stage .dot__fill { animation-play-state: paused; }
@keyframes in-down { from { opacity: 0; transform: translateY(-18px); } }
@keyframes in-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes in-rise { from { opacity: 0; transform: translateY(70px); } }
@keyframes in-fade { from { opacity: 0; } }
@keyframes in-track { from { opacity: 0; letter-spacing: 1.4em; } }
@keyframes in-word { from { opacity: 0; transform: scale(1.14); filter: blur(14px); } }
@keyframes in-left { from { opacity: 0; transform: translateX(-40px); } }
@keyframes in-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes in-flip { from { transform: translateY(40px) rotateY(-110deg) scale(.86); } 60% { transform: rotateY(8deg); } }

/* scroll reveal, stronger and typed: blocks rise, headings lift from a mask, images unveil */
.js-rv .rv { transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.75,.1,1), transform 1s cubic-bezier(.2,.75,.1,1), clip-path 1.1s cubic-bezier(.6,0,.2,1), filter .9s ease; transition-delay: calc(var(--rv, 0) * 90ms); }
.js-rv .rv--head { transform: translateY(48px) skewY(2deg); filter: blur(6px); }
.js-rv .rv--head.in { filter: none; }
.js-rv .rv--img { opacity: 1; transform: scale(1.04); clip-path: inset(18% 0 0 0 round 18px); }
.js-rv .rv--img.in { clip-path: inset(0 0 0 0 round 0); transform: none; }
.js-rv .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-rv .rv, .js-rv .rv--img { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; } }

/* ==========================================================================
   Experience: a proportional rail, 2002 to now. Each role starts at its
   real date; chapters sit underneath. Stacks vertically on small screens.
   ========================================================================== */
.xp { margin-top: clamp(64px, 8vw, 112px); }
.xp__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.xp__head h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.xp__head p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.xp__track { margin-top: clamp(20px, 2.4vw, 32px); }
.xp__rail { list-style: none; margin: 0; padding: 0; position: relative; height: 260px; }
.xp__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); opacity: .8; transform-origin: left; }
.xp__job { position: absolute; top: 50%; left: calc(100% * var(--s)); width: calc(100% * var(--w)); height: 0; }
.xp__job::before { content: ""; position: absolute; left: 0; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg, #f6f0e4); box-shadow: 0 0 0 1.5px var(--ink); transform: translateX(-50%); transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s; z-index: 1; }
.xp__job.is-now::before { background: var(--c-intro); box-shadow: 0 0 0 1.5px var(--c-intro), 0 0 0 7px color-mix(in srgb, var(--c-intro) 18%, transparent); animation: xp-ping 2.6s ease-out infinite; }
.xp__dur { position: absolute; left: 0; right: 0; top: -1.5px; height: 3px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.xp__job.is-now .xp__dur { background: var(--c-intro); transform: scaleX(1); }
.xp__lab { position: absolute; left: 0; width: max-content; max-width: 132px; display: grid; gap: 3px; transform: translateX(-9px); }
.xp__job:nth-child(odd) .xp__lab { bottom: 24px; }
.xp__job:nth-child(even) .xp__lab { top: 24px; }
.xp__job.is-now .xp__lab { left: auto; right: 0; transform: none; text-align: right; justify-items: end; }
.xp__yr { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.xp__job.is-now .xp__yr { color: var(--c-intro); }
.xp__lab b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.xp__role { font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.xp__rng { font: 500 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.xp__job:hover .xp__dur { transform: scaleX(1); }
.xp__job:hover::before { transform: translateX(-50%) scale(1.35); background: var(--ink); }
.xp__job.is-now:hover::before { background: var(--c-intro); }
.xp__job:hover .xp__rng { opacity: 1; transform: none; }
.xp__job:hover { z-index: 2; }
.xp__chaps { position: relative; height: 44px; margin-top: 8px; }
.xp__chap { position: absolute; left: calc(100% * var(--s)); width: calc(100% * var(--w)); padding: 10px 12px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 2px; font-size: 13px; font-weight: 700; }
.xp__chap small { font: 500 10.5px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@keyframes xp-ping { 0% { box-shadow: 0 0 0 1.5px var(--c-intro), 0 0 0 0 color-mix(in srgb, var(--c-intro) 35%, transparent); } 70%, 100% { box-shadow: 0 0 0 1.5px var(--c-intro), 0 0 0 12px transparent; } }

/* entrance: the line draws, then each stop lands in order */
.js-rv .xp__track.rv { transform: none; opacity: 1; }
.js-rv .xp__track:not(.in) .xp__rail::before { transform: scaleX(0); }
.js-rv .xp__track:not(.in) .xp__job::before { transform: translateX(-50%) scale(0); }
.js-rv .xp__track:not(.in) .xp__lab, .js-rv .xp__track:not(.in) .xp__chap { opacity: 0; translate: 0 10px; }
.js-rv .xp__rail::before { transition: transform 1.6s cubic-bezier(.6,0,.2,1); }
.js-rv .xp__job::before { transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 110ms + 300ms), background .3s; }
.js-rv .xp__lab { transition: opacity .6s ease calc(var(--i) * 110ms + 380ms), translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 110ms + 380ms); }
.js-rv .xp__chap { transition: opacity .6s ease 1.5s, translate .7s cubic-bezier(.2,.8,.2,1) 1.5s; }
.js-rv .xp__chap:nth-child(2) { transition-delay: 1.65s; } .js-rv .xp__chap:nth-child(3) { transition-delay: 1.8s; }

/* small screens: newest first, top to bottom */
@media (max-width: 1179px) {
  .xp__rail { height: auto; display: flex; flex-direction: column-reverse; gap: 22px; padding-left: 28px; }
  .xp__rail::before { left: 4.5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: top; }
  .js-rv .xp__track:not(.in) .xp__rail::before { transform: scaleY(0); }
  .xp__job { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .xp__job::before { left: -23.5px; top: 4px; transform: none; }
  .js-rv .xp__track:not(.in) .xp__job::before { transform: scale(0); }
  .xp__job:hover::before { transform: scale(1.2); }
  .xp__dur { display: none; }
  .xp__lab, .xp__job:nth-child(odd) .xp__lab, .xp__job:nth-child(even) .xp__lab, .xp__job.is-now .xp__lab { position: static; max-width: none; transform: none; text-align: left; justify-items: start; }
  .xp__rng { opacity: 1; transform: none; white-space: normal; }
  .xp__chaps { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xp__job.is-now::before { animation: none; }
  .js-rv .xp__track:not(.in) .xp__rail::before, .js-rv .xp__track:not(.in) .xp__job::before { transform: none; }
  .xp__dur, .xp__rng { transition: none; }
}

/* vertical timeline: dot centred on the line */
@media (max-width: 1179px) {
  .xp__rail { padding-left: 30px; }
  .xp__rail::before { left: 5px; width: 1.5px; top: 9px; bottom: 9px; background: var(--ink); opacity: .35; }
  .xp__job::before { left: -30px; top: 3px; width: 11px; height: 11px; transform: none; }
  .xp__job.is-now::before { left: -30px; }
}
.xp__more { display: none; }
@media (max-width: 1179px) {
  .xp:not(.xp--open) .xp__job:nth-child(-n+6) { display: none; }
  .xp:not(.xp--open) .xp__rail::before { bottom: -18px; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
  .xp--open .xp__job:nth-child(-n+6) { animation: xp-drop .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc((5 - var(--i)) * 60ms); }
  .xp__more { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0 0; padding: 10px 18px 10px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 14px/1 inherit; font-family: inherit; color: var(--ink); cursor: pointer; }
  .xp__more:focus-visible { outline: 2px solid var(--c-intro); outline-offset: 3px; }
  .xp__dots { display: inline-flex; gap: 3px; }
  .xp__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
  .xp--open .xp__dots { transform: rotate(90deg); }
  .xp__dots { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
}
@keyframes xp-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .xp--open .xp__job { animation: none; } }
@media (hover: none) { .xp__job:not(.is-now):hover::before { background: var(--bg, #f6f0e4); } .xp__job:hover::before { transform: none; } }

/* ==========================================================================
   About: the design passport. ID page + stamped endorsements; tools as
   luggage tags. Stamps land one by one when the book scrolls in.
   ========================================================================== */
.pp { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pp__label { font-family: var(--f-hand); font-size: 30px; color: var(--ink-3); transform: rotate(-3deg); display: inline-block; }
.pp__h { margin: 10px 0 0; font-size: clamp(40px, 5vw, 72px); line-height: .96; font-weight: 900; letter-spacing: -.05em; text-wrap: balance; }
.pp__h em { font-style: normal; color: var(--c-intro); }
.pp__sub { margin: 18px 0 0; font-weight: 600; color: var(--ink-2); font-size: 15px; }
.pp__bio { margin: 14px 0 0; font-size: clamp(16.5px, .4vw + 15px, 19px); color: var(--ink-2); max-width: 40ch; line-height: 1.55; }
.pp__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pp__links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.pp__links a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ink), 0 10px 20px -12px rgba(0,0,0,.3); }
.pp__links svg { width: 17px; height: 17px; }

.pp__book { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; border-radius: 24px; background: #f1e6cf; transform: rotate(-1.2deg); box-shadow: 0 50px 80px -46px rgba(70,45,10,.6), 0 0 0 1px #e0d0ae; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pp__book:hover { transform: rotate(0deg); }
.pp__page { position: relative; min-height: 440px; padding: 22px 22px 18px; border-radius: 12px; overflow: hidden;
  background: repeating-radial-gradient(circle at 30% 120%, transparent 0 9px, rgba(42,95,224,.05) 9px 10px), repeating-linear-gradient(115deg, transparent 0 14px, rgba(229,72,61,.035) 14px 15px), #fbf6ea; }
.pp__page--id { box-shadow: inset -20px 0 24px -20px rgba(70,45,10,.4); }
.pp__page--visa { box-shadow: inset 20px 0 24px -20px rgba(70,45,10,.4); }
.pp__kick { display: flex; justify-content: space-between; gap: 10px; font: 600 10px 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: #1f3a8a; }
.pp__id { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.pp__photo { width: 116px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #e9e0cc; filter: sepia(.22) saturate(.92); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.pp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.pp__f { margin: 0; display: grid; gap: 7px; align-content: start; min-width: 0; }
.pp__f div { display: grid; }
.pp__f dt { font: 500 9px 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6b6452; }
.pp__f dd { margin: 0; font: 600 13.5px 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: -.01em; color: var(--ink); }
.pp__sig { display: inline-block; margin-top: 16px; font: 700 36px/1 var(--f-hand); color: #1f3a8a; transform: rotate(-4deg); }
.pp__mrz { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 18px 12px; background: rgba(255,255,255,.55); font: 500 11.5px/1.55 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .14em; color: #3b3a40; white-space: nowrap; overflow: hidden; }

.pp__stamps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 52px 16px 16px; }
.stamp { position: absolute; display: grid; place-items: center; text-align: center; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--c); border: 2px solid var(--c); opacity: .86; mix-blend-mode: multiply; transform: rotate(var(--r)); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.stamp::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--c); border-radius: inherit; opacity: .55; pointer-events: none; }
.stamp b { display: block; letter-spacing: .02em; }
.stamp--round { width: 128px; height: 128px; border-radius: 50%; padding: 18px; font-size: 9.5px; line-height: 1.35; }
.stamp--round b { font-size: 15px; margin: 2px 0; }
.stamp--rect { padding: 8px 12px; border-radius: 6px; font-size: 10px; line-height: 1.3; }
.stamp--rect b { font-size: 14px; }
.stamp--pill { padding: 10px 14px; border-radius: 40px; font-size: 10px; }
.stamp:hover { transform: rotate(0deg) scale(1.06); opacity: 1; }
.js-rv .pp__book.rv { transform: rotate(-1.2deg) translateY(34px); }
.js-rv .pp__book.rv.in { transform: rotate(-1.2deg); }
.js-rv .pp__book.rv.in:hover { transform: rotate(0deg); }
.js-rv .pp__book:not(.in) .stamp { opacity: 0; }
.js-rv .pp__book.in .stamp { animation: stamp-thunk .55s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--d) * 160ms + 500ms); }
@keyframes stamp-thunk { from { opacity: 0; transform: rotate(var(--r)) scale(1.9); } 60% { opacity: .95; } }

.pp__tags { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pp__tags li { position: relative; padding: 7px 12px 7px 22px; border-radius: 4px 10px 10px 4px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pp__tags li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--bg, #f6f0e4); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pp__tags li:hover { transform: rotate(-4deg) translateY(-1px); }
.pp__skills { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.pp__skills b { font-family: var(--f-hand); font-size: 22px; color: var(--ink); margin-right: 4px; }

@media (max-width: 960px) {
  .pp { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pp__book { grid-template-columns: 1fr; transform: none; }
  .js-rv .pp__book.rv, .js-rv .pp__book.rv.in, .pp__book:hover { transform: none; }
  .pp__page--id, .pp__page--visa { box-shadow: none; }
  .pp__page--id { min-height: 400px; }
  .pp__page--visa { min-height: 390px; }
  .pp__id { grid-template-columns: 96px minmax(0, 1fr); }
  .pp__photo { width: 96px; }
  .stamp--round { width: 116px; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .pp__book.in .stamp { animation: none; }
  .js-rv .pp__book:not(.in) .stamp { opacity: .86; }
}
/* stamps on a loose grid so they never pile up, whatever the page width */
.pp__stamps { position: static; inset: auto; margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; align-items: center; justify-items: center; }
.stamp { position: relative; left: auto !important; right: auto !important; top: auto !important; }
.stamp:nth-child(2) { justify-self: end; margin-top: 10px; }
.stamp:nth-child(3) { justify-self: start; }
.stamp:nth-child(4) { margin-top: -8px; }
.stamp--pill { grid-column: 1 / -1; margin-top: 4px; }
@media (min-width: 961px) and (max-width: 1240px) { .stamp--round { width: 112px; height: 112px; padding: 14px; } }
@media (max-width: 1180px) { .pp { grid-template-columns: 1fr; } .pp__side { max-width: 720px; } }
.pp__f abbr { text-decoration: none; cursor: help; }

/* ==========================================================================
   Type consistency pass. One scale for the home sections:
   eyebrow (handwritten) · section title · intro paragraph · small label.
   ========================================================================== */
:root { --t-title: clamp(36px, 4.2vw, 56px); --t-intro: clamp(16.5px, .4vw + 15px, 19px); --t-label: 12px; }
.eyebrow-hand, .pp__label, .be .be__k { display: inline-block; font-family: var(--f-hand); font-size: 30px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-3); transform: rotate(-3deg); line-height: 1; margin-bottom: 6px; }
.pp__h, .xp__head h2, .be h2, .hello h2 { font-size: var(--t-title); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.pp__bio, .xp__head p, .be__intro { font-size: var(--t-intro); line-height: 1.55; }
.worked p { font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.xp__head { align-items: end; }
/* small print that carries real information stays readable */
.stamp--round { font-size: 10.5px; }
.stamp--rect, .stamp--pill { font-size: 11px; }
.pp__f dt { font-size: 10px; }
.pp__kick { font-size: 10.5px; }
.xp__rng { font-size: 11.5px; }

/* accessibility pass: readable small print, solid stamp ink */
.stamp { opacity: 1; }
.hello__meta, .hello__quote figcaption, .toc__t, .glance dt, .decision__k, .shot figcaption, .xp__yr, .worked p { color: #5f5f67; }
.worked ul { color: #85827a; }
.worked li { transition: color .3s; }
.worked li:hover { color: var(--ink); }
.be__st span { color: #5f5f67; }
.xp__job.is-now .xp__yr { color: #c4372c; }
.cs__n, .steps span { color: color-mix(in srgb, var(--accent) 70%, #000); }
/* skip link: first stop for keyboard users */
.skip { position: fixed; left: 16px; top: 12px; z-index: 10000; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .25s; }
.skip:focus { transform: none; outline: 2px solid var(--c-intro); outline-offset: 2px; }
main:focus { outline: none; }
.worked ul { color: #6f6c65; }
.skip { transform: none; transition: none; }
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }

/* ==========================================================================
   Behance, v2: featured project + bento grid, one clean stat strip.
   ========================================================================== */
.bx__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 32px; }
.bx__head h2 { margin: 0; }
.bx__who { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.bx__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.bx__who b { display: block; font-size: 16px; }
.bx__who small { font-size: 13px; color: #5f5f67; }
.bx__who:hover b { color: #1769ff; }
.bx__stats { margin-top: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.bx__st { padding: 18px 4px 16px; display: grid; gap: 4px; }
.bx__st + .bx__st { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 24px); }
.bx__st b { font-size: clamp(28px, 3vw, 42px); font-weight: 900; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.bx__st span:last-child { font-size: 13px; color: #5f5f67; }
.bx__grid { margin-top: clamp(22px, 3vw, 30px); display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; }
.bx__tile { position: relative; display: grid; grid-template-rows: 1fr auto; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.bx__tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 28px 44px -26px rgba(40,25,5,.45); }
.bx__tile:focus-visible { outline: 2px solid #1769ff; outline-offset: 3px; }
.bx__img { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #eee8dc; }
.bx__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.bx__tile:hover .bx__img img { transform: scale(1.05); }
.bx__tx { padding: 14px 16px 16px; display: grid; gap: 4px; }
.bx__tx b { font-size: 15.5px; line-height: 1.25; }
.bx__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bx__row small { font-size: 13px; color: #5f5f67; }
.bx__meta { display: inline-flex; gap: 12px; font: 500 12px 'JetBrains Mono', ui-monospace, Menlo, monospace; color: #5f5f67; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bx__badge { position: absolute; top: 14px; left: 14px; z-index: 1; font: 600 11px 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; }
.bx__badge--new { background: #c4372c; }
.bx__tile--feat { grid-row: span 2; }
.bx__tile--feat .bx__img { aspect-ratio: auto; height: 100%; min-height: 320px; }
.bx__tile--feat .bx__tx { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255,253,248,.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bx__tile--feat .bx__tx b { font-size: clamp(17px, 1.4vw, 21px); }
.bx__cta { margin: clamp(22px, 3vw, 30px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; color: #5f5f67; font-size: 15px; }
.bx__follow { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: #1769ff; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(23,105,255,.7); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.bx__follow:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(23,105,255,.8); }
.bx__follow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bx__follow svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .bx__grid { grid-template-columns: 1fr 1fr; }
  .bx__tile--feat { grid-column: 1 / -1; grid-row: auto; }
  .bx__tile--feat .bx__img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .bx__stats { grid-template-columns: 1fr 1fr; }
  .bx__st:nth-child(3) { border-left: 0; padding-left: 4px; }
  .bx__st:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bx__grid { grid-template-columns: 1fr; }
  .bx__tile--feat .bx__tx { position: static; border-radius: 0; background: #fff; }
}
@media (prefers-reduced-motion: reduce) { .bx__tile, .bx__img img, .bx__follow { transition: none; } }
/* phones: featured on top, the rest as a compact 2 × 2 */
@media (max-width: 560px) {
  .bx__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bx__tile { border-radius: 16px; }
  .bx__tile:not(.bx__tile--feat) .bx__tx { padding: 10px 12px 12px; }
  .bx__tile:not(.bx__tile--feat) .bx__tx b { font-size: 13.5px; }
  .bx__tile:not(.bx__tile--feat) .bx__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bx__tile:not(.bx__tile--feat) .bx__row small { font-size: 12px; }
  .bx__badge { top: 10px; left: 10px; font-size: 10px; padding: 5px 8px; }
}
.pp__skills { margin-top: 26px; }
.bx { padding-bottom: clamp(64px, 9vw, 120px); }

/* Company marquee: one slow, endless line of names */
.bx { padding-bottom: clamp(40px, 6vw, 72px); }
.mq { padding-bottom: clamp(64px, 9vw, 120px); }
.mq__k { margin: 0 0 18px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5f5f67; }
.mq__view { display: flex; overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(16px, 2vw, 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq__track { list-style: none; margin: 0; padding: 0; display: flex; flex: none; align-items: center; animation: mq-run 48s linear infinite; }
.mq__track li { display: flex; align-items: center; white-space: nowrap; font-size: clamp(22px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.035em; color: #6f6c65; transition: color .3s; }
.mq__track li::after { content: "✦"; font-size: .45em; color: var(--c-intro); margin-inline: clamp(18px, 2.4vw, 34px); }
.mq__track li:hover { color: var(--ink); }
.mq__view:hover .mq__track { animation-play-state: paused; }
@keyframes mq-run { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .mq__view { -webkit-mask-image: none; mask-image: none; justify-content: center; }
  .mq__track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; padding-inline: 16px; row-gap: 8px; }
  .mq__track[aria-hidden] { display: none; }
}
@media (min-width: 1180px) { .xp__job.is-now .xp__lab { max-width: none; } }

/* ==========================================================================
   Passport stamps, pressed by hand: a rubber stamp drops in from the top,
   presses, lifts away, and leaves the ink behind. Driven by site.js.
   ========================================================================== */
.js-rv .pp__book.in .stamp, .js-rv .pp__book:not(.in) .stamp { animation: none; opacity: 1; }
.js-stamp .stamp:not(.is-stamped) { opacity: 0 !important; }
.js-stamp .stamp.is-stamped { animation: ink-down .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ink-down {
  0% { opacity: 0; transform: rotate(var(--r)) scale(1.1); filter: blur(1.5px); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); filter: none; }
}
.stamper { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: 50% 84%; opacity: 0; will-change: transform; }
.stamper svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 12px rgba(40, 25, 5, .35)); overflow: visible; }
.pp__book.is-jolt { animation: book-jolt .28s ease-out; }
@keyframes book-jolt { 0% { translate: 0 0; } 35% { translate: 0 2px; } 100% { translate: 0 0; } }

/* stamps drop from above and press flat onto the page (no stamping tool) */
.js-stamp .stamp.is-stamped { animation: stamp-drop .62s cubic-bezier(.3,.7,.3,1) both; }
@keyframes stamp-drop {
  0% { opacity: 0; transform: rotate(var(--r)) translateY(-70px) scale(1.7); filter: drop-shadow(0 34px 22px rgba(40,25,5,.28)); }
  55% { opacity: 1; transform: rotate(var(--r)) translateY(0) scale(.94); filter: drop-shadow(0 3px 3px rgba(40,25,5,.18)); }
  75% { transform: rotate(var(--r)) scale(1.025); filter: drop-shadow(0 1px 1px rgba(40,25,5,.08)); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); filter: none; }
}

/* VS logo */
.brand img.brand__logo { width: 34px; height: 34px; border-radius: 0; object-fit: contain; transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.brand:hover img.brand__logo { transform: rotate(-8deg) scale(1.06); }
.foot__id { display: inline-flex; align-items: center; gap: 10px; }
.foot__id img { width: 26px; height: 26px; opacity: .9; }

/* Dock + Case studies menu: one hover style everywhere — a lifted white pill */
.nwork__menu { background: rgba(244, 241, 233, .97); }
.ndock__i:not(.ndock__i--cv):hover, .nwork:hover > .ndock__i, .nwork.is-open > .ndock__i, .nwork:focus-within > .ndock__i,
.nwork__a:hover, .nwork__a:focus-visible {
  background: #fff; color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 14px -8px rgba(0,0,0,.25);
}
.nwork__a { transition: background-color .2s ease, box-shadow .2s ease, opacity .3s ease, transform .45s var(--dock-ease); }
.nwork__a:hover .nwork__tx b, .nwork__a:focus-visible .nwork__tx b { color: color-mix(in srgb, var(--c) 80%, #000); }
.nwork__a:focus-visible { outline: 2px solid #111; outline-offset: 1px; }
.nwork__a[aria-current="page"] { background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.nwork__tx small { color: #5f5f67; }
.nwork__n { color: #85827a; }
.nwork__menu { background: #f4f1e9; }
.ndock { background: rgba(250, 249, 246, .96); }

/* Case studies: the open list no longer casts its shadow down onto the dock (that dimmed the button) */
.nwork__menu { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.07), 0 -10px 40px -18px rgba(20,15,35,.35), 0 6px 10px -10px rgba(20,15,35,.12); }
.nwork > .ndock__i { position: relative; z-index: 1; }
/* Sublinks: hover responds instantly; the stagger applies only to the list opening */
.nwork__a { transition: background-color .14s ease, box-shadow .14s ease, color .14s ease, opacity .3s ease, transform .45s var(--dock-ease); }
.nwork:hover .nwork__a:nth-of-type(1), .nwork.is-open .nwork__a:nth-of-type(1), .nwork:focus-within .nwork__a:nth-of-type(1) { transition-delay: 0s, 0s, 0s, .18s, .18s; }
.nwork:hover .nwork__a:nth-of-type(2), .nwork.is-open .nwork__a:nth-of-type(2), .nwork:focus-within .nwork__a:nth-of-type(2) { transition-delay: 0s, 0s, 0s, .22s, .22s; }
.nwork:hover .nwork__a:nth-of-type(3), .nwork.is-open .nwork__a:nth-of-type(3), .nwork:focus-within .nwork__a:nth-of-type(3) { transition-delay: 0s, 0s, 0s, .26s, .26s; }
.nwork:hover .nwork__a:nth-of-type(4), .nwork.is-open .nwork__a:nth-of-type(4), .nwork:focus-within .nwork__a:nth-of-type(4) { transition-delay: 0s, 0s, 0s, .30s, .30s; }
.nwork:hover .nwork__a:nth-of-type(5), .nwork.is-open .nwork__a:nth-of-type(5), .nwork:focus-within .nwork__a:nth-of-type(5) { transition-delay: 0s, 0s, 0s, .34s, .34s; }
.nwork__tx b { transition: color .14s ease; }
.nwork__ic { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

/* Case studies: body copy uses the full width of the content column */
.page-case .cs__p, .page-case .cs__aside, .page-case .case-main p, .page-case .cs > * { max-width: none; }

/* Outcome ticks: icon beside the text, ruled top and bottom */
.metrics { border-bottom: 1px solid #ece9e2; }
.page-case .metric, .metric { grid-template-columns: 28px minmax(0, 1fr); align-items: start; column-gap: 14px; padding: 20px 28px 20px 0; }
.metric + .metric { padding-left: 28px; }
.metric__l { padding-top: 2px; }
@media (max-width: 900px) {
  .page-case .metric, .metric, .metric + .metric { padding: 16px 0; border-left: 0; }
  .metric + .metric { border-top: 1px solid #ece9e2; border-bottom: 0; }
  .metric { border-bottom: 0; }
}
.brand img.brand__logo { width: 42px; height: 42px; }
.brand img.brand__logo { width: 34px; height: 34px; } .foot__id img { width: 24px; height: 24px; }

/* Logo: the VDS monogram opens into the full vdezignstudio wordmark on hover / focus */
.brand { gap: 0; }
.brand__mark { position: relative; display: block; height: 36px; width: 36px; transition: width .55s cubic-bezier(.22, 1, .36, 1); }
.brand__mark img { position: absolute; left: 0; top: 0; height: 36px; max-width: none; border-radius: 0; }
.brand img.brand__logo { width: 36px; height: 36px; transform: none; transition: opacity .25s ease .05s; }
.brand:hover img.brand__logo { transform: none; }
.brand__word { width: 114px; opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
.brand:hover .brand__mark, .brand:focus-visible .brand__mark { width: 114px; }
.brand:hover .brand__logo, .brand:focus-visible .brand__logo { opacity: 0; transition-delay: 0s; }
.brand:hover .brand__word, .brand:focus-visible .brand__word { opacity: 1; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .brand__mark, .brand__word, .brand img.brand__logo { transition: none; } }
.brand img.brand__word { width: 114px; height: 36px; object-fit: contain; object-position: left center; border-radius: 0; }

/* Top bar: logo on the left, one round résumé button on the right that opens into a label */
.top__in { align-items: center; }
.cvbtn { display: inline-flex; align-items: center; height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; background: #141416; color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.55); transition: padding .5s cubic-bezier(.22,1,.36,1), background-color .25s ease, box-shadow .3s ease; }
.cvbtn__ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.cvbtn__ic svg { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.cvbtn__t { display: inline-block; max-width: 0; opacity: 0; margin-left: 0; transition: max-width .5s cubic-bezier(.22,1,.36,1), opacity .25s ease, margin-left .5s cubic-bezier(.22,1,.36,1); }
.cvbtn:hover, .cvbtn:focus-visible { background: #000; padding: 0 18px 0 14px; box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); }
.cvbtn:hover .cvbtn__t, .cvbtn:focus-visible .cvbtn__t { max-width: 160px; opacity: 1; margin-left: 10px; transition-delay: 0s, .08s, 0s; }
.cvbtn:hover .cvbtn__ic svg { transform: translateY(2px); }
.cvbtn:focus-visible { outline: 2px solid var(--c-intro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cvbtn, .cvbtn__t, .cvbtn__ic svg { transition: none; } }
.top nav a.cvbtn { display: inline-flex; padding: 0 12px; font-weight: 700; font-size: 14.5px; background: #141416; color: #fff; }
.top nav a.cvbtn:hover, .top nav a.cvbtn:focus-visible { background: #000; padding: 0 18px 0 14px; }

/* Passport ID page: the coded strip sits in the page flow, so it never covers the details or signature */
.pp__page--id { display: flex; flex-direction: column; }
.pp__mrz { position: static; margin: auto -22px -18px; margin-top: auto; padding-top: 12px; overflow-wrap: anywhere; white-space: normal; word-break: break-all; }
.pp__sig { margin-bottom: 14px; align-self: flex-start; }
.pp__page--id { min-height: 0; }
.pp__f dd { overflow-wrap: anywhere; }
@media (max-width: 359px) { .stamp--round { width: 100px; height: 100px; padding: 12px; font-size: 9.5px; } .stamp--round b { font-size: 13px; } .pp__page--visa { padding-inline: 14px; } }

/* Boarding-pass notches as real cut-outs (the backdrop shows through), like a printed ticket */
.slide__card.ix { background: transparent; }
.slide__card.ix::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; pointer-events: none;
  --nr: 3.4cqi;
  -webkit-mask: radial-gradient(circle var(--nr) at 0 var(--tear, 78%), transparent 97%, #000 100%), radial-gradient(circle var(--nr) at 100% var(--tear, 78%), transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle var(--nr) at 0 var(--tear, 78%), transparent 97%, #000 100%), radial-gradient(circle var(--nr) at 100% var(--tear, 78%), transparent 97%, #000 100%);
          mask-composite: intersect; }
.ix__tear::before, .ix__tear::after, .page-case .ix__tear::before, .page-case .ix__tear::after { display: none; }
.ix__tear { margin-inline: calc(var(--nr, 3.4cqi) * 0 - 1.6cqi); border-top-color: #dcd8cf; }

/* Open passport: two pages meeting at a stitched spine, with a gap and page curl */
.pp__book { position: relative; gap: 10px; padding: 12px; background: linear-gradient(90deg, #1f3a5a, #2a4a70 48%, #1a3150 50%, #2a4a70 52%, #1f3a5a); box-shadow: 0 50px 80px -46px rgba(20,30,50,.65), 0 0 0 1px #17304d; }
.pp__page { border-radius: 8px; }
.pp__page--id { border-radius: 12px 4px 4px 10px; box-shadow: inset -26px 0 30px -24px rgba(70,45,10,.45), 0 2px 0 #e9dcc0, 0 4px 0 #e2d3b4; }
.pp__page--visa { border-radius: 4px 10px 10px 4px; box-shadow: inset 26px 0 30px -24px rgba(70,45,10,.45), 0 2px 0 #e9dcc0, 0 4px 0 #e2d3b4; }
.pp__book::after { content: ""; position: absolute; top: 18px; bottom: 18px; left: 50%; width: 2px; margin-left: -1px; pointer-events: none;
  background: repeating-linear-gradient(180deg, #f3e9d3 0 7px, transparent 7px 13px); opacity: .9; }
@media (max-width: 640px) {
  .pp__book { gap: 14px; padding: 12px; background: linear-gradient(180deg, #1f3a5a, #2a4a70 49%, #1a3150 50%, #2a4a70 51%, #1f3a5a); }
  .pp__page--id { border-radius: 12px 10px 4px 4px; box-shadow: inset 0 -24px 28px -24px rgba(70,45,10,.4), 0 2px 0 #e9dcc0; }
  .pp__page--visa { border-radius: 4px 4px 10px 10px; box-shadow: inset 0 24px 28px -24px rgba(70,45,10,.4), 0 2px 0 #e9dcc0; }
  .pp__book::after { top: 50%; bottom: auto; left: 22px; right: 22px; width: auto; height: 2px; margin: -1px 0 0; background: repeating-linear-gradient(90deg, #f3e9d3 0 7px, transparent 7px 13px); }
}
/* collapsed timeline: latest three roles only */
@media (max-width: 1179px) {
  .xp:not(.xp--open) .xp__job:nth-child(7) { display: none; }
  .xp--open .xp__job:nth-child(-n+7) { animation: xp-drop .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc((6 - var(--i)) * 60ms); }
}
/* desktop: collapsed rail shows the latest three roles on their own scale; "Show 7 earlier roles" opens the full journey */
@media (min-width: 1180px) {
  .xp__more { display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 10px 18px 10px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 14px/1 inherit; font-family: inherit; color: var(--ink); cursor: pointer; transition: box-shadow .25s; }
  .xp__more:hover { box-shadow: 0 0 0 1px var(--ink); }
  .xp__more:focus-visible { outline: 2px solid var(--c-intro); outline-offset: 3px; }
  .xp__dots { display: inline-flex; gap: 3px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .xp__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
  .xp--open .xp__dots { transform: rotate(90deg); }
  .xp:not(.xp--open) .xp__job:nth-child(-n+7) { display: none; }
  .xp:not(.xp--open) .xp__job { left: calc(100% * var(--s3)); width: calc(100% * var(--w3)); }
  .xp:not(.xp--open) .xp__lab { max-width: 220px; }
  .xp:not(.xp--open) .xp__chaps { display: none; }
  .xp:not(.xp--open) .xp__rail { height: 220px; }
  .xp .xp__job { transition: left .7s cubic-bezier(.22,1,.36,1), width .7s cubic-bezier(.22,1,.36,1); }
  .xp--open .xp__job:nth-child(-n+7) .xp__lab, .xp--open .xp__job:nth-child(-n+7)::before { animation: xp-drop .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 50ms + .2s); }
}
@media (min-width: 1180px) { .xp--open .xp__lab { max-width: 124px; } }
@media (min-width: 1180px) { .xp__lab { grid-template-columns: minmax(0, 1fr); } .xp__rng { width: 0; overflow: visible; } }
@media (min-width: 1180px) { .xp__job.is-now .xp__rng { width: auto; } .xp__job:nth-last-child(2) .xp__rng, .xp__job:nth-last-child(3) .xp__rng { direction: ltr; } }
/* Spine stitch: a real column (row on phones) between the two pages, so it always sits in the gap */
.pp__book::after { display: none; }
.pp__book { grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 4px; }
.pp__spine { align-self: stretch; margin-block: 8px; width: 2px; background: repeating-linear-gradient(180deg, #f3e9d3 0 7px, transparent 7px 13px); opacity: .9; }
@media (max-width: 640px) {
  .pp__book { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 2px auto; gap: 6px; }
  .pp__spine { width: auto; height: 2px; margin: 0 10px; background: repeating-linear-gradient(90deg, #f3e9d3 0 7px, transparent 7px 13px); }
}
/* desktop (web): the full timeline always shows; the three-role view is for tablets and phones only */
@media (min-width: 1180px) {
  .xp .xp__more { display: none; }
  .xp:not(.xp--open) .xp__job:nth-child(-n+7) { display: block; }
  .xp:not(.xp--open) .xp__job { left: calc(100% * var(--s)); width: calc(100% * var(--w)); }
  .xp:not(.xp--open) .xp__lab { max-width: 124px; }
  .xp:not(.xp--open) .xp__job.is-now .xp__lab { max-width: none; }
  .xp:not(.xp--open) .xp__chaps { display: block; }
  .xp:not(.xp--open) .xp__rail { height: 260px; }
}

/* A small semi-high-speed train glides along the bottom rail of the teams strip every so often */
.mq { position: relative; }
.mq__view { position: relative; }
.mq__train { position: absolute; left: 0; bottom: -2px; width: 190px; height: auto; z-index: 2; pointer-events: none;
  transform: translateX(-220px); animation: mq-train 16s cubic-bezier(.55,.05,.35,1) 2s infinite; filter: drop-shadow(0 3px 3px rgba(20,20,30,.18)); }
@keyframes mq-train {
  0% { transform: translateX(-220px); }
  38% { transform: translateX(calc(100vw + 40px)); }
  100% { transform: translateX(calc(100vw + 40px)); }
}
@media (max-width: 640px) { .mq__train { width: 140px; } }
@media (prefers-reduced-motion: reduce) { .mq__train { display: none; } }
/* nose first: the train runs right-to-left, the same way the names drift */
.mq__train { transform: translateX(calc(100vw + 40px)); animation-name: mq-train-rtl; }
@keyframes mq-train-rtl {
  0% { transform: translateX(calc(100vw + 40px)); }
  38% { transform: translateX(-230px); }
  100% { transform: translateX(-230px); }
}
.mq__train { display: none !important; }

/* Profile card: the camera fires its flash every few seconds, lighting up the photo */
.slide[data-c="intro"] .ixo:has(img[src*="camera"])::after {
  content: ""; position: absolute; left: 88%; top: 23%; width: 160%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, rgba(255,255,255,.95) 10%, rgba(255,246,214,.55) 22%, rgba(255,246,214,0) 55%),
              conic-gradient(from 0deg, transparent 0 8deg, rgba(255,255,255,.7) 10deg, transparent 12deg 52deg, rgba(255,255,255,.7) 55deg, transparent 58deg 98deg, rgba(255,255,255,.7) 100deg, transparent 103deg 143deg, rgba(255,255,255,.7) 145deg, transparent 148deg 188deg, rgba(255,255,255,.7) 190deg, transparent 193deg 233deg, rgba(255,255,255,.7) 235deg, transparent 238deg 278deg, rgba(255,255,255,.7) 280deg, transparent 283deg 323deg, rgba(255,255,255,.7) 325deg, transparent 328deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 62%); mask: radial-gradient(circle, #000 25%, transparent 62%);
  opacity: 0; scale: .3; animation: cam-flash 5.5s ease-out 2.5s infinite; mix-blend-mode: screen; }
.slide[data-c="intro"] .ix__panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 10% 10%, rgba(255,255,255,.95), rgba(255,255,255,.35) 60%, rgba(255,255,255,0));
  opacity: 0; animation: photo-flash 5.5s ease-out 2.5s infinite; }
@keyframes cam-flash { 0%, 100% { opacity: 0; scale: .3; } 1.5% { opacity: 1; scale: 1; } 7% { opacity: 0; scale: 1.25; } }
@keyframes photo-flash { 0%, 100% { opacity: 0; } 1.6% { opacity: .75; } 9% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .slide[data-c="intro"] .ixo:has(img[src*="camera"])::after, .slide[data-c="intro"] .ix__panel::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   Hero backdrop v3: the "roots" artwork. Full-bleed, anchored to the sky,
   the roots fade into the page below. It still pans Kerala → Norway as the
   cards turn.
   ========================================================================== */
.journey { -webkit-mask-image: none; mask-image: none; background: #f3e7d2; }
.journey img, .journey img[src] {
  top: 0 !important; bottom: auto !important; left: 0; height: 100% !important; width: 118% !important; max-width: none; min-width: 0;
  object-fit: cover; object-position: 50% 0; translate: none; margin: 0; opacity: 1; mix-blend-mode: normal;
  transform: translate3d(calc(var(--pan, 0) * (100vw - 100%)), 0, 0);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
}
.journey::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(246,240,228,.78) 0%, rgba(246,240,228,.25) 16%, rgba(246,240,228,0) 30%); }
@media (max-width: 600px) {
  .journey img, .journey img[src] { width: 300% !important; object-position: 0 0; }
}
/* the artwork carries its own lettering (Kerala, Bangalore, Canada, Norway), so the big PORTFOLIO cover steps aside */
.stage:has(.journey) .cover { display: none !important; }
.journey img, .journey img[src] { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 84%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 84%); }
@media (max-width: 600px) {
  .journey img, .journey img[src] { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 70%); }
}
.journey::before { background: linear-gradient(180deg, rgba(246,240,228,.55) 0%, rgba(246,240,228,0) 14%); }

/* backdrop shown uncropped top to bottom: full height, natural proportions */
.journey img, .journey img[src] { height: 100% !important; width: auto !important; min-width: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: none !important; mask-image: none !important; }
@media (min-width: 901px) { .stage:has(.journey) { min-height: max(100svh, calc(100vw / 1.5)); } }
@media (max-width: 600px) { .journey img, .journey img[src] { width: auto !important; } }
.journey::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(246,240,228,0), #f6f0e4); display: block; z-index: 1; }
.journey::after { top: auto !important; bottom: 0; height: 40px; }
/* hero → page: the soil dissolves gradually into the cream page instead of a muddy strip */
.journey::after { display: none !important; }
.journey img, .journey img[src] {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.82) 85%, rgba(0,0,0,.55) 90%, rgba(0,0,0,.25) 95%, rgba(0,0,0,.08) 98%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.82) 85%, rgba(0,0,0,.55) 90%, rgba(0,0,0,.25) 95%, rgba(0,0,0,.08) 98%, transparent 100%) !important; }
.stage:has(.journey) { background: #f6f0e4; }
.stage:has(.journey) { background: rgb(246, 244, 239) !important; }
.journey { background: transparent !important; }
/* Photo Studio: the wide studio shot spans the column; the before/after sits beneath at a readable size */
#studio .gallery { grid-template-columns: 1fr; }
#studio .gallery .shot:nth-child(2) { max-width: 720px; justify-self: center; }

/* Case studies: more breathing room between and inside sections */
.page-case .case-main { gap: clamp(96px, 11vw, 160px); }
.page-case .cs { gap: 22px; }
.page-case .cs > h2 { margin-bottom: 6px; }
.page-case .cs .gallery { margin-top: 18px; gap: clamp(20px, 2.4vw, 32px); }
.page-case .shot figcaption { margin-top: 12px; }
.page-case .cs .steps, .page-case .cs .metrics, .page-case .cs .decisions, .page-case .cs .features { margin-top: 10px; }
.page-case .cs-links { margin-top: 8px; }
.page-case .glance { padding-block: clamp(36px, 4vw, 56px); }
.page-case .case-body { padding-top: clamp(72px, 8vw, 120px); }

/* Case studies: flat blocks, no drop shadows (images, decisions, outcomes, steps, links, next-project) */
.page-case main *:not(.stage-mini *):not(.stage-mini) { box-shadow: none !important; }
.page-case main .shot img, .page-case main .shot { filter: none !important; }
.page-case main .shot img { border: 1px solid #ece9e2; }

/* Case studies: every image fills the column at its full natural shape, square corners, nothing clipped */
.page-case .case-main .gallery { grid-template-columns: 1fr !important; }
.page-case .case-main .shot, .page-case .case-main .gallery .shot, .page-case .case-main .shot--tall, .page-case #studio .gallery .shot:nth-child(2) {
  grid-column: 1 / -1; width: 100%; max-width: none; justify-self: stretch; }
.page-case .case-main .shot img, .page-case .shot--hero img { width: 100%; height: auto; object-fit: contain; border-radius: 0 !important; }

/* Phones & tablets: "On this page" becomes a sticky, swipeable chip bar under the reading progress line */
@media (max-width: 960px) {
  .page-case .toc { position: sticky; top: 0; z-index: 70; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px), 3vw)); padding: calc(env(safe-area-inset-top, 0px) + 12px) max(16px, 3vw) 10px;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid #ece9e2; }
  .page-case .js-rv .toc.rv, .js-rv .page-case .toc.rv { transform: none; opacity: 1; }
  .page-case .toc__t { display: none; }
  .page-case .toc ol { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .page-case .toc ol::-webkit-scrollbar { display: none; }
  .page-case .toc li { flex: none; scroll-snap-align: start; }
  .page-case .toc a { white-space: nowrap; background: #fff; }
  .page-case .toc a.is-on { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--ink); }
  .page-case .toc a:hover { transform: none; }
  .page-case .cs { scroll-margin-top: 72px; }
}
@media (max-width: 960px) {
  .page-case .case-grid > * { min-width: 0; }
  .page-case .toc { min-width: 0; max-width: 100vw; box-sizing: border-box; padding-top: calc(env(safe-area-inset-top, 0px) + 40px); }
  .page-case .toc ol { width: 100%; max-width: 100%; }
}
@media (max-width: 960px) { .page-case .cs { scroll-margin-top: 112px; } }

/* ==========================================================================
   Ambient grid: a very light drafting grid behind the page that drifts
   slowly, with a soft glow that follows the pointer.
   ========================================================================== */
body::before {
  content: ""; position: fixed; inset: -96px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 20, 22, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 22, .05) 1px, transparent 1px),
    linear-gradient(rgba(20, 20, 22, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 22, .025) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(600px 420px at var(--gx, 50%) var(--gy, 40%), #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.28) 100%);
          mask-image: radial-gradient(600px 420px at var(--gx, 50%) var(--gy, 40%), #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.28) 100%);
  animation: grid-drift 60s linear infinite;
}
@keyframes grid-drift { to { transform: translate3d(96px, 96px, 0); } }

/* ==========================================================================
   Butter-smooth motion: one long, soft ease for every reveal.
   ========================================================================== */
:root { --silk: cubic-bezier(.16, 1, .3, 1); }
.js-rv .rv { transition: opacity 1.1s var(--silk), transform 1.3s var(--silk), clip-path 1.4s var(--silk), filter 1.1s var(--silk); transition-delay: calc(var(--rv, 0) * 80ms); will-change: opacity, transform; }
.js-rv .rv.in { will-change: auto; }
html { scroll-behavior: smooth; }

/* ==========================================================================
   Frosted glass panels: sections float over the grid.
   ========================================================================== */
.glass, .hello__in, .bx__stats, .mq__view, .page-case .glance__in, .page-case .decision, .page-case .metrics, .page-case .feature {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(20,20,22,.05) !important;
}
.hello__in { border-radius: 32px; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px); max-width: 980px; margin-inline: auto; }
.bx__stats { border-radius: 24px; border-block: 0; padding-inline: 8px; }
.mq__view { border-radius: 24px; border-block: 0; }
.page-case .glance__in { border-radius: 24px; padding: 22px clamp(18px, 3vw, 32px); }
.page-case .decision, .page-case .feature { border-radius: 16px; }
.page-case .metrics { border-radius: 16px; border-block: 0; padding-inline: 20px; }

/* ==========================================================================
   Pixel runner above the dock: an original little diecast car hopping cones.
   ========================================================================== */
.runner { position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom, 0px) + 12px) + 62px); z-index: 59; width: 300px; height: 42px; translate: -50% 0;
  pointer-events: none; opacity: 0; transition: opacity .5s var(--silk), transform .6s var(--silk); transform: translateY(10px); image-rendering: pixelated; }
.runner.is-on { opacity: .9; transform: none; }
.runner canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) { .runner { width: 220px; height: 31px; } }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .runner { display: none; }
  html { scroll-behavior: auto; }
}

/* Pixel skyway above the footer: full width, monochrome, crisp pixels */
.runner { display: none !important; }
.skyway { display: block; width: 100%; height: 90px; overflow: hidden; margin-top: clamp(24px, 4vw, 48px); image-rendering: pixelated; opacity: .9; }
.skyway canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
@media (max-width: 600px) { .skyway { height: 90px; } }
@media (prefers-reduced-motion: reduce) { .skyway { display: none; } }
.skyway { margin: 0 !important; opacity: 1; height: 90px; }
.skyway + footer.band, footer.band { margin-top: 0; }
.skyway { height: 108px; }
/* Hi-five wave */
.hello h2 .hi5 { position: relative; display: inline-block; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ctext x='4' y='54' font-size='52'%3E%E2%9C%8B%3C/text%3E%3C/svg%3E") 30 8, pointer; transform-origin: 70% 80%; }
.hello h2 .hi5:hover .hi5__face { transform: scale(1.15); }
.hi5__face { transition: transform .35s var(--silk, ease); }
.hi5__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px); white-space: nowrap; font: 700 13px/1 var(--f-sans, system-ui), sans-serif; letter-spacing: .02em; color: #fff; background: #121212; padding: 7px 11px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .35s var(--silk, ease), transform .35s var(--silk, ease); }
.hi5:hover .hi5__tip, .hi5.is-hit .hi5__tip { opacity: 1; transform: translate(-50%, 0); }
.hi5.is-hit .hi5__face { animation: hi5-slap .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes hi5-slap { 0% { transform: scale(1.1); } 35% { transform: scale(1.3); } 100% { transform: rotate(0) scale(1); } }
.hi5__spark { position: absolute; left: 50%; top: 45%; width: 4px; height: 12px; margin: -6px 0 0 -2px; border-radius: 2px; background: var(--c-intro, #e5483d); pointer-events: none; transform: rotate(var(--a)) translateY(-10px); animation: hi5-spark .6s ease-out forwards; }
@keyframes hi5-spark { to { transform: rotate(var(--a)) translateY(-34px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hi5.is-hit .hi5__face, .hi5__spark { animation: none; } .hi5__spark { display: none; } }
.hello h2 .hi5:hover, .hello h2 .hi5.is-hit { animation-play-state: paused; }
.hello h2 .hi5:hover { animation: none; }
.hello h2 .hi5.is-hit { animation: none; }
.hi5__face { display: inline-block; }
.skyway { height: 52px; }
/* Hi-five prompt: a bobbing invite until the visitor gives one */
.hi5.is-ask .hi5__tip { opacity: 1; transform: translate(-50%, 0); animation: hi5-ask 1.8s ease-in-out infinite; background: var(--c-intro, #e5483d); }
.hi5.is-ask .hi5__tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--c-intro, #e5483d); }
.hi5__tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #121212; }
@keyframes hi5-ask { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
.hi5:hover .hi5__tip { animation: none; }
@media (prefers-reduced-motion: reduce) { .hi5.is-ask .hi5__tip { animation: none; } }
/* wave the emoji only, so the invite bubble stays level */
.hello h2 .wave.hi5 { animation: none; }
.hi5 .hi5__face { transform-origin: 70% 75%; animation: wave 2.6s ease-in-out .6s infinite; }
.hi5:hover .hi5__face { animation: none; }
.hi5.is-hit .hi5__face { animation: hi5-slap .55s cubic-bezier(.3,1.6,.5,1); }
@media (prefers-reduced-motion: reduce) { .hi5 .hi5__face { animation: none; } }
/* Buttons: one light shadow tinted with the primary colour, site-wide (incl. case pages and the floating dock) */
:root { --sh-btn: 0 8px 20px -10px rgba(229, 72, 61, .42), 0 2px 6px -3px rgba(229, 72, 61, .22); --sh-btn-hi: 0 14px 28px -12px rgba(229, 72, 61, .5), 0 3px 8px -3px rgba(229, 72, 61, .26); }
.btn, .wa, .wa-fab, .cvbtn, .xp__more, .ix__go, .ndock, .ndock .ndock__i--cv,
.ndock__i[aria-current="page"], .nwork__btn[data-current],
.page-case main .btn, .page-case main .wa, .page-case main .xp__more { box-shadow: var(--sh-btn) !important; }
.btn:hover, .wa:hover, .wa-fab:hover, .cvbtn:hover, .cvbtn:focus-visible, .xp__more:hover, .ndock .ndock__i--cv:hover,
.page-case main .btn:hover, .page-case main .wa:hover { box-shadow: var(--sh-btn-hi) !important; }
.ctrl:hover, .ndock__i:hover { box-shadow: var(--sh-btn); }
.controls { box-shadow: var(--sh-btn), 0 0 0 1px rgba(229, 72, 61, .06) !important; }
.hello__in { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; }
/* Button shadows take each button's own colour (replaces the all-red tint) */
:root { --sh-btn: 0 8px 20px -10px color-mix(in srgb, var(--bsh, #141416) 45%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--bsh, #141416) 22%, transparent);
        --sh-btn-hi: 0 14px 28px -12px color-mix(in srgb, var(--bsh, #141416) 55%, transparent), 0 3px 8px -3px color-mix(in srgb, var(--bsh, #141416) 26%, transparent); }
.btn, .btn, .wa, .wa-fab, .cvbtn, .xp__more, .ix__go, .ndock, .ndock .ndock__i--cv, .ndock__i, .nwork__btn, .ctrl, .controls { --sh-btn: 0 8px 20px -10px color-mix(in srgb, var(--bsh, #141416) 45%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--bsh, #141416) 22%, transparent); --sh-btn-hi: 0 14px 28px -12px color-mix(in srgb, var(--bsh, #141416) 55%, transparent), 0 3px 8px -3px color-mix(in srgb, var(--bsh, #141416) 26%, transparent); }
.wa, .wa-fab { --bsh: #1fa855; }                       /* WhatsApp green */
.cvbtn, .ndock .ndock__i--cv { --bsh: #0b0b0d; }      /* ink buttons */
.ix__go { --bsh: var(--c, #e5483d); }                 /* each card's own brand colour */
.slide[data-c="hotelhub"] .ix__go { --bsh: #b57800; }
.slide[data-c="tiny"] .ix__go { --bsh: #c4540f; }
.ndock, .controls, .xp__more, .ndock__i, .nwork__btn, .ctrl { --bsh: #5a4a36; }  /* light pills: warm neutral, matches the paper */
.btn { --bsh: #0b0b0d; }
.btn--line { --bsh: #000; }
.controls { box-shadow: var(--sh-btn), 0 0 0 1px rgba(0, 0, 0, .04) !important; }

/* Radius scale: pill 999 · panel 32 · card 24 · tile 16 · well 12 · small 8 */
:root { --r-pill: 999px; --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px; }
.wa { border-radius: var(--r-pill); padding-right: 22px; }
/* Hover for every button: a gentle lift plus a stronger shadow in its own colour */
.btn:hover, .wa:hover, .wa-fab:hover, .xp__more:hover, .bx__follow:hover, .cvbtn:hover { transform: translateY(-2px); }
.btn, .wa, .wa-fab, .xp__more, .bx__follow { transition: transform .35s var(--silk, ease), box-shadow .35s var(--silk, ease), background-color .2s, color .2s; }
.xp__more:hover, .bx__follow:hover { box-shadow: var(--sh-btn-hi) !important; }
.back { transition: color .2s; }
.back svg { transition: transform .35s var(--silk, ease); }
.back:hover { color: var(--accent, #e5483d); }
.back:hover svg { transform: translateX(-4px); }
.caption__go:hover { color: var(--accent, #e5483d); }
.dot:hover .dot__track { background: rgba(0, 0, 0, .28); }
/* Carousel pagination: same glass pill as the floating dock */
.controls { height: auto; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(250, 249, 246, .78); color: #2c2c31;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(0,0,0,.07), 0 20px 44px -16px rgba(20,15,35,.32) !important; }
.controls .ctrl { width: 42px; height: 42px; color: #2c2c31; box-shadow: none; transition: background-color .3s ease, box-shadow .3s ease; }
.controls .ctrl svg { stroke-width: 1.6; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.controls .ctrl:hover { background: rgba(255,255,255,.85); box-shadow: none; }
.controls .ctrl:hover svg { transform: translateY(-1px) scale(1.06); }
.controls .ctrl:focus-visible, .controls .dot:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.controls .ctrl[data-play]::before { top: 12px; bottom: 12px; }
.controls .ctrl[data-play] { margin-left: 9px; } .controls .ctrl[data-play]::before { left: -6px; }
/* Behance stats: an icon well per figure, tinted in its own colour */
.bx__st { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(12px, 1.4vw, 18px); row-gap: 4px; align-items: center; }
.bx__st > b, .bx__st > span:last-child { grid-column: 2; }
.bx__st > b { align-self: end; } .bx__st > span:last-child { align-self: start; }
.bx__ic { grid-row: 1 / span 2; width: clamp(44px, 4vw, 54px); height: clamp(44px, 4vw, 54px); border-radius: 16px; display: grid; place-items: center;
  color: var(--ic); background: color-mix(in srgb, var(--ic) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 16%, transparent);
  transition: transform .5s var(--silk, ease), background-color .3s; }
.bx__ic svg { width: 46%; height: 46%; }
.bx__st:hover .bx__ic { transform: translateY(-2px) rotate(-4deg); background: color-mix(in srgb, var(--ic) 17%, #fff); }
@media (max-width: 760px) { .bx__st { padding-block: 16px; } }
.bx__ic svg { width: 52%; height: 52%; stroke-width: 1.9; }

/* ===== Experience: view toggle + Career run (pixel level) ===== */
.xpv { display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; align-self: end;
  background: rgba(250,249,246,.9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.07), 0 20px 44px -18px rgba(20,15,35,.3); }
.xpv__b { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #2c2c31; cursor: pointer;
  font: 600 14.5px/1 Figtree, system-ui, sans-serif; transition: background-color .3s, box-shadow .3s, color .3s; }
.xpv__b:hover { background: rgba(255,255,255,.85); }
.xpv__b[aria-pressed="true"] { background: #141416; color: #fff; box-shadow: 0 8px 20px -10px rgba(11,11,13,.45); }
.xpv__b:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.xp.is-run .xp__track { display: none; }
.xr { margin-top: clamp(20px, 2.4vw, 32px); display: grid; gap: 14px; }
.xr__lvl { position: relative; height: 420px; overflow: hidden; border-radius: 24px; touch-action: pan-y;
  background: linear-gradient(rgba(20,20,22,.06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(20,20,22,.06) 1px, transparent 1px) 0 0 / 32px 32px, #fbfaf7;
  box-shadow: inset 0 0 0 1px rgba(20,20,22,.08); }
.xr__world { position: absolute; inset: 0 auto 0 0; will-change: transform; }
.xr__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: repeating-linear-gradient(90deg, #141416 0 18px, #2a2a2e 18px 36px); }
.xr__ground::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: #141416; }
.xr__ground::after { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 3px; background: repeating-linear-gradient(90deg, #fbfaf7 0 18px, transparent 18px 46px); opacity: .55; }
.xr__blk { position: absolute; bottom: 198px; width: 48px; height: 48px; margin-left: -24px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: #fff;
  box-shadow: 0 0 0 3px #141416, inset -6px -6px 0 rgba(20,20,22,.08), 0 10px 20px -12px rgba(20,20,22,.4) !important; display: grid; place-items: center; transition: background-color .25s; }
.xr__blk svg { width: 26px; height: 26px; }
.xr__blk .yr { display: none; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; }
.xr__blk.is-hit { background: #141416; } .xr__blk.is-hit svg { display: none; } .xr__blk.is-hit .yr { display: block; }
.xr__blk:hover:not(.is-hit) { background: #fff2f0; }
.xr__blk.bump { animation: xr-bump .42s cubic-bezier(.16,1,.3,1); }
@keyframes xr-bump { 35% { transform: translateY(-14px); } }
.xr__blk:focus-visible { outline: 3px solid #e5483d; outline-offset: 6px; }
.xr__px { position: absolute; width: 8px; height: 8px; background: #e5483d; pointer-events: none; animation: xr-px .6s ease-out forwards; }
@keyframes xr-px { to { transform: translate(var(--dx), -46px); opacity: 0; } }
.xr__card { position: absolute; bottom: 262px; width: 208px; margin-left: -104px; padding: 12px 14px 13px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(20,20,22,.08), 0 18px 36px -20px rgba(20,20,22,.45); display: grid; gap: 4px; pointer-events: none; text-align: left;
  opacity: 0; transform: translateY(14px) scale(.7); transform-origin: 50% 100%; z-index: 2;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), padding .5s cubic-bezier(.16,1,.3,1); }
.xr__card::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: 1px 1px 0 rgba(20,20,22,.08); }
.xr__card.is-open { opacity: 1; transform: none; z-index: 4; }
.xr__card small { font: 600 11px/1.2 "JetBrains Mono", ui-monospace, monospace; color: #e5483d; }
.xr__card b { font-size: 17px; line-height: 1.15; color: #141416; }
.xr__card span { font-size: 13.5px; color: #5f5f67; line-height: 1.3; }
.xr__card em { font: 500 11.5px/1.2 "JetBrains Mono", ui-monospace, monospace; font-style: normal; color: #5f5f67; }
.xr__card.is-mini { opacity: 1; transform: none; width: auto; max-width: 112px; margin-left: 0; translate: -50% 0; padding: 7px 10px; gap: 2px; box-shadow: 0 0 0 1px rgba(20,20,22,.08); z-index: 1; }
.xr__card.is-mini span, .xr__card.is-mini em, .xr__card.is-mini small { display: none; }
.xr__card.is-mini b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr__flag { position: absolute; bottom: 56px; width: 3px; height: 104px; background: #141416; }
.xr__flag i { position: absolute; left: 3px; top: 0; width: 22px; height: 14px; background: #e5483d; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.xr__flag b { position: absolute; left: 30px; top: 0; white-space: nowrap; font: 600 11px/14px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #5f5f67; }
.xr__hero { position: absolute; bottom: 56px; width: 48px; height: 72px; margin-left: -24px; image-rendering: pixelated; z-index: 3; }
.xr__shadow { position: absolute; bottom: 52px; height: 5px; width: 34px; margin-left: -17px; border-radius: 50%; background: rgba(20,20,22,.18); z-index: 2; }
.xr__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.xr__btn { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #141416; cursor: pointer; font: 700 14px/1 Figtree, system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(20,20,22,.08), 0 8px 20px -10px rgba(90,74,54,.4); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.xr__btn--dark { background: #141416; color: #fff; box-shadow: 0 8px 20px -10px rgba(11,11,13,.45); }
.xr__btn:hover { transform: translateY(-2px); }
.xr__btn:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.xr__hint { font-size: 14px; color: #5f5f67; }
@media (max-width: 600px) { .xr__lvl { height: 410px; } .xpv { align-self: start; } }
@media (prefers-reduced-motion: reduce) { .xr__card, .xr__blk { transition: none; } .xr__blk.bump, .xr__px { animation: none; } }
.xr[hidden] { display: none !important; }
/* Off duty: hobby icons under the contact links */
.offd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.offd__k { font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.55); }
.offd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.offd__i { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: rgba(244,242,238,.78); cursor: default;
  box-shadow: inset 0 0 0 1.5px rgba(244,242,238,.22); transition: color .3s, background-color .3s, box-shadow .3s, transform .45s var(--silk, ease); }
.offd__i svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.offd__i:hover, .offd__i:focus-visible { color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-3px); outline: none; }
.offd__i::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px; white-space: nowrap; padding: 6px 10px; border-radius: 999px;
  background: #f4f2ee; color: #141416; font: 700 12.5px/1 Figtree, system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--silk, ease); }
.offd__i:hover::after, .offd__i:focus-visible::after { opacity: 1; translate: -50% 0; }
.offd__i:focus-visible { box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 3px rgba(244,242,238,.35); }
.offd__list li { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--silk, ease), transform .7s var(--silk, ease); transition-delay: calc(var(--n, 0) * 70ms); }
.offd.is-in .offd__list li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .offd__list li { opacity: 1; transform: none; transition: none; } }
/* hero backdrop hidden on request (kept in markup so it can come back) */
.journey { display: none !important; }
.skyway { display: none !important; }

/* Footer: the avatar stands on the footer line, with a speech bubble that opens WhatsApp */
.band__photo--avatar { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0 !important; clip-path: none !important; }
.band__photo--avatar img { position: relative !important; inset: auto !important; z-index: 1; width: min(108%, 600px) !important; max-width: none; height: auto !important; object-fit: contain !important;
  -webkit-mask-image: none !important; mask-image: none !important; translate: 0 2.6%; filter: drop-shadow(0 -10px 40px rgba(0,0,0,.35)); }
/* warm spotlight from above, so he is lit on the dark band instead of floating */
.band__photo--avatar::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 120%; height: 95%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(48% 55% at 50% 62%, rgba(255,214,102,.10), rgba(255,214,102,.03) 55%, transparent 75%); }
/* contact shadow where the shoe and block meet the footer line */
.band__photo--avatar::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 62%; height: 14px; translate: -42% 0; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); }
.av-bubble { position: absolute; z-index: 3; left: 2%; top: 24%; max-width: 210px; padding: 12px 16px 13px; border-radius: 18px 18px 18px 4px; background: #f4f2ee; color: #141416; text-decoration: none;
  font: 600 13.5px/1.35 Figtree, system-ui, sans-serif; box-shadow: 0 18px 34px -16px rgba(0,0,0,.6); transform-origin: 100% 100%; transition: transform .45s var(--silk, ease), background-color .3s; }
.av-bubble b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #141416; }
.av-bubble::after { content: ""; position: absolute; right: -6px; bottom: 14px; border: 6px solid transparent; border-left-color: #f4f2ee; border-right: 0; }
.av-bubble:hover { transform: translateY(-3px) rotate(-1.5deg); background: #fff; }
.av-bubble:focus-visible { outline: 2px solid #f6c445; outline-offset: 3px; }
.js-rv .band__photo--avatar:not(.in) .av-bubble { opacity: 0; transform: scale(.6) translateY(10px); }
.js-rv .band__photo--avatar.in .av-bubble { animation: av-pop .7s cubic-bezier(.3,1.5,.5,1) .9s both; }
@keyframes av-pop { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.js-rv .band__photo--avatar.rv--img { transform: none; }
@media (max-width: 760px) {
  .band__photo--avatar { margin-bottom: 8px; padding-top: 24px; }
  .band__in:has(.band__photo--avatar) .band__copy { margin-top: 0 !important; padding-top: 12px; }
  .band__photo--avatar img { width: min(88%, 380px) !important; translate: 0 0; }
  .band__photo--avatar::after { display: none; }
  .av-bubble { left: 0; top: 12%; max-width: 160px; padding: 10px 12px; font-size: 12px; } .av-bubble b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .js-rv .band__photo--avatar .av-bubble { animation: none; opacity: 1; transform: none; } }
/* Page transitions: an ink curtain with the VDS mark wipes up between pages */
.pt { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #141416; pointer-events: none;
  transform: translateY(100%); transition: transform .38s cubic-bezier(.76, 0, .24, 1); }
.pt img { width: 56px; height: 56px; opacity: 0; transform: scale(.85); transition: opacity .3s ease .15s, transform .45s cubic-bezier(.2,.8,.2,1) .1s; }
html.pt-in .pt, .pt.is-cover { transform: none; transition-duration: 0s; }
html.pt-in .pt img { opacity: 1; transform: none; transition: none; }
.pt.is-leave { transform: translateY(0); pointer-events: auto; }
.pt.is-leave img { opacity: 1; transform: none; }
.pt.is-lift { transform: translateY(-100%); transition: transform .55s cubic-bezier(.76, 0, .24, 1); }
.pt.is-lift img { opacity: 0; transition: opacity .2s ease; }
html.pt-in body::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #141416; }
@media (prefers-reduced-motion: reduce) { .pt, .pt img { transition: none !important; } }
/* Back to top: a separate round button beside the floating dock */
.ntop { position: fixed; z-index: 60; bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px); left: 0; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #2c2c31; background: rgba(250, 249, 246, .9);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(0,0,0,.07), 0 20px 44px -16px rgba(20,15,35,.32);
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(.85);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1), left .55s cubic-bezier(.22, 1, .36, 1), bottom .55s cubic-bezier(.22, 1, .36, 1), visibility 0s .35s, background-color .3s; }
.ntop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ntop svg { width: 20px; height: 20px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.ntop:hover { background: #fff; }
.ntop:hover svg { transform: translateY(-3px); }
.ntop:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ntop, .ntop svg { transition: opacity .2s ease, visibility 0s; transform: none !important; } }
/* back to top: smaller, rides on the same line as the dock */
.ntop { width: 40px; height: 40px; }
.ntop svg { width: 17px; height: 17px; }
.ndock { transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, visibility 0s, left .55s cubic-bezier(.22, 1, .36, 1); }
/* web view: no floating chat button (WhatsApp stays in the footer) */
@media (min-width: 761px) { .wa-fab { display: none !important; } }
@media (max-width: 400px) { .ndock .ndock__i { min-width: 40px; height: 40px; padding: 0 9px; } .ndock .ndock__i--cv { padding: 0 12px 0 10px; margin-left: 2px; } .ntop { width: 38px; height: 38px; } }
@media (max-width: 340px) { .ndock .ndock__i--cv .ndock__t { display: none; } .ndock .ndock__i--cv { padding: 0 11px; } }
/* floating WhatsApp button removed everywhere (WhatsApp lives in the footer) */
.wa-fab { display: none !important; }

/* Case hero as a photographic banner (HotelHub): the traveller on the right, the story on a deep scrim at left */
.case-hero--banner { position: relative; isolation: isolate; background: #1b2329 !important; color: #f4f2ee; min-height: min(86vh, 780px); display: flex; align-items: flex-end; }
.case-hero--banner .hb { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.case-hero--banner .hb__blur { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) saturate(.85) brightness(.62); transform: scale(1.1); }
.case-hero--banner .hb__img { position: absolute; right: 0; bottom: -2%; height: 104%; width: auto; max-width: none; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.45) 30%, #000 62%); mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.45) 30%, #000 62%); }
/* readability: deep teal scrim from the left, a soft floor fade at the bottom */
.case-hero--banner .hb::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,20,24,.92) 0%, rgba(12,20,24,.78) 34%, rgba(12,20,24,.25) 58%, rgba(12,20,24,0) 72%),
              linear-gradient(0deg, rgba(12,20,24,.55), transparent 32%); }
.case-hero--banner .case-hero__in { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); padding-bottom: clamp(56px, 8vw, 110px); }
.case-hero--banner .stage-mini { display: none; }
.case-hero--banner .back { color: rgba(244,242,238,.85); }
.case-hero--banner .back:hover { color: #fff; }
.case-hero--banner .kicker { color: #f6c445 !important; }
.case-hero--banner h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); max-width: 13ch; }
.case-hero--banner .lede { color: rgba(244,242,238,.86) !important; }
/* the top bar sits on the photo: light marks */
.page-case:has(.case-hero--banner) .top .brand img { filter: invert(1) brightness(2); }
@media (max-width: 760px) {
  .case-hero--banner { min-height: 92vh; }
  .case-hero--banner .hb__img { left: 50%; right: auto; translate: -50% 0; height: 78%; top: 0; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .case-hero--banner .hb::after { background: linear-gradient(0deg, rgba(12,20,24,.96) 0%, rgba(12,20,24,.85) 34%, rgba(12,20,24,.2) 58%, transparent 70%); }
  .case-hero--banner .case-hero__in { grid-template-columns: 1fr; padding-bottom: 36px; }
}
/* Samsung banner: navy scrim and a cool blue kicker */
.case-hero--ss { background: #121726 !important; }
.case-hero--ss .hb::after { background: linear-gradient(90deg, rgba(14,18,34,.93) 0%, rgba(14,18,34,.8) 34%, rgba(14,18,34,.28) 58%, rgba(14,18,34,0) 72%), linear-gradient(0deg, rgba(14,18,34,.55), transparent 32%); }
.case-hero--ss .kicker { color: #9db8ff !important; }
@media (max-width: 760px) { .case-hero--ss .hb::after { background: linear-gradient(0deg, rgba(14,18,34,.96) 0%, rgba(14,18,34,.86) 34%, rgba(14,18,34,.2) 58%, transparent 70%); } }
.case-hero--ss .hb__img { height: 100%; bottom: 0; }
@media (max-width: 760px) { .case-hero--ss .hb__img { height: 72%; top: 0; bottom: auto; } }
/* Banner heroes: the photo settles in, then the story rises line by line */
@keyframes hb-photo { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hb-rise { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.case-hero--banner .hb__img { transform-origin: 70% 60%; animation: hb-photo 1.8s cubic-bezier(.16, 1, .3, 1) .15s both; }
.case-hero--banner .hb__blur { animation: hb-fade 1.2s ease both; }
.case-hero--banner .case-hero__in > div > * { animation: hb-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.case-hero--banner .case-hero__in > div > :nth-child(1) { animation-delay: .45s; }
.case-hero--banner .case-hero__in > div > :nth-child(2) { animation-delay: .55s; }
.case-hero--banner .case-hero__in > div > :nth-child(3) { animation-delay: .65s; }
.case-hero--banner .case-hero__in > div > :nth-child(4) { animation-delay: .8s; }
.case-hero--banner .case-hero__in > div > :nth-child(5) { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { .case-hero--banner .hb__img, .case-hero--banner .hb__blur, .case-hero--banner .case-hero__in > div > * { animation: none; } }

/* ===== Employee experience portal case study (page-ex) ===== */
.page-ex .ex-hero__in { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.page-ex .ex-hero h1 { max-width: 14ch; }
.ex-draft { display: inline-flex; margin-top: 18px; padding: 7px 12px; border-radius: 999px; background: #fff4d6; color: #7a5300; font: 600 12.5px/1 Figtree, system-ui, sans-serif; box-shadow: inset 0 0 0 1px #f0d48a; }
/* text that needs Varun's input: unmistakable, easy to find */
.need { background: #fff4d6; color: #7a5300; box-shadow: inset 0 0 0 1px #f0d48a; border-radius: 6px; padding: 1px 6px; font-weight: 600; font-size: .92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* image slot waiting for a real artifact */
.ph-slot { display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 24px; border-radius: 24px; background: repeating-linear-gradient(135deg, #f7f4ee 0 14px, #f2eee6 14px 28px); box-shadow: inset 0 0 0 1.5px #e3dccd; color: #5f5f67; max-width: 100%; }
.ph-slot b { font-size: 16px; color: #141416; }
.ph-slot span { font-size: 13px; }
.ph-slot code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; background: #fff; padding: 2px 6px; border-radius: 6px; }
.ph-slot__tag { font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .12em; text-transform: uppercase; color: #7a5300 !important; background: #fff4d6; padding: 6px 9px; border-radius: 999px; }
.page-ex .shot figcaption b { color: #141416; font-weight: 700; }
.ex-h3 { margin: clamp(40px, 5vw, 64px) 0 0; font-size: clamp(20px, .8vw + 15px, 26px); letter-spacing: -.02em; line-height: 1.2; }
.ex-h3 + .cs__p { margin-top: 10px; }
.ex-challenge { margin-top: 28px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: #141416; color: #f4f2ee; }
.ex-challenge__k { margin: 0 0 10px; font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #9db8ff; }
.ex-challenge__q { margin: 0; font-size: clamp(20px, 1vw + 15px, 28px); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; max-width: 34ch; }
.ex-principles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.ex-principles li { display: grid; gap: 6px; padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.ex-principles__n { font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--accent); }
.ex-principles b { font-size: 17px; letter-spacing: -.01em; }
.ex-principles li > span:last-child { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.ex-roles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-roles li { display: grid; gap: 8px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.ex-roles b { font-size: 17px; }
.ex-roles span { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.decision--ex { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.ex-research { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.ex-research div { padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.ex-research dt { font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6b6b72; margin-bottom: 8px; }
.ex-research dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.ex-outcome { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ex-outcome > div { padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.ex-outcome__k { margin: 0 0 10px; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ex-outcome ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.ex-proto { margin-top: 18px; }
.page-ex .btn.ex-proto { background: #141416; color: #fff; }
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 24px; }
.zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ex-lb { padding: 0; border: 0; background: transparent; max-width: min(1400px, 94vw); max-height: 92vh; }
.ex-lb::backdrop { background: rgba(10,12,18,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ex-lb img { display: block; max-width: 100%; max-height: 90vh; border-radius: 16px; }
.ex-lb__x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); right: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #141416; font-size: 24px; cursor: pointer; }
@media (max-width: 900px) { .decision--ex { grid-template-columns: 1fr 1fr !important; } .ex-outcome { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ex-roles, .ex-research, .ex-outcome, .decision--ex { grid-template-columns: 1fr !important; } }
.decision--ex > div:nth-child(2) .decision__k { color: var(--accent); } .decision--ex > div:nth-child(3) .decision__k { color: var(--ink-3); }
.page-ex .decisions { margin-top: 28px; }
.page-ex .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.page-ex .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-ex .gallery--3 .shot:last-child { grid-column: auto; }
.page-ex .gallery .shot { margin: 0; }
.page-ex .gallery .ph-slot { padding: 16px; }
.ex-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .page-ex .gallery--3 { grid-template-columns: 1fr 1fr; } .ex-principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .page-ex .gallery, .page-ex .gallery--3, .ex-principles { grid-template-columns: 1fr; } }
.page-ex .case-main .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.page-ex .case-main .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .page-ex .case-main .gallery--3 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .page-ex .case-main .gallery, .page-ex .case-main .gallery--3 { grid-template-columns: 1fr !important; } }
.ex-outcome > div, .ex-roles li { border: 1px solid var(--line); background: #fff; }
.ex-outcome ul { padding-left: 16px; }
.page-ex .case-main .gallery .shot { grid-column: auto !important; }
/* employee portal banner: same photo as Samsung, purple-navy scrim, text column kept left */
.page-ex .case-hero--banner .ex-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); max-width: none; }
.page-ex .case-hero--ss .kicker { color: #b9b2ff !important; }
.page-ex .case-hero--ss .hb::after { background: linear-gradient(90deg, rgba(20,17,40,.93) 0%, rgba(20,17,40,.8) 34%, rgba(20,17,40,.28) 58%, rgba(20,17,40,0) 72%), linear-gradient(0deg, rgba(20,17,40,.55), transparent 32%); }
.page-ex .case-hero--banner .ex-draft { background: rgba(255,244,214,.95); }
@media (max-width: 760px) { .page-ex .case-hero--banner .ex-hero__in { grid-template-columns: 1fr; } .page-ex .case-hero--ss .hb::after { background: linear-gradient(0deg, rgba(20,17,40,.96) 0%, rgba(20,17,40,.86) 34%, rgba(20,17,40,.2) 58%, transparent 70%); } }

/* ===== Beneath the footer: hidden until you pull hard past the end ===== */
/* handle: sits at the bottom of the footer; the floating menu steps aside at the very end */
.at-end .ndock, .at-end .ntop { opacity: 0 !important; transform: translate(-50%, 24px) !important; pointer-events: none !important; }
.at-end .ntop { transform: translateY(24px) !important; }
.pullme { position: absolute; z-index: 3; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(240,178,90,.8); font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; user-select: none; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.at-end .pullme { opacity: 1; transform: none; }
.pullme__ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; animation: pullme-bob 2.4s ease-in-out infinite; }
.is-pulling .pullme__ring { animation: none; }
.pullme__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pullme__ring circle { fill: none; stroke: rgba(240,178,90,.22); stroke-width: 1.5; }
.pullme__ring .pullme__fill { stroke: #ffcf7a; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--pull, 0))); filter: drop-shadow(0 0 4px rgba(255,170,60,.8)); transition: stroke-dashoffset .12s linear; }
.pullme__root { position: relative; width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(#f0b25a, #ffcf7a); }
.pullme__root::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #ffcf7a; box-shadow: 0 0 10px 3px rgba(255,170,60,.7); }
.is-pulling .pullme { color: #ffd38a; }
@keyframes pullme-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* the footer gives a little as you pull */
.is-pulling footer.band { transform: translateY(calc(var(--pull, 0) * -26px)); transition: transform .12s ease-out; }
footer.band { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.dig { display: none !important; }

/* the world */
.under { position: fixed; inset: 0; z-index: 9000; background: #000; color: #f4ece2; opacity: 0; transition: opacity .7s ease; }
.under.is-in { opacity: 1; }
.under-open { overflow: hidden; }
.under-open .ndock, .under-open .ntop { opacity: 0 !important; pointer-events: none; }
.under__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.under__art { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; }
.under__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%;
  opacity: 0; transform: scale(1.14); transform-origin: 50% 62%; transition: opacity 2.6s ease, transform 6s cubic-bezier(.16, 1, .3, 1);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.6) 76%, transparent 98%); mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.6) 76%, transparent 98%); }
.under.is-lit .under__img { opacity: 1; transform: scale(1); }
@media (min-aspect-ratio: 3/2) { .under__img { object-position: 50% 30%; } }
.under__copy { position: relative; margin-top: -14vh; padding: 0 max(20px, env(safe-area-inset-left, 0px)) calc(env(safe-area-inset-bottom, 0px) + 72px); text-align: center;
  opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
.under.is-told .under__copy { opacity: 1; transform: none; }
.under__k { margin: 0 0 14px; font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: #f0b25a; }
.under__h { margin: 0 auto; max-width: 16ch; font-size: clamp(32px, 3.4vw + 14px, 64px); line-height: 1.02; letter-spacing: -.045em; font-weight: 900; color: #fff; text-wrap: balance; }
.under__h em { font-style: normal; color: #f0b25a; }
.under__p { margin: 18px auto 0; max-width: 34rem; font-size: clamp(15px, .4vw + 13px, 18px); line-height: 1.6; color: rgba(244,236,226,.78); }
.under__up { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; background: #f4ece2; color: #141416; font: 700 14px/1 Figtree, system-ui, sans-serif; box-shadow: 0 10px 24px -12px rgba(240,178,90,.7); transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .2s; }
.under__up:hover { transform: translateY(-2px); background: #fff; }
.under__up:focus-visible, .under__x:focus-visible { outline: 2px solid #f0b25a; outline-offset: 3px; }
.under__x { position: fixed; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 16px); right: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(244,236,226,.14); color: #f4ece2; font-size: 24px; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.under__x:hover { background: rgba(244,236,226,.24); }
@media (prefers-reduced-motion: reduce) { .under, .under__img, .under__copy { transition: none; } .under__img { transform: none; } .pullme__ring { animation: none; } .is-pulling footer.band { transform: none; } }

/* haptics switch (touch devices only) */
.hapt { width: 44px; height: 44px; margin-right: 8px; border: 0; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; color: #141416; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 8px 20px -10px rgba(90,74,54,.4); transition: background-color .25s, color .25s; vertical-align: middle; }
.hapt svg { width: 20px; height: 20px; }
.hapt .hapt__x { opacity: 0; transition: opacity .2s; }
.hapt.is-off { color: #8a8a92; background: rgba(255,255,255,.6); }
.hapt.is-off .hapt__x { opacity: 1; }
.hapt:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
header.top nav { display: flex; align-items: center; }
.page-case:has(.case-hero--banner) .hapt { background: rgba(255,255,255,.16); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.page-case:has(.case-hero--banner) .hapt.is-off { color: rgba(255,255,255,.55); }
/* employee portal: story typography */
.ex-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.ex-meta > span:first-child { font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,242,238,.75); }
.ex-meta .ex-draft { margin: 0; }
.ex-lead { margin: 0 0 14px; font-size: clamp(20px, .9vw + 15px, 26px); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--ink); max-width: 34ch; text-wrap: balance; }
.ex-note { margin-top: 14px; font-size: 14.5px; }
.ex-step { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 14px/1 Figtree, system-ui, sans-serif; vertical-align: 3px; }
.ex-calls { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: c; border-top: 1px solid var(--line); }
.ex-calls li { counter-increment: c; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ex-calls li::before { content: counter(c, decimal-leading-zero); grid-row: 1 / span 2; font: 600 13px/1.6 "JetBrains Mono", ui-monospace, monospace; color: var(--accent); }
.ex-calls b { font-size: clamp(17px, .5vw + 14px, 20px); letter-spacing: -.01em; }
.ex-calls span { font-size: 15px; color: var(--ink-2); }
.ex-research--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-outcome--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-reflect { margin-top: 28px; font-size: clamp(19px, .7vw + 15px, 24px); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.page-ex .cs + .cs { margin-top: 0; }
@media (max-width: 600px) { .ex-research--3, .ex-outcome--2 { grid-template-columns: 1fr !important; } }

/* ===== Reader view (case studies) ===== */
.rdr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rdr__b { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 600 13.5px/1 Figtree, system-ui, sans-serif; color: #141416; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,22,.1), 0 8px 18px -12px rgba(90,74,54,.45); transition: transform .35s var(--silk, ease), background-color .2s; }
.rdr__b svg { width: 17px; height: 17px; }
.rdr__b:hover { transform: translateY(-2px); }
.rdr__b:focus-visible, .rdr-exit:focus-visible { outline: 2px solid var(--accent, #141416); outline-offset: 3px; }
.case-hero--banner .rdr__b { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.case-hero--banner .rdr__b:hover { background: rgba(255,255,255,.2); }
.rdr-exit { display: none; }
html.reader .rdr-exit { display: inline-flex; position: fixed; z-index: 70; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; translate: -50% 0; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: #141416; color: #fff; font: 700 13.5px/1 Figtree, system-ui, sans-serif; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }

/* the reading layout: one calm column, no motion, no decoration */
html.reader body { background: #faf8f4; }
html.reader body::before, html.reader .hb, html.reader .stage-mini, html.reader .toc, html.reader .ndock, html.reader .ntop, html.reader .skip,
html.reader .case-next-wrap, html.reader .under, html.reader .dig, html.reader .pt, html.reader .ex-draft { display: none !important; }
html.reader * { animation: none !important; transition: none !important; }
html.reader .rv { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
html.reader .case-hero { background: #faf8f4 !important; color: #141416 !important; min-height: 0 !important; display: block !important; padding-top: calc(env(safe-area-inset-top, 0px) + 88px) !important; }
html.reader .case-hero__in { display: block !important; max-width: 68ch; margin-inline: auto; padding-bottom: 24px !important; }
html.reader .case-hero h1 { color: #141416 !important; text-shadow: none !important; font-size: clamp(30px, 2vw + 20px, 44px) !important; max-width: none !important; }
html.reader .case-hero .lede, html.reader .case-hero .back { color: #3d3d44 !important; }
html.reader .case-hero .kicker { color: var(--accent) !important; }
html.reader .page-case .top .brand img, html.reader .top .brand img { filter: none !important; }
html.reader .rdr__b { background: #fff !important; color: #141416 !important; box-shadow: 0 0 0 1px rgba(20,20,22,.12) !important; }
html.reader .rdr__b[data-rdr] { background: #141416 !important; color: #fff !important; }
html.reader .ex-meta > span:first-child { color: #6b6b72; }
html.reader .glance { padding-block: 0 8px; }
html.reader .glance__in { max-width: 68ch; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; background: none !important; box-shadow: none !important; border-block: 1px solid rgba(20,20,22,.1); padding: 16px 0 !important; border-radius: 0 !important; }
html.reader .case-grid { display: block !important; }
html.reader .case-main { max-width: 68ch; margin-inline: auto; gap: 44px !important; }
html.reader .cs__p, html.reader .ex-calls span, html.reader .ex-roles span { font-size: 18px !important; line-height: 1.7 !important; color: #2c2c31 !important; max-width: none !important; }
html.reader .cs h2 { font-size: 28px !important; }
html.reader .ex-lead { font-size: 20px; }
html.reader .case-main .shot { max-width: 320px !important; margin-top: 18px !important; }
html.reader .case-main .gallery { grid-template-columns: repeat(2, minmax(0, 220px)) !important; }
html.reader .case-main .shot img, html.reader .ph-slot { border-radius: 10px !important; cursor: zoom-in; }
html.reader .ph-slot { padding: 12px; min-height: 0; }
html.reader .ph-slot span:not(.ph-slot__tag) { display: none; }
html.reader .shot figcaption { font-size: 13.5px; }
html.reader .ex-challenge { background: none; color: #141416; border-left: 3px solid var(--accent); border-radius: 0; padding: 4px 0 4px 18px; }
html.reader .ex-challenge__q { font-size: 22px; }
html.reader .decision, html.reader .ex-roles li, html.reader .ex-outcome > div { box-shadow: none !important; background: none !important; border: 0 !important; border-top: 1px solid rgba(20,20,22,.1) !important; border-radius: 0 !important; padding-inline: 0 !important; }
html.reader footer.band .band__photo { display: none; }
html.reader footer.band .band__in { min-height: 0; }
.rdr-lb { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.rdr-lb::backdrop { background: rgba(10,12,18,.84); }
.rdr-lb img { display: block; max-width: 94vw; max-height: 90vh; border-radius: 12px; }
.rdr-lb button { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; font-size: 24px; cursor: pointer; }
@media (max-width: 600px) { html.reader .glance__in { grid-template-columns: 1fr; } html.reader .case-main .shot { max-width: 100% !important; } html.reader .case-main .gallery { grid-template-columns: 1fr 1fr !important; } }

/* print / PDF: the reader layout, with contact details */
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  html { background: #fff !important; }
  body::before, header.top, .hb, .stage-mini, .toc, .ndock, .ntop, .skip, .case-next-wrap, .under, .dig, .pt, .rdr, .rdr-exit, .ex-draft, footer.band, .wa-fab, .hapt { display: none !important; }
  * { animation: none !important; transition: none !important; box-shadow: none !important; }
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .case-hero { background: #fff !important; color: #141416 !important; min-height: 0 !important; display: block !important; padding: 0 !important; }
  .case-hero__in { display: block !important; padding: 0 0 12px !important; }
  .case-hero h1 { color: #141416 !important; text-shadow: none !important; font-size: 30pt !important; max-width: none !important; }
  .case-hero .lede, .case-hero .back { color: #333 !important; } .case-hero .back { display: none !important; }
  .case-hero .kicker { color: var(--accent) !important; }
  .glance__in { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 6px 18px; background: none !important; border-block: 1px solid #ddd; padding: 10px 0 !important; border-radius: 0 !important; }
  .case-grid { display: block !important; } .case-main { gap: 22px !important; }
  .cs { break-inside: auto; } .cs h2, .ex-h3, .ex-lead { break-after: avoid; } .shot, .ex-calls li, .decision { break-inside: avoid; }
  .cs__p { font-size: 11pt !important; line-height: 1.55 !important; color: #222 !important; max-width: none !important; }
  .case-main .shot { max-width: 62% !important; } .case-main .gallery { grid-template-columns: 1fr 1fr !important; }
  .ex-challenge { background: none; color: #141416; border-left: 3px solid var(--accent); border-radius: 0; padding: 2px 0 2px 14px; }
  .ex-roles li, .ex-outcome > div, .decision { background: none !important; border: 1px solid #e3e3e3 !important; }
  .need { background: none; box-shadow: none; color: #7a5300; }
  .page-case main::after { content: "Varun Sudhakar · Design Principal · vdezignstudio.com · linkedin.com/in/varunsudhakar"; display: block; margin-top: 24px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 9pt; color: #666; }
}
@media print { .readbar, .readbar * { display: none !important; } }
html.reader .readbar { display: none !important; }


/* Cover word cycles through languages */
.cover__word .cw { display: inline-block; white-space: nowrap; transition: opacity .7s cubic-bezier(.4,0,.2,1), filter .7s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.cover__word .cw.is-out { opacity: 0; filter: blur(10px); transform: translateY(-.08em) scale(.98); }
.cover__word .cw.is-in { opacity: 0; filter: blur(10px); transform: translateY(.08em) scale(1.02); transition: none; }
.cover__word .cw--ml { font-family: "Noto Sans Malayalam", Figtree, sans-serif; font-weight: 900; letter-spacing: -0.02em; -webkit-text-stroke: .025em currentColor; paint-order: stroke fill; }
.cover__word .cw--kn { font-family: "Noto Sans Kannada", Figtree, sans-serif; letter-spacing: -0.02em; }
.cover__word .cw--hi { font-family: "Noto Sans Devanagari", Figtree, sans-serif; letter-spacing: -0.01em; }
.cover__word .cw--ta { font-family: "Noto Sans Tamil", Figtree, sans-serif; letter-spacing: -0.03em; }
.cover__word .cw--ar { font-family: "Noto Sans Arabic", Figtree, sans-serif; letter-spacing: 0; }

/* ==========================================================================
   Motion polish v2: every animation on transform + opacity only, matched
   velocities through the card flip, and crisp text on 1x (Full HD) screens.
   ========================================================================== */
/* 1. Card flip: the outgoing card hands its exact spin speed to the incoming
      one at the edge-on moment (5 x 90deg / 380ms = 8.4 x 90deg / 640ms), so
      the turn reads as one continuous motion, not two moves with a hitch.
      Parked cards stay rasterised (opacity, not visibility), so nothing has
      to be painted at the edge-on frame. */
.slide { will-change: transform, opacity; }
.slide[data-state="prev"], .slide[data-state="next"] {
  visibility: visible; opacity: 0; pointer-events: none;
  transition: transform 380ms cubic-bezier(.5, 0, .9, .5), opacity 0s linear 380ms; }
.slide[data-state="active"] {
  visibility: visible; opacity: 1;
  transition: transform 640ms cubic-bezier(.08, .67, .25, 1) 380ms, opacity 0s linear 380ms; }
.slide.no-anim { transition: none !important; }
.slide[data-state="active"] .chip {
  transition: transform 820ms cubic-bezier(.16, 1, .3, 1) calc(460ms + var(--i, 0) * 60ms), opacity 300ms ease calc(440ms + var(--i, 0) * 60ms); }
.slide:not([data-state="active"]) .chip { transition: opacity 140ms linear 260ms, transform 0s 400ms; }
/* text on the ticket sits 1px off the card (enough to stay in front of it):
   no visible perspective rescale, so it renders sharp; the picture panel keeps depth */
.ix__top, .ix__title, .ix__facts, .ix__route, .ix__tear, .ix__stub { transform: translateZ(1px) !important; }
.slide__card { -webkit-font-smoothing: antialiased; }
/* intro flip: the overshoot segment eases in and out, so the card no longer
   lurches after it settles past centre */
@keyframes in-flip {
  0% { transform: translateY(40px) rotateY(-110deg) scale(.86); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  62% { transform: rotateY(6deg); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  100% { transform: none; } }
/* 2. Reveals: no blur, no clip-path. Both repaint every frame on big blocks;
      opacity + transform run on the compositor and stay smooth while scrolling. */
@keyframes in-word { from { opacity: 0; transform: scale(1.08); } }
@keyframes hb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js-rv .rv { transition: opacity 1s var(--silk), transform 1.2s var(--silk); transition-delay: calc(var(--rv, 0) * 80ms); }
.js-rv .rv--head { transform: translateY(40px); filter: none; }
.js-rv .rv--img { opacity: 0; transform: translateY(28px) scale(1.03); clip-path: none; }
.js-rv .rv--img.in { opacity: 1; transform: none; clip-path: none; }
/* 3. Hover lifts share one soft curve and stay on whole pixels */
.tk, .sw__row > *, .bx__tile, .btn, .wa, .bx__follow, .nwork__a { backface-visibility: hidden; }
/* 4. Text on 1x screens (an external Full HD monitor): at about 90 pixels
      per inch there is no pixel density to hide rough edges, so
      - keep the system's default smoothing (a touch heavier, easier to read);
        thin "antialiased" smoothing is kept for Retina only,
      - open up the tightest display tracking a little so heavy letters do not touch,
      - keep the tiny uppercase labels at 11px or more. */
html { text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis: none; }
@media (max-resolution: 1.5dppx) {
  html, body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
  h1, h2, .st-thesis, .sw__h, .pp__h, .case-hero h1 { letter-spacing: -0.03em !important; }
  .cover__word { letter-spacing: -0.045em; }
  .ch, .tk__stub small, .tk__meta small, .tk__brand { font-size: max(11px, 1em) ; }
  .ix__f small, .ix__top { font-size: max(11px, 2.9cqi); }
}
@media (prefers-reduced-motion: reduce) {
  .slide[data-state], .slide[data-state] .chip { transition: opacity 300ms ease !important; }
}
/* Roots overlay on tablet and desktop: the tree runs full width at its own
   3:2 shape (nothing cropped, roots and labels included); only the bottom
   edge melts into the black. Phones keep the cropped, full-height view. */
@media (min-width: 761px) {
  .under__art { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .under__img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 60%;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
  .under__copy { margin-top: -3vw; }
}

/* ==========================================================================
   Card flip v3: real depth, no hitch at the start, a floating shadow.
   ========================================================================== */
/* 1. The leaving card keeps everything exactly as it was (looping motion,
      drawn lines, objects in place) while it turns away, instead of
      snapping back the moment the turn begins. */
.slide.is-leaving .m-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: m-draw 700ms cubic-bezier(.3,.7,.2,1) calc(700ms + var(--d, 0s)) forwards; }
.slide.is-leaving .m-node { transform-origin: center; animation: m-pop 420ms cubic-bezier(.3,1.6,.5,1) 1050ms both, m-breathe 2.4s ease-in-out 1.6s infinite; }
.slide.is-leaving .m-pop { transform-origin: center; animation: m-pop 460ms cubic-bezier(.3,1.6,.5,1) 1350ms both; }
.slide.is-leaving .m-nav { transform-origin: left center; animation: m-grow 600ms ease 700ms both; }
.slide.is-leaving .m-row {  animation: m-rise 520ms cubic-bezier(.2,.8,.2,1) calc(700ms + var(--d, 0s)) both; }
.slide.is-leaving .m-twinkle { transform-origin: center; animation: m-twinkle 2.2s ease-in-out 1.2s infinite; }
.slide.is-leaving .m-pulse { transform-origin: center; animation: m-breathe 1.8s ease-in-out 1.3s infinite; }
.slide.is-leaving .m-slide {  animation: m-slide-in 640ms cubic-bezier(.2,.8,.2,1) 900ms both; }
.slide.is-leaving .m-tile { transform-box: view-box; animation: m-pop 420ms cubic-bezier(.3,1.6,.5,1) calc(700ms + var(--d, 0s)) both; }
.slide.is-leaving .m-plus { transform-box: view-box; animation: m-pop 420ms cubic-bezier(.3,1.6,.5,1) 1250ms both, m-breathe 1.8s ease-in-out 1.8s infinite; }
/* break-out objects on cards 2–5: a slow idle drift once they land */
.slide.is-leaving:not([data-c="intro"]) .chip.ixo > * {  animation: m-float 4.2s ease-in-out 1.4s infinite; }
.slide.is-leaving[data-c="ibm"] .chip.ixo > * {  animation: m-spin 6s ease-in-out 1.4s infinite; }
.slide.is-leaving[data-c="tiny"] .chip.ixo > * {  animation: m-drive 900ms cubic-bezier(.2,.8,.2,1) 650ms both, m-bob 1.6s ease-in-out 1.6s infinite; }
/* 2. Objects float well in front of the card: pushed 240px towards the
      viewer and scaled back by the same amount, so at rest they look the
      same size but swing with strong parallax as the card turns. */
.slide .chip.ixo { --dz: 240px; --dzs: .78; }
.slide[data-state="active"] .chip.ixo, .slide.is-leaving .chip.ixo { opacity: 1; transform: translateZ(var(--dz)) scale(var(--dzs)) rotate(var(--r)); }
.slide.is-leaving .chip.ixo { transition: opacity 140ms linear 300ms; }
/* incoming objects rise out of the card surface towards you */
.slide:not([data-state="active"]):not(.is-leaving) .chip.ixo { opacity: 0; transform: translateZ(calc(var(--dz) - 160px)) scale(var(--dzs)) rotate(calc(var(--r) - 10deg)); transition: opacity 0s 400ms, transform 0s 400ms; }
.slide[data-state="active"] .chip.ixo { transition: transform 1000ms cubic-bezier(.16, 1, .3, 1) calc(470ms + var(--i, 0) * 70ms), opacity 360ms ease calc(450ms + var(--i, 0) * 70ms); }
/* the picture panel lifts off the ticket too */
.ix__panel { transform: translateZ(56px) scale(.95) !important; }
/* softer, deeper shadows under every floating object */
.slide .chip.ixo img, .slide .chip.ixo svg { filter: drop-shadow(0 26px 24px rgba(20, 14, 30, .26)) drop-shadow(0 6px 8px rgba(20, 14, 30, .12)); }
/* 3. A light shadow on the floor under the card: it narrows and fades as
      the card turns edge-on, then spreads back as the next card lands. */
.carousel::after { content: ""; position: absolute; left: 50%; top: calc(50% + min(253px, 44vw) + 22px); width: min(330px, 58vw); height: 36px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(25, 20, 40, .26), rgba(25, 20, 40, .1) 55%, transparent 72%);
  transition: transform 640ms cubic-bezier(.08, .67, .25, 1) 380ms, opacity 640ms ease 380ms; }
.stage.is-turning .carousel::after { transform: scaleX(.3); opacity: .5; transition: transform 380ms cubic-bezier(.5, 0, .9, .5), opacity 380ms ease; }
@media (max-width: 600px) {
  .slide .chip.ixo { --dz: 60px; --dzs: .95; }
  .ix__panel { transform: translateZ(18px) scale(.985) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .slide .chip.ixo { --dz: 0px; --dzs: 1; }
  .carousel::after { transition: none; }
}
/* Selected work hover: one gentle glide. Each part moves on its own GPU
   layer (no text re-painting mid-move), with a softer curve and a shorter
   distance, so the row slides rather than jumps. */
.sw__row > *:not(.sw__go) { transition: transform .6s cubic-bezier(.25, .8, .25, 1); will-change: transform; }
.sw__row:hover > *:not(.sw__go), .sw__row:focus-visible > *:not(.sw__go) { transform: translate3d(6px, 0, 0); }
.sw__row::before { transition: opacity .5s ease; will-change: opacity; }
.sw__go { transition: transform .6s cubic-bezier(.25, .8, .25, 1), background-color .35s ease, color .35s ease; will-change: transform; }
.sw__row:hover .sw__go { transform: translate3d(4px, 0, 0); }
.tk { transition: transform .6s cubic-bezier(.25, .8, .25, 1), box-shadow .6s ease; will-change: transform; }
.tk:hover { transform: translate3d(0, -4px, 0); }
.tk__go { transition: transform .6s cubic-bezier(.25, .8, .25, 1), background-color .35s ease, color .35s ease; }
.tk:hover .tk__go { transform: translate3d(3px, 0, 0); }
@media (hover: none) { .sw__row:hover > *, .sw__row:hover .sw__go, .tk:hover, .tk:hover .tk__go { transform: none; } }
/* Docked logo: appears top-left once the header has scrolled away */
.nlogo { position: fixed; z-index: 72; top: calc(env(safe-area-inset-top, 0px) + 14px); left: var(--nl-x, 16px); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
  background: rgba(250, 249, 246, .82); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(20,20,22,.07), 0 14px 30px -14px rgba(20, 15, 35, .35);
  opacity: 0; transform: translate3d(0, -16px, 0) scale(.92); pointer-events: none; visibility: hidden;
  transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s .4s, box-shadow .3s ease; }
.nlogo.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s, box-shadow .3s ease; }
.nlogo img { display: block; width: 26px; height: 26px; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.nlogo:hover img, .nlogo:focus-visible img { transform: rotate(-8deg) scale(1.08); }
.nlogo:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(20,20,22,.1), 0 18px 34px -14px rgba(20, 15, 35, .42); }
.nlogo:focus-visible { outline: 2px solid #141416; outline-offset: 3px; }
/* make room for it beside the case-study contents */
@media (min-width: 961px) { html.nlogo-on .page-case .toc { top: 84px; } }
@media (max-width: 960px) {
  .page-case .nlogo { top: calc(env(safe-area-inset-top, 0px) + 9px); left: max(12px, env(safe-area-inset-left, 0px)); width: 40px; height: 40px; border-radius: 13px; }
  .page-case .nlogo img { width: 22px; height: 22px; }
  html.nlogo-on .page-case .toc { padding-left: calc(max(16px, 3vw) + 50px); }
}
@media (max-width: 600px) { .nlogo { width: 42px; height: 42px; border-radius: 14px; } .nlogo img { width: 22px; height: 22px; } }
.under-open .nlogo, html.reader .nlogo { opacity: 0 !important; pointer-events: none; }
@media print { .nlogo { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nlogo, .nlogo img { transition: opacity .2s ease; transform: none !important; } }
/* Footer speech bubble: anchored to the avatar's face, not the column.
   Positions are fractions of the rendered image (W), so it tracks him at
   every width: tail at cheek height, just left of his head. Two lines. */
.band__photo--avatar { container-type: inline-size; --avw: min(108cqw, 600px); }
.av-bubble { left: auto !important; top: auto !important; right: calc(50cqw - .005 * var(--avw) + 4px); bottom: calc(.715 * var(--avw)); max-width: none; white-space: nowrap; border-radius: 18px 18px 4px 18px; font-size: 14px; line-height: 1.35; }
.av-bubble::after { right: -6px; bottom: 10px; }
@media (max-width: 760px) {
  .band__photo--avatar { --avw: min(88cqw, 380px); }
  .av-bubble { padding: 9px 12px 10px; font-size: 12.5px; }
  .av-bubble b { font-size: 14px; }
}

/* ==========================================================================
   Studio canvas (home) + rulers (desktop, every page)
   The drafting grid becomes Figma's dot canvas; dots brighten softly around
   the pointer like the canvas under your cursor. Static, never drifting.
   ========================================================================== */
body::before {
  background-image: radial-gradient(circle, rgba(20, 20, 22, .2) 1px, transparent 1.5px) !important;
  background-size: 24px 24px !important; background-position: 12px 12px !important; animation: none !important; inset: 0 !important; }
.page-case body::before, body.page-case::before { background-image: radial-gradient(circle, rgba(20, 20, 22, .13) 1px, transparent 1.5px) !important; }

/* Rulers: Photoshop-style, top and left, desktop with a mouse only.
   The left ruler counts the page as you scroll; the top one the width. */
.rul { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .rul { display: block; position: fixed; z-index: 74; pointer-events: none; background-color: rgba(251, 250, 247, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 9px/1 "JetBrains Mono", ui-monospace, monospace; color: #8a8a92; }
  .rul--x { top: 0; left: 0; right: 0; height: 18px; border-bottom: 1px solid rgba(22, 22, 26, .1);
    background-image: repeating-linear-gradient(90deg, rgba(22,22,26,.28) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(22,22,26,.4) 0 1px, transparent 1px 100px);
    background-size: 100% 4px, 100% 9px; background-position: 18px 100%, 18px 100%; background-repeat: no-repeat; }
  .rul--y { top: 18px; left: 0; bottom: 0; width: 18px; border-right: 1px solid rgba(22, 22, 26, .1); overflow: hidden;
    background-image: repeating-linear-gradient(rgba(22,22,26,.28) 0 1px, transparent 1px 10px), repeating-linear-gradient(rgba(22,22,26,.4) 0 1px, transparent 1px 100px);
    background-size: 4px 100%, 9px 100%; background-position: 100% var(--ry, 0px), 100% var(--ry, 0px); background-repeat: no-repeat; }
  .rul--x b { position: absolute; top: 3px; } .rul--y b { position: absolute; left: 3px; writing-mode: vertical-rl; rotate: 180deg; }
  .rul--x::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-right: 1px solid rgba(22,22,26,.1); }
  /* pointer position marks, like the live markers on real rulers */
  .rul--x i, .rul--y i { position: absolute; background: #0d99ff; opacity: 0; transition: opacity .2s; }
  .rul--x i { top: 0; bottom: 0; width: 1px; left: var(--px, -10px); } .rul--y i { left: 0; right: 0; height: 1px; top: var(--py, -10px); }
  html.rul-live .rul--x i, html.rul-live .rul--y i { opacity: .8; }
  /* everything pinned to the top edge steps below the ruler */
  html.has-rul .readbar { top: 18px; }
  html.has-rul .nlogo { top: calc(env(safe-area-inset-top, 0px) + 30px); }
  html.has-rul .toc { top: 42px; }
  html.has-rul.nlogo-on .page-case .toc { top: 102px; }
  html.has-rul .top { padding-top: calc(env(safe-area-inset-top, 0px) + 30px); }
  html.has-rul .concept-chip { top: 30px; }
}
html.reader .rul, .under-open .rul { display: none !important; }
@media print { .rul { display: none !important; } }

/* Selected work: hovering a row selects it like a Figma layer */
.fsel { position: absolute; inset: 2px -6px; z-index: 2; border: 1.5px solid #0d99ff; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .25s ease, inset .45s cubic-bezier(.16,1,.3,1); }
.fsel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #0d99ff; }
.fsel i:nth-child(1) { left: -4px; top: -4px; } .fsel i:nth-child(2) { right: -4px; top: -4px; } .fsel i:nth-child(3) { left: -4px; bottom: -4px; } .fsel i:nth-child(4) { right: -4px; bottom: -4px; }
.fsel::before { content: attr(data-name); position: absolute; left: -1.5px; top: -19px; font: 600 11px/1 Figtree, system-ui, sans-serif; color: #0d99ff; white-space: nowrap; }
.fsel::after { content: attr(data-size); position: absolute; left: 50%; bottom: -11px; translate: -50% 0; padding: 3px 5px; border-radius: 4px; background: #0d99ff; color: #fff; font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .sw__row:hover .fsel, .sw__row:focus-visible .fsel, .tk:hover .fsel, .tk:focus-visible .fsel { opacity: 1; }
}
.tk .fsel { inset: -4px; border-radius: 22px; } .tk .fsel i { display: none; }
.sw__row:hover::before, .sw__row:focus-visible::before { opacity: .6; }

/* Teammates: a one-time moment when Selected work arrives. A product
   manager and a dev lead glide in, the PM leaves a comment on Zeus, both
   drift off. The comment pin stays; hover it to read the note again. */
.sw { position: relative; }
.mate { position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; opacity: 0; transition: transform 1.6s cubic-bezier(.45, 0, .2, 1), opacity .5s ease; will-change: transform; }
.mate svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.mate span { position: absolute; left: 14px; top: 16px; padding: 4px 8px; border-radius: 4px 10px 10px 10px; color: #fff; font: 600 11.5px/1 Figtree, system-ui, sans-serif; white-space: nowrap; }
.mate--pm path { fill: #7b61ff; } .mate--pm span { background: #7b61ff; }
.mate--dev path { fill: #0fa958; } .mate--dev span { background: #0fa958; }
.mate.is-on { opacity: 1; }
.cpin { position: absolute; z-index: 5; right: 70px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 4px; background: #7b61ff; color: #fff; font: 700 10.5px/1 Figtree, system-ui, sans-serif; box-shadow: 0 6px 14px -6px rgba(60,40,160,.6), 0 0 0 2px #fff;
  opacity: 0; transform: scale(.4); transform-origin: 0 100%; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); cursor: default; pointer-events: auto; }
.cpin.is-on { opacity: 1; transform: none; }
.cpin__note { position: absolute; left: 34px; bottom: 6px; width: max-content; max-width: 230px; padding: 9px 12px 10px; border-radius: 12px 12px 12px 4px; background: #fff; color: #16161a; box-shadow: 0 0 0 1px rgba(22,22,26,.08), 0 14px 28px -14px rgba(20,15,35,.4); font: 500 13.5px/1.4 Figtree, system-ui, sans-serif; text-align: left;
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 0 100%; transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.cpin__note b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; color: #7b61ff; }
.cpin.is-open .cpin__note, .cpin:hover .cpin__note, .cpin:focus-visible .cpin__note { opacity: 1; transform: none; }
.cpin:focus-visible { outline: 2px solid #16161a; outline-offset: 3px; }
@media (max-width: 760px) { .cpin { right: 54px; } .cpin__note { left: auto; right: 34px; border-radius: 12px 12px 4px 12px; transform-origin: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .mate { display: none; } .cpin, .cpin__note, .fsel { transition: opacity .2s ease; transform: none; } }
/* the comment always opens towards the row's text, never off the edge */
.cpin__note { left: auto; right: 34px; border-radius: 12px 12px 4px 12px; transform-origin: 100% 100%; }

/* Home page: Figma's own cursor. Black arrow for browsing, Figma blue over
   anything you can click. Text fields keep the text caret. */
@media (hover: hover) and (pointer: fine) {
  html:has([data-stage]), html:has([data-stage]) body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M5.5%203.5v17.2l4.7-4.5%203.1%206.7%203-1.3-3-6.6h6.5z%22%20fill%3D%22%2316161a%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 5 3, auto; }
  html:has([data-stage]) :is(a, button, [role="button"], summary, label, .dot, .ctrl, .hi5, .offd__i, .swv button, .slide__card) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M5.5%203.5v17.2l4.7-4.5%203.1%206.7%203-1.3-3-6.6h6.5z%22%20fill%3D%22%230d99ff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 5 3, pointer; }
  html:has([data-stage]) :is(input, textarea) { cursor: text; }
}
/* footer bubble: a little more air between the bubble and his head */
.av-bubble { right: calc(50cqw + .045 * var(--avw)); }
.av-bubble::after { right: -6px; }

/* Footer bubble v3 · live chat: typing dots first, then his reply lands */
.av-bubble.av-chat { display: grid; justify-items: end; gap: 6px; padding: 0; background: none !important; box-shadow: none; border-radius: 0; color: #f4f2ee; animation: none !important; opacity: 1 !important; transform: none !important; }
.av-chat::after { content: none !important; }
.av-chat:hover { transform: none; }
.avc__typing, .avc__msg { border-radius: 18px 18px 6px 18px; background: rgba(244, 242, 238, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(244, 242, 238, .16), 0 18px 34px -20px rgba(0, 0, 0, .7); }
.avc__typing { display: inline-flex; gap: 4px; padding: 12px 14px; opacity: 0; transform: scale(.7); transform-origin: 100% 100%; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.avc__typing i { width: 6px; height: 6px; border-radius: 50%; background: #f4f2ee; opacity: .4; animation: avc-dot 1s ease-in-out infinite; }
.avc__typing i:nth-child(2) { animation-delay: .15s; } .avc__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes avc-dot { 50% { opacity: 1; transform: translateY(-3px); } }
.avc__msg { display: none; padding: 11px 15px 12px; font-size: 14px; line-height: 1.35; color: rgba(244, 242, 238, .86); transition: background-color .3s ease, box-shadow .3s ease; }
.avc__msg b { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.avc__meta { display: none; font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: rgba(244, 242, 238, .55); }
.av-chat.is-typing .avc__typing { opacity: 1; transform: none; }
.av-chat.is-sent .avc__typing { display: none; }
.av-chat.is-sent .avc__msg, .av-chat.is-sent .avc__meta { display: block; }
.av-chat.is-sent .avc__msg { animation: avc-land .55s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 100% 100%; }
.av-chat.is-sent .avc__meta { animation: avc-fade .4s ease .25s both; }
@keyframes avc-land { from { opacity: 0; transform: scale(.7) translateY(8px); } }
@keyframes avc-fade { from { opacity: 0; } }
.av-chat:hover .avc__msg, .av-chat:focus-visible .avc__msg { background: rgba(244, 242, 238, .16); box-shadow: inset 0 0 0 1px rgba(244, 242, 238, .28), 0 18px 34px -20px rgba(0, 0, 0, .7); }
@media (max-width: 760px) { .avc__msg { padding: 9px 12px 10px; font-size: 12.5px; } .avc__msg b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .avc__typing i { animation: none; } .av-chat.is-sent .avc__msg, .av-chat.is-sent .avc__meta { animation: none; } }
/* the "Varun · now" line hangs below, so the message itself stays at his mouth */
.av-bubble.av-chat { bottom: calc(.715 * var(--avw) - 17px); }
@media (max-width: 760px) { .av-bubble.av-chat { right: calc(50cqw + .005 * var(--avw)); } .avc__msg { padding: 8px 11px 9px; font-size: 12px; } .avc__msg b { font-size: 13.5px; } }

/* Vibration switch (touch devices only): a labelled pill with a real switch,
   so it reads as a setting, not a mystery icon. The waves stop when off. */
.hapt { width: auto; height: 40px; margin-right: 8px; padding: 0 6px 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font: 700 12.5px/1 Figtree, system-ui, sans-serif; color: #141416; background: rgba(255,255,255,.88);
  box-shadow: 0 0 0 1px rgba(20,20,22,.08), 0 8px 18px -12px rgba(20,15,35,.4); -webkit-tap-highlight-color: transparent; }
.hapt .hapt__ic { width: 18px; height: 18px; flex: none; }
.hapt__w { transform-origin: 12px 12px; animation: hapt-buzz 2.4s ease-in-out infinite; }
@keyframes hapt-buzz { 0%, 70%, 100% { opacity: 1; transform: none; } 76% { transform: translateX(-1px); } 82% { transform: translateX(1px); } 88% { transform: translateX(-1px); } }
.hapt__sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #1fbf5f; transition: background-color .25s ease; }
.hapt__sw i { position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .3s cubic-bezier(.3, 1.3, .5, 1); }
.hapt.is-off { color: #66666e; background: rgba(255,255,255,.75); }
.hapt.is-off .hapt__w { opacity: 0; animation: none; }
.hapt.is-off .hapt__sw { background: #c9c7c1; }
.hapt.is-off .hapt__sw i { left: 2px; }
.page-case:has(.case-hero--banner) .hapt { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.page-case:has(.case-hero--banner) .hapt.is-off { color: rgba(255,255,255,.7); }
.page-case:has(.case-hero--banner) .hapt.is-off .hapt__sw { background: rgba(255,255,255,.3); }
@media (max-width: 360px) { .hapt__t { display: none; } .hapt { padding-left: 8px; } }
@media (prefers-reduced-motion: reduce) { .hapt__w { animation: none; } .hapt__sw i { transition: none; } }
/* concept label: on phones it sits under the top bar, clear of the controls */
@media (max-width: 600px) { .concept-chip { top: calc(env(safe-area-inset-top, 0px) + 70px) !important; padding: 6px 11px; font-size: 11px; white-space: nowrap; } }

/* Home sections as Figma frames: a white frame on the dotted canvas, its
   name in the corner like the layer label, and its live size. Hover selects
   the frame, exactly as clicking a frame name does in Figma. */
.ffr > .wrap { position: relative; background: #fff; border-radius: 2px; padding: clamp(22px, 3vw, 44px) !important;
  box-shadow: 0 0 0 1px rgba(22, 22, 26, .08), 0 1px 2px rgba(22, 22, 26, .04), 0 30px 60px -48px rgba(20, 15, 35, .35);
  transition: box-shadow .3s ease; }
.ffr__lab, .ffr__size { position: absolute; top: -24px; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 Figtree, system-ui, sans-serif; color: #7a7a82; white-space: nowrap; transition: color .25s ease; }
.ffr__lab { left: 0; } .ffr__lab svg { width: 11px; height: 11px; }
.ffr__size { right: 0; font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; opacity: 0; transition: opacity .25s ease; }
.ffr__h { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid #0d99ff; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ffr__h--tl { left: -5px; top: -5px; } .ffr__h--tr { right: -5px; top: -5px; } .ffr__h--bl { left: -5px; bottom: -5px; } .ffr__h--br { right: -5px; bottom: -5px; }
@media (hover: hover) and (pointer: fine) {
  .ffr > .wrap:hover { box-shadow: 0 0 0 1.5px #0d99ff, 0 1px 2px rgba(22, 22, 26, .04), 0 30px 60px -48px rgba(20, 15, 35, .35); }
  .ffr > .wrap:hover .ffr__lab { color: #0d99ff; }
  .ffr > .wrap:hover .ffr__size, .ffr > .wrap:hover .ffr__h { opacity: 1; }
  .ffr > .wrap:hover .ffr__size { color: #0d99ff; }
}
.ffr { padding-top: clamp(64px, 8vw, 104px) !important; }
/* the Behance stats and tiles sit flat inside the frame */
.ffr .bx__stats, .ffr .mq__view { background: none !important; box-shadow: none !important; }
@media (max-width: 760px) { .ffr > .wrap { padding: 18px 14px !important; } .ffr__lab { font-size: 11.5px; } }

/* ==========================================================================
   Life in every interaction
   ========================================================================== */
/* 1. Objects floating on the cards: a slow, tiny levitation (a few px and
      about a degree), each on its own rhythm so they never move in sync.
      The drone hovers a little quicker, like it's holding position. */
@keyframes lev { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(1.5px, -5px, 0) rotate(1.2deg); } 50% { transform: translate3d(0, -7px, 0) rotate(0deg); } 75% { transform: translate3d(-1.5px, -4px, 0) rotate(-1.2deg); } }
@keyframes lev-drone { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(2px, -6px, 0) rotate(1.5deg); } }
.slide[data-state="active"] .chip.ixo > *, .slide.is-leaving .chip.ixo > *,
.slide[data-state="active"][data-c] .chip.ixo > *, .slide.is-leaving[data-c] .chip.ixo > * {
  animation: lev calc(5.2s + var(--i, 0) * 1.3s) ease-in-out calc(var(--i, 0) * -1.7s) infinite !important; will-change: transform; }
.slide[data-state="active"] .chip.ixo:has(img[src*="drone"]) > *, .slide.is-leaving .chip.ixo:has(img[src*="drone"]) > * { animation: lev-drone 2.6s ease-in-out infinite !important; }

/* 2. Boarding: Varun walks in from the right and settles beside his line */
.js-rv .st-fig.rv { opacity: 0; transform: translate3d(110px, 0, 0); transition: opacity .9s ease, transform 1.5s cubic-bezier(.16, 1, .3, 1) !important; }
.js-rv .st-fig.rv.in { opacity: 1; transform: none; }
@media (max-width: 760px) { .js-rv .st-fig.rv { transform: translate3d(60px, 0, 0); } }

/* 3. Every press answers: a quick squish on buttons, chips and cards */
@keyframes press { 0% { scale: 1; } 35% { scale: .955; } 100% { scale: 1; } }
.is-press { animation: press .32s cubic-bezier(.3, 1.4, .5, 1); }
/* 4. Text links in case studies: an underline that draws in */
.page-case .case-main :is(p, li):not(.cs-links) a:not([class]) { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .35s cubic-bezier(.16, 1, .3, 1), color .2s; }
.page-case .case-main :is(p, li):not(.cs-links) a:not([class]):hover { background-size: 0 1px; background-position: 100% 100%; }
/* 5. Small hover touches that were missing */
.dot .dot__track { transition: scale .3s cubic-bezier(.16, 1, .3, 1), background-color .2s; } .dot:hover .dot__track { scale: 1.3; }
.controls .ctrl svg { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.controls [data-prev]:hover svg { transform: translateX(-2px); } .controls [data-next]:hover svg { transform: translateX(2px); }
.ndock__i .ndock__ic svg { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); } .ndock__i:hover .ndock__ic svg { transform: translateY(-2px); }
.toc a { transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .2s; } .toc a:hover { transform: translateX(3px); }
.pp__links a, .bx__who { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; } .pp__links a:hover, .bx__who:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .slide .chip.ixo > * { animation: none !important; }
  .js-rv .st-fig.rv { transform: none; }
  .is-press { animation: none; }
}

/* ==========================================================================
   Interview me: side sheet on desktop, bottom sheet on phones
   ========================================================================== */
.iv { position: fixed; z-index: 95; top: 12px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); display: grid; grid-template-rows: auto 1fr auto auto; border-radius: 24px; overflow: hidden;
  background: #fbfaf7; color: #16161a; box-shadow: 0 0 0 1px rgba(22,22,26,.08), 0 40px 80px -30px rgba(20,15,35,.45);
  transform: translate3d(calc(100% + 24px), 0, 0); transition: transform .5s cubic-bezier(.16, 1, .3, 1); font-family: Figtree, system-ui, sans-serif; }
.iv.is-on { transform: none; }
.iv-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(14, 14, 16, .28); opacity: 0; transition: opacity .4s ease; }
.iv-scrim.is-on { opacity: 1; }
@media (min-width: 761px) { .iv-scrim { display: none; } }
html.has-rul .iv { top: 30px; }
.iv__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid rgba(22,22,26,.08); }
.iv__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #ece7dd; flex: none; }
.iv__head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.iv__head p { margin: 2px 0 0; font-size: 12.5px; color: #66666e; }
.iv__x { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(22,22,26,.06); color: #16161a; cursor: pointer; transition: background-color .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.iv__x svg { width: 16px; height: 16px; } .iv__x:hover { background: rgba(22,22,26,.12); transform: rotate(90deg); }
.iv__thread { overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(circle, rgba(20,20,22,.12) 1px, transparent 1.5px) 12px 12px / 24px 24px; }
.iv__msg { max-width: 88%; padding: 11px 14px 12px; font-size: 14.5px; line-height: 1.5; animation: iv-in .45s cubic-bezier(.16, 1, .3, 1) both; }
.iv__msg.is-instant { animation: none; }
.iv__msg p { margin: 0; }
.iv__msg--v { align-self: flex-start; background: #16161a; color: #f4f2ee; border-radius: 18px 18px 18px 6px; }
.iv__msg--u { align-self: flex-end; background: #e6f2ff; color: #0b3a66; border-radius: 18px 18px 6px 18px; font-weight: 600; }
@keyframes iv-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.iv__typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.iv__typing i { width: 6px; height: 6px; border-radius: 50%; background: #f4f2ee; opacity: .4; animation: avc-dot 1s ease-in-out infinite; }
.iv__typing i:nth-child(2) { animation-delay: .15s; } .iv__typing i:nth-child(3) { animation-delay: .3s; }
.iv__near { display: block; margin-bottom: 6px; font: 600 11px/1.3 "JetBrains Mono", ui-monospace, monospace; color: rgba(244,242,238,.55); }
.iv__proof { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 11px 7px 9px; border-radius: 999px; background: rgba(244,242,238,.1); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(244,242,238,.16); transition: background-color .2s, transform .35s cubic-bezier(.16,1,.3,1); }
.iv__proof i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.iv__proof svg { width: 13px; height: 13px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.iv__proof:hover { background: rgba(244,242,238,.18); } .iv__proof:hover svg { transform: translateX(3px); }
.iv__ask { padding: 10px 14px 12px; border-top: 1px solid rgba(22,22,26,.08); background: #fbfaf7; display: grid; gap: 10px; }
.iv__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
.iv__tabs::-webkit-scrollbar { display: none; }
.iv__tab { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(22,22,26,.06); color: #4f4f57; font: 600 12.5px/1 Figtree, system-ui, sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.iv__tab[aria-selected="true"] { background: #16161a; color: #fff; }
.iv__qs { display: grid; gap: 6px; max-height: 168px; overflow-y: auto; }
.iv__q { text-align: left; padding: 9px 12px; border: 0; border-radius: 12px; background: #fff; color: #16161a; font: 600 13.5px/1.35 Figtree, system-ui, sans-serif; cursor: pointer; box-shadow: 0 0 0 1px rgba(22,22,26,.08); transition: box-shadow .2s, transform .35s cubic-bezier(.16,1,.3,1), color .2s; }
.iv__q:hover { box-shadow: 0 0 0 1.5px #0d99ff; transform: translateX(2px); }
.iv__q.is-asked { color: #8a8a92; }
.iv__q.is-asked::before { content: "✓ "; color: #1f9d6b; }
.iv__form { display: flex; gap: 6px; }
.iv__form input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(22,22,26,.1); font: 500 14px/1 Figtree, system-ui, sans-serif; color: #16161a; }
.iv__form input:focus { outline: none; box-shadow: 0 0 0 2px #0d99ff; }
.iv__form button { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: #16161a; color: #fff; cursor: pointer; }
.iv__form button svg { width: 16px; height: 16px; }
.iv__cta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(22,22,26,.08); background: #fff; }
.iv__cta a { display: grid; place-items: center; height: 38px; border-radius: 999px; background: rgba(22,22,26,.06); color: #16161a; font: 700 13px/1 Figtree, system-ui, sans-serif; text-decoration: none; transition: background-color .2s, color .2s; }
.iv__cta a:first-child { background: #16161a; color: #fff; }
.iv__cta a:hover { background: rgba(22,22,26,.12); } .iv__cta a:first-child:hover { background: #000; }
.iv :focus-visible { outline: 2px solid #0d99ff; outline-offset: 2px; }
@media (max-width: 760px) {
  .iv { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(86vh, 720px); height: min(86svh, 720px); border-radius: 22px 22px 0 0; transform: translate3d(0, 104%, 0); }
  .iv::before { content: ""; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; border-radius: 4px; translate: -50% 0; background: rgba(22,22,26,.18); }
}
html.iv-open .ndock, html.iv-open .ntop, html.iv-open .nlogo { opacity: 0 !important; pointer-events: none; }
@media (min-width: 761px) { html.iv-open .ndock, html.iv-open .ntop { opacity: 1 !important; pointer-events: auto; } }
/* the floating menu item and the Boarding nudge */
.ndock__i--iv { border: 0; font: inherit; color: inherit; cursor: pointer; background: transparent; }
@media (max-width: 420px) { .ndock a.ndock__i[href$="#contact"] { display: none; } }
.iv-nudge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; height: 42px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: #fff; color: #16161a; font: 500 14px/1 Figtree, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(22,22,26,.08), 0 12px 24px -16px rgba(20,15,35,.4); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.iv-nudge b { font-weight: 800; }
.iv-nudge > svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.iv-nudge__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e5483d; color: #fff; }
.iv-nudge__ic svg { width: 15px; height: 15px; }
.iv-nudge:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(22,22,26,.1), 0 18px 30px -16px rgba(20,15,35,.5); } .iv-nudge:hover > svg { transform: translateX(3px); }
@media (max-width: 760px) { .iv-nudge { justify-self: center; font-size: 13px; } }
/* arriving from an interview answer: the section glows once */
.iv-hl { animation: iv-hl 2.4s ease both; border-radius: 16px; }
@keyframes iv-hl { 0%, 100% { box-shadow: 0 0 0 0 rgba(13,153,255,0); } 15%, 60% { box-shadow: 0 0 0 6px rgba(13,153,255,.25); } }
@media (prefers-reduced-motion: reduce) { .iv, .iv-scrim, .iv__msg { transition: none; animation: none; } .iv-hl { animation: none; } }
@media print { .iv, .iv-scrim, .iv-nudge { display: none !important; } }

/* Banner light: the Figma layout grid shows only inside a soft pool of light around the pointer */
.case-hero { position: relative; isolation: isolate; }
.case-hero__in { position: relative; z-index: 1; }
.hgrid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; --mx: 50%; --my: 50%; --hc: rgba(242, 72, 34, .11); --hl: rgba(242, 72, 34, .16); --hr: rgba(13, 153, 255, .1);
  -webkit-mask-image: radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); mask-image: radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); }
.case-hero.is-lit .hgrid { opacity: 1; }
.case-hero--banner .hgrid { --hc: rgba(255, 110, 90, .14); --hl: rgba(255, 120, 100, .3); --hr: rgba(120, 200, 255, .14); }
.hgrid__rows { position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 7px, var(--hr) 7px 8px); }
.hgrid__frame { position: absolute; inset: 0; padding-inline: max(16px, env(safe-area-inset-left, 0px), 3vw); }
.hgrid__cols { height: 100%; max-width: 1680px; margin: 0 auto; box-shadow: inset 1px 0 var(--hl), inset -1px 0 var(--hl);
  background: linear-gradient(90deg, var(--hc) 0 calc(100% - 24px), transparent 0) 0 0 / calc((100% + 24px) / 12) 100%; }
/* the light itself, plus a small Figma-style tag riding with the pointer */
.hgrid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 340px at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 70%); mix-blend-mode: soft-light; }
.hgrid__tag { position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; padding: 4px 7px; border-radius: 4px; background: #f24822; color: #fff; font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }
html.reader .hgrid { display: none; }

.case-hero.is-lit .hgrid__tag { opacity: 1; }

/* Case studies: brief checklist and competitor cards */
.brief { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-width: 62ch; }
.brief li { position: relative; padding: 12px 16px 12px 46px; border-radius: 14px; background: var(--sheet, #fff); box-shadow: 0 0 0 1px rgba(22,22,26,.07); font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.brief li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; border-radius: 6px; background: color-mix(in srgb, var(--accent, #a2762a) 16%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%238a6420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.rivals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 6px; }
@media (max-width: 900px) { .rivals { grid-template-columns: 1fr; } }
.rival { position: relative; display: grid; align-content: start; gap: 6px; padding: 20px 20px 22px; border-radius: 20px; background: var(--sheet, #fff); box-shadow: 0 0 0 1px rgba(22,22,26,.07), 0 18px 34px -28px rgba(0,0,0,.45); overflow: hidden; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.rival:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(22,22,26,.08), 0 24px 40px -26px rgba(0,0,0,.5); }
.rival__n { margin: 0; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; color: var(--rc); }
.rival h3 { margin: 4px 0 0; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.rival__t { margin: 0; font-weight: 700; font-size: 14.5px; color: #4f4f57; }
.rival__p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #4f4f57; }

/* Case studies: "anatomy" list mapping the brief's questions to the design */
.anat { margin: 18px 0 8px; display: grid; gap: 0; border-radius: 18px; overflow: hidden; background: var(--sheet, #fff); box-shadow: 0 0 0 1px rgba(22,22,26,.07); }
.anat > div { display: grid; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); gap: 16px; padding: 14px 18px; border-top: 1px solid rgba(22,22,26,.07); }
.anat > div:first-child { border-top: 0; }
.anat dt { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--accent, #8a6420); }
.anat dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: #3d3d44; }
@media (max-width: 640px) { .anat > div { grid-template-columns: 1fr; gap: 4px; } }
.gallery .shot--narrow { grid-column: 1 / -1; width: min(100%, 620px); justify-self: center; }
.gallery .shot--narrow.shot--md { width: min(100%, 860px); }
/* Micro-interactions for link buttons (case pages + shared buttons) */
.cs-links a, .bx__cta a, .band__links a { position: relative; isolation: isolate; overflow: hidden; }
.cs-links a::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--ink, #111); transform: scale(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.cs-links a:hover::before, .cs-links a:focus-visible::before { transform: scale(var(--fs, 40)); }
.cs-links a:hover, .cs-links a:focus-visible { color: #fff; }
.cs-links--hero a:first-child::before { background: var(--accent, #3b3bff); }
.cs-links a .arr, .btn .arr, .bx__cta a .arr, .band__links a .arr { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-right: -4px; border-radius: 50%; overflow: hidden; position: relative;
  background: color-mix(in srgb, currentColor 10%, transparent); transition: background-color .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.arr > i { font-style: normal; grid-area: 1 / 1; line-height: 1; transition: transform .38s cubic-bezier(.16, 1, .3, 1); }
.arr > i + i { transform: translate(-130%, 130%); }
:is(.cs-links a, .btn, .bx__cta a, .band__links a):is(:hover, :focus-visible) .arr { background: color-mix(in srgb, currentColor 18%, transparent); transform: rotate(-8deg) scale(1.08); }
:is(.cs-links a, .btn, .bx__cta a, .band__links a):is(:hover, :focus-visible) .arr > i:first-child { transform: translate(130%, -130%); }
:is(.cs-links a, .btn, .bx__cta a, .band__links a):is(:hover, :focus-visible) .arr > i + i { transform: none; }
.cs-links a:active, .btn:active, .bx__cta a:active, .band__links a:active { transform: translateY(0) scale(.96) !important; transition-duration: .12s; }
.cs-links a .rip { position: absolute; z-index: -1; border-radius: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: rgba(255,255,255,.45); pointer-events: none; animation: rip .6s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes rip { from { transform: scale(0); opacity: .9; } to { transform: scale(40); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cs-links a::before, .arr, .arr > i { transition: none; }
  .cs-links a .rip { display: none; }
}
/* Case images: never upscale, and keep screenshots at a readable size instead of stretching to the full column */
.page-case .case-main .gallery .shot:not(.shot--hero) { width: min(100%, var(--cap, 860px)); justify-self: center; }
.page-case .case-main .gallery .shot.shot--narrow { --cap: 620px; }
.page-case .case-main .gallery .shot.shot--narrow.shot--md { --cap: 860px; }
.page-case .case-main .shot img { image-rendering: auto; }
.page-case .case-main .gallery .shot.shot--tall { --cap: 720px; }
.page-case .case-main .gallery { gap: clamp(28px, 3.4vw, 44px); }
.page-case .case-main .shot figcaption { margin-top: 12px; }

/* Expandable case images */
.page-case .case-main .shot .xp-wrap { position: relative; display: block; cursor: zoom-in; }
.xp-btn { position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  background: rgba(20,20,22,.78); color: #fff; font: 600 13px/1 inherit; font-family: inherit; cursor: zoom-in; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-4px) scale(.96); transition: opacity .25s, transform .35s cubic-bezier(.16,1,.3,1), background-color .2s; }
.xp-btn svg { width: 15px; height: 15px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.xp-wrap:hover .xp-btn, .xp-btn:focus-visible { opacity: 1; transform: none; }
.xp-btn:hover { background: #000; } .xp-btn:hover svg { transform: scale(1.15); }
.xp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .xp-btn { opacity: 1; transform: none; padding: 0; width: 34px; justify-content: center; } .xp-btn span { display: none; } }
.page-case .case-main .shot .xp-wrap img { transition: transform .5s cubic-bezier(.16,1,.3,1); }

.lbx { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr auto; background: rgba(12,12,14,.94); color: #f4f2ee;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.lbx.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lbx__bar { display: flex; align-items: center; gap: 8px; padding: 14px clamp(14px, 3vw, 28px); font-size: 14px; }
.lbx__count { margin-right: auto; opacity: .7; font-variant-numeric: tabular-nums; }
.lbx__b { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background-color .2s, transform .2s; }
.lbx__b:hover { background: rgba(255,255,255,.2); } .lbx__b:active { transform: scale(.92); }
.lbx__b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbx__b svg { width: 18px; height: 18px; }
.lbx__stage { overflow: auto; display: grid; place-items: center; padding: 0 clamp(56px, 7vw, 96px); overscroll-behavior: contain; }
.lbx__stage img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; background: #fff; cursor: zoom-in;
  transform: scale(.96); opacity: 0; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s; }
.lbx.is-open .lbx__stage img.is-in { transform: none; opacity: 1; }
.lbx.is-full .lbx__stage { place-items: start center; }
.lbx.is-full .lbx__stage img { max-width: none; max-height: none; cursor: zoom-out; }
.lbx__nav { position: absolute; top: 50%; translate: 0 -50%; }
.lbx__nav--p { left: clamp(8px, 2vw, 24px); } .lbx__nav--n { right: clamp(8px, 2vw, 24px); }
.lbx__cap { padding: 12px clamp(14px, 3vw, 28px) 18px; text-align: center; font-size: 14px; opacity: .8; min-height: 1em; }
@media (max-width: 640px) { .lbx__stage { padding: 0 8px; } .lbx__nav { top: auto; bottom: 10px; translate: none; } }
@media (prefers-reduced-motion: reduce) { .lbx, .lbx__stage img, .xp-btn { transition: none; } }
.page-case .case-main .gallery .shot.shot--sm { --cap: 700px; }

/* Side-by-side image pair on desktop (e.g. Puffy "The image problem") */
@media (min-width: 900px) {
  .page-case .case-main .gallery:has(.shot--duo) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-case .case-main .gallery:has(.shot--duo) > .shot:not(.shot--duo) { grid-column: 1 / -1; }
  .page-case .case-main .gallery .shot.shot--duo { grid-column: auto; width: 100%; justify-self: stretch; align-self: start; }
}
/* Two images side by side at the same height */
.page-case .case-main .shot-pair { grid-column: 1 / -1; display: flex; gap: clamp(16px, 2vw, 28px); align-items: flex-start; width: min(100%, 1200px); justify-self: center; }
.page-case .case-main .gallery .shot-pair .shot { flex: var(--ar) 1 0; width: auto; min-width: 0; --cap: none; }
@media (max-width: 640px) { .page-case .case-main .shot-pair { flex-direction: column; } .page-case .case-main .gallery .shot-pair .shot { width: 100%; } }
/* Light grey outline on the white pill link buttons */
.page-case .cs-links a:not(.cs-links--hero a:first-child) { border: 1px solid #e2dfd8; box-shadow: 0 8px 20px -16px rgba(0,0,0,.35) !important; }
.page-case .cs-links a:not(.cs-links--hero a:first-child):hover { border-color: var(--ink, #111); }
/* Problem / objective callout and recap table */
.anat--po { margin: 20px 0 6px; }
.anat--po > div { grid-template-columns: minmax(120px, .22fr) minmax(0, 1fr); }
.anat--po > div:first-child dt { color: #b42318; }
.anat--recap dd span { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--tint, #f4ead6); color: var(--accent, #8a6420); font-size: 12.5px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
@media (max-width: 640px) { .anat > div, .anat--po > div { grid-template-columns: 1fr; gap: 4px; } }
.anat--recap dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.anat--recap dd span { margin: 1px 0 0; flex: none; }
@media (max-width: 640px) { .anat--recap dd { flex-direction: column; gap: 6px; } }
/* Interview button in the dock: same type as the other items */
.ndock .ndock__i--iv { font-family: Figtree, system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 14px; }
/* Research findings list */
.ex-find { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: f; }
.ex-find li { position: relative; padding: 14px 18px 14px 56px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ebe7df; font-size: 16px; line-height: 1.55; color: #3d3d44; counter-increment: f;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.ex-find li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 18px; top: 15px; font: 700 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: var(--accent, #5b4fd6); }
.ex-find li b { color: #16161a; }
.ex-find li:hover { transform: translateX(4px); box-shadow: 0 0 0 1px #d9d3c8, 0 10px 24px -18px rgba(0,0,0,.35); }
/* Print / PDF: keep headings with their content, never split cards or figures */
@media print {
  .page-case h1, .page-case h2, .page-case h3, .page-case .cs__n, .page-case .ex-h3, .page-case .ex-lead, .page-case .kicker { break-after: avoid; page-break-after: avoid; }
  .page-case figure, .page-case .shot, .page-case .rival, .page-case .anat > div, .page-case .decision, .page-case .metric, .page-case .ex-find li, .page-case .ex-roles li, .page-case .ex-principles li, .page-case .brief li, .page-case .shot-pair, .page-case .ex-challenge, .page-case .ex-outcome > div { break-inside: avoid; page-break-inside: avoid; }
  .page-case .xp-btn, .lbx { display: none !important; }
}
@media print { .page-case .case-main, .page-case .cs { display: block !important; } .page-case .cs + .cs { margin-top: 28px; } }
@media print { .page-case .cs__n { display: none !important; } }