/* Fonts */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/fonts/PPNeueMontreal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/fonts/PPNeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/fonts/PPNeueMontreal-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("assets/fonts/Humane-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Tokens */
:root {
  --bg: #0e0e0e;
  --text: #fff;
  --muted: #a4a4a4;
  --subtle: #797979;
  --surface: #2b2b2b;
  --divider: #292929;

  --font: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Humane", "Impact", sans-serif;

  --gutter: 28px;
  --header-h: 56px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, not hidden: hidden would break position: sticky */
}
h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
/* Selected text shows as a negative: light background, dark text */
::selection { background: var(--text); color: var(--bg); }

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter) 0;
  font-size: 14px;
  line-height: 16px;
}
.identity, .social { display: flex; flex-direction: column; gap: 2px; width: 240px; white-space: nowrap; }
.identity__name { font-size: 16px; }
.identity__clock { display: inline-block; min-width: 56px; font-variant-numeric: tabular-nums; }
.social { align-items: flex-end; }
.social__list { display: flex; gap: 8px; }
.social__list a:hover, .footer a:hover { opacity: .6; }

.nav {
  display: flex;
  align-items: center;
  padding: 4px;
  background: var(--surface);
  border-radius: 999px;
}
.nav__link {
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: -0.28px;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.nav__link:hover { background: rgba(255, 255, 255, .12); }
.nav__link.is-active { background: var(--text); color: #000; }

/* Hero: header + hero fill the first screen; content sits at the bottom */
.hero {
  display: grid;
  grid-template-columns: 181px 700px;
  justify-content: space-between;
  align-content: end;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: 120px var(--gutter);
}
.hero__details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
  line-height: 16px;
}
.hero__title {
  font-size: 90px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Clients: slow endless marquee, faded into the background at both edges */
.clients {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.clients__track {
  --gap: 40px;
  display: flex;
  gap: var(--gap);
  width: max-content;
  padding-right: var(--gap); /* equals gap, so -50% is exactly one set */
  animation: marquee 50s linear infinite;
}
.clients:hover .clients__track { animation-play-state: paused; }
.clients__track li { display: flex; align-items: center; justify-content: center; width: 164px; height: 93px; }
.clients__track img { width: 160px; height: 48px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Services */
.services {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 120px 0 230px;
}
.services__title {
  padding-left: 120px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.services__cards {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  padding-right: 120px;
}
.service { display: flex; flex-direction: column; gap: 32px; width: 300px; }
.service__details { display: flex; flex-direction: column; gap: 12px; }
.service__details h3 { font-size: 24px; line-height: 1; letter-spacing: -0.01em; }
.service__details p { color: var(--subtle); line-height: 24px; letter-spacing: -0.01em; }
.service__image { width: 100%; aspect-ratio: 4096 / 2839; object-fit: cover; }

/* Featured works (storyboard 2 in Figma, node 56:2009).
   The section pins a full-screen stage. The title comes up large (160px), shrinks to 90px
   and stays in the middle of the stage. Then cards come up one after another,
   full width minus 28px on each side. A card rises at full size until its top reaches the
   middle of the stage, then keeps rising while shrinking to 1000px (of 1384), and settles
   80px from the top, fully visible, before the next card shows up. While a card settles,
   the cards under it shrink a step further, move up and darken (1000 → 900 → 850px,
   80 → 40 → 10px, overlay 0 → 30% → ~65%).
   script.js positions everything from the scroll position and adds .is-live.
   Without it (no JS, or reduced motion) the cards are a plain list. */
.works {
  --gutter-x: 28px;
  --fs: 90px;            /* title */
  --settled: .7225;      /* settled card width ÷ full width (1000 / 1384) */
  --rise-scale: 1;       /* scales how far cards underneath move up */
  position: relative;
}
.works__title {
  width: min-content;  /* one word per line, like in Figma */
  margin: 0 auto;
  font-size: var(--fs);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}
.work { margin-top: 160px; }
.work__card {
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(100% - 2 * var(--gutter-x));
  aspect-ratio: 1384 / 780;
  margin: 0 auto;
}
/* 30% black overlay on cards that are covered by the next one */
.work__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.work__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: scale .6s ease;
}
.work__card:hover img { scale: 1.03; }

/* Scroll-driven version */
.works.is-live .works__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.works.is-live .works__title {
  opacity: var(--fade, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: var(--zoom, 1);
}
.works.is-live .work {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  pointer-events: none;  /* the wrappers overlap; only the moved card itself takes the mouse */
}
.works.is-live .work__card {
  translate: 0 calc(var(--y, 10000) * 1px);
  scale: var(--scale, 1);
  transform-origin: 50% 0;
  will-change: translate, scale;
  pointer-events: auto;
}

/* Contact */
.contact {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 200px 48px 0 20px;
}
.contact__lead { color: var(--subtle); line-height: 24px; letter-spacing: -0.01em; }
.contact__row { display: flex; align-items: flex-start; justify-content: space-between; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 220px;
  line-height: .8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.button {
  padding: 16px 24px;
  border: 1px solid var(--text);
  border-radius: 999px;
  line-height: 24px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.button:hover { background: var(--text); color: #000; }

/* Footer */
.footer { padding: 55px var(--gutter) 0; font-weight: 300; }
.footer__contacts {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 320px;
  padding: 40px 0;
  border-top: 1px solid var(--divider);
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.footer__credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
  border-top: 1px solid var(--divider);
  color: var(--subtle);
  line-height: 24px;
  letter-spacing: -0.01em;
}
.footer__social { display: flex; gap: 40px; }

/* Custom cursor: 20px white circle in "difference" blend mode, so whatever is under it
   shows as a negative. */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;   /* centre the circle on the pointer */
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: scale .35s cubic-bezier(.2, .7, .2, 1), opacity .3s;
  will-change: translate;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-pressed { scale: .7; }

/* Fade in from bottom on scroll (only when JS is on, so content never stays hidden) */
.js [data-reveal] {
  --ease: cubic-bezier(.2, .7, .2, 1);
  opacity: 0;
  translate: 0 40px;
  transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s);
}
.js .button[data-reveal] {
  transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), background-color .2s, color .2s;
}
.js [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* Tablet */
@media (max-width: 1199px) {
  .nav__link { padding: 8px 12px; }

  .hero { grid-template-columns: 171px 480px; align-items: center; padding: 88px var(--gutter); }
  .hero__details { align-self: stretch; }
  .hero__title { font-size: 62px; }

  .clients__track li { height: 64px; }

  .services { gap: 64px; padding: 96px var(--gutter) 136px; }
  .services__title { padding: 0; font-size: 36px; }
  .services__cards { gap: 24px; padding: 0; }
  .service { flex: 1 1 0; width: auto; gap: 28px; }
  .service__details { min-height: 124px; }
  .service__details h3 { font-size: 22px; }

  .works { --fs: 64px; --settled: .8; --rise-scale: .75; }

  .contact { padding: 136px var(--gutter) 0; }
  .contact__row { align-items: center; }
  .contact__title { font-size: 118px; line-height: 1; }
  .button { padding: 16px 20px; font-size: 14px; }

  .footer { padding-top: 48px; }
  .footer__contacts {
    min-height: 244px;
    padding: 28px 0 64px;
    font-size: 27px;
    line-height: 1.35;
  }
  .footer__credits { padding: 32px 0; font-size: 14px; }
  .footer__social { gap: 32px; }
}

/* Mobile */
@media (max-width: 767px) {
  :root { --gutter: 20px; --header-h: 118px; }

  .header { flex-wrap: wrap; row-gap: 24px; }
  .identity, .social { width: auto; }
  .nav { order: 1; width: 100%; justify-content: space-between; }
  .nav__link { padding: 8px 16px; }

  .hero { grid-template-columns: 1fr; gap: 40px; padding: 112px var(--gutter) 64px; }
  .hero__title { order: -1; font-size: 46px; }
  .hero__details {
    flex-direction: row;
    align-items: flex-end;
    gap: 30px;
    line-height: 18px;
  }
  .hero__details p:last-child { flex-shrink: 0; }

  .clients__track { --gap: 30px; }
  .clients__track li { width: 160px; }

  .services { gap: 48px; padding: 80px var(--gutter) 112px; }
  .services__title { font-size: 32px; }
  .services__cards { flex-direction: column; gap: 48px; }
  .service { gap: 24px; }
  .service__details { min-height: 0; }
  .service__details h3 { font-size: 24px; }

  .works { --gutter-x: 20px; --fs: 48px; --settled: .9; --rise-scale: .4; }

  .contact { gap: 28px; padding-top: 112px; }
  .contact__row { flex-direction: column; align-items: flex-start; }
  .contact__title { font-size: min(154px, 39.4vw); }
  .button { padding: 16px 22px; font-size: 16px; }

  .footer__contacts {
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    min-height: 236px;
    font-size: 22px;
  }
  .footer__social { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .clients__track { animation: none; }
  .work__card img { transition: none; }
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
}