/* GLBNYK — gilbenyizhak.com
   Every size is written in Figma pixels and scaled with the viewport:
   desktop frames are 1440 wide, mobile frames are 390 wide.
   calc(N * var(--u)) = N Figma pixels. */

:root {
  --u: calc(var(--vw, 100vw) / 1440);  /* --vw: page width, set in <head> */
  --hn: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dm: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ink: #000;
  --paper: #fff;
  --bg: var(--paper);
}
@media (max-width: 767px) {
  :root { --u: calc(var(--vw, 100vw) / 390); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hn);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .25s ease;
}
img, video, svg, iframe { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
.d-only { display: initial; }
.m-only { display: none; }
@media (max-width: 767px) {
  .d-only { display: none !important; }
  .m-only { display: initial; }
}

/* Thin outline Gil uses to thicken the light weight (Figma text stroke).
   Large type: drawn as a ring of shadows so the corners stay round, like Figma's round joins
   (a regular text stroke always has sharp corners). Small type keeps a plain stroke.
   --r = how far the outline reaches outside the letters. */
.sk-18, .sk-13 { text-shadow: calc(var(--r) * 1) calc(var(--r) * 0), calc(var(--r) * 0.924) calc(var(--r) * 0.383), calc(var(--r) * 0.707) calc(var(--r) * 0.707), calc(var(--r) * 0.383) calc(var(--r) * 0.924), calc(var(--r) * 0) calc(var(--r) * 1), calc(var(--r) * -0.383) calc(var(--r) * 0.924), calc(var(--r) * -0.707) calc(var(--r) * 0.707), calc(var(--r) * -0.924) calc(var(--r) * 0.383), calc(var(--r) * -1) calc(var(--r) * 0), calc(var(--r) * -0.924) calc(var(--r) * -0.383), calc(var(--r) * -0.707) calc(var(--r) * -0.707), calc(var(--r) * -0.383) calc(var(--r) * -0.924), calc(var(--r) * 0) calc(var(--r) * -1), calc(var(--r) * 0.383) calc(var(--r) * -0.924), calc(var(--r) * 0.707) calc(var(--r) * -0.707), calc(var(--r) * 0.924) calc(var(--r) * -0.383); }
.sk-18 { --r: calc(1.7 * var(--u)); }  /* Figma: outside stroke 1.8 (matched by ink coverage, Oct 2026) */
.sk-13 { --r: calc(1.23 * var(--u)); } /* Figma: outside stroke 1.3 (same ratio as sk-18) */
.sk-5o { -webkit-text-stroke: calc(1 * var(--u)) currentColor; }
.sk-475 { -webkit-text-stroke: calc(0.95 * var(--u)) currentColor; }
.sk-5c { -webkit-text-stroke: calc(0.5 * var(--u)) currentColor; }
@media (max-width: 767px) {
  .sk-18, .sk-13 { --r: calc(0.9 * var(--u)); } /* Figma: outside stroke 1 (matched by ink coverage) */
  .sk-475 { -webkit-text-stroke: calc(0.6 * var(--u)) currentColor; }
  .sk-5o { -webkit-text-stroke: calc(0.8 * var(--u)) currentColor; }
}

/* ---------- Light display type ---------- */
.t77 {
  font-weight: 300;
  font-size: calc(77 * var(--u));
  line-height: calc(75 * var(--u));
  letter-spacing: calc(-1.54 * var(--u));
}
@media (max-width: 767px) {
  .t77 {
    font-size: calc(39 * var(--u));
    line-height: calc(39 * var(--u));
    letter-spacing: calc(-0.78 * var(--u));
  }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  z-index: 50;
  top: calc(27 * var(--u));
  left: calc(50 * var(--u));
  right: calc(50 * var(--u));
  height: calc(17 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: calc(17.85 * var(--u));
  letter-spacing: calc(0.34 * var(--u));
}
.nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(126.625 * var(--u));
  height: calc(18.987 * var(--u));
  transform: translate(calc(-50% - 0.15 * var(--u)), calc(-50% + 0.48 * var(--u)));
}
.nav__logo img { width: 100%; height: 100%; overflow: visible; }
.nav__links {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: calc(42 * var(--u));
  white-space: nowrap;
}
.nav__contact-panel {
  position: absolute;
  inset: 0;
  font-weight: 300;
  font-size: calc(15 * var(--u));
  line-height: calc(15 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.nav.is-open .nav__contact-panel { visibility: visible; opacity: 1; transition: opacity .2s ease; }
.nav__contact-panel { pointer-events: none; }
.nav__contact-panel > * { position: absolute; pointer-events: auto; }
.cp-insta { left: calc(951 * var(--u)); top: calc(40 * var(--u)); }
.cp-mail  { left: calc(1069 * var(--u)); top: calc(40 * var(--u)); }
.cp-in    { left: calc(1022 * var(--u)); top: calc(76 * var(--u)); }
.cp-tel   { left: calc(1121 * var(--u)); top: calc(76 * var(--u)); }
.nav__burger { display: none; }

@media (max-width: 767px) {
  .nav {
    top: calc(32 * var(--u));
    left: 50%;
    right: auto;
    width: calc(172.461 * var(--u));
    height: calc(18.812 * var(--u));
    transform: translateX(calc(-50% + 0.23 * var(--u)));
  }
  .nav__logo {
    left: 0; top: 0;
    width: calc(124.882 * var(--u));
    height: calc(18.812 * var(--u));
    transform: none;
  }
  .nav__links, .nav__contact-panel { display: none; }
  .nav__burger {
    display: block;
    position: absolute;
    right: 0;
    top: calc(1.5 * var(--u));
    width: calc(25.08 * var(--u));
    height: calc(16.3 * var(--u));
  }
  .nav__burger img { width: 100%; height: 100%; }
}

/* Mobile menu */
.menu { display: none; }
@media (max-width: 767px) {
  .menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--paper);
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .menu.is-open { visibility: visible; opacity: 1; transition: opacity .2s ease; }
  .menu__logo {
    position: absolute;
    left: calc(109 * var(--u));
    top: calc(32 * var(--u));
    width: calc(124.882 * var(--u));
    height: calc(18.812 * var(--u));
  }
  .menu__logo img { width: 100%; height: 100%; }
  .menu__close {
    position: absolute;
    left: calc(261 * var(--u));
    top: calc(33.5 * var(--u));
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
  .menu__close img { width: 100%; height: 100%; overflow: visible; }
  .menu__links {
    position: absolute;
    left: 50%;
    top: calc(50% - 68.5 * var(--u));
    transform: translate(calc(-50% + 0.5 * var(--u)), -50%);
    width: calc(131 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--u));
    text-align: center;
  }
  .menu__contact > * {
    position: absolute;
    font-weight: 300;
    font-size: calc(15 * var(--u));
    line-height: calc(15 * var(--u));
    letter-spacing: calc(0.3 * var(--u));
    white-space: nowrap;
  }
  .mc-mail { left: calc(110 * var(--u)); top: calc(50% + 41 * var(--u)); }
  .mc-tel { left: calc(136 * var(--u)); top: calc(50% + 77 * var(--u)); }
  .mc-insta { left: calc(110 * var(--u)); top: calc(50% + 111 * var(--u)); }
  .mc-in { left: calc(223 * var(--u)); top: calc(50% + 111 * var(--u)); }
}

/* ---------- Crop marks ---------- */
.marks {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: calc(600 * var(--u));
  height: calc(30 * var(--u));
  align-items: center;
}
.mk { position: relative; width: calc(31 * var(--u)); height: calc(31 * var(--u)); flex: none; }
.mk::before, .mk::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: calc(1.5 * var(--u));
}
.mk::before { width: calc(18 * var(--u)); height: calc(6 * var(--u)); }  /* horizontal bar */
.mk::after  { width: calc(6 * var(--u)); height: calc(18 * var(--u)); }  /* vertical bar */
.mk.tl::before { left: 0; top: calc(24.25 * var(--u)); }
.mk.tl::after  { left: calc(25 * var(--u)); top: 0; }
.mk.tr::before { left: calc(13 * var(--u)); top: calc(24.25 * var(--u)); }
.mk.tr::after  { left: 0; top: 0; }
.mk.bl::before { left: 0; top: calc(0.75 * var(--u)); }
.mk.bl::after  { left: calc(25 * var(--u)); top: calc(13 * var(--u)); }
.mk.br::before { left: calc(13 * var(--u)); top: calc(0.75 * var(--u)); }
.mk.br::after  { left: 0; top: calc(13 * var(--u)); }
@media (max-width: 767px) {
  .marks { width: 100%; height: calc(18 * var(--u)); }
  .mk { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .mk::before, .mk::after { border-radius: calc(0.99 * var(--u)); }
  .mk::before { width: calc(10.71 * var(--u)); height: calc(3.5 * var(--u)); }
  .mk::after  { width: calc(3.5 * var(--u)); height: calc(10.71 * var(--u)); }
  .mk.tl::before { left: 0; top: calc(14.5 * var(--u)); }
  .mk.tl::after  { left: calc(14.5 * var(--u)); top: 0; }
  .mk.tr::before { left: calc(7.29 * var(--u)); top: calc(14.5 * var(--u)); }
  .mk.tr::after  { left: 0; top: 0; }
  .mk.bl::before { left: 0; top: 0; }
  .mk.bl::after  { left: calc(14.5 * var(--u)); top: calc(7.29 * var(--u)); }
  .mk.br::before { left: calc(7.29 * var(--u)); top: 0; }
  .mk.br::after  { left: 0; top: calc(7.29 * var(--u)); }
}

/* ---------- Home: hero ---------- */
.home-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  min-height: calc(700 * var(--u));
}
/* Desktop: the composition (Figma viewport y 234–753) stays centred in the window.
   --c = Figma y minus the composition centre (493.5); the whole block sits 35px below centre. */
.home-hero > .abs { position: absolute; top: calc(50% + (var(--c) + 35) * var(--u)); }
.home-hero__t1 { --c: -259.5; left: calc(50 * var(--u)); width: calc(805 * var(--u)); white-space: pre; }
.home-hero__t2 { --c: -259.5; left: calc(705 * var(--u)); width: calc(685 * var(--u)); white-space: pre-wrap; }
.home-hero__bio {
  --c: 9.5;
  left: calc(707 * var(--u));
  width: calc(690 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
}
.tri {
  display: inline-block;
  width: calc(11.667 * var(--u));
  height: calc(11.667 * var(--u));
  margin: 0 calc(21 * var(--u)) 0 calc(23 * var(--u));
  vertical-align: calc(1 * var(--u));
  background: url(../img/ui/tri.svg) center / calc(7.46 * var(--u)) calc(12.72 * var(--u)) no-repeat;
  transform: rotate(-45deg) scaleY(-1);
}
.readwhy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: calc(100 * var(--u));
  margin: 0 calc(19 * var(--u)) 0 calc(15 * var(--u));  /* Figma: button 537,56 from the text; "in" 19px after it */
  padding: 0 calc(5 * var(--u)) calc(2 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--dm);
  font-variation-settings: "opsz" 14;
  font-size: calc(17 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
  vertical-align: 0;
}
.readwhy img { width: calc(10 * var(--u)); height: calc(10 * var(--u)); overflow: visible; }

.home-crop {
  --c: -146.5;
  left: calc(50 * var(--u));
  width: calc(600 * var(--u));
  height: calc(430 * var(--u));
}
.home-crop .marks.top { left: 0; top: calc(76 * var(--u)); }
.home-crop .marks.bottom { left: calc(8 * var(--u)); top: calc(376 * var(--u)); }
.home-el {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  visibility: hidden;
}
.home-el.on { visibility: visible; }

@media (max-width: 767px) {
  .home-hero {
    position: sticky;
    top: 0;
    z-index: 0;
    height: auto;
    min-height: 100svh;
    padding: calc(103 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
  }
  .home-hero { display: flex; flex-direction: column; }
  .home-hero > .abs { position: relative; top: auto; left: auto; width: auto; }
  .home-hero__t1 { order: 1; }
  .home-hero__bio { order: 2; }
  .home-crop { order: 3; }
  .home-hero__t2 { order: 4; }
  .home-hero__bio {
    margin-top: calc(14 * var(--u));
    width: calc(346 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
    letter-spacing: calc(-0.15 * var(--u));
  }
  .tri { margin: 0 calc(9.5 * var(--u)) 0 calc(11 * var(--u)); }
  .home-hero__bio { white-space: nowrap; }
  .readwhy {
    width: calc(87 * var(--u));
    gap: calc(8 * var(--u));
    margin: calc(2 * var(--u)) calc(6 * var(--u)) 0 0;  /* Figma: starts the last line, "in" 6px after it */
    padding: 0 calc(2 * var(--u)) calc(2 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .readwhy img { width: calc(8 * var(--u)); height: calc(10 * var(--u)); }
  .home-crop {
    margin-top: calc(26 * var(--u));
    width: calc(350 * var(--u)) !important;
    height: calc(261 * var(--u)) !important;
  }
  .home-crop .marks.top { left: 0; top: 0; }
  .home-crop .marks.bottom { left: 0; top: auto; bottom: 0; }
  .home-el {
    left: calc(var(--mx) * var(--u));
    top: calc(var(--my) * var(--u));
    width: calc(var(--mw) * var(--u));
  }
  .home-hero__t2 { margin-top: calc(21 * var(--u)); width: calc(350 * var(--u)); }
}

/* ---------- Home: project list ---------- */
.projects {
  position: relative;
  z-index: 1;
  background: var(--pagebg, var(--paper));
  transition: background-color .25s ease;
  /* One screen tall: "View Projects" lands just under the logo, the rows share the rest */
  height: 100svh;
  min-height: calc(760 * var(--u));
  display: flex;
  flex-direction: column;
  padding: calc(76 * var(--u)) 0 calc(15 * var(--u));  /* bottom 40 → 15: more room between rows, still one screen */
}
.projects__head {
  padding: calc(4 * var(--u)) calc(23.744 * var(--u));
  font-weight: 300;
  font-size: calc(30 * var(--u));      /* Figma 33.241, ~10% smaller per Gil */
  line-height: calc(34.29 * var(--u));
  letter-spacing: calc(0.9 * var(--u));
}
.projects__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: calc(800 * var(--u));
  margin-top: calc(63 * var(--u));   /* Figma 40; +23 per Gil */
}
.proj {
  position: relative;
  display: flex;
  width: fit-content;
  padding: calc(15 * var(--u)) calc(23.744 * var(--u));
}
.proj__arrow {
  position: absolute;
  left: calc(23.744 * var(--u));
  top: calc(15 * var(--u));
  width: calc(25 * var(--u));
  height: calc(57 * var(--u));
  padding: calc(1.65 * var(--u)) calc(0.33 * var(--u)) calc(1.65 * var(--u)) 0;
  opacity: 0;
  transform: translateX(calc(-65 * var(--u)));
  transition: opacity .25s ease, transform .25s ease;
}
.proj__arrow img { width: 100%; height: 100%; }
.proj__body {
  display: flex;
  gap: calc(7 * var(--u));
  align-items: flex-start;
  transition: transform .25s ease;
}
.num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  border: calc(0.95 * var(--u)) solid var(--ink);
  border-radius: 50%;
  font-family: var(--dm);
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: calc(20 * var(--u));
}
.proj__title {
  display: flex;
  align-items: flex-end;
  height: calc(60 * var(--u));
  font-weight: 300;
  font-size: calc(73.131 * var(--u));
  line-height: calc(66.482 * var(--u));
  letter-spacing: calc(-1.4626 * var(--u));
  white-space: pre;
}
.proj__tags, .tags {
  display: flex;
  gap: calc(15 * var(--u));
  font-family: var(--dm);
  font-variation-settings: "opsz" 14;
  font-size: calc(20 * var(--u));
  line-height: calc(11.397 * var(--u));
  letter-spacing: calc(-0.6 * var(--u));
  white-space: nowrap;
}
.proj__tags { margin-left: calc(1.5 * var(--u)); } /* visible gap after the name = Figma (±1px) */
@media (hover: hover) and (min-width: 768px) {
  .proj:hover .proj__arrow { opacity: 1; transform: none; }
  .proj:hover .proj__body { transform: translateX(calc(65 * var(--u))); }
}

/* Hover: the page takes the project colour and its element appears where it
   sits on the project page, so after the click only the rest of the page changes. */
.hover-els { display: none; }
@media (min-width: 768px) {
  .hover-els { display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; }
  .hover-el {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(max(100svh, 700 * var(--u)) - var(--t) * var(--u)); /* same as .p-hero height */
    width: calc(var(--w) * var(--u));
    height: auto;
    visibility: hidden;
  }
  body[data-hover] .home-crop { visibility: hidden; }
  body[data-hover] .hover-el.on { visibility: visible; }
}

@media (max-width: 767px) {
  .projects {
    height: auto;
    min-height: 0;
    display: block;
    background: var(--paper);
    padding: calc(60 * var(--u)) 0 calc(80 * var(--u));  /* Figma 100 / 30; per Gil: less above "View Projects", more under the list */
    z-index: 2;
    transform: translateZ(0);
  }
  .projects__head {
    padding: 0 calc(25 * var(--u));
    font-size: calc(19 * var(--u));      /* Figma 21, ~10% smaller per Gil */
    line-height: calc(40 * var(--u));
    letter-spacing: calc(1.14 * var(--u));
  }
  .projects__list { gap: 0; margin-top: calc(57 * var(--u)); /* Figma 50; +15 per Gil */ justify-content: flex-start; max-height: none; }
  .proj { padding: calc(13 * var(--u)) calc(25 * var(--u)); }  /* rows 26px apart (Figma 40; Gil: 20, then a little more) */
  .proj__arrow { display: none; }
  .num {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    border-width: calc(1 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(13 * var(--u));
  }
  .proj__title {
    width: auto;
    height: auto;
    font-size: calc(39 * var(--u));
    line-height: calc(39 * var(--u));
    letter-spacing: calc(-0.78 * var(--u));
  }
  .proj__tags, .tags {
    font-size: calc(15 * var(--u));
    line-height: calc(12 * var(--u));
    letter-spacing: calc(-0.45 * var(--u));
  }
  .proj__tags { margin-left: calc(1 * var(--u)); }
  .proj--jct .proj__tags { position: absolute; left: calc(136 * var(--u)); top: calc(13 * var(--u)); margin-left: 0; }
}

/* ---------- Project page: hero ---------- */
.project { --bg: #fff; }
.p-hero {
  position: relative;
  height: 100svh;
  min-height: calc(700 * var(--u));
  background: var(--bg);
}
.p-hero .abs { position: absolute; top: calc(100% - var(--t) * var(--u)); }
.p-hero__text {
  position: absolute;
  left: calc(50 * var(--u));
  bottom: calc(82 * var(--u));
  width: calc(620 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
}
.p-hero__titlewrap { position: relative; }
@media (min-width: 768px) {
  .p-hero__title[style*="--ts"] { font-size: calc(var(--ts) * var(--u)); } /* DZPL's larger desktop title */
}
.p-hero__sub { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.p-hero__subtitle { width: calc(var(--sw, 620) * var(--u)); }
.p-hero__desc {
  width: calc(var(--dw, 620) * var(--u));
  font-size: calc(25 * var(--u));
  line-height: calc(var(--dlh, 28) * var(--u));
  letter-spacing: calc(-0.75 * var(--u));
  text-indent: calc(50 * var(--u));
}
.p-hero__credit b { font-weight: inherit; }
.p-hero__credit {
  display: block;
  text-indent: 0;
  margin-left: calc(50 * var(--u));
  margin-top: calc(var(--cm, 8) * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 2;
  letter-spacing: calc(-0.4 * var(--u));
  white-space: pre;
}
.badge {
  position: absolute;
  left: calc(var(--bx) * var(--u));
  top: calc(var(--by) * var(--u));
  width: calc(80 * var(--u));
  height: calc(82.056 * var(--u));
}
.badge svg { width: 100%; height: 100%; }
.badge span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-17.96deg);
  color: var(--bg);
  font-weight: 500;
  font-size: calc(19 * var(--u));
  line-height: calc(18 * var(--u));
  text-align: center;
  white-space: pre;
}
.p-hero__crop .marks { left: calc(790 * var(--u)); }
.p-hero__crop .marks.top { top: calc(100% - var(--tt) * var(--u)); }
.p-hero__crop .marks.bottom { left: calc(792 * var(--u)); top: calc(100% - 108 * var(--u)); }
.p-hero__el {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(100% - var(--t) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
}

@media (max-width: 767px) {
  .p-hero {
    height: auto;
    min-height: 0;
    padding: calc(120 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(23 * var(--u));
  }
  .p-hero__text { display: contents; }
  .p-hero__sub { display: contents; }
  .p-hero__titlewrap { order: 1; padding-top: calc(35 * var(--u)); height: calc(var(--mth) * var(--u)); width: calc(260 * var(--u)); }
  .p-hero__crop { order: 2; position: relative; width: calc(350 * var(--u)); height: calc(261 * var(--u)); }
  .p-hero__crop .marks.top, .p-hero__crop .marks.bottom { left: 0; right: 0; }
  .p-hero__crop .marks.top { top: 0; }
  .p-hero__crop .marks.bottom { top: auto; bottom: 0; }
  .p-hero__subtitle { order: 3; width: calc(var(--msw, 324) * var(--u)); }
  .p-hero__desc {
    order: 4;
    width: calc(350 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(20 * var(--u));
    letter-spacing: calc(-0.6 * var(--u));
    text-indent: calc(35.47 * var(--u));
  }
  .p-hero__credit { margin-left: calc(35.47 * var(--u)); margin-top: calc(11 * var(--u)); line-height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: calc(-0.6 * var(--u)); }
  .p-hero__credit b { font-weight: 700; }
  .badge {
    left: calc(var(--mbx) * var(--u));
    top: calc(var(--mby) * var(--u));
    width: calc(54 * var(--u));
    height: calc(55.4 * var(--u));
  }
  .badge span { font-size: calc(14 * var(--u)); line-height: calc(13.5 * var(--u)); }
  .p-hero__el {
    left: calc(var(--mx) * var(--u));
    top: calc(var(--my) * var(--u));
    width: calc(var(--mw) * var(--u));
  }
}

/* ---------- Project page: sections ---------- */
.sections { display: flex; flex-direction: column; gap: calc(2 * var(--u)); background: var(--paper); padding-top: calc(2 * var(--u)); }
.sections--m { display: none; }
@media (max-width: 767px) {
  .sections--d { display: none; }
  .sections--m { display: flex; }
}
.sec {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: #111;
}
.sec > img, .sec > video, .sec > picture, .sec > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Videos laid over part of a still section (Rabinovich phone stories). Hidden until
   they play, so the Figma still shows meanwhile. */
.vlayer {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--r, 0) * var(--u));
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
}
.vlayer.is-playing { opacity: 1; }
.vlayer--flip { transform: scaleX(-1); }
.vlayer video, .vlayer > i, .vlayer__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vlayer__grad { background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
.vlayer__screen { mix-blend-mode: screen; }
.vlayer__defs { position: absolute; width: 0; height: 0; }
.sec iframe {
  position: absolute;
  border: 0;
  left: 50%;
  top: 0;
  height: 100%;
  width: calc(100% * 1000 / 992);
  transform: translateX(-50%);
}
.morph {
  position: absolute;
  left: calc(var(--l, 356) * var(--u));
  top: calc(var(--t, 136) * var(--u));
  width: calc(var(--s, 728) * var(--u));
}
.sec iframe.is-m { left: 0; width: 100%; transform: none; }

/* Screen carousels (Gil's code animations) */
.screens {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--base, 1440) / var(--h);
  overflow: hidden;
  background: #222 var(--bgimg, none) center / cover no-repeat;
}
.screens__track {
  /* card units: desktop px; on mobile the same cards scaled by --k */
  --su: calc(100cqw * var(--k, 1) / var(--base, 1440));
  --gap: calc(var(--g) * var(--su));
  position: absolute;
  top: calc(var(--top) * 100cqw / var(--base, 1440));
  left: 0;
  display: flex;
  gap: var(--gap);
  direction: ltr;
  will-change: transform;
}
.screens__card {
  --w: 900; --h: 563; --r: 20;
  flex: none;
  width: calc(var(--w) * var(--su));
  aspect-ratio: var(--w) / var(--h);
  border-radius: calc(var(--r) * var(--su));
  overflow: hidden;
  background: #000;
}
.screens__card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Next project ---------- */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(118 * var(--u));
  padding: 0 calc(54.17 * var(--u)) 0 calc(50 * var(--u));
  background: var(--paper);
  font-weight: 300;
  font-size: calc(51.011 * var(--u));
  line-height: calc(49.308 * var(--u));
  letter-spacing: calc(-1.0202 * var(--u));
}
.cta__label { transform: translateY(calc(-2.8 * var(--u))); }
.cta__arrow { width: calc(16.828 * var(--u)); height: calc(38.246 * var(--u)); padding: calc(1.68 * var(--u)) calc(0.34 * var(--u)) calc(1.68 * var(--u)) 0; }
.cta__arrow img { width: 100%; height: 100%; }
@media (max-width: 767px) {
  .cta {
    height: auto;
    padding: calc(80 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
    font-size: calc(39 * var(--u));
    line-height: calc(39 * var(--u));
    letter-spacing: calc(-0.78 * var(--u));
  }
  .cta__arrow { width: calc(16 * var(--u)); height: calc(36.48 * var(--u)); padding: calc(1.06 * var(--u)) calc(0.2 * var(--u)) calc(1.06 * var(--u)) 0; }
}

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