/* ==========================================================================
   Yuval Shalmon — Portfolio
   Built from the Figma file "יובל וניצן <3" (page: קלוד).
   Desktop is drawn on a 1440px canvas; --u is one Figma pixel, so
   calc(N * var(--u)) keeps every measurement proportional on any screen.
   ========================================================================== */

/* Brand font: Perfectly Nineties Handwritten (licensed, files in /fonts).
   Only Regular + Italic exist, so the heavier weights used in the Figma
   (Semibold / Bold) map onto the same files instead of a fake browser bold. */
/* Perfectly Nineties (Yuval's licensed font, demo files): regular, semibold, semibold italic, light italic */
@font-face { font-family: "Perfectly Nineties"; font-style: normal; font-weight: 100 499; font-display: swap; src: url(../fonts/PerfectlyNineties-Regular.woff2) format("woff2"); }
@font-face { font-family: "Perfectly Nineties"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/PerfectlyNineties-Semibold.woff2) format("woff2"); }
@font-face { font-family: "Perfectly Nineties"; font-style: italic; font-weight: 100 499; font-display: swap; src: url(../fonts/PerfectlyNineties-LightItalic.woff2) format("woff2"); }
@font-face { font-family: "Perfectly Nineties"; font-style: italic; font-weight: 500 900; font-display: swap; src: url(../fonts/PerfectlyNineties-SemiboldItalic.woff2) format("woff2"); }

