:root {
  --bg: #0a0a0b;
  --panel: #141416;
  --line: rgba(255, 255, 255, 0.14);
  --text: #ecebe8;
  --muted: #8d8c88;
  --steel: #c7c9cc;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Tinos", "Times New Roman", Times, serif;
  --gutter: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); overflow-x: clip; } /* no sideways scroll on any page (clip keeps sticky sections working) */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, not hidden: hidden would make the body its own scroller and break the sticky sections */
}

a { color: inherit; text-decoration: none; }

/* background texture: a slowly drifting halftone dot screen, drawn by js/grain.js
   into a canvas inside this layer. Sits BEHIND all content, barely visible. */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
main { position: relative; z-index: 1; } /* content above the texture */

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--gutter);
}
.nav__links { display: flex; gap: 6px; }
.nav__left { display: flex; gap: 6px; align-items: center; }
/* Home, Work, Story and Contact are all the same width (sized to fit the longest, CONTACT); the sound button stays small */
.nav .pill:not(.sound) { display: inline-flex; justify-content: center; align-items: center; min-width: 124px; }
/* music toggle: four small bars that dance while it plays, lie flat when it's off */
.sound { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border: 0; font: inherit; }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.sound__bars i { display: block; width: 2px; height: 4px; border-radius: 1px; background: currentColor; opacity: 0.55; transition: height 0.3s ease, opacity 0.3s ease; }
.sound__bars i:nth-child(2) { height: 7px; } .sound__bars i:nth-child(3) { height: 5px; } .sound__bars i:nth-child(4) { height: 9px; }
.sound.is-on .sound__bars i { opacity: 1; }
.sound.is-on .sound__bars i { animation: sound-bar 1.1s ease-in-out infinite; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: -0.45s; animation-duration: 0.9s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: -0.2s; animation-duration: 1.3s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: -0.7s; animation-duration: 1s; }
@keyframes sound-bar { 0%, 100% { height: 3px; } 50% { height: 10px; } }
@media (max-width: 760px) { .sound__label { display: none; } .sound { gap: 0; } }
/* phones: five pills (Home, sound, Work, Story, Contact) have to fit in one row */
@media (max-width: 480px) {
  .nav { padding-left: 12px; padding-right: 12px; }
  .nav__left, .nav__links { gap: 4px; }
  .nav .pill, .nav__links .pill { padding: 7px 6px; font-size: 10px; letter-spacing: 0.08em; }
  .nav .pill:not(.sound), .nav .nav__links .pill { min-width: 0; width: 72px; padding: 7px 4px; }
}
@media (prefers-reduced-motion: reduce) { .sound.is-on .sound__bars i { animation: none; height: 7px; } }
/* liquid glass: frosted, saturated backdrop + bright rim + top gloss + a soft
   specular spot that follows the cursor (--gx/--gy set in hero.js) */
