/* ===== Tokens (from Figma) ===== */
:root {
  --blue-500: #116af8;
  --black: #000;
  --white: #fff;
  --ink-dark: #100d0d;
  --maroon: #5d0d18;
  --cream: #f9f6e8;
  --border: #ececec;
  --intro-w: 30vw;          /* 432 / 1440 */
  --intro-min: 360px;
  --intro-max: 520px;
  --nav-h: 64px;            /* sticky navigation height */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ===== Layout ===== */
.hero {
  display: grid;
  grid-template-columns: clamp(var(--intro-min), var(--intro-w), var(--intro-max)) 1fr;
  align-items: start;
}

/* ===== Left intro panel ===== */
.intro {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;        /* swinging charms may cross into the slider */
  background: var(--white);
  z-index: 2;
}

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex: none;
  padding-left: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.topbar__logo img { width: 62px; height: 76px; }
.topbar__nav { display: flex; align-items: center; gap: 32px; height: 100%; }
.topbar__link,
.topbar__resume {
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__link { font-size: 15px; line-height: 24px; letter-spacing: -0.12px; transition: color .2s; }
.topbar__link:hover { color: var(--blue-500); }
.topbar__resume {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 16px 20px;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.7px;
  transition: background .2s;
}
.topbar__resume:hover { background: var(--blue-500); }

/* ===== 3D keychain (cursor-driven turntable + swing physics) ===== */
.keychain-stage {
  position: relative;
  flex: 1 1 434px;
  min-height: 220px;
  perspective: 1000px;
  perspective-origin: 43% 0%;
  z-index: 4;               /* ring pokes up through the header */
  pointer-events: none;
}
.keychain {
  position: absolute;
  left: 16%;
  top: calc(-64px - 34px);  /* ring pokes up through the header (cropped at the top edge) */
  height: min(calc(100% + 98px), 620px);
  aspect-ratio: 444 / 828;  /* one frame */
  animation: keychain-enter 1.4s cubic-bezier(.2,.9,.25,1.2) both;
}
.kc-swing {
  position: absolute;
  inset: 0;
  transform-origin: 42.7% 1.5%;            /* pivot = top of the ring */
  transform:
    rotateZ(var(--swing, 0deg))
    rotateX(var(--tilt, 0deg))
    rotateY(var(--lean, 0deg));
  will-change: transform;
}
.kc-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s;
}
.keychain.is-ready .kc-frame { opacity: 1; }

@keyframes keychain-enter {
  from { opacity: 0; translate: 0 -60px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ===== Copy ===== */
.intro__copy {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 24px 32px;
  position: relative;
  z-index: 5;
}
.intro__text { display: flex; flex-direction: column; gap: 16px; }
.intro__title {
  margin: 0;
  max-width: 300px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.94px;
}
.accent { color: var(--blue-500); }
.intro__lead {
  margin: 0;
  max-width: 342px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.32px;
  opacity: .6;
}
.intro__ctas { display: flex; flex-wrap: wrap; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 10px 16px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.128px;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .3s;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.btn--blue  { background: var(--blue-500); padding-left: 12px; }
/* Figma "Button / Variant2" — hover: deep-blue → blue → ice gradient */
.btn--blue::before,
.btn--black::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115.56deg, #052699 19.73%, #116af8 49.98%, #dff7ff 119.69%);
  opacity: 0;
  transition: opacity .35s ease;
}
.btn--blue:hover::before,
.btn--blue:focus-visible::before,
.btn--black:hover::before,
.btn--black:focus-visible::before { opacity: 1; }
.btn--black { background: var(--black); }
.btn__status {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 34px;
  margin-right: 4px;
}
.btn__status::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  animation: pulse 2s ease-out infinite;
}
.btn__status span { width: 6px; height: 6px; border-radius: 2px; background: var(--white); }
@keyframes pulse {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ===== Right: full-screen slides ===== */
.slides { position: relative; }
.slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--ink-dark);
  color: var(--white);
}

/* entry animation for each slide's content */
.slide > *:not(.tag):not(.slide__glow):not(.slide__cta) { transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s; }
.slide:not(.is-visible) > *:not(.tag):not(.slide__glow):not(.slide__cta) { opacity: .0; transform: translateY(40px) scale(.98); }
.slide--hosteat:not(.is-visible) .hosteat__img { transform: rotate(-6.32deg) scale(1.25); }

/* ===== Slide hover (Figma "Slide scroll down" → Property 1 = hover) =====
   blue glow rises from the bottom, VIEW PROJECT slides in from the left,
   project tag turns navy. Smart-animate style easing. */
.slide { --hover-ease: cubic-bezier(.22, 1, .36, 1); --hover-dur: .6s; }
.slide__glow {
  position: absolute;
  left: 0; right: 0;
  top: 48%;                 /* 272 / 567 */
  height: 65%;              /* 368 / 567 */
  z-index: 1;               /* under the CTA and the project tag */
  opacity: .8;
  background: linear-gradient(180deg, rgba(5,38,153,0) 0%, var(--blue-500) 50%, #dff7ff 100%);
  transform: translateY(79%);   /* default: parked below the slide (top 562) */
  transition: transform var(--hover-dur) var(--hover-ease);
  pointer-events: none;
}
.slide__cta {
  position: absolute;
  left: 28px;
  bottom: 40px;
  z-index: 4;
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;  /* -3.2px @ 64px */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  transform: translateX(calc(-100% - 60px));   /* default: off the left edge */
  transition: transform var(--hover-dur) var(--hover-ease);
}
.slide:hover .slide__glow,
.slide:focus-within .slide__glow { transform: translateY(0); }
.slide:hover .slide__cta,
.slide:focus-within .slide__cta { transform: translateX(0); }
.slide:hover .tag,
.slide:focus-within .tag { background: #041b6b; }    /* Color/Navy/700 */

/* project tag (bottom-right) */
.tag {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;               /* always above the hover gradient */
  transform: translateZ(0); /* own layer, never blended with the gradient */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 197px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--blue-500);
  transition: background var(--hover-dur) var(--hover-ease);
  font-size: 11px;
  line-height: 19px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  font-weight: 500;
  outline: 1px dashed rgba(255,255,255,.1);
  outline-offset: -1px;
}
.tag__date { color: rgba(255,255,255,.6); }
.tag__row { display: flex; align-items: center; gap: 10px; }
.tag__row b { font-weight: 600; }
.tag__row i { width: 2px; height: 2px; background: var(--white); }

/* Slide 1 — Hosteat */
.hosteat__img {
  position: absolute;
  inset: -10%;
  background: url("assets/hosteat.jpg") center / cover no-repeat;
  transform: rotate(-6.32deg) scale(1);
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1s !important;
}
/* Slide 2 — Omah Bapak */
.slide--omah { background: var(--maroon); }
.omah__layout {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 0.75fr;
  align-items: center;
  gap: 24px;
  padding: 7vh 4% 9vh;
}
.omah__photo {
  width: 100%;
  height: 100%;
  max-height: 84vh;
  object-fit: cover;
}
.omah__brand {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding-left: 12%;
}
.omah__brand img { width: 100%; max-width: 213px; }
.omah__brand span {
  font-family: var(--mono);
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Slide 3 — Twee Hander */
.slide--twee { background: var(--ink-dark); }
.twee__card {
  position: absolute;
  inset: -10px -21px -10px -21px;
  border-radius: 7px;
  background: var(--cream);
  overflow: hidden;
  container-type: size;
}
.twee__bag {
  position: absolute;
  inset: 0;
  background: url("assets/tote-bag.jpg") 30% 45% / cover no-repeat;
}
.twee__pins {
  position: absolute;
  left: 50%;
  top: 50%;
  /* design canvas 1194×587, keep ratio inside the card */
  width: min(100cqw, 100cqh * 1194 / 587);
  aspect-ratio: 1194 / 587;
  translate: -50% -50%;
}
.pin {
  position: absolute;
  filter:
    drop-shadow(2px 3px 4px rgba(121,91,62,.29))
    drop-shadow(10px 13px 8px rgba(121,91,62,.26))
    drop-shadow(22px 28px 11px rgba(121,91,62,.15));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.pin--4 { left: 13.6%; top: 13.5%; width: 11.4%; rotate: -15deg; }
.pin--1 { left: 34%;   top: 17%;   width: 13.4%; }
.pin--2 { left: 9.9%;  top: 47.6%; width: 23.2%; rotate: 14.55deg; }
.pin--3 { left: 28.4%; top: 64.5%; width: 26.3%; rotate: -26.63deg; }
.slide--twee:hover .pin { transform: translateY(-6px); }

/* Slide 4 — mark */
.slide--mark { display: grid; place-items: center; }
.mark__logo { width: clamp(110px, 12vw, 180px); height: auto; }

/* progress dots */
.dots {
  position: fixed;
  right: 24px;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: height .35s, background .35s;
}
.dots { mix-blend-mode: difference; }
.dots button.is-active { height: 28px; background: var(--white); }

/* ===== Responsive ===== */
@media (max-height: 760px) and (min-width: 901px) {
  .intro__title { font-size: 36px; letter-spacing: -2.4px; }
  .intro__copy { gap: 14px; padding-bottom: 24px; }
}

@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  .hero { grid-template-columns: 1fr; }
  .intro { position: relative; height: auto; min-height: 100svh; }
  .keychain-stage { flex: none; height: 400px; }
  .keychain { left: 50%; top: -12px; margin-left: -94px; height: 410px; }
  .intro__title { max-width: 340px; }
  .slide { height: auto; aspect-ratio: 4 / 5; }
  .omah__layout { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 16px 16px 80px; gap: 12px; }
  .omah__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 0; }
  .omah__brand img { max-width: 100px; }
  .dots { display: none; }
  .slide__cta { left: 16px; bottom: 88px; }
}

/* touch screens have no hover → show the hover state */
@media (hover: none) {
  .slide__glow { transform: none; }
  .slide__cta { transform: none; }
  .tag { background: #041b6b; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Sections below the hero (Figma: Section / Services / Portfolio /
   Main Content (contact) / Footer) — designed at 1440px, 70px gutters
   ===================================================================== */
.section {
  position: relative;
  padding: 88px 70px;
}
/* the slider snaps screen by screen; the first section after it is the last snap point,
   below it the page scrolls freely (script.js turns snapping off there) */
.about { scroll-snap-align: start; }
html.no-snap { scroll-snap-type: none; }

/* ----- About / philosophy ----- */
/* pinned while the words light up: the section is taller than the screen,
   the text stays centred (sticky) and script.js maps the scroll to colour */
.about { background: #f3f8ff; height: 190vh; height: 190svh; padding: 0; }
.about__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 0 70px;
}
@media (max-width: 900px) { .about__pin { padding: 0 20px; } }
.about__text {
  margin: 0;
  max-width: 1300px;
  font-size: clamp(34px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--black);
}
.about__accent { color: #0e5ad3; }
.about__muted { color: #bfbebe; }

/* ----- Services (hover: name turns blue, project count appears) ----- */
.services { background: var(--white); }
.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;              /* full row, so the arrow can sit at the far right */
  cursor: default;
}
.service__name {
  font-size: clamp(44px, 6.67vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;
  color: var(--black);
  transition: color .3s var(--hover-ease, ease);
}
.service__count {
  margin-top: .35em;
  font-size: clamp(16px, 2.22vw, 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #09357c;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.service:hover .service__name,
.services__list:not(:hover) .service.is-active .service__name { color: var(--blue-500); }
.service:hover .service__count,
.services__list:not(:hover) .service.is-active .service__count { opacity: 1; transform: none; }

/* thin arrow at the far right, appears on hover */
.service__arrow {
  flex: none;
  align-self: center;
  margin-left: auto;
  width: clamp(28px, 3.4vw, 48px);
  height: clamp(28px, 3.4vw, 48px);
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translate(-14px, 14px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.service:hover .service__arrow,
.services__list:not(:hover) .service.is-active .service__arrow { opacity: 1; transform: none; }


/* ----- Selected works (cards scroll sideways) ----- */
.works {
  padding: 64px 0 64px 70px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-right: 70px;
  margin-bottom: 64px;
}
.works__title {
  margin: 0 0 24px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.works__lead { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.04em; }
/* row: swipeable by default (touch / narrow screens) */
.works__viewport { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.works__viewport::-webkit-scrollbar { display: none; }
.works__track {
  display: flex;
  gap: 32px;
  width: max-content;
  padding-right: 70px;
  padding-bottom: 8px;
}
/* desktop: the section pins and vertical scroll drives the row (script.js) */
.works.is-pinned { padding: 0 0 0 70px; overflow-x: clip; }   /* clip keeps sticky working (hidden would not) */
.works.is-pinned .works__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
  box-sizing: border-box;
}
.works.is-pinned .works__viewport { overflow: visible; }
.works.is-pinned .works__track { will-change: transform; }
.works.is-pinned .work { width: min(554px, 40vw, calc(100vh - 330px)); }
.work {
  flex: none;
  width: min(554px, 78vw);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.work__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: #0e5ad3;      /* Color/Blue/600 — shows around the image on hover */
  isolation: isolate;
}
.work__media img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  -webkit-user-drag: none;
}
.work__cta {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  font-size: clamp(48px, 6.55vw, 94px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
  transition: opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.work__meta {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work__meta b { font-weight: 700; transition: color .3s ease; }
.work__meta span { font-weight: 500; opacity: .7; }
.work:hover .work__media img,
.work:focus-visible .work__media img { transform: scale(.747); }      /* 414 / 554 */
.work:hover .work__cta,
.work:focus-visible .work__cta { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.work:hover .work__meta b,
.work:focus-visible .work__meta b { color: var(--blue-500); }

/* ----- Contact ----- */
.contact { padding: 64px 70px 120px; background: var(--white); }
.contact__title {
  margin: 0 0 64px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.contact__body {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.05em;
  color: #121217;
}
.contact__info { display: flex; flex-direction: column; gap: 32px; }
.contact__info p { margin: 0; }
.contact__info b { font-weight: 600; }
.contact__form {
  width: min(562px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.field-group { border: 0; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 16px; }
.field-group__label { padding: 0; margin-bottom: 16px; font-weight: 700; }
.field-row { display: flex; gap: 16px; width: 100%; }
.field { flex: 1; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 24px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #121217;
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color .2s;
}
.field textarea { height: 46px; resize: none; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--blue-500); }
.field.is-invalid input { border-bottom-color: #e5484d; }
.field--select select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: url("assets/chevron.svg") right center / 24px no-repeat;
}
/* chevron in Figma is rotated −90° (pointing down) */
.field--select { position: relative; }
.field--select select { background-image: none; }
.field--select::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  background: url("assets/chevron.svg") center / contain no-repeat;
  transform: rotate(-90deg);
  pointer-events: none;
}
.contact__status { margin: 0; min-height: 20px; }

/* ----- Footer ----- */
.footer {
  position: relative;
  z-index: 1;
  padding: 112px 70px 0;
  overflow: visible;
  background: linear-gradient(180deg, #052699 0%, #116af8 50%, #dff7ff 100%);
  color: var(--white);
}
.footer__cats {
  position: absolute;
  left: 7%;                 /* 101.5 / 1440 */
  bottom: calc(100% - 82px);/* image 9: 389 tall, top −307 */
  width: clamp(220px, 29.6vw, 426px);
  height: auto;
  pointer-events: none;
}
.footer__links {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.008em;
  text-transform: uppercase;
}
.footer__group { display: flex; flex-wrap: wrap; align-items: center; }
.footer__group--nav { gap: 24px; font-weight: 700; }
.footer__group--social { gap: clamp(24px, 5.5vw, 80px); font-weight: 500; }
.footer a { transition: opacity .2s; }
.footer a:hover { opacity: .7; }
.footer__name {
  display: flex;
  justify-content: space-between;
  margin: 16px -49px 0;     /* Figma: 1398px wide, wider than the 70px gutters */
  height: 13.5vw;           /* bottom of the letters is cropped, as in Figma */
  overflow: hidden;
  font-size: 16.22vw;       /* 233.62 / 1440 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 2.8vw;       /* 40 / 1440 */
  box-sizing: content-box;
}

@media (max-width: 900px) {
  .section { padding: 64px 20px; }
  .works { padding: 48px 0 48px 20px; }
  .works__head { padding-right: 20px; flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .works__track { padding-right: 20px; gap: 16px; }
  .contact { padding: 48px 20px 140px; }
  .contact__body { flex-direction: column; }
  .footer { padding: 96px 20px 0; }
  .footer__name { margin: 16px -8px 0; }
  .footer__cats { left: 20px; bottom: calc(100% - 60px); }
}
.dots { transition: opacity .3s; }
.dots.is-hidden { opacity: 0; pointer-events: none; }

/* ----- Footer cats: eyes follow the cursor ----- */
.footer__cats img { display: block; width: 100%; height: auto; }
.cat-eye {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  border-radius: 50%;
  overflow: hidden;
  /* amber iris painted over the original eye, soft edge so the real dark rim still shows */
  background: radial-gradient(circle at 50% 72%, #d08a3c 0%, #a85f1d 38%, #7c3c0b 72%, #4a2207 100%);
  -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%);
          mask: radial-gradient(closest-side, #000 82%, transparent 100%);
}
.cat-eye__pupil {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #0a0503 0%, #050201 60%, #1c0d05 100%);
  box-shadow: 0 0 0 1px rgba(40, 18, 4, .35);
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  will-change: transform;
}
/* fixed catch-lights (they belong to the light, not the pupil) */
.cat-eye::before,
.cat-eye::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: #fff;
}
.cat-eye::before { left: 30%; top: 22%; width: 20%; height: 20%; opacity: .95; }
.cat-eye::after  { left: 55%; top: 22%; width: 13%; height: 13%; opacity: .85; }

/* =====================================================================
   Scroll reveal — one system for the whole page (script.js)
   html.reveal-on is set in <head> unless the visitor prefers reduced motion,
   so nothing flashes before it animates. Elements reveal once, in DOM order,
   ~90ms apart when several enter together.
   ===================================================================== */
html.reveal-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--rd, 0ms);
}
html.reveal-on [data-reveal="down"] { transform: translate3d(0, -24px, 0); }
html.reveal-on [data-reveal="pop"]  { transform: translate3d(0, 70px, 0) scale(.94); transform-origin: 50% 100%; }
html.reveal-on [data-reveal="rise"] { transform: translate3d(0, 55%, 0); }
html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* titles: each line slides up from behind a mask */
[data-reveal="mask"] { display: block; overflow: hidden; padding-bottom: .12em; }
/* stacked hero lines: pull back the descender padding so line spacing stays the same
   (titles keep their own margin-bottom, e.g. Contact → 64px to the content) */
.rv-line[data-reveal="mask"] { margin-bottom: -.12em; }
html.reveal-on [data-reveal="mask"] { opacity: 1; transform: none; }
.rv-in { display: inline-block; }
html.reveal-on [data-reveal="mask"] .rv-in {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--rd, 0ms);
}
html.reveal-on [data-reveal="mask"].is-in .rv-in { transform: none; }

/* philosophy paragraph: words go grey → black / blue while scrolling (script.js) */
.about__text.is-scrub .sw { color: #d4d4d4; transition: color .35s ease; }
.about__text.is-scrub .sw.is-lit { color: var(--black); }
.about__text.is-scrub .about__accent .sw.is-lit { color: #0e5ad3; }

/* ===== Sticky navigation (Figma "Header", 1440 wide) =====
   hidden while the hero (with its own header) is on screen,
   slides down once you scroll past it */
.topbar.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--nav-h);
  padding: 0 24px;
  border-bottom: 1px solid #e4e4e4;     /* keeps it from blending into white sections */
  transform: translateY(-101%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.topbar.site-nav.is-shown { transform: none; }
/* in-page links land below the nav */
#services, #selected-works, #contact { scroll-margin-top: var(--nav-h); }
@media (max-width: 900px) { .topbar.site-nav { padding: 0 16px; } }

/* =====================================================================
   Mobile (Figma "Home/mobile", 430px wide, 20px gutters)
   Comes last so it overrides the earlier responsive tweaks.
   ===================================================================== */
@media (max-width: 900px) {
  /* ----- Hero: "I help brands look sharp," above the keychain,
           the rest of the title, lead and stacked buttons below ----- */
  .intro { min-height: 0; overflow: visible; overflow-x: clip; }   /* keychain must not widen the page */
  .keychain-stage {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    height: min(150vw, 640px);
    z-index: 4;                       /* keychain hangs over the first title line */
  }
  .keychain {
    top: -6px;
    left: calc(50% - min(140vw, 600px) * .536 * .43);   /* ring (43% across the frame) centred */
    margin-left: 0;
    height: min(140vw, 600px);
  }
  .intro__copy { padding: 24px 18px 40px; gap: 35px; }
  .intro__text { gap: 17px; }
  .intro__title {
    max-width: none;
    font-size: clamp(44px, 14.9vw, 64px);
    letter-spacing: -0.07em;
  }
  .intro__title .rv-line:nth-child(2) { margin-top: min(78vw, 340px); }
  .intro__lead { max-width: 382px; font-size: 14px; letter-spacing: -0.02em; }
  .intro__ctas { flex-direction: column; gap: 8px; }
  .intro__ctas .btn { width: 100%; }

  /* ----- Slider: stacked slides, 430 × 361 ----- */
  .slide { aspect-ratio: 430 / 361; }
  .slide__glow, .slide__cta { display: none; }
  .slide .tag { background: var(--blue-500); }

  /* ----- About: 32px text, colour still follows the scroll (not pinned) ----- */
  .about { height: auto; padding: 0; }
  .about__pin { position: static; height: auto; padding: 64px 20px; }
  .about__text { font-size: 32px; line-height: 1; letter-spacing: -0.03em; }

  /* ----- Services: centred list ----- */
  .services { padding: 64px 20px; }
  .services__list { align-items: center; gap: 12px; }
  .service { width: auto; justify-content: center; }
  .service__name { font-size: 32px; line-height: 1; letter-spacing: -0.03em; text-align: center; }
  .service__count, .service__arrow { display: none; }
  .services__list:not(:hover) .service.is-active .service__name { color: var(--black); }

  /* ----- Selected works: cards stacked, "See more" under the list ----- */
  .works { padding: 32px 20px; }
  .works__pin { display: flex; flex-direction: column; gap: 42px; }
  .works__head { display: contents; }
  .works__intro { order: 0; }
  .works__viewport { order: 1; overflow: visible; }
  .works__head > .btn { order: 2; align-self: flex-start; margin-top: -10px; }
  .works__title { font-size: 32px; letter-spacing: -0.04em; }
  .works__lead { font-weight: 500; letter-spacing: -0.05em; }
  .works__track { flex-direction: column; width: 100%; gap: 32px; padding: 0; }
  .work { width: 100%; }
  .work__cta { font-size: clamp(40px, 14.9vw, 64px); }

  /* ----- Contact ----- */
  .contact { padding: 32px 20px 180px; }
  .contact__title { font-size: 32px; margin-bottom: 16px; }
  .contact__body { gap: 16px; }
  .contact__info { gap: 24px; }
  .contact__form { width: 100%; }

  /* ----- Footer: cats on top, links stacked, full name ----- */
  .footer { padding: 32px 20px; }
  .footer__cats { left: 24px; width: min(341px, 80vw); bottom: calc(100% - 168px); }
  .footer__links { flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 176px; }
  .footer__group { flex-direction: column; align-items: flex-start; }
  .footer__group--nav { gap: 16px; }
  .footer__group--social { gap: 24px; }
  .footer__name {
    justify-content: center;
    gap: .13em;
    height: auto;
    margin: 32px 0 0;
    padding: 0;
    overflow: visible;
    font-size: 16vw;               /* ≈ 73px at 430 */
  }
}

/* never let a swinging/oversized element widen the page (clip keeps sticky working) */
body { overflow-x: clip; }

/* ===== Mobile revision: title layering + slider carousel ===== */
@media (max-width: 900px) {
  /* "I help brands look sharp," sits BEHIND the keychain,
     "feel trustworthy, and sell better." + the rest sit IN FRONT of it */
  .intro__copy { z-index: auto; }
  .keychain-stage { z-index: 3; }
  .intro__title .rv-line { position: relative; }
  .intro__title .rv-line:nth-child(1) { z-index: 1; }
  .intro__title .rv-line:nth-child(n + 2),
  .intro__lead,
  .intro__ctas { position: relative; z-index: 5; }

  /* slider: one slide at a time, swipe sideways, auto-advances (script.js) */
  .slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .slides::-webkit-scrollbar { display: none; }
  .slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
}

/* =====================================================================
   Loading screen (Figma "Loading screen animation")
   A 146px tile (94px on mobile) on white; the blue gradient fills it from
   top to bottom, revealing the static logo, then a soft light sweeps
   through the gradient until the page is ready. CSS only, no images.
   ===================================================================== */
html.is-loading { overflow: hidden; }
html.is-loading .keychain { animation-play-state: paused; }
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--white);
  transition: opacity .5s ease, visibility .5s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__tile {
  position: relative;
  width: 146px;
  height: 146px;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  animation: loader-fill 1.1s cubic-bezier(.65, 0, .35, 1) .15s forwards;
}
.loader__logo { display: block; width: 100%; height: 100%; }
/* light sweep through the gradient while waiting */
.loader__tile::after {
  content: "";
  position: absolute;
  inset: -60% 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
  transform: translateY(-100%);
  animation: loader-sweep 1.6s ease-in-out 1.3s infinite;
  mix-blend-mode: soft-light;
}
.loader.is-done .loader__tile { transform: scale(.96); transition: transform .5s ease; }
@keyframes loader-fill {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes loader-sweep {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 900px) {
  .loader__tile { width: 94px; height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__tile { clip-path: none; animation: none; }
  .loader__tile::after { display: none; }
}

/* =====================================================================
   Resume page (resume.html, Figma "Resume page" 65:13225)
   Desktop: left profile panel stays put (sticky, fits the screen height)
   while the right column scrolls. Tablet & mobile: the panel sits on top
   and the regular site navigation is used.
   ===================================================================== */
html.page-plain { scroll-snap-type: none; }
.page-resume {
  --rv-side: clamp(360px, 30vw, 460px);   /* 432 / 1440 */
  --rv-ink: #031025;
  --rv-muted: rgba(0, 0, 0, .6);
  --rv-line: rgba(0, 0, 0, .1);
  --rv-geist: "Geist", var(--font);
  /* how far the footer cats reach above the footer (image is 389/426 tall) */
  --rv-cats: calc(clamp(220px, 29.6vw, 426px) * .913 - 82px);
}
.rv { display: grid; grid-template-columns: var(--rv-side) minmax(0, 1fr); }

/* ----- Left panel ----- */
.rv-col { border-right: 1px solid var(--border); padding-bottom: calc(var(--rv-cats) + 24px); }
.rv-side {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--white);
}
.rv-side::-webkit-scrollbar { display: none; }
.rv-head {
  flex: none;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 24px;
  border-bottom: 1px solid var(--border);
}
.rv-head__logo img { width: 62px; height: 76px; }
.rv-head__nav { display: flex; align-items: center; gap: 32px; height: 100%; }
.rv-head__link { font-size: 15px; font-weight: 500; line-height: 24px; letter-spacing: -0.12px; text-transform: uppercase; transition: color .25s; }
.rv-head__link:hover { color: var(--blue-500); }
.rv-head__back {
  position: relative;
  isolation: isolate;
  width: 56px;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--black);
  overflow: hidden;
}
.rv-head__back::before,
.rv-btn--dl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115.56deg, #052699 19.73%, #116af8 49.98%, #dff7ff 119.69%);
  opacity: 0;
  transition: opacity .35s ease;
}
.rv-head__back:hover::before, .rv-head__back:focus-visible::before,
.rv-btn--dl:hover::before, .rv-btn--dl:focus-visible::before { opacity: 1; }
.rv-head__back img { width: 18px; height: 14px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.rv-head__back:hover img { transform: translateX(-3px); }

.rv-side__body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.rv-card {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(26, 10, 6, .1);
}
.rv-card__photo { flex: none; width: 160px; height: 160px; overflow: hidden; background: #0b2a7a; }
.rv-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rv-card__content { display: flex; flex-direction: column; gap: 32px; }
.rv-card__text { display: flex; flex-direction: column; gap: 16px; }
.rv-name { margin: 0; font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -1.44px; color: var(--rv-ink); }
.rv-role, .rv-lead { margin: 0; font-family: var(--rv-geist); line-height: 1.4; color: var(--rv-muted); }
.rv-role { margin-top: -8px; font-size: 14px; letter-spacing: -0.28px; }
.rv-lead { max-width: 300px; font-size: 16px; letter-spacing: -0.32px; }
.rv-sign { width: 128px; height: auto; }

.rv-side__foot { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.rv-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-info li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--rv-geist); font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: var(--rv-ink);
}
.rv-info img { width: 18px; height: 18px; }
.rv-actions { display: flex; flex-direction: column; gap: 16px; }
.rv-social { display: flex; gap: 4px; }
.rv-social a { width: 32px; height: 32px; display: grid; place-items: center; transition: background-color .25s; }
.rv-social a:hover { background: rgba(0, 0, 0, .06); }
.rv-buttons { display: flex; gap: 8px; }
.rv-btn {
  position: relative;
  isolation: isolate;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.28px;
}
.rv-btn--dl { flex: 1; padding: 0 24px; background: var(--black); color: var(--white); }
.rv-btn--icon { flex: none; width: 52px; background: rgba(26, 10, 6, .05); transition: background-color .25s; }
.rv-btn--icon:hover { background: rgba(26, 10, 6, .1); }

/* short laptop screens: tighten the card so everything still fits */
@media (min-width: 1025px) and (max-height: 860px) {
  .rv-card { gap: 24px; }
  .rv-card__photo { width: 120px; height: 120px; }
  .rv-card__content { gap: 20px; }
  .rv-sign { width: 100px; }
}
@media (min-width: 1025px) and (max-height: 720px) {
  .rv-side__body { padding: 24px 32px; gap: 16px; }
  .rv-card__photo { width: 88px; height: 88px; }
  .rv-name { font-size: 30px; }
  .rv-sign { display: none; }
}

/* ----- Right column ----- */
.rv-main { min-width: 0; padding: 64px 64px 64px; }
.rv-main > * { max-width: 980px; }
.rv-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  margin: -16px 0 8px;
  padding: 16px 0;
  background: var(--white);
}
.rv-tab {
  flex: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.112px;
  color: rgba(0, 0, 0, .4);
  transition: color .25s, background-color .25s;
}
.rv-tab:hover { color: var(--black); }
.rv-tab.is-active { background: var(--blue-500); color: var(--white); }

.rv-sec { padding: 42px 0 56px; border-bottom: 1px solid var(--rv-line); scroll-margin-top: 64px; }
.rv-sec:first-of-type { border-top: 1px solid var(--rv-line); }
.rv-title { margin: 0 0 36px; max-width: 320px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.96px; }
.rv-about {
  margin: 0;
  font-family: var(--rv-geist);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: var(--rv-muted);
}
.rv-keys { margin-top: 32px; }
.rv-label { margin: 0 0 12px; font-family: var(--rv-geist); font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; }
.rv-label--m { font-size: 16px; letter-spacing: -0.32px; }
.rv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; max-width: 640px; }
.rv-chips li {
  padding: 6px 10px;
  background: rgba(0, 0, 0, .05);
  font-family: var(--rv-geist);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.28px;
  transition: background-color .25s, color .25s;
}
.rv-chips li:hover { background: var(--blue-500); color: var(--white); }
.rv-stack { margin-top: 32px; }
.rv-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-tools li { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.rv-tools img { width: 34px; height: 34px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.rv-tools img.is-figma { width: 23px; height: 34px; }
.rv-tools li::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 4px 8px;
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .2s, transform .2s;
}
.rv-tools li:hover::after { opacity: 1; transform: translate(-50%, 0); }
.rv-tools li:hover img { transform: translateY(-2px); }

/* experience / education rows */
.rv-jobs, .rv-edu, .rv-recs { display: flex; flex-direction: column; gap: 32px; }
.rv-job { display: flex; gap: 16px; }
.rv-job__logo { position: relative; flex: none; width: 40px; padding-top: 2px; }
.rv-job__logo img { width: 40px; height: 40px; object-fit: cover; }
.rv-job__logo--line img { border: 1px solid #e4e4e4; }
.rv-job__logo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56px;
  bottom: -20px;
  width: 1px;
  background: var(--rv-line);
}
.rv-job:last-child .rv-job__logo::after { display: none; }
.rv-job__roles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.rv-role-row { display: flex; align-items: flex-start; gap: 24px; }
.rv-role-row__main { flex: 1; min-width: 0; }
.rv-role-row h3, .rv-langs h3, .rv-rec h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.72px;
  color: var(--black);
}
.rv-meta {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: var(--rv-muted);
}
.rv-meta b { font-weight: 600; }
.rv-meta i { width: 3px; height: 3px; background: var(--rv-muted); }
.rv-desc { margin-top: 16px; max-width: 480px; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: var(--rv-muted); }
.rv-desc p { margin: 0; }
.rv-desc ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-desc li { position: relative; padding-left: 12px; }
.rv-desc li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: var(--rv-muted); }
.rv-date { flex: none; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.56px; color: var(--rv-muted); white-space: nowrap; }

/* languages */
.rv-langs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.rv-langs li { display: flex; align-items: flex-start; gap: 16px; }
.rv-langs img { flex: none; width: 40px; height: 40px; }
.rv-langs p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: var(--rv-muted); }

/* recommendations */
.rv-rec { display: flex; align-items: flex-start; gap: 16px; }
.rv-rec__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #052699 0%, #116af8 100%);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.rv-rec__avatar--alt { background: linear-gradient(180deg, #116af8 0%, #7fb3ff 100%); }
.rv-rec__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-rec__main { flex: 1; min-width: 0; }
.rv-rec .rv-desc { max-width: 420px; }
.rv-rec__src { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: rgba(0, 0, 0, .05); transition: background-color .25s; }
.rv-rec__src:hover { background: rgba(0, 0, 0, .12); }

/* ----- Tablet: panel on top, not sticky (Figma "Resume Tablet") ----- */
@media (max-width: 1024px) {
  .rv-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: var(--nav-h);
    background: var(--white);
    border-bottom: 1px solid #e4e4e4;
  }
  .rv { grid-template-columns: minmax(0, 1fr); padding-top: var(--nav-h); }
  .rv-col { border-right: 0; padding-bottom: 0; }
  .rv-side { position: static; height: auto; overflow: visible; background: #f3f8ff; }
  .rv-side__body { padding: 32px 42px 42px; gap: 24px; }
  .rv-card { flex-direction: row; gap: 32px; }
  .rv-card__content { flex: 1; min-width: 0; flex-direction: row; justify-content: space-between; gap: 32px; }
  .rv-lead { max-width: 380px; }
  .rv-side__foot { gap: 16px; }
  .rv-info { flex-direction: row; flex-wrap: wrap; gap: 8px 40px; }
  .rv-main { padding: 32px 42px 64px; }
  .rv-main > * { max-width: none; }
  .rv-tabs { top: var(--nav-h); }
  .rv-sec { scroll-margin-top: calc(var(--nav-h) + 64px); }
  .rv-col { padding-bottom: 0; }
  .rv-main { padding-bottom: calc(var(--rv-cats) + 32px); }
}
/* ----- Mobile ----- */
@media (max-width: 640px) {
  .rv-head { padding-left: 16px; }
  .rv-head__nav { gap: 24px; }
  .rv-side__body { padding: 24px 16px 32px; }
  .rv-card { flex-direction: column; gap: 24px; }
  .rv-card__photo { width: 120px; height: 120px; }
  .rv-card__content { flex-direction: column; gap: 20px; }
  .rv-name { font-size: 32px; letter-spacing: -1.2px; }
  .rv-sign { width: 96px; }
  .rv-info { flex-direction: column; gap: 8px; }
  .rv-main { padding: 16px 16px calc(var(--rv-cats) + 24px); }
  .rv-tabs { margin: 0 -16px 8px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; }
  .rv-tabs::-webkit-scrollbar { display: none; }
  .rv-tab { padding: 6px 12px; }
  .rv-sec { padding: 32px 0 40px; }
  .rv-title { margin-bottom: 24px; }
  .rv-job { gap: 12px; }
  .rv-role-row { flex-direction: column; gap: 4px; }
  .rv-date { order: -1; font-size: 13px; }
  .rv-desc, .rv-rec .rv-desc { max-width: none; }
}

/* =====================================================================
   Works gallery (works.html, Figma "Works Gallery" 69:14010)
   Desktop: one screen tall. The left panel stays put and ONLY the right
   column scrolls (its own scroll box). Once the gallery reaches its end the
   page continues down to the footer. Tablet & mobile: normal page scroll,
   header + title on top.
   ===================================================================== */
.page-works {
  --wk-side: clamp(360px, 30vw, 460px);
  --rv-cats: calc(clamp(220px, 29.6vw, 426px) * .913 - 82px);
}
.wk { display: grid; grid-template-columns: var(--wk-side) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.wk-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--white); }
.rv-head__link.is-current { color: var(--blue-500); }
.wk-head__resume {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 20px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.wk-head__resume::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115.56deg, #052699 19.73%, #116af8 49.98%, #dff7ff 119.69%);
  opacity: 0;
  transition: opacity .35s ease;
}
.wk-head__resume:hover::before, .wk-head__resume:focus-visible::before { opacity: 1; }
.wk-intro { padding: 42px 24px; display: flex; flex-direction: column; gap: 16px; }
.wk-title { margin: 0; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -2.8px; }
.wk-lead { margin: 0; max-width: 383px; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.64px; opacity: .6; }

.wk-main {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: auto;     /* at the end, scrolling carries on to the footer */
  padding: 0 64px 64px;
  outline: none;
}
.wk-filters {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  margin: 0 -64px 24px;
  padding: 64px 64px 0;
  background: var(--white);
  overflow-x: auto;
  scrollbar-width: none;
}
.wk-filters::-webkit-scrollbar { display: none; }
/* white strip under the sticky bar so cards slide out of sight cleanly */
.wk-filters::after { content: ""; flex: none; width: 1px; }
.wk-filter {
  flex: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  font: 500 14px/24px var(--font);
  letter-spacing: -0.112px;
  color: rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: color .25s, background-color .25s;
}
.wk-filter__n { font-size: 10px; line-height: 14px; font-weight: 600; opacity: .8; }
.wk-filter:hover { background: #020b2e; color: var(--white); }
.wk-filter.is-active { background: var(--blue-500); color: var(--white); }
.wk-filter:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* as many columns as fit (3 on a 1440 screen), cards shrink to fill the row */
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 32px 24px; }
.wk-card { width: auto; gap: 16px; }
.wk-card .work__meta { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.wk-card .work__media { aspect-ratio: 424 / 387; }
.wk-card .work__cta { font-size: clamp(26px, 2.5vw, 44px); }
.wk-card.is-hidden { display: none; }
.wk-card.is-in { animation: wk-in .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--wd, 0ms); }
@keyframes wk-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.wk-empty { margin: 48px 0; font-size: 16px; color: rgba(0, 0, 0, .5); }

/* dummy covers for projects without an image yet */
.wk-ph {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 8%;
  border-radius: 4px;
  color: var(--white);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.wk-ph span { font-size: clamp(24px, 2.2vw, 38px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; }
.wk-ph small { font-size: 13px; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; opacity: .75; }
.wk-ph--blue { background: linear-gradient(160deg, #052699 0%, #116af8 60%, #8fc2ff 100%); }
.wk-ph--dark { background: radial-gradient(120% 90% at 85% 0%, #2a3b8f 0%, #0b0f24 60%); }
.wk-ph--cream { background: linear-gradient(160deg, #f9f6e8 0%, #f1dcc4 100%); color: var(--maroon); }
.wk-ph--violet { background: linear-gradient(160deg, #3b1bd1 0%, #8a5cff 55%, #ffb3d9 100%); }
.wk-ph--sky { background: linear-gradient(180deg, #dff7ff 0%, #8fc2ff 100%); color: #031025; }
.work:hover .wk-ph, .work:focus-visible .wk-ph { transform: scale(.747); }
.work:hover .wk-ph > *, .work:focus-visible .wk-ph > * { opacity: 0; transition: opacity .2s; }

/* the footer cats peek up over the left column */
.page-works .footer { margin-top: 0; }

/* ----- Tablet & mobile: everything in normal page flow ----- */
@media (max-width: 1024px) {
  .wk { display: block; height: auto; }
  .wk-side { border-right: 0; }
  .wk { padding-top: var(--nav-h); }
  .wk-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h); background: var(--white); }
  .wk-intro { padding: 42px 24px 24px; }
  .wk-title { font-size: 32px; letter-spacing: -1.4px; }
  .wk-lead { max-width: 494px; }
  .wk-main { height: auto; overflow: visible; padding: 0 24px calc(var(--rv-cats) + 32px); }
  .wk-filters { top: var(--nav-h); margin: 0 -24px 24px; padding: 8px 24px 0; gap: 0; }
  .wk-filter { padding: 8px 13px; }
  .wk-grid { gap: 32px 16px; }
  .wk-card .work__cta { font-size: clamp(28px, 5vw, 44px); }
}
@media (max-width: 640px) {
  .wk-head { padding-left: 16px; }
  .wk-head .rv-head__nav { gap: 20px; }
  .wk-head__resume { padding: 0 14px; }
  .wk-intro { padding: 32px 16px 20px; }
  .wk-main { padding: 0 16px calc(var(--rv-cats) + 24px); }
  .wk-filters { margin: 0 -16px 20px; padding: 8px 16px 0; }
  .wk-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wk-ph span { font-size: 40px; }
}
/* the footer cats always sit on top of the gallery */
.page-works .footer { z-index: 3; }

/* contact form spam trap (hidden from people) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wk-ph--maroon { background: linear-gradient(160deg, #5d0d18 0%, #8f2131 100%); }
.wk-ph.is-empty { padding: 0; }

/* =====================================================================
   Case study (work.html, Figma "Work Case study detail" 69:14011)
   Same shell as the Works gallery: sticky left panel, right column scrolls.
   Content comes from the dashboard (admin.html) via content.js.
   ===================================================================== */
.cs-intro-side { gap: 32px; }
.cs-title { overflow-wrap: anywhere; }
.cs-about { display: flex; flex-direction: column; gap: 16px; max-width: 382px; }
.cs-about__label { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.32px; color: #aaa; }
.cs-about__text { margin: 0; font-size: 16px; line-height: 1.4; letter-spacing: -0.64px; color: #282828; }
.cs-back { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--black); transition: color .25s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.cs-back:hover { color: var(--blue-500); transform: translateX(-3px); }
.cs-back--side { display: none; }
.cs-main > .cs-back { margin: 64px 0 24px; }
.cs-body > * + * { margin-top: 16px; }
.cs-img { margin: 0; overflow: hidden; border-radius: 4px; background: #eef3fb; }
.cs-img img, .cs-img .wk-ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-hero { aspect-ratio: 880 / 400; }
.cs-body > .cs-summary { margin-top: 32px; }
.cs-summary { display: grid; grid-template-columns: minmax(0, 307fr) minmax(0, 541fr); gap: 32px; align-items: start; }
.cs-summary + .cs-row { margin-top: 36px; }
.cs-lead, .cs-item__v, .cs-text p { margin: 0; font-size: 16px; line-height: 1.4; letter-spacing: -0.32px; color: #282828; }
.cs-details { display: flex; flex-direction: column; }
.cs-item { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #ddd; }
.cs-item__k, .cs-facts dt { margin: 0; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: rgba(0, 0, 0, .8); }
.cs-facts { margin: 0; display: flex; flex-direction: column; }
.cs-facts > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 0 0 16px; }
.cs-facts > div + div { padding-top: 16px; border-top: 1px solid #ddd; }
.cs-facts dd { margin: 0; width: 152px; flex: none; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.32px; }
.cs-row { display: grid; gap: 16px; }
.cs-row--full { grid-template-columns: 1fr; aspect-ratio: 880 / 500; }
.cs-row--pair { grid-template-columns: 1fr 1fr; aspect-ratio: 880 / 363; }
.cs-row--wide { grid-template-columns: minmax(0, 305fr) minmax(0, 559fr); aspect-ratio: 880 / 316; }
.cs-row .cs-img { height: 100%; min-height: 0; }
.cs-body > .cs-text { margin: 64px 0; display: flex; justify-content: space-between; gap: 32px; }
.cs-body > .cs-text:last-child { margin-bottom: 0; }
.cs-text h2 { margin: 0; max-width: 320px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.96px; }
.cs-text > div { width: min(552px, 63%); flex: none; }
.cs-text p + p { margin-top: 12px; }
.cs-more { margin-top: 64px; }
.cs-more__title { margin: 0 0 32px; font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; }
.cs-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-card .work__media { aspect-ratio: 283 / 277; }
.cs-missing { margin: 48px 0; }
.cs-fade { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.cs-fade.is-in { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .cs-main > .cs-back { display: none; }
  .cs-back--side { display: inline-grid; margin-bottom: -16px; }
  .cs-intro-side { padding-top: 24px; }
  .cs-about { max-width: none; gap: 14px; }
  .cs-about__label { font-size: 14px; }
  .cs-main { padding-top: 8px; }
  .cs-summary { grid-template-columns: minmax(0, 232fr) minmax(0, 456fr); }
  .cs-row--full { aspect-ratio: 720 / 345; }
  .cs-row--wide { grid-template-columns: minmax(0, 145fr) minmax(0, 559fr); }
  .cs-more__title { font-size: 36px; margin-bottom: 24px; }
  .cs-more__grid { grid-template-columns: 1fr 1fr; }
  .cs-more__grid > :nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .cs-summary { grid-template-columns: 1fr; gap: 24px; }
  .cs-row--pair, .cs-row--wide { grid-template-columns: 1fr; aspect-ratio: auto; }
  .cs-row--pair .cs-img, .cs-row--wide .cs-img { aspect-ratio: 4 / 3; }
  .cs-row--full { aspect-ratio: 4 / 3; }
  .cs-body > .cs-text { flex-direction: column; gap: 12px; margin: 40px 0; }
  .cs-text > div { width: auto; }
  .cs-more__grid { grid-template-columns: 1fr; }
  .cs-more__grid > :nth-child(3) { display: flex; }
  .cs-facts dd { width: 55%; }
}

/* hero slide for a homepage project without a hand-made slide (filled by content.js) */
.slide--photo { background: #0b0f24; }
.slide__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__photo.wk-ph { justify-content: center; align-items: center; padding: 10%; border-radius: 0; }
.slide__photo.wk-ph span { font-size: clamp(48px, 7vw, 120px); text-align: center; }

/* =====================================================================
   404 page (404.html, Figma "404 PAGE" 69:14012)
   ===================================================================== */
.nf {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  margin-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 64px 24px 72px;
}
.nf__back { position: absolute; top: 38px; left: 48px; width: 32px; height: 32px; }
.nf__art { position: relative; width: min(505px, 78vw); aspect-ratio: 505 / 618; }
.nf__label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: clamp(11px, 3.96cqw, 20px); font-weight: 800; letter-spacing: -0.05em; white-space: nowrap;
}
.nf__code {
  position: absolute; top: 5%; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: clamp(110px, 44.4cqw, 224px); font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  color: rgba(0, 0, 0, .4); white-space: nowrap;
}
.nf__art { container-type: inline-size; }
.nf__cats { position: absolute; left: 0; top: 17.6%; width: 100%; height: auto; animation: nf-sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes nf-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.2deg); } }
.page-404 .footer { padding-top: 96px; }
@media (max-width: 900px) {
  .nf { padding: 56px 16px 56px; gap: 24px; }
  .nf__back { top: 28px; left: 28px; width: 24px; height: 24px; }
  .nf__art { width: min(300px, 70vw); }
  .page-404 .footer { padding-top: 32px; }
  .page-404 .footer__links { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .nf__cats { animation: none; } }