:root {
  --brown: #4d2820;
  --ink: #212121;
  --cream: #fffdf7;
  --sand: #f7f3e7;
  --pink: #ffd3e6;
  --brown-50: rgba(77, 40, 32, 0.5);

  --serif: "Perfectly Nineties", Georgia, serif;
  --display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --link: "Instrument Sans", "Geist", sans-serif;

  --u: calc(min(100vw, 1440px) / 1440);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
.page { max-width: 1440px; margin: 0 auto; position: relative; zoom: var(--z, 1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.serif-i { font-family: var(--serif); font-style: italic; }

/* ---------- Navigation ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px 12px 16px;
  font-family: var(--mono); font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1;
}
.nav__left { display: flex; align-items: center; }
.nav__home {
  width: 79.58px; height: 69.71px; display: grid; place-items: center;
  background: url(../assets/svg/nav-home.svg) center / 100% 100% no-repeat;
  color: var(--cream);
}
.pill {
  display: inline-flex; align-items: center; justify-content: center; width: 71.16px; height: 31.53px; padding: 1px 0 0;
  background: url(../assets/svg/pill-sm.svg) center / 100% 100% no-repeat;
  color: var(--brown); white-space: nowrap;
  transition: transform .25s ease;
}
.pill + .pill { margin-left: -4px; } /* -4px between the pills, 0 after the home blob, as in Figma */
.pill--md { width: 122.18px; background-image: url(../assets/svg/pill-md.svg); }
.pill:hover, .nav__home:hover, .talk:hover { transform: translateY(-2px); }
.nav__home, .talk { transition: transform .25s ease; }
.talk {
  display: inline-flex; align-items: center; justify-content: center; width: 116.18px; height: 31.53px; padding: 1px 0 0;
  background: url(../assets/svg/pill-talk.svg) center / 100% 100% no-repeat;
  color: var(--brown); white-space: nowrap; /* Figma: brown text, same 4% tracking as the other buttons */
}
.nav [aria-current="page"] { text-decoration: none; }

/* ---------- Home: hero ---------- */
.hero { position: relative; height: calc(760 * var(--u)); overflow: hidden; }
.hero__card {
  position: absolute; inset: calc(12 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(180deg, #fffdf7 50%, #ffeaf2 69.471%, #ffc3de 86.426%, #ffb0b5 100%);
}
.hero__its {
  position: absolute; left: calc(571 * var(--u)); top: calc(119 * var(--u));
  width: calc(284.29 * var(--u)); height: auto;
}
/* The six flattened "Shalmon" lettering styles from the Figma "fonts" component.
   They swap every 300ms, like the prototype's After-delay interaction. */
.hero__name {
  position: absolute; left: calc(284 * var(--u)); top: calc(201 * var(--u));
  width: calc(872 * var(--u)); height: calc(246 * var(--u));
}
.hero__name img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; visibility: hidden; }
.hero__name img.is-on { visibility: visible; }
.hero__time {
  position: absolute; left: calc(508 * var(--u)); top: calc(499 * var(--u));
  width: calc(410.15 * var(--u)); height: auto;
}
.hero__intro {
  position: absolute; left: calc(24 * var(--u)); top: calc(338 * var(--u)); width: 199px; /* Figma box is 193; browser Geist runs ~3% wider */
  font-size: 14px; letter-spacing: -0.02em; line-height: normal;
}
.hero__portfolio {
  position: absolute; right: calc(24 * var(--u)); top: calc(349 * var(--u));
  font: 400 40px / normal var(--sans); letter-spacing: -0.09em; white-space: nowrap;
}
.hero__portfolio .serif-i { font-size: 45.5px; letter-spacing: -0.02em; }

/* ---------- Home: intro statement ---------- */
.me { padding: 90px 24px 105px; display: flex; flex-direction: column; align-items: center; gap: 67px; }
.dot { width: 13px; height: 13px; background: var(--pink); }
.me__text {
  max-width: 810px; line-height: 0; text-align: center; color: var(--ink);
  font: 400 45px / 47px var(--serif); letter-spacing: -0.02em;
}

/* ---------- Home: selected works ---------- */
.works { background: var(--cream); border-radius: 8px; padding-bottom: 24px; }
.works__tab { position: relative; height: 61px; overflow: hidden; }
.works__tab > img { position: absolute; left: 12px; right: 12px; top: 2px; width: calc(100% - 24px); height: 63px; }
.works__title {
  position: absolute; left: 38px; top: 22px;
  font: 600 30px / normal var(--serif);
}
.works__grid { display: flex; gap: 24px; justify-content: center; padding: 24px 24px 0; }
.works__col { width: calc(684 * var(--u)); flex: 1 1 0; max-width: 684px; display: flex; flex-direction: column; gap: 19px; }

.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--sand); border-radius: 8px;
}
.card__img { overflow: hidden; border-radius: 8px; background: var(--brown); }
.card__img img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card__img img { transform: scale(1.035); }
.card__info { position: relative; height: 127px; padding: 13px 19px 18px 15px; }
.card__title { font: 600 26px / normal var(--serif); text-transform: capitalize; }
.card__sub, .card__year { font-size: 16px; letter-spacing: -0.03em; color: var(--brown-50); line-height: 1; }
.card__sub { position: absolute; left: 15px; top: 69px; }
.card__year { position: absolute; right: 19px; top: 26px; }
.tags {
  position: absolute; right: 19px; bottom: 18px; max-width: 300px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px;
}
.tag {
  height: 20px; padding: 0 5px; display: inline-flex; align-items: center;
  border: .5px solid var(--brown); border-radius: 200px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.8; white-space: nowrap;
}

/* ---------- "A little bit of everything" banner ---------- */
.banner-wrap { padding: 50px 24px; }
.banner {
  position: relative; height: 203px; overflow: hidden; border-radius: 24px;
  background: linear-gradient(96.36deg, #ffe5ef 0.33%, #fec9df 7.62%);
}
.banner__bg { position: absolute; left: calc(151 * var(--u)); top: 0; height: 100%; width: auto; max-width: none; }
.banner__text {
  position: absolute; left: calc(114 * var(--u)); top: 50%; transform: translateY(-50%);
  font: 600 50px / .84 var(--display); letter-spacing: .03em; text-transform: uppercase;
}
.banner__text .serif-i { font-size: 56px; text-transform: none; letter-spacing: 0; }
.banner__btn {
  position: absolute; left: calc(997 * var(--u)); top: 79px;
  height: 43px; padding: 2px 26px 0; display: inline-flex; align-items: center;
  background: url(../assets/svg/pill-play.svg) center / 100% 100% no-repeat;
  font: 400 18.47px / 1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--cream);
  transition: transform .25s ease;
}
.banner__btn:hover { transform: translateY(-2px); }

/* ---------- CTA ---------- */
.cta { padding: 121px 64px 130px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta__title {
  font: 400 calc(180 * var(--u)) / .81 var(--display); letter-spacing: -0.02em; text-transform: uppercase;
}
.cta__title .bold { display: block; font-size: 1.0556em; line-height: .87; text-transform: lowercase; }
.cta__title .bold .serif-i { letter-spacing: 0; }
.cta__btn {
  margin-top: 12px; width: 160px; height: 43px; padding-top: 1px; display: inline-flex; align-items: center; justify-content: center;
  background: url(../assets/svg/pill-cta.svg) center / 100% 100% no-repeat;
  font: 600 16px / 1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--brown);
  transition: transform .25s ease;
}
.cta__btn--dark { background-image: url(../assets/svg/pill-cta-dark.svg); color: var(--cream); }
.cta__btn:hover { transform: translateY(-2px); }

/* ---------- Footer ---------- */
.footer { display: flex; justify-content: space-between; align-items: stretch; gap: 40px; padding: 40px 24px; }
.footer__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.footer__name { font: 400 40px / 1 var(--serif); letter-spacing: -0.02em; }
.footer__name .serif-i { font-weight: 600; }
.footer__copy { font: 400 10px / 1.8 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.footer__cols { display: flex; gap: 56px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__col h3 { padding-left: 6px; font: 600 24px / 1.13 var(--serif); letter-spacing: -0.01em; }
.footer__col a, .footer__col span { padding: 8px 8px 6px; font: 400 16px / 1.1 var(--link); letter-spacing: -0.02em; border-radius: 96px; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__col .clock { font-family: var(--sans); }

/* ---------- About ---------- */
.about-hero { position: relative; padding-top: 179px; }
.about-hero h1 {
  padding-left: 20px; white-space: nowrap;
  font: 400 110px / 85px var(--sans); letter-spacing: -0.02em; text-transform: uppercase;
}
.about-hero h1 .serif-i { font-weight: 600; text-transform: capitalize; letter-spacing: 0; }
.about-row { display: flex; gap: 20px; align-items: center; padding: 70px 24px 11px 25px; }
.about-row > img { width: 274px; height: 366px; object-fit: cover; border-radius: 8px; flex: none; }
.panel { background: var(--sand); border: 1px solid #f4f4f4; border-radius: 8px; padding: 24px; }
.panel--about { width: 490px; height: 366px; flex: none; }
.panel--about h2 { font: 600 30px / normal var(--serif); margin-bottom: 19px; }
.panel--about p { font-size: 16px; letter-spacing: -0.02em; text-transform: capitalize; }
.about-side { width: 292px; flex: none; display: flex; flex-direction: column; gap: 22px; }
.panel--small { font-size: 14px; letter-spacing: -0.02em; line-height: normal; }
.panel--small h3 { font: italic 700 16px / normal var(--serif); }
.panel--small strong { font-weight: 500; display: block; }
.panel--small .muted { color: var(--brown-50); margin-bottom: 0; }
.panel--small .muted + strong { margin-top: 0; }
.about-cta { position: relative; height: 891px; overflow: hidden; }
.about-cta__bg { position: absolute; left: 0; top: 173px; width: 100%; height: 718px; object-fit: cover; }
.about-cta .cta { position: relative; padding-top: 138px; }
.about-cta .cta__title { font-size: 110px; letter-spacing: -0.02em; }
.about-cta .footer { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- Project pages ---------- */
.project__stack img { width: 100%; height: auto; }
.project__stack { line-height: 0; }

/* ---------- Scroll reveal (respects reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .about-row { flex-wrap: wrap; justify-content: center; }
  .about-hero h1 { font-size: 80px; line-height: 64px; }
  .about-cta .cta__title { font-size: 80px; }
  .footer { flex-direction: column; }
  .footer__cols { flex-wrap: wrap; gap: 32px; }
  .banner__text { font-size: 36px; }
  .banner__text .serif-i { font-size: 40px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .nav { padding: 8px 12px 8px 8px; font-size: 12px; }
  .nav .talk { display: none; }
  .nav__home { width: 64px; height: 56px; background-size: 54px 42px; }
  .pill { height: 25px; padding: 1px 8px 0; }

  .hero { height: auto; padding: calc(620 * var(--u) + 110px) 0 48px; }
  .hero__intro, .hero__portfolio { position: static; }
  .hero__meta { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 0 24px; }
  .hero__portfolio { font-size: 32px; }
  .hero__portfolio .serif-i { font-size: 36px; }
  .hero__its, .hero__name, .hero__time { margin-top: 80px; }
  .hero__card { inset: 8px; border-radius: 16px; }

  .me { padding: 56px 20px 64px; gap: 40px; }
  .me__text { font-size: 28px; line-height: 31px; }

  .works__grid { flex-direction: column; padding: 16px 12px 0; gap: 16px; }
  .works__col { width: 100%; max-width: none; gap: 16px; }
  .works__tab > img { left: 4px; width: calc(100% - 8px); }
  .works__title { left: 24px; font-size: 26px; }
  .card__info { height: auto; min-height: 150px; padding: 12px 14px 14px; }
  .card__year { right: 14px; top: 20px; }
  .card__sub { position: static; margin-top: 4px; }
  .tags { position: static; justify-content: flex-start; margin-top: 16px; max-width: none; }

  .banner-wrap { padding: 32px 12px; }
  .banner { height: 220px; }
  .banner__bg { left: auto; right: -260px; }
  .banner__text { left: 20px; top: 32px; transform: none; font-size: 28px; }
  .banner__text .serif-i { font-size: 32px; display: block; margin-top: 4px; }
  .banner__btn { left: 20px; top: auto; bottom: 24px; font-size: 14px; height: 36px; padding: 2px 20px 0; }

  .cta { padding: 72px 20px 80px; }
  .cta__title { font-size: 64px; }
  .cta__btn { font-size: 15px; width: 150px; height: 40px; }

  .footer { padding: 32px 20px; }
  .footer__name { font-size: 32px; }
  .footer__cols { gap: 24px 32px; }

  .about-hero { padding-top: 120px; }
  .about-hero h1 { font-size: 52px; line-height: 44px; white-space: normal; }
  .about-row { padding: 40px 12px 0; gap: 12px; }
  .about-row > img { width: calc(50% - 6px); height: auto; aspect-ratio: 274 / 366; }
  .panel--about, .about-side { width: 100%; height: auto; }
  .about-cta { height: auto; }
  .about-cta__bg { top: 80px; height: calc(100% - 80px); }
  .about-cta .cta { padding-top: 96px; }
  .about-cta .cta__title { font-size: 56px; }
  .about-cta .footer { position: relative; }
}

/* ==========================================================================
   Case-study pages built as real code (Act first)
   All sizes are Figma px × --u, so the 1440 layout scales evenly.
   ========================================================================== */
.case { --gap: calc(24 * var(--u)); --r: calc(8 * var(--u)); background: var(--cream); }
.case .tile { width: 100%; height: auto; border-radius: var(--r); }
.row { display: flex; gap: var(--gap); padding: 0 var(--gap); margin-bottom: var(--gap); }
.row > * { min-width: 0; }
.row--full { padding: 0; }
.row--full .tile { border-radius: 0; }
.row--2 > * { flex: 1 1 0; }
.row--grid4 { padding: 0 var(--gap) 0 calc(26 * var(--u)); }
.row--grid4 > .tile { flex: 682 1 0; }
.row--grid4 .col { flex: 682 1 0; display: flex; flex-direction: column; gap: var(--gap); }
.row--type { gap: calc(30 * var(--u)); }
.row--type > :first-child { flex: 507 1 0; }
.row--type > :last-child { flex: 855 1 0; }
.stack { position: relative; }
.stack > .tile { display: block; }
.overlay { position: absolute; object-fit: cover; display: block; }
video.tile { display: block; background: #000; }

.case-hero > .tile { border-radius: 0; }
.case-info {
  display: flex; justify-content: space-between; gap: 40px;
  padding: calc(50 * var(--u)) var(--gap) calc(76 * var(--u));
  color: #212121;
}
.case-info__title { width: calc(327 * var(--u)); min-width: 240px; }
.case-info__num { font: italic 600 14px / 41px var(--serif); color: var(--brown); height: 33px; }
.case-info__name { font: italic 600 40px / 41px var(--serif); color: var(--brown); text-transform: uppercase; margin-bottom: 99px; }
.case-info__tags { display: flex; flex-wrap: wrap; gap: 3px; max-width: 296px; }
.case-info__tags .tag { border-color: #212121; color: #212121; }
.case-info__body { width: calc(684 * var(--u)); min-width: 300px; font: 400 16px / 1.36 var(--sans); letter-spacing: 0; }
.case-label { font: italic 400 14px / 1.16 var(--serif); color: #646464; letter-spacing: -0.02em; margin-bottom: 10px; }
.case-text p.gap { margin-top: 1.2em; }
.case-meta { display: flex; gap: 86px; margin-top: 40px; }
.case-meta > div:first-child { width: 269px; }
.case-meta .case-label { margin-bottom: 12px; }
.case-role { font-style: italic; letter-spacing: -0.01em; }

@media (max-width: 760px) {
  .case { --gap: 12px; --r: 8px; }
  .row--2, .row--grid4, .row--type { flex-direction: column; padding: 0 12px; }
  .row--inset { padding: 0 12px; }
  .case-info { flex-direction: column; padding: 32px 20px 48px; }
  .case-info__title, .case-info__body { width: 100%; min-width: 0; }
  .case-info__name { margin-bottom: 24px; }
  .case-meta { gap: 32px; }
  .case-meta > div:first-child { width: auto; }
}

/* ==========================================================================
   Flattened lettering from Figma (vectors instead of live type)
   ========================================================================== */
.me__text img { width: calc(796 * var(--u)); height: auto; margin: 0 auto; }
.works__title { top: 33px; left: 39px; line-height: 0; }
.works__title img { width: 172px; height: auto; }
.card__title { line-height: 0; padding-top: 12px; }
.card__title img { width: auto; }
.cta__title { line-height: 0; }
.cta__title img { width: calc(820 * var(--u)); height: auto; }
.cta .cta__btn { margin-top: calc(60 * var(--u)); }
.about-cta .cta__title img { width: calc(500 * var(--u)); }
.footer__name { line-height: 0; }
.footer__name img { width: 216px; height: auto; }
@media (max-width: 760px) {
  .me__text img { width: 100%; }
  .cta__title img { width: 100%; max-width: 420px; }
  .about-cta .cta__title img { width: 80%; }
  .works__title { left: 24px; }
}

/* ==========================================================================
   Interactions
   ========================================================================== */

/* 1. Hero gradient that breathes: two soft colour clouds drift very slowly
      across the Figma gradient, so the pink never sits still. */
.hero__card { overflow: hidden; isolation: isolate; }
.hero__card::before, .hero__card::after {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  filter: blur(60px); opacity: .75; will-change: transform;
}
.hero__card::before { background: radial-gradient(40% 30% at 30% 85%, #ffb0b5 0%, rgba(255,176,181,0) 70%); animation: drift-a 26s ease-in-out infinite alternate; }
.hero__card::after  { background: radial-gradient(35% 28% at 75% 80%, #ffc3de 0%, rgba(255,195,222,0) 70%); animation: drift-b 32s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate3d(-6%, 4%, 0) scale(1); } to { transform: translate3d(10%, -6%, 0) scale(1.15); } }
@keyframes drift-b { from { transform: translate3d(8%, 2%, 0) scale(1.1); } to { transform: translate3d(-10%, -8%, 0) scale(.95); } }

/* 2. Menu: on scroll the whole menu gathers into one row in the centre,
      and "Let's talk" turns into a pink pill like the others.
      Back at the top it spreads out to the sides again. (JS sets the offsets.) */
.nav { position: fixed; left: 0; right: 0; max-width: 1440px; margin: 0 auto; zoom: var(--z, 1); }
.nav__left, .nav .talk { transition: transform .7s cubic-bezier(.65,0,.25,1); will-change: transform; }

/* the home blob spins a little; pills hop up on hover */
.nav__home { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.nav__home:hover { transform: rotate(-14deg) scale(1.06); }
.pill { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: 50% 100%; }
.pill:hover { transform: translateY(-3px) rotate(-3deg); }
.pill:nth-child(3):hover { transform: translateY(-3px) rotate(3deg); }
.pill:active, .cta__btn:active, .banner__btn:active { transform: scale(.94); }

/* "Let's talk": outline pill at the top, pink filled pill once the menu gathers */
.talk { position: relative; isolation: isolate; background: none; }
.talk::before, .talk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: center / 100% 100% no-repeat; transition: opacity .45s ease; }
.talk::before { background-image: url(../assets/svg/pill-talk.svg); }
.talk::after  { background-image: url(../assets/svg/pill-talk-pink.svg); opacity: 0; }
.talk > span { display: inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.talk:hover > span { transform: translateY(-1px); }
.nav.is-compact .talk { color: var(--brown); }
.nav.is-compact .talk::before { opacity: 0; }
.nav.is-compact .talk::after { opacity: 1; }
.pill:hover, .nav__home:hover { filter: none; }

/* 3. Project cards: a "View project" sticker follows the cursor */
.cursor-tag {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  padding: 10px 16px 9px; border-radius: 100px; background: var(--brown); color: var(--cream);
  font: 400 13px / 1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transform: translate3d(-50%, -50%, 0) scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cursor-tag.is-on { transform: translate3d(-50%, -50%, 0) scale(1); }
.card { cursor: none; }
.card .card__img img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }

/* 4. CTA "Let's talk": turns brown with pink text on hover */
.cta__btn { position: relative; isolation: isolate; transition: color .3s ease, transform .25s ease; }
.cta__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../assets/svg/pill-cta-dark.svg) center / 100% 100% no-repeat; opacity: 0; transition: opacity .3s ease; }
.cta__btn:hover { color: var(--pink); transform: none; }
.cta__btn:hover::after { opacity: 1; }
.cta__btn--dark:hover { color: var(--pink); }

/* Magnetic: the banner button leans toward the cursor */
[data-magnetic] { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* Coarse pointers (touch) get no custom cursor */
@media (hover: none) { .card { cursor: pointer; } .cursor-tag { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__card::before, .hero__card::after { animation: none; }
  .nav__left, .nav .talk, .pill, .nav__home, [data-magnetic] { transition: none; }
}

/* ==========================================================================
   Act: moving pieces from the Figma "act- move" section
   ========================================================================== */
/* frame-by-frame loops (logo materials, line drawings, statue slideshow) */
.frames { position: relative; overflow: hidden; }
.frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.frames img.is-on { visibility: visible; }
.frames--cover { aspect-ratio: 684 / 855 !important; }

/* relief carousel: 5 reliefs rotate through 3 visible slots */
.relief-row { position: relative; height: calc(872 * var(--u)); overflow: hidden; }
.relief-carousel { position: absolute; left: calc(-55 * var(--u)); top: 0; width: calc(1551 * var(--u)); height: 100%; }
.relief {
  position: absolute; left: 0; top: 0; max-width: none;
  transition: left .45s cubic-bezier(.42,0,.58,1), top .45s cubic-bezier(.42,0,.58,1),
              width .45s cubic-bezier(.42,0,.58,1), height .45s cubic-bezier(.42,0,.58,1), opacity .45s cubic-bezier(.42,0,.58,1);
}
.relief.no-anim { transition: none; }
@media (max-width: 760px) {
  .relief-row { height: 62vw; }
  .relief-carousel { left: -3.8%; width: 107.7%; }
}
@media (prefers-reduced-motion: reduce) { .relief { transition: none; } }
/* layers that sit above a video inside a tile (e.g. clouds drifting over a screen) */
.stack > .over-top { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: var(--r); }
/* card tags: two fixed rows like the Figma, right-aligned */
.card .tags { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; max-width: none; }
.tags__row { display: flex; gap: 3px; }
@media (max-width: 760px) { .card .tags { align-items: flex-start; } .tags__row { flex-wrap: wrap; } }
/* rows keep their own Figma spacing (set inline); tiles clip overlaid videos */
.case--pn .row { margin-bottom: 0; }
.stack.clip { overflow: hidden; border-radius: var(--r); }
.row--full .stack.clip { border-radius: 0; }
@media (max-width: 760px) { .case--pn .row { margin-top: 12px !important; } }
.card__img { position: relative; }
.card__video { position: absolute; left: 0; width: 100%; object-fit: cover; pointer-events: none; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__video { transform: scale(1.035); }

/* Videos are decoration: never show the iPhone's big play button over them */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* ================= Post Nature: live headings ================= */
.pn-head { display: flex; align-items: flex-start; min-height: calc(271 * var(--u)); padding: 0 calc(24 * var(--u)); color: #1f2421; }
.pn-head img { display: block; height: auto; max-width: none; }
.pn-head__l { width: calc(698 * var(--u)); padding-top: calc(34 * var(--u)); flex: none; }
.pn-head__label { margin: 0 0 calc(19 * var(--u)); }
.pn-head__title { margin: 0; overflow: hidden; padding-bottom: calc(12 * var(--u)); }
.pn-head__body { width: calc(507 * var(--u)); margin-left: calc(187 * var(--u)); padding-top: calc(72 * var(--u)); padding-bottom: calc(24 * var(--u)); }
.pn-head__body p, .pp__intro p, .pc-intro p { font: 400 max(13px, calc(16 * var(--u))) / 1.36 var(--sans); color: #1f2421; margin: 0; letter-spacing: 0; }
.pn-head__body b { font-weight: 700; }
.pn-cap { margin: 0; height: calc(55 * var(--u)); padding: calc(14 * var(--u)) calc(24 * var(--u)) 0; }
.pn-cap img { display: block; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .reveal .pn-head__label { opacity: 0; transform: translateX(calc(-14 * var(--u))); transition: opacity .7s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s; }
  .reveal .pn-head__title img { transform: translateY(105%); transition: transform 1.15s cubic-bezier(.2,.75,.15,1) .2s; }
  .reveal .pn-head__body { opacity: 0; transform: translateY(14px); transition: opacity .9s ease .45s, transform 1s cubic-bezier(.2,.7,.2,1) .45s; }
  .reveal.is-in .pn-head__label, .reveal.is-in .pn-head__title img, .reveal.is-in .pn-head__body { opacity: 1; transform: none; }
}

/* ================= Plant Profile ================= */
.pp { position: relative; width: 100%; aspect-ratio: 1440 / 855; background: var(--cream); }
.pp > * { position: absolute; }
.pp__intro { left: calc(25 * var(--u)); top: calc(27 * var(--u)); width: calc(560 * var(--u)); }
.pp__intro h3, .pc-intro h3 { margin: 0; }
.pp__intro img, .pc-intro img { display: block; height: auto; }
.pp__intro p { margin-top: calc(27 * var(--u)); width: calc(541 * var(--u)); }
.pp__video { object-fit: cover; background: #ececec; border: .7px solid #d9d9d9; border-radius: calc(6 * var(--u)); display: block; }
.pp__lines, .sb__lines { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; position: absolute; }
.lead { fill: none; stroke: #bebebe; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.lead-dot { fill: #bebebe; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.pp-card { box-sizing: border-box; padding: calc(15 * var(--u)) calc(11 * var(--u)) 0; border: .7px solid #ebebeb;
  background: linear-gradient(135deg, rgba(242,242,242,.62), rgba(225,225,225,.62)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pp-card img { display: block; height: auto; }
.pp-card p { position: absolute; left: calc(11 * var(--u)); top: calc(35 * var(--u)); margin: 0; font: 400 calc(10.6 * var(--u)) / 1.28 var(--sans); color: #494949; }
.pp__stages { padding: 0 calc(23 * var(--u)) 0 calc(24 * var(--u)); }
.pp__stages .tile { display: block; border-radius: 0; }

.pp .lead { transition: stroke-dashoffset .75s cubic-bezier(.45,0,.2,1) calc(var(--i) * .3s + .35s); }
.pp .lead-dot { transition: transform .35s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .3s + .2s); }
.pp-card { opacity: 0; transform: translateY(calc(8 * var(--u))) scale(.98); transition: opacity .6s ease calc(var(--i) * .3s + .95s), transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .3s + .95s); }
.pp.is-in .lead { stroke-dashoffset: 0; }
.pp.is-in .lead-dot { transform: scale(1); }
.pp.is-in .pp-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pp .lead, .pp .lead-dot, .pp-card { transition: none !important; } }

/* ================= 10 plants carousel ================= */
.pc-intro { padding: calc(27 * var(--u)) calc(24 * var(--u)) 0; height: calc(194 * var(--u)); box-sizing: border-box; }
.pc-intro p { margin-top: calc(27 * var(--u)); }
.row--full:has(.pc), .row--full:has(.pp) { flex-direction: column; gap: 0; }
.pc { position: relative; width: 100%; }
.pc__track { position: relative; height: calc(730 * var(--u)); overflow: hidden; }
.pc__slide { position: absolute; padding: 0; border: 0; margin: 0; cursor: pointer; background: var(--bg, #e4e3df); overflow: hidden;
  transition: left .75s cubic-bezier(.65,0,.25,1), top .75s cubic-bezier(.65,0,.25,1), width .75s cubic-bezier(.65,0,.25,1), height .75s cubic-bezier(.65,0,.25,1), background-color .75s ease, opacity .6s ease; }
.pc__slide.no-anim { transition: none; }
.pc__slide video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pc__ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font: 400 calc(14 * var(--u)) / 1 var(--mono); letter-spacing: .06em; color: rgba(31,36,33,.45); }
.pc__slide.is-center::after { content: "Click to enlarge"; position: absolute; left: 50%; bottom: calc(18 * var(--u)); transform: translate(-50%, 6px); opacity: 0;
  font: 400 12px / 1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #1f2421; background: rgba(255,253,247,.85); padding: 7px 10px; border-radius: 20px; transition: opacity .3s ease, transform .3s ease; }
.pc__slide.is-center:hover::after { opacity: 1; transform: translate(-50%, 0); }
.pc__slide:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.pc-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(28,20,17,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .45s ease, backdrop-filter .45s ease; }
.pc-lightbox[hidden] { display: none; }
.pc-lightbox.is-open { background: rgba(28,20,17,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pc-lightbox__box { height: min(82vh, 1000px); aspect-ratio: 702 / 1280; max-width: 92vw; background: #cbcbcb; position: relative; overflow: hidden; border-radius: 6px; transform-origin: 0 0; }
.pc-lightbox__box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-lightbox__box .pc__ph { font-size: 16px; }
.pc-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,253,247,.6); background: transparent; color: var(--cream); font: 300 26px / 1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .3s ease .2s; }
.pc-lightbox.is-open .pc-lightbox__close { opacity: 1; }
body.no-scroll { overflow: hidden; }

/* ================= Interface 02 storyboard callouts ================= */
.sb .sb__lines .lead { stroke: #fff; stroke-width: 1; transition: stroke-dashoffset .5s cubic-bezier(.45,0,.2,1); }
.sb .sb__lines .lead-dot { fill: #fff; transition: transform .25s ease; }
.sb .sb__lines g.is-on .lead { stroke-dashoffset: 0; transition-delay: .1s; }
.sb .sb__lines g.is-on .lead-dot { transform: scale(1); }
.sb-card { position: absolute; box-sizing: border-box; padding: calc(13 * var(--u)) calc(16 * var(--u)); background: #060606; border: 1px solid rgba(255,255,255,.5);
  opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity .3s ease, transform .4s ease; pointer-events: none; }
.sb-card.is-on { opacity: 1; transform: none; transition: opacity .45s ease .5s, transform .6s cubic-bezier(.2,.7,.2,1) .5s; }
.sb-card__t { margin: 0; font: 400 calc(19 * var(--u)) / calc(21 * var(--u)) var(--serif); letter-spacing: -0.01em; color: #fff; }
.sb-card__d { margin: calc(5 * var(--u)) 0 0; font: 400 calc(14 * var(--u)) / calc(20 * var(--u)) var(--sans); color: rgba(255,255,255,.7); }

@media (max-width: 760px) {
  .pn-head { flex-direction: column; padding: 24px 12px 8px; min-height: 0; }
  .pn-head__l { width: 100%; padding-top: 0; }
  .pn-head__title img { width: 92% !important; }
  .pn-head__body { width: 100%; margin: 14px 0 0; padding: 0 0 12px; }
  .pp__intro p, .pc-intro p { font-size: 13px; }
  .pp__intro { width: 90%; }
  .pp__intro p { width: 100%; }
  .pp-card, .pp__lines, .sb-card, .sb__lines { display: none; }
  .pc__track { height: calc(1560 * var(--u)); }
  .pc-intro { height: auto; padding-bottom: 20px; }
}
@media (max-width: 760px) {
  .pp { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; padding: 24px 12px; }
  .pp > * { position: static; }
  .pp__intro { width: 100%; align-self: flex-start; margin-bottom: 20px; }
  .pp__video { width: 72% !important; height: auto !important; aspect-ratio: 393 / 648; }
  .pp__stages { padding: 0 12px; }
}
@media (max-width: 760px) {
  .pn-head__label img { width: 112px !important; }
  .pp__intro h3 img { width: 170px !important; }
  .pc-intro h3 img { width: 82% !important; }
  .pn-cap { height: auto; padding: 4px 12px 0; }
  .pn-cap img { width: auto !important; max-width: 82%; height: 20px; }
}
.pc__slide video { background: #ececec; }
.pc-lightbox__box { background: #ececec; }
.pc-lightbox__name { position: absolute; left: 0; right: 0; bottom: -34px; margin: 0; text-align: center; font: italic 400 20px / 1 var(--serif); color: var(--cream); }
.pc-lightbox__box { overflow: visible; }
.pc-lightbox__box video { border-radius: 6px; }
/* show the whole screen recording inside each card (no cropped header) */
.pc__slide video { object-fit: contain; background: #eee; }
.pc__slide { --bg: #eee !important; background: #eee; }
.pc__slide[data-d="-2"] video, .pc__slide[data-d="2"] video { opacity: .55; transition: opacity .6s ease; }

/* carousel controls — Figma buttons + dot chain */
.pc__btn { position: absolute; z-index: 20; top: calc(335.5 * var(--u)); width: calc(57 * var(--u)); min-width: 40px; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .25s ease; }
.pc__btn--prev { left: calc(85 * var(--u)); }
.pc__btn--next { right: calc(73 * var(--u)); }
.pc__btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pc__bg { fill: rgba(255,253,247,.55); stroke: #4a4a4a; stroke-width: 1; transition: fill .3s ease, stroke .3s ease; }
.pc__arrow { fill: #4a4a4a; transition: fill .3s ease, transform .3s ease; }
.pc__btn:hover .pc__bg, .pc__btn:focus-visible .pc__bg { fill: var(--brown); stroke: var(--brown); }
.pc__btn:hover .pc__arrow, .pc__btn:focus-visible .pc__arrow { fill: var(--pink); }
.pc__btn:active { transform: scale(.94); }
.pc__btn:focus-visible { outline: none; }
.pc__dots { position: relative; width: calc(163 * var(--u)); min-width: 130px; margin: calc(20.5 * var(--u)) auto 0; }
.pc__chain { display: block; width: 100%; height: auto; overflow: visible; }
.pc__chain .o { fill: #d8dad2; }
.pc__chain .i { fill: var(--cream); }
.pc__cur { fill: #73776f; transition: transform .6s cubic-bezier(.65,0,.25,1); }
.pc__dot { position: absolute; top: -8px; bottom: -8px; padding: 0; border: 0; background: none; cursor: pointer; }
.pc__dot:hover + .pc__dot, .pc__dot:focus-visible { outline: none; }
/* cards are exactly the video's shape: no grey frame */
.pc__slide, .pc__slide video { background: transparent !important; }
.pc__slide video { object-fit: cover; }
.pc-lightbox__box { background: transparent; }
/* lightbox: room under the video for the name + timeline */
.pc-lightbox__box { height: min(76vh, 960px); margin-bottom: 70px; }
.pc-lightbox__name { bottom: auto; top: -38px; }
.pc-ctl { position: absolute; left: 0; right: 0; bottom: -52px; display: flex; align-items: center; gap: 14px; color: var(--cream); }
.pc-ctl__play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,253,247,.6); background: transparent; color: var(--cream); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.pc-ctl__play:hover, .pc-ctl__play:focus-visible { background: var(--pink); border-color: var(--pink); color: var(--brown); outline: none; }
.pc-ctl__play svg { width: 12px; height: 12px; fill: currentColor; }
.pc-ctl .i-play { display: none; }
.pc-ctl.is-paused .i-play { display: inline; }
.pc-ctl.is-paused .i-pause { display: none; }
.pc-ctl__track { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; outline: none; }
.pc-ctl__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255,253,247,.28); border-radius: 2px; }
.pc-ctl__fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--pink); border-radius: 2px; }
.pc-ctl__knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pink); transition: transform .2s ease; }
.pc-ctl__track:hover .pc-ctl__knob, .pc-ctl.is-drag .pc-ctl__knob, .pc-ctl__track:focus-visible .pc-ctl__knob { transform: scale(1.35); }
.pc-ctl__time { flex: none; font: 400 12px / 1 var(--mono); letter-spacing: .04em; color: rgba(255,253,247,.75); min-width: 84px; text-align: right; }
/* soft, light shadow under each plant video */
.pc__track { overflow: hidden; overflow: clip visible; }
.pc__slide { box-shadow: 0 18px 40px -14px rgba(31, 36, 33, .10), 0 4px 12px -6px rgba(31, 36, 33, .06); }
.pc__slide[data-d="-2"], .pc__slide[data-d="2"], .pc__slide[data-d="-3"], .pc__slide[data-d="3"] { box-shadow: 0 12px 28px -14px rgba(31, 36, 33, .06); }
.pc-lightbox__box video { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .25); }
/* lightbox close — Figma "x" button: white on the dark veil, pink fill + brown x on hover */
.pc-lightbox__close { width: 57px; height: 57px; border: 0; border-radius: 0; padding: 0; background: none; top: 22px; right: 24px; transition: opacity .3s ease .2s, transform .25s ease; }
.pc-lightbox__close svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-lightbox__close .pc__bg { fill: transparent; stroke: #fff; stroke-width: 1; }
.pc-lightbox__close .pc__arrow { fill: #fff; }
.pc-lightbox__close:hover .pc__bg, .pc-lightbox__close:focus-visible .pc__bg { fill: var(--pink); stroke: var(--pink); }
.pc-lightbox__close:hover .pc__arrow, .pc-lightbox__close:focus-visible .pc__arrow { fill: var(--brown); }
.pc-lightbox__close:active { transform: scale(.94); }
.pc-lightbox__close:focus-visible { outline: none; }
@media (max-width: 760px) { .pc-lightbox__close { width: 44px; height: 44px; top: 14px; right: 14px; } }

/* Interface 02 heading on the black frame */
.sb-head { position: absolute; z-index: 2; color: #fff; }
.sb-head h3 { margin: 0; }
.sb-head img { display: block; height: auto; }
.sb-head p { margin: calc(20 * var(--u)) 0 0; width: calc(384 * var(--u)); font: 400 calc(16 * var(--u)) / 1.28 var(--sans); letter-spacing: -0.02em; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .sb-head { opacity: 0; transform: translateY(10px); transition: opacity .9s ease .3s, transform 1s cubic-bezier(.2,.7,.2,1) .3s; }
  .reveal.is-in .sb-head { opacity: 1; transform: none; }
}
@media (max-width: 760px) { .sb-head { width: 70% !important; } .sb-head img { width: 150px !important; } .sb-head p { font-size: 11px; width: 100%; margin-top: 6px; } }

/* "Email copied" bubble above the footer email link */
.footer__col a[href^="mailto:"] { position: relative; }
.copied { position: absolute; left: 0; bottom: calc(100% + 6px); padding: 7px 12px 6px; border-radius: 96px; background: #1e1e1e; color: #fffdf7; font: 400 14px / 1.1 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.copied.is-on { opacity: 1; transform: none; }
.footer__col a .copied:hover { text-decoration: none; }
/* videos over slice-built project pages */
.project__stack { position: relative; }
.pv { position: absolute; overflow: hidden; border-radius: calc(8 * var(--u)); pointer-events: none; }
.pv video { position: absolute; object-fit: cover; display: block; }

/* Phones: temporary "coming soon" screen until the mobile layout is designed */
.gate-screen { display: none; }
html.gate, html.gate body { height: 100%; overflow: hidden; }
html.gate body > *:not(.gate-screen) { display: none !important; }
html.gate .gate-screen { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 100vh; min-height: 100dvh; padding: 32px 24px; box-sizing: border-box; background: var(--cream); color: var(--brown); }
.gate-screen__name { width: 170px; height: auto; margin-bottom: 18px; }
.gate-screen__title { margin: 0; font: 400 36px / 1.02 var(--serif); letter-spacing: -0.01em; }
.gate-screen__title em { font-style: italic; }
.gate-screen__text { margin: 0; font: 400 15px / 1.4 var(--sans); color: rgba(77,40,32,.8); max-width: 300px; }
.gate-screen__mail { align-self: flex-start; margin-top: 8px; padding: 9px 14px 8px; border: 1px solid var(--brown); border-radius: 96px; font: 400 13px / 1 var(--mono); letter-spacing: .02em; color: var(--brown); text-decoration: none; }

/* ================= Phone layout (Figma "Home — Mobile", 390 frame) =================
   1 Figma px = 100vw / 390 */
.me__m { display: none; }
@media (max-width: 760px) {
  :root { --m: calc(100vw / 390); }

  /* menu: home blob on the left, all four pills in one pink row on the right */
  .nav { padding: calc(12 * var(--m)) calc(12.3 * var(--m)) 0 calc(8 * var(--m)); align-items: flex-start; justify-content: flex-start; font-size: calc(9.7 * var(--m)); letter-spacing: .04em; }
  .nav__left { flex: 1; align-items: flex-start; }
  .nav__home { width: calc(55.4 * var(--m)); height: calc(48.5 * var(--m)); background-size: 100% 100%; margin-right: auto; }
  .nav .pill, .nav .talk { height: calc(21.9 * var(--m)); margin-top: calc(13.3 * var(--m)); padding: 1px 0 0; }
  .nav .pill { width: calc(49.5 * var(--m)); }
  .nav .pill + .pill { margin-left: calc(-2.8 * var(--m)); }
  .nav .pill--md { width: calc(85 * var(--m)); }
  .nav .talk { display: inline-flex; width: calc(80.9 * var(--m)); margin-left: calc(-2.7 * var(--m)); }
  .nav .talk::before { opacity: 0; }
  .nav .talk::after { opacity: 1; background-image: url(../assets/svg/pill-md.svg); }
  .nav__left, .nav .talk { transform: none !important; }

  /* hero */
  .hero { height: calc(785 * var(--m)); padding: 0; }
  .hero__card { inset: auto; left: 0; right: 0; top: calc(12 * var(--m)); height: calc(776 * var(--m)); border-radius: calc(6.5 * var(--m)); background: linear-gradient(180deg, #fffdf7 0%, #ffeaf2 38.9%, #ffc3de 72.9%, #ffb0b5 100%); }
  .hero__its, .hero__name, .hero__time { margin-top: 0; }
  .hero__its { left: calc(129.4 * var(--m)); top: calc(210 * var(--m)); width: calc(125.2 * var(--m)); }
  .hero__name { left: calc(3 * var(--m)); top: calc(246.1 * var(--m)); width: calc(384 * var(--m)); height: calc(108.3 * var(--m)); }
  .hero__time { left: calc(101.6 * var(--m)); top: calc(377.3 * var(--m)); width: calc(180.6 * var(--m)); }
  .hero__meta { position: static; display: block; padding: 0; }
  .hero__portfolio { position: absolute; left: 0; right: 0; top: calc(98 * var(--m)); text-align: center; font-size: calc(23.6 * var(--m)); color: var(--brown); }
  .hero__portfolio .serif-i { font-size: calc(26.8 * var(--m)); }
  .hero__intro { position: absolute; left: calc(37 * var(--m)); top: calc(538 * var(--m)); width: calc(316 * var(--m)); margin: 0; text-align: center; font-size: calc(20 * var(--m)); line-height: 1.3; letter-spacing: -0.01em; color: var(--brown); }
  .hero__intro br { display: none; }

  /* "I'm Yuval Shalmon…" statement, live text instead of the desktop lettering */
  .me { padding: calc(37 * var(--m)) calc(12 * var(--m)) calc(40 * var(--m)); gap: calc(30 * var(--m)); }
  .dot { width: calc(10 * var(--m)); height: calc(10 * var(--m)); }
  .me__text { max-width: none; width: calc(276 * var(--m)); line-height: 0; }
  .me__text > img { display: none; }
  .me__m { display: block; font: 400 calc(40.9 * var(--m)) / calc(38.6 * var(--m)) var(--serif); letter-spacing: -0.02em; color: var(--brown); text-align: center; }
}

/* ---------- Phone menu: "menu" pill opens a simple panel of pink pills ---------- */
.menu-btn, .mnav { display: none; }
@media (max-width: 760px) {
  .nav .pill, .nav .talk { display: none; }
  .nav { align-items: flex-start; }
  .menu-btn { display: inline-grid; place-items: center; margin-top: calc(10 * var(--m)); width: calc(68.5 * var(--m)); height: calc(29 * var(--m)); padding: 1px 0 0; border: 0; cursor: pointer;
    background: url(../assets/svg/pill-md.svg) center / 100% 100% no-repeat; color: var(--brown);
    font: 400 calc(12.9 * var(--m)) / 1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  .menu-btn > span { grid-area: 1 / 1; transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
  .menu-btn__close { opacity: 0; transform: translateY(6px); }
  .menu-open .menu-btn__open { opacity: 0; transform: translateY(-6px); }
  .menu-open .menu-btn__close { opacity: 1; transform: none; }
  .menu-btn:active { transform: scale(.94); }

  .mnav { display: flex; position: fixed; inset: 0; z-index: 19; flex-direction: column; justify-content: center; align-items: center; gap: calc(36 * var(--m));
    padding: calc(90 * var(--m)) calc(24 * var(--m)) calc(40 * var(--m)); background: linear-gradient(180deg, #fffdf7 0%, #ffeaf2 45%, #ffc3de 80%, #ffb0b5 100%);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
  .mnav[hidden] { display: none; }
  .menu-open .mnav { opacity: 1; visibility: visible; transition: opacity .35s ease; }
  .mnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
  .mnav__list li + li { margin-top: calc(-4 * var(--m)); }
  .mnav__pill { display: grid; place-items: center; width: calc(250 * var(--m)); height: calc(66 * var(--m)); padding-top: 2px;
    background: url(../assets/svg/pill-md.svg) center / 100% 100% no-repeat; color: var(--brown); text-decoration: none;
    font: 400 calc(22 * var(--m)) / 1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
    opacity: 0; transform: translateY(calc(18 * var(--m))) rotate(var(--r, -2deg)); transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
  .mnav__list li:nth-child(even) .mnav__pill { --r: 2deg; }
  .mnav__pill[aria-current="page"] { background-image: url(../assets/svg/pill-md.svg); color: var(--cream); filter: brightness(0) saturate(100%); }
  .mnav__pill[aria-current="page"] { filter: none; background: var(--brown); border-radius: 999px; }
  .mnav__pill--talk { background-image: url(../assets/svg/pill-talk.svg); }
  .menu-open .mnav__pill { opacity: 1; transform: none; }
  .menu-open .mnav__list li:nth-child(1) .mnav__pill { transition-delay: .05s; }
  .menu-open .mnav__list li:nth-child(2) .mnav__pill { transition-delay: .1s; }
  .menu-open .mnav__list li:nth-child(3) .mnav__pill { transition-delay: .15s; }
  .menu-open .mnav__list li:nth-child(4) .mnav__pill { transition-delay: .2s; }
  .menu-open .mnav__list li:nth-child(5) .mnav__pill { transition-delay: .25s; }
  .mnav__pill:active { transform: scale(.95); }
  .mnav__foot { display: flex; gap: calc(22 * var(--m)); opacity: 0; transition: opacity .4s ease .3s; }
  .menu-open .mnav__foot { opacity: 1; }
  .mnav__foot a { font: 400 calc(14 * var(--m)) / 1 var(--sans); color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .mnav__pill { transform: none; } }
@media (max-width: 760px) {
  .mnav__pill[aria-current="page"] { background: var(--brown); border-radius: 0; color: var(--pink);
    -webkit-mask: url(../assets/svg/pill-md.svg) center / 100% 100% no-repeat; mask: url(../assets/svg/pill-md.svg) center / 100% 100% no-repeat; }
}

/* Phone: project cards from the Figma "דוגמה לחלונית" card (366 wide, 341 tall) */
@media (max-width: 760px) {
  .works__grid { padding: calc(12 * var(--m)) calc(12 * var(--m)) 0; gap: calc(12 * var(--m)); }
  .works__col { gap: calc(12 * var(--m)); }
  .card, .card__img { border-radius: calc(4.3 * var(--m)); }
  .card__info { height: calc(126 * var(--m)); min-height: 0; padding: 0; }
  .card__title { position: absolute; left: calc(8 * var(--m)); top: calc(14 * var(--m)); padding: 0; margin: 0; line-height: 0; }
  .card__title img { height: calc(22.5 * var(--m)) !important; width: auto; }
  .card__sub { position: absolute; left: calc(8 * var(--m)); top: calc(47 * var(--m)); margin: 0; font-size: calc(12 * var(--m)); }
  .card__year { position: absolute; right: calc(10 * var(--m)); top: calc(27 * var(--m)); font-size: calc(8.6 * var(--m)); }
  .card .tags { position: absolute; left: calc(8 * var(--m)); right: auto; top: calc(80 * var(--m)); bottom: auto; margin: 0; gap: calc(2.5 * var(--m)); align-items: flex-start; }
  .tags__row { gap: calc(2.5 * var(--m)); flex-wrap: nowrap; }
  .card .tag { height: calc(17.2 * var(--m)); padding: 0 calc(4.2 * var(--m)); border-width: max(.5px, calc(.42 * var(--m))); font-size: calc(8.4 * var(--m)); letter-spacing: .04em; }
}

@media (max-width: 760px) { .works__title { left: calc(12 * var(--m)); } }
/* Phone cards — updated Figma sample (366 x 387, no year, bigger tags) */
@media (max-width: 760px) {
  .card__info { height: calc(172 * var(--m)); }
  .card__title { left: calc(9 * var(--m)); top: calc(19 * var(--m)); }
  .card__sub { left: calc(9 * var(--m)); top: calc(58 * var(--m)); font-size: calc(14 * var(--m)); }
  .card__year { display: none; }
  .card .tags { left: calc(8 * var(--m)); top: calc(108 * var(--m)); gap: calc(3.7 * var(--m)); }
  .tags__row { gap: calc(3.7 * var(--m)); }
  .card .tag { height: calc(25.2 * var(--m)); padding: 0 calc(6.1 * var(--m)); border-width: max(.5px, calc(.61 * var(--m))); font-size: calc(12.24 * var(--m)); }
}
@media (max-width: 760px) {
  /* every card uses the sample's image shape (366 x 215) */
  .card__img { aspect-ratio: 366 / 215; }
  .card__img > img { width: 100%; height: 100%; object-fit: cover; }
  .card__img .card__video { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .card .tags { right: calc(8 * var(--m)); flex-direction: row; flex-wrap: wrap; }
  .tags__row { display: contents; }
}
@media (max-width: 760px) {
  .card[href*="post-nature"] .card__video { object-position: 50% 30%; }
  .card[href*="panorays"] .card__img > img { object-position: 50% 25%; }
}
@media (max-width: 760px) {
  .card__sub { font-size: calc(16 * var(--m)); }
  .card[href*="panorays"] .card__img > img { object-position: 50% 8%; }
}
.case--cut .stack.cut { position: relative; line-height: 0; }
.case--cut .stack.cut > .tile { display: block; width: 100%; height: auto; border-radius: 0; }
@media (max-width: 760px) { .pn-head { min-height: 0 !important; } }

/* Phone menu v2: a small dropdown under "menu" (outline cream pills, right aligned) */
@media (max-width: 760px) {
  .nav__home { width: calc(66 * var(--m)); height: calc(58 * var(--m)); font-size: calc(11.5 * var(--m)); }
  .menu-btn { width: calc(84 * var(--m)); height: calc(36 * var(--m)); margin-top: calc(11 * var(--m)); font-size: calc(15 * var(--m)); }
  .mnav { inset: auto; top: calc(58 * var(--m)); right: calc(12.3 * var(--m)); left: auto; bottom: auto; padding: 0; background: none;
    justify-content: flex-start; align-items: flex-end; gap: 0; z-index: 21; }
  .mnav__list { align-items: flex-end; gap: calc(9 * var(--m)); }
  .mnav__list li + li { margin-top: 0; }
  .mnav__list li:first-child { display: none; }            /* "home" already has its own button */
  .mnav__pill { width: auto; height: calc(41 * var(--m)); padding: 2px calc(18 * var(--m)) 0; background: url(../assets/svg/pill-outline-cream.svg) center / 100% 100% no-repeat;
    font-size: calc(17 * var(--m)); transform: translateY(calc(-10 * var(--m))); --r: 0deg; filter: drop-shadow(0 6px 14px rgba(77,40,32,.08)); }
  .mnav__pill--talk { background-image: url(../assets/svg/pill-outline-cream.svg); }
  .mnav__pill[aria-current="page"] { -webkit-mask: none; mask: none; background: url(../assets/svg/pill-md.svg) center / 100% 100% no-repeat; color: var(--brown); }
  .mnav__foot { display: none; }
  html.menu-open, html.menu-open body { overflow: auto; }
  .menu-open .mnav__list li:nth-child(2) .mnav__pill { transition-delay: .02s; }
  .menu-open .mnav__list li:nth-child(3) .mnav__pill { transition-delay: .07s; }
  .menu-open .mnav__list li:nth-child(4) .mnav__pill { transition-delay: .12s; }
  .menu-open .mnav__list li:nth-child(5) .mnav__pill { transition-delay: .17s; }
}
/* card titles are live text now (same size on every card) */
.card__title { padding-top: 0; margin: 0; position: absolute; left: 15px; top: 17px; font: 600 28px / 1 var(--serif); letter-spacing: -0.01em; color: var(--brown); text-transform: none; }
@media (max-width: 760px) {
  .card__title { left: calc(9 * var(--m)); top: calc(18 * var(--m)); font-size: calc(30 * var(--m)); line-height: 1; }
}