.pill {
  position: relative; isolation: isolate; overflow: hidden;
  font-family: var(--display);
  font-variation-settings: "wdth" 110;
  font-weight: 300; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px; color: #f4f4f2;
  --gx: 50%; --gy: 0%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.09) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.1);
  backdrop-filter: blur(14px) saturate(190%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),   /* top rim catch-light */
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),    /* bottom rim refraction */
    inset 0 0 14px rgba(255, 255, 255, 0.07),      /* inner glow */
    0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(.2, .8, .2, 1.2), background 0.25s, box-shadow 0.25s;
}
.pill::before { /* glossy dome on the upper half */
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none; z-index: -1;
}
.pill::after { /* specular spot under the cursor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(circle 38px at var(--gx) var(--gy), rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.pill:hover { transform: scale(1.05); background: linear-gradient(160deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.14) 100%); }
.pill:hover::after { opacity: 1; }
.pill:active { transform: scale(0.97); }
/* small drawn arrows next to links (a plain arrow character turns into a coloured emoji on iPhones) */
.arw { display: inline-block; width: 0.72em; height: 0.72em; margin-left: 0.25em; vertical-align: 0.02em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- hero ---------- */
.hero { position: relative; height: 280vh; }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  /* soft glow behind the portrait that fades to nothing well before the edges,
     so the hero blends straight into the next section on the same page colour */
  background: radial-gradient(ellipse 60% 44% at 50% 42%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 45%, transparent 100%);
}
#origami { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }

.eyebrow {
  font-family: var(--display); font-variation-settings: "wdth" 110;
  font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}

/* layout: name across the top under the nav; intro and portrait sit below it */
.hero__stage { --name-top: 82px; --name-h: calc(min(10.2vw, 200px) * 0.82); }
.hero__intro {
  position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--name-top) + var(--name-h) + 8vh); max-width: 360px;
  opacity: 0;
}
.hero__lede {
  font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 14px;
}
.hero__body {
  /* Kinetic-style neo-grotesk: Helvetica Neue where available, Inter Tight (loaded) elsewhere;
     tight tracking and compact leading like the reference */
  font-family: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  font-weight: 400; color: #d6d5d1; font-size: 17px; line-height: 1.32; letter-spacing: -0.02em;
}
.hero__body + .hero__body { margin-top: 12px; }
.hero__body--m { display: none; }
/* second paragraph on the right of the portrait, set lower than the left block */
.hero__aside {
  position: absolute; z-index: 3; right: var(--gutter); max-width: 340px; opacity: 0;
  top: calc(var(--name-top) + var(--name-h) + 23vh); /* staggered: lower than the left block */
}
.hero__intro, .hero__aside { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6); }
.hero__title { /* same Kinetic-style grotesk as the paragraphs, set tight like a headline */
  font-family: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.02;
}

.hero__name {
  position: absolute; z-index: 1; left: 0; right: 0; top: var(--name-top); /* behind the portrait, which tucks slightly over it */
  display: flex; justify-content: center; gap: 0.25em;
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(44px, 10.2vw, 200px); line-height: 0.82; letter-spacing: -0.02em;
  white-space: nowrap; pointer-events: none;
  color: #9a9ea3;
  /* --mx / --my are set from the cursor in hero.js, so the light sits where the pointer is */
  --mx: 50%; --my: 50%; --glow: 0;
  background:
    radial-gradient(circle 9vw at var(--mx) var(--my), rgba(255, 255, 255, var(--glow)) 0%, rgba(255, 255, 255, var(--glow)) 10%, rgba(232, 236, 241, calc(var(--glow) * 0.55)) 40%, transparent 80%),
    /* polished steel: soft diagonal reflections over a smooth light-dark-light sweep (no hard band) */
    linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.12) 78%, rgba(255, 255, 255, 0) 92%),
    linear-gradient(180deg, #eceef0 0%, #c3c7cb 28%, #979ba0 52%, #a9adb2 70%, #d6d9dc 88%, #b3b7bb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

/* bottom-right corner: location + CV, same type as the scroll hint */
.hero__corner {
  position: absolute; z-index: 3; right: var(--gutter);
  bottom: 5vh;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); opacity: 0;
}
.hero__corner a {
  color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
}
.hero__corner a:hover { border-color: var(--text); }

.scroll-cue {
  position: absolute; z-index: 3; right: var(--gutter); bottom: 5vh;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue__line {
  width: 40px; height: 1px; background: var(--muted); transform-origin: left;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: scaleX(0.3); } 50% { transform: scaleX(1); } }

/* ---------- work: logo shelf ---------- */
/* everything lines up on the page gutter, same left edge as HOME and the hero text */
.work {
  position: relative; padding: 30vh var(--gutter) 22vh;
  background: transparent; /* same page colour as the hero: no seam */
}
.work__head { margin: 0 0 12vh; }
.work__title { /* same Kinetic-style grotesk as the hero heading */
  font-family: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif; font-weight: 500;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em;
}

.shelf {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* max 3 per row */
  column-gap: 6vw; row-gap: 16vh;
}
.slot {
  --lit: 236, 238, 240;  /* the shelf light: cool white/grey */
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1);
}
.slot.is-in { opacity: 1; transform: none; }

/* soft light on the wall above a lit shelf */
.slot::before {
  content: ""; position: absolute; left: -12%; right: -12%; bottom: 30px; height: 260px;
  background: radial-gradient(ellipse 55% 70% at 50% 100%, rgba(var(--lit), 0.10), rgba(var(--lit), 0.03) 50%, transparent 75%);
  opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
.slot:hover::before, .slot:focus-visible::before { opacity: 1; }

.slot__logo {
  position: relative; z-index: 1; height: 250px; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
}
.slot__logo img {  /* logos stay exactly as they are; only the shelf reacts */
  max-width: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6));
}

/* a slim line under each logo (no shelf); it lights up white/grey on hover */
.slot__plank {
  position: relative; width: 100%; height: 6px; margin-top: 14px; border-radius: 3px;
  background: linear-gradient(180deg, #3a3a3d 0%, #222225 60%, #18181a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 24px rgba(0, 0, 0, 0.6);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.slot:hover .slot__plank, .slot:focus-visible .slot__plank {
  background: linear-gradient(180deg, #ffffff 0%, #d4d7da 60%, #a6aaaf 100%);
  box-shadow: 0 0 14px rgba(var(--lit), 0.55), 0 0 44px rgba(var(--lit), 0.18), 0 14px 24px rgba(0, 0, 0, 0.6);
}

.slot__label {
  margin-top: 26px; text-align: center;
  font-family: var(--display); font-variation-settings: "wdth" 110;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.slot__label b { display: block; color: var(--text); font-weight: 500; margin-bottom: 4px; }
.slot:hover .slot__label, .slot:focus-visible .slot__label { opacity: 1; transform: none; }
.slot:focus-visible { outline: none; }

/* ---------- opened company page ---------- */
.work-view {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
  overflow-y: auto;
}
.work-view.is-open { opacity: 1; pointer-events: auto; transition: none; }
.work-view__logo {
  position: absolute; z-index: 2; left: var(--gutter); top: 28px; /* scrolls with the page */
  height: 84px; width: auto; max-width: 60vw; object-fit: contain; /* exact size set in shelf.js */
  transform-origin: 0 0; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
/* top right of a work page: music toggle + back */
.work-view__actions { position: fixed; z-index: 2; right: var(--gutter); top: 16px; display: flex; gap: 6px; align-items: center; }
.work-view__back { cursor: pointer; }
.work-view__body {
  position: relative; z-index: 1; /* above the page's line texture */
  min-height: 100vh; padding: 200px var(--gutter) 16vh;
  --grotesk: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  font-family: var(--grotesk);
  opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1);
}
.work-view__body.is-shown { opacity: 1; transform: none; }

.wv-head { max-width: none; } /* text runs the full width, edge to edge within the gutters */
.wv-title {
  font-weight: 500; font-size: clamp(40px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.045em;
  margin-bottom: 28px;
}
.wv-lead {
  max-width: none; margin-bottom: 18px;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.03em; color: var(--text);
}
.wv-summary {
  max-width: none; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; letter-spacing: -0.02em; color: #c9c8c4;
}
.wv-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
}
.wv-meta dt, .wv-stats span, .wv-num {
  font-family: var(--display); font-variation-settings: "wdth" 110;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.wv-meta dt { margin-bottom: 8px; }
.wv-meta dd { font-size: 17px; letter-spacing: -0.015em; color: var(--text); }

.wv-stats {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 12vh 0; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.wv-stats b {
  display: block; font-weight: 500; font-size: clamp(48px, 6vw, 96px); line-height: 1; letter-spacing: -0.05em;
  margin-bottom: 12px; color: var(--text);
}

.wv-sections { list-style: none; margin-top: 12vh; }
.wv-sections--tight { margin-top: 0; }
.wv-row {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: baseline;
  padding: 40px 0; border-bottom: 1px solid var(--line);
}
.wv-row:first-child { border-top: 1px solid var(--line); }
.wv-row__title { font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.035em; }
.wv-row__text { font-size: 18px; line-height: 1.4; letter-spacing: -0.015em; color: #c9c8c4; max-width: none; }
body.is-locked { overflow: hidden; }

/* ---------- company page feature blocks (stats + images) ---------- */
.wv-feature { margin-top: 8vh; padding-top: 10vh; border-top: 1px solid var(--line); }
.wv-kpis {
  list-style: none; display: flex; flex-wrap: wrap; gap: 24px 72px; margin-bottom: 6vh;
}
.wv-kpis b {
  display: block; font-weight: 500; font-size: clamp(36px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.05em;
  margin-bottom: 10px; color: var(--text);
}
.wv-kpis span {
  font-family: var(--display); font-variation-settings: "wdth" 110;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.wv-figs { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 24px; }
.wv-figs img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line);
}

/* ---------- stat card (LinkedIn growth) ---------- */
.statcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 56px;
  align-items: center; /* 22.3% sits centred against the grid; equal space above and below */
  padding: clamp(28px, 4vw, 56px); border-radius: 18px; overflow: hidden;
  /* solid, no dots: neither its own dot grid nor the page's halftone texture shows through */
  background: linear-gradient(160deg, #141416, #0f0f11);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px rgba(0, 0, 0, 0.4);
}
.statcard__eyebrow, .statcard__grid span, .statcard__foot {
  font-family: var(--display); font-variation-settings: "wdth" 110;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.statcard__hero {
  margin: 0 0 14px; font-weight: 300; font-size: clamp(110px, 15vw, 230px); line-height: 0.85; letter-spacing: -0.06em; color: var(--text);
}
.statcard__hero span { font-size: 0.42em; letter-spacing: -0.02em; color: #bdbcb8; margin-left: 0.04em; }
.statcard__text { max-width: 420px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -0.02em; color: #c9c8c4; }
.statcard--solo { grid-template-columns: 1fr; } /* just the big number, no boxes */
.statcard--grid-only { grid-template-columns: 1fr; } /* just the boxes, no big number */
.statcard--grid-only .statcard__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.statcard__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.statcard__grid li {
  padding: 22px 22px 20px; border-radius: 12px;
  background: #18181a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.statcard__grid b { display: block; font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.045em; color: var(--text); margin-bottom: 12px; }
.statcard__foot { grid-column: 1 / -1; padding-top: 6px; color: rgba(255, 255, 255, 0.32); }
/* three boxes in the two-column grid: the first runs the full width, so none is left on its own */
.statcard:not(.statcard--grid-only) .statcard__grid li:first-child:nth-last-child(3) { grid-column: 1 / -1; }

/* ---------- flip-book (Crescent) ---------- */
.fb-track { position: relative; height: calc(100vh + (var(--n) - 1) * 60vh); margin-top: 4vh; }
.fb-stage {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center;
  perspective: 1400px; perspective-origin: 50% 18%; overflow: hidden;
}
.fb-scene { pointer-events: none; /* only the front card's controls take clicks (below) */ position: relative; width: min(46vh, 70vw); aspect-ratio: var(--fb-aspect, 4 / 5); transform-style: preserve-3d; transform: translateY(-6vh); }
.fb--wide .fb-scene { width: min(62vw, 92vh); } /* wide 16:9 cards for films */
.fb--tall .fb-scene { width: min(40vh, 70vw); } /* full-frame 9:16 for vertical films (nothing cropped) */
.fb-card {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  transform-origin: 50% 100%; backface-visibility: visible; will-change: transform;
  background: #1b1b1d; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);
}
.fb-card img, .fb-card video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fb-ph {
  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px;
  background: linear-gradient(160deg, #2a2a2d, #151517 70%);
  font-size: 22px; letter-spacing: -0.03em; color: var(--text);
}
.fb-ph span { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
.fb-cap { /* same label style as the placeholders, over a soft shade so it reads on any photo */
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 22px 20px;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  font-size: 22px; letter-spacing: -0.03em; color: #f2f1ee;
}
.fb-cap span { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.65); }
/* video controls on a flip-book card (usable only while it is at the front) */
.fb-card--video .fb-cap { bottom: 46px; padding-bottom: 8px; }
.fb-ctrl {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 999px;
  background: rgba(15, 15, 17, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.fb-card.is-front .fb-ctrl { opacity: 1; pointer-events: auto; }
.fb-btn {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; color: #f2f1ee; background: rgba(255, 255, 255, 0.1);
}
.fb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.fb-btn svg { width: 15px; height: 15px; }
.fb-sound.is-on { background: #f2f1ee; color: #111; }
.fb-time {
  flex: none; min-width: 74px; text-align: right;
  font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 10px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75);
}
.fb-seek {
  --fill: 0%; flex: 1; min-width: 0; height: 18px; margin: 0; cursor: pointer; background: transparent;
  -webkit-appearance: none; appearance: none;
}
.fb-seek::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #f2f1ee var(--fill), rgba(255, 255, 255, 0.25) var(--fill));
}
.fb-seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.fb-seek::-moz-range-progress { height: 3px; border-radius: 3px; background: #f2f1ee; }
.fb-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.fb-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

.fb-count {
  position: absolute; right: 0; bottom: 6vh;
  font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: 0.18em; color: var(--muted);
}
.fb-count b { color: var(--text); font-weight: 500; }

/* ---------- presentation revamps: before/after slides ---------- */
.wv-revamps { margin-top: 8vh; padding-top: 10vh; border-top: 1px solid var(--line); } /* same grey rule as above the details row */
.wv-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 7vh; }
.wv-sec-text { margin-top: 0.15em; } /* first line sits level with the top of the heading */
.wv-sec-title { font-weight: 500; font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -0.045em; }
.wv-sec-text { font-size: 18px; line-height: 1.4; letter-spacing: -0.015em; color: #c9c8c4; }

.compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* all slides on one line */
.compare { margin: 0; }
.compare__frame {
  --pos: 50%;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px;
  cursor: ew-resize; touch-action: pan-y; user-select: none;
  background: #1a1a1c; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line);
}
.compare__old, .compare__new { position: absolute; inset: 0; }
.compare__old img, .compare__new img { position: relative; width: 100%; height: 100%; display: block; pointer-events: none; }
.compare__old img { object-fit: fill; } /* old 4:3 slides fill the whole frame, no filler at the sides */
.compare__new img { object-fit: cover; }
.compare__new { clip-path: inset(0 0 0 var(--pos)); } /* new design right of the line: cursor left = all new, cursor right = all old */
.compare__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.compare__knob {
  position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  background: rgba(20, 20, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.compare__knob::before, .compare__knob::after { /* little ‹ › arrows */
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: solid #fff; border-width: 0 0 1.5px 1.5px;
}
.compare__knob::before { left: 7px; transform: rotate(45deg); }
.compare__knob::after { right: 7px; transform: rotate(-135deg); }
.compare__tag {
  position: absolute; top: 10px; padding: 5px 8px; border-radius: 999px; pointer-events: none;
  font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: rgba(15, 15, 17, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.compare__tag--old { left: 10px; }
.compare__tag--new { right: 10px; }
.compare figcaption {
  display: flex; gap: 12px; margin-top: 14px; font-size: 15px; letter-spacing: -0.015em; color: #c9c8c4;
}
.compare figcaption span {
  font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: 0.18em; color: var(--muted); padding-top: 4px;
}

/* ---------- small screens ---------- */
/* the opening (name, portrait, intro) stacked for an upright phone. A phone turned sideways keeps
   the wide layout instead: there isn't the height to stack the name, portrait and text */
@media (max-width: 760px) and (orientation: portrait) {
  .hero__intro { top: auto; bottom: calc(3vh + 36px); max-width: none; right: var(--gutter); }
  .hero__aside { display: none; }
  .hero__body { font-size: 14px; line-height: 1.38; }
  .hero__body--m { display: block; }
  .hero__lede { font-size: 26px; margin-bottom: 10px; }
  .hero__name { bottom: auto; top: 12vh; flex-direction: column; align-items: center; gap: 0; font-size: 15vw; } /* SHIVANG fits inside the side margins */
  .scroll-cue { bottom: 3vh; }
  .hero__corner { bottom: 3vh; left: var(--gutter); right: var(--gutter); flex-direction: row; gap: 20px; }
}
/* a phone (or small window) on its side: little height, so the opening is tighter. The name sits
   closer under the nav, the two short columns stay either side of the portrait, and the
   location and CV link sit in one line in the corner */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__stage { --name-top: 62px; }
  .hero__intro, .hero__aside { max-width: min(30vw, 300px); }
  .hero__intro { top: calc(var(--name-top) + var(--name-h) + 5vh); }
  .hero__aside { top: calc(var(--name-top) + var(--name-h) + 12vh); }
  .hero__lede { font-size: 20px; margin-bottom: 8px; }
  .hero__body { font-size: 13px; line-height: 1.3; }
  .hero__body + .hero__body { margin-top: 8px; }
  .hero__corner { bottom: 4vh; flex-direction: row; gap: 18px; font-size: 10px; }
  .scroll-cue { bottom: 4vh; }
}
@media (max-width: 760px) {
  .nav__links .pill { padding: 7px 10px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8vw; row-gap: 9vh; }
  .slot__logo { height: 150px; }
  .slot__label { opacity: 1; transform: none; }
  .work-view__logo { height: 60px; top: 70px; }
  .work-view__body { padding-top: 160px; }
  .wv-meta, .wv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wv-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .wv-sec-head { grid-template-columns: 1fr; gap: 14px; }
  .compare-grid { grid-template-columns: 1fr; gap: 40px; }
  .wv-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .statcard { grid-template-columns: 1fr; }
  /* flip-book on phones: wide films use the full width, the other cards grow a little, and
     the caption and video controls are smaller so they don't cover the picture */
  .fb--wide .fb-scene { width: 100%; }
  .fb-scene { width: min(52vh, 82vw); }
  .fb--tall .fb-scene { width: min(42vh, 76vw); }
  .fb-cap { padding: 36px 14px 12px; gap: 4px; font-size: 17px; }
  .fb-cap span { font-size: 9px; }
  .fb-card--video .fb-cap { bottom: 38px; padding-bottom: 4px; }
  .fb-ctrl { left: 8px; right: 8px; bottom: 8px; gap: 8px; padding: 4px 6px; }
  .fb-btn { width: 24px; height: 24px; }
  .fb-btn svg { width: 13px; height: 13px; }
  .fb-time { min-width: 62px; font-size: 9px; }
  .fb--wide .fb-cap { padding-top: 24px; font-size: 15px; }
  /* phones: while a film plays, its title steps aside so only the slim control bar sits on the picture */
  .fb-cap { transition: opacity 0.4s ease; }
  .fb-card--video.is-playing .fb-cap { opacity: 0; }
  .fb-card--video .fb-ctrl { background: rgba(15, 15, 17, 0.42); }
  .statcard--grid-only .statcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wv-kpis { gap: 20px 40px; }
}

/* phone on its side: the flip-book is sized by the short height, so a whole card or film fits on screen */
@media (max-width: 760px) and (orientation: landscape) {
  .fb--wide .fb-scene { width: min(100%, 130vh); }
  .fb-scene { width: min(60vh, 82vw); }
  .fb--tall .fb-scene { width: min(42vh, 76vw); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line { animation: none; }
}