/* ============================================
   ADI COHEN — Portfolio · v2 "Creative Minimal Luxury"
   Palette: warm white, light beige, soft grey, deep black
   ============================================ */

:root {
  --white: #fbfaf7;
  --paper: #f4f2ee;
  --beige: #e8e0d4;
  --sand: #d2c6b5;
  --grey: #e7e5e1;
  --grey-2: #d7d4ce;
  --taupe: #8c8173;
  --ink: #2a2724;
  --black: #121110;

  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  --gutter: clamp(20px, 5vw, 80px);
  --section: clamp(110px, 15vw, 220px);
  --nav-h: 84px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
}

::selection {
  background: var(--black);
  color: var(--paper);
}

:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 4px;
}

section[id] {
  scroll-margin-top: 40px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--black);
  color: var(--paper);
  font-size: 12px;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.placeholder-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px dashed var(--taupe);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  vertical-align: 2px;
}

.link-arrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.6s var(--ease);
}

.link-arrow span {
  transition: transform 0.6s var(--ease);
}

.link-arrow:hover {
  background-size: 35% 1px;
}

.link-arrow:hover span {
  transform: translateX(6px);
}

/* ---------- Page curtain (page transitions) ---------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--black);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 1s var(--ease-in-out);
  /* safety: never stay covered if JS fails */
  animation: curtain-safety 0s linear 4s forwards;
}

.no-js .curtain,
.is-loaded .curtain {
  transform: translateY(-100%);
}

@keyframes curtain-safety {
  to { visibility: hidden; }
}

/* ---------- Custom cursor (fine pointers only) ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 240;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: var(--black);
  color: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(0);
  transition: transform 0.5s var(--ease);
}

.cursor__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.has-cursor .cursor {
  display: flex;
}

.cursor.is-active {
  transform: translate3d(var(--cx), var(--cy), 0) scale(1);
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px var(--gutter);
  transition: padding 0.5s var(--ease), background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.6s var(--ease);
}

.nav.is-scrolled {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: rgba(244, 242, 238, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(18, 17, 16, 0.06);
}

.nav.is-hidden {
  transform: translateY(-100%);
}

.nav__logo {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.34em;
}

.nav__links {
  display: flex;
  gap: 44px;
}

.nav__links a {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta {
  justify-self: end;
  padding: 9px 22px;
  border: 1px solid var(--black);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.nav__cta:hover {
  background: var(--black);
  color: var(--paper);
}

.nav__toggle {
  display: none;
  justify-self: end;
  width: 36px;
  height: 36px;
  position: relative;
}

.nav__toggle span {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: var(--black);
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}

.nav__toggle span:first-child { top: 14px; }
.nav__toggle span:last-child { top: 22px; }
.nav.is-open .nav__toggle span:first-child { top: 18px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { top: 18px; transform: rotate(-45deg); }

/* ---------- Split text (chars rise from a mask) ---------- */

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.02em;
}

.char {
  display: inline-block;
}

.js [data-split] .char {
  transform: translateY(108%);
  transition: transform 1.4s var(--ease);
  transition-delay: calc(var(--i) * 55ms + 250ms);
}

.is-loaded [data-split] .char {
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  --title: clamp(64px, 15vw, 270px);
  --ped-w: clamp(220px, 23vw, 390px);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 7vh) var(--gutter) 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f6f5f2 0%, #eeece8 100%);
}

.hero__silk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.silk path {
  fill: none;
  stroke-linecap: round;
}

.silk--a path {
  stroke: #ffffff;
  stroke-width: 70;
  opacity: 0.55;
}

.silk--b path {
  stroke: #e3e0da;
  stroke-width: 1.5;
}

.js .silk {
  animation: silk-drift 22s ease-in-out infinite alternate;
}

.js .silk--b {
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

@keyframes silk-drift {
  from { transform: translate3d(-2%, 0, 0); }
  to   { transform: translate3d(2%, 2%, 0); }
}

.hero__head {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  will-change: transform;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--title);
  line-height: 0.86;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--black);
}

.hero__tag {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  justify-content: center;
  margin-top: calc(var(--title) * -0.3);
  pointer-events: none;
}

.hero__object {
  position: relative;
  width: var(--ped-w);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 3D card stack */
.stack-scene {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(var(--ped-w) * 0.78);
  margin-bottom: calc(var(--ped-w) * -0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.stack-float {
  transform-style: preserve-3d;
  animation: float 6.5s ease-in-out infinite;
}

.stack {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: calc(var(--ped-w) * 0.92);
  aspect-ratio: 1.6;
  transform-style: preserve-3d;
  transform: rotateX(calc(56deg + var(--rx))) rotateZ(calc(-32deg + var(--ry)));
}

.card3d {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(18, 17, 16, 0.04);
}

.card3d--black {
  background: linear-gradient(135deg, #24211e 0%, #121110 70%);
  transform: translate3d(9%, 9%, 0) rotateZ(11deg);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 7%;
}

.card3d--black span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: calc(var(--ped-w) * 0.07);
  color: var(--sand);
  line-height: 1;
}

.card3d--beige {
  background: linear-gradient(135deg, #efe7db 0%, #ddd2c2 100%);
  transform: translate3d(4%, 4%, 16px) rotateZ(4deg);
}

.card3d--white {
  background: linear-gradient(135deg, #ffffff 0%, #f3f0eb 100%);
  transform: translate3d(0, 0, 32px);
  padding: 8% 9%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 0 #fff inset, 0 30px 40px -24px rgba(18, 17, 16, 0.25);
}

.card3d__mono {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: calc(var(--ped-w) * 0.12);
  line-height: 1;
}

.card3d__line {
  display: block;
  width: 26%;
  height: 1px;
  background: var(--sand);
  margin-top: auto;
  margin-bottom: 6%;
}

.card3d__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--ped-w) * 0.03);
  letter-spacing: 0.3em;
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

/* Pedestal */
.pedestal {
  position: relative;
  width: 100%;
}

.pedestal__top {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f6f4f0 55%, #e7e3dd 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 8px rgba(18, 17, 16, 0.05);
}

.pedestal__shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 28%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18, 17, 16, 0.22) 0%, rgba(18, 17, 16, 0) 70%);
  animation: shadow 6.5s ease-in-out infinite;
}

@keyframes shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.86); opacity: 0.7; }
}

.pedestal__body {
  width: 100%;
  height: clamp(160px, 30vh, 340px);
  margin-top: calc(var(--ped-w) * -0.125);
  background: linear-gradient(90deg, #e3dfd9 0%, #f4f2ee 28%, #fbfaf8 52%, #f1eee9 76%, #dedad3 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}

.hero__foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 40px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
}

.hero__subtitle {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 2.1;
  color: var(--black);
}

.hero__subtitle span {
  display: block;
}

.hero__scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 26px;
  border: 1px solid var(--black);
  border-radius: 99px;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.hero__scroll svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  animation: nudge 2.4s var(--ease) infinite;
}

.hero__scroll:hover {
  background: var(--black);
  color: var(--paper);
}

@keyframes nudge {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY(2px); }
}

.hero__social {
  justify-self: end;
  display: flex;
  gap: 28px;
}

.hero__social a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
}

.hero__social a:hover {
  color: var(--taupe);
}

/* hero entrance */
.js .hero__tag,
.js .hero__foot {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--ease) 1.1s, transform 1.2s var(--ease) 1.1s;
}

.js .pedestal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.6s var(--ease) 0.5s, transform 1.6s var(--ease) 0.5s;
}

.js .stack-scene {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 1.6s var(--ease) 0.9s, transform 1.8s var(--ease) 0.9s;
}

.is-loaded .hero__tag,
.is-loaded .hero__foot,
.is-loaded .pedestal,
.is-loaded .stack-scene {
  opacity: 1;
  transform: none;
}

/* ---------- Section heading ---------- */

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 28px;
  padding-bottom: 28px;
  margin-bottom: clamp(56px, 8vw, 120px);
  border-bottom: 1px solid var(--grey-2);
}

.section-head__num {
  align-self: start;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--taupe);
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.section-head__title em {
  font-size: 1.08em;
}

.section-head__aside {
  text-align: end;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ---------- Reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Selected Work grid ---------- */

.work {
  padding: var(--section) var(--gutter) 0;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(72px, 10vw, 160px);
  align-items: start;
}

.w-1 { grid-column: 1 / 8; }
.w-2 { grid-column: 9 / 13; margin-top: clamp(80px, 16vw, 280px); }
.w-3 { grid-column: 2 / 6; }
.w-4 { grid-column: 7 / 13; margin-top: clamp(60px, 10vw, 180px); }
.w-5 { grid-column: 1 / 13; }
.w-cta { grid-column: 1 / 7; align-self: end; }
.w-6 { grid-column: 8 / 12; }

.card {
  transition: opacity 0.6s var(--ease);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--beige);
}

.card--wide .card__media { aspect-ratio: 16 / 10; }
.card--tall .card__media { aspect-ratio: 4 / 5; }
.card--feature .card__media { aspect-ratio: 21 / 9; }

.card__clip {
  position: absolute;
  inset: 0;
}

.card__clip img,
.card__clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}

.js .card.reveal .card__clip {
  clip-path: inset(16% 0 0 0);
  transform: scale(1.12);
  transition: clip-path 1.5s var(--ease), transform 1.8s var(--ease);
}

.js .card.reveal.is-visible .card__clip {
  clip-path: inset(0 0 0 0);
  transform: none;
}

.card__link:hover .card__clip img,
.card__link:hover .card__clip video {
  transform: scale(1.045);
  filter: brightness(0.97);
}

.card__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding-top: 20px;
}

.card__num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--taupe);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.card__title span {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.7s var(--ease);
}

.card__link:hover .card__title span {
  background-size: 100% 1px;
}

.card__cat {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
}

/* dim the other projects while one is hovered */
@media (hover: hover) {
  .work__grid:has(.card__link:hover) .card:not(:hover) {
    opacity: 0.45;
  }
}

.work__cta {
  padding-bottom: 40px;
}

.work__cta-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
}

/* ---------- In Focus carousel ---------- */

.focus {
  --slide-w: clamp(220px, min(28vw, 44vh), 430px);
  --side-x: 33vw;
  --pill-w: 34vw;
  position: relative;
  padding: var(--section) 0 clamp(90px, 10vw, 150px);
  overflow: hidden;
}

.focus__stage {
  position: relative;
  height: calc(var(--slide-w) * 1.25 + 80px);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.focus__stage:focus-visible {
  outline-offset: -8px;
}

.focus__track {
  position: absolute;
  inset: 0;
}

.focus__slide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--slide-w);
  margin-left: calc(var(--slide-w) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--x, 0), 0, 0);
  transition: transform 1.1s var(--ease-in-out), opacity 0.9s var(--ease);
}

.focus__slide.is-active { --x: 0px; opacity: 1; pointer-events: auto; z-index: 2; }
.focus__slide.is-prev { --x: calc(var(--side-x) * -1); opacity: 1; pointer-events: auto; }
.focus__slide.is-next { --x: var(--side-x); opacity: 1; pointer-events: auto; }
.focus__slide.is-far-prev { --x: calc(var(--side-x) * -2); }
.focus__slide.is-far-next { --x: calc(var(--side-x) * 2); }

.focus__pill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pill-w);
  height: 62%;
  border-radius: 999px;
  background: var(--grey);
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0.7);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease-in-out);
}

.is-prev .focus__pill,
.is-next .focus__pill {
  opacity: 1;
}

.is-prev .focus__pill { transform: translate(calc(-50% - 5vw), -50%); }
.is-next .focus__pill { transform: translate(calc(-50% + 5vw), -50%); }

.focus__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  transform: scale(0.4);
  transition: transform 1.1s var(--ease-in-out), box-shadow 1.1s var(--ease);
}

.focus__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.is-active .focus__media {
  transform: scale(1);
  box-shadow: 0 50px 80px -40px rgba(18, 17, 16, 0.4);
}

.is-active .focus__media:hover img {
  transform: scale(1.04);
}

.focus__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.focus__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  transition: transform 0.5s var(--ease);
}

.focus__nav--prev { left: max(12px, calc(50% - var(--side-x) - var(--slide-w) * 0.2 - 112px)); }
.focus__nav--next { right: max(12px, calc(50% - var(--side-x) - var(--slide-w) * 0.2 - 112px)); }
.focus__nav--prev:hover svg { transform: translateX(-4px); }
.focus__nav--next:hover svg { transform: translateX(4px); }

.focus__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 32px;
  padding: clamp(40px, 5vw, 72px) var(--gutter) 0;
}

.focus__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.focus__num {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--taupe);
}

.focus__counter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 8px;
}

.focus__dot {
  display: flex;
  align-items: center;
  padding: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--taupe);
  transition: color 0.4s var(--ease);
}

.focus__dot::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-left: 0;
  background: var(--black);
  transition: width 0.9s var(--ease-in-out), margin 0.9s var(--ease-in-out);
}

.focus__dot:hover,
.focus__dot.is-active {
  color: var(--black);
}

.focus__dot.is-active::after {
  width: clamp(48px, 8vw, 120px);
  margin-left: 12px;
}

.focus__info {
  justify-self: end;
  text-align: end;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.focus__info.is-changing {
  opacity: 0;
  transform: translateY(10px);
}

.focus__info-cat {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.focus__info-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.1;
  margin: 6px 0 18px;
}

/* ---------- About ---------- */

.about {
  padding: var(--section) var(--gutter);
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}

.about__portrait {
  grid-column: 1 / 5;
}

.about__portrait-frame {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, transparent 49.8%, var(--sand) 50%, transparent 50.2%),
    var(--beige);
  text-align: center;
}

.about__portrait-frame span {
  padding: 10px 16px;
  background: var(--beige);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--taupe);
}

.about__portrait figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: var(--taupe);
}

.about__content {
  grid-column: 6 / 13;
}

.about__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.3vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.about__lead em {
  font-size: 1.1em;
}

.about__body {
  max-width: 50ch;
  margin-top: clamp(32px, 4vw, 56px);
  color: var(--ink);
}

.about__expertise {
  margin-top: clamp(56px, 7vw, 100px);
}

.about__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 20px;
}

.expertise {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--grey-2);
}

.expertise li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--grey-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  transition: transform 0.6s var(--ease);
}

.expertise li span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--taupe);
  transition: color 0.4s var(--ease);
}

.expertise li:hover {
  transform: translateX(8px);
}

.expertise li:hover span {
  color: var(--black);
}

/* ---------- Contact ---------- */

.contact {
  background: var(--black);
  color: var(--paper);
  padding: clamp(60px, 8vw, 110px) 0 var(--section);
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  border-bottom: 1px solid rgba(210, 198, 181, 0.18);
  padding-bottom: clamp(40px, 6vw, 80px);
  margin-bottom: clamp(80px, 10vw, 140px);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee__track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--paper);
}

.marquee__track em {
  color: var(--sand);
  font-size: 1.08em;
}

@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

.contact__inner {
  padding: 0 var(--gutter);
}

.contact .section-head {
  border-bottom-color: rgba(210, 198, 181, 0.22);
}

.contact .section-head__num {
  color: var(--sand);
}

.contact__body {
  text-align: center;
}

.contact__lead {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--sand);
  margin-bottom: 48px;
}

.contact__email {
  display: inline-block;
  position: relative;
  font-family: var(--font-display); /* the same sans as the headlines, not the italic serif */
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: clamp(32px, 6vw, 96px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.contact__email::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sand);
  transform: scaleX(0.15);
  transition: transform 0.9s var(--ease);
}

.contact__email:hover::after {
  transform: scaleX(1);
}

.contact__note {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}

.contact__social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 56px;
  margin-top: 72px;
}

.contact__social a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
  transition: color 0.4s var(--ease);
}

.contact__social a:hover {
  color: var(--white);
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 32px var(--gutter);
  background: var(--black);
  color: var(--taupe);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: 1px solid rgba(210, 198, 181, 0.14);
}

.footer a:hover {
  color: var(--paper);
}

/* ============================================
   PROJECT PAGE
   ============================================ */

.p-hero {
  padding: calc(var(--nav-h) + 6vh) var(--gutter) 0;
}

.p-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.p-hero__back {
  display: inline-flex;
  gap: 10px;
  transition: color 0.4s var(--ease);
}

.p-hero__back:hover {
  color: var(--taupe);
}

.p-hero__index {
  color: var(--taupe);
}

.p-hero__title {
  margin: clamp(40px, 7vh, 90px) 0 clamp(20px, 3vh, 36px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(54px, 11.5vw, 210px);
  line-height: 0.88;
  letter-spacing: -0.035em;
}

.p-hero__sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--grey-2);
}

.p-hero__cat {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.2;
}

.p-hero__scroll {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.p-hero__media {
  position: relative;
  margin: clamp(40px, 6vw, 80px) calc(var(--gutter) * -1) 0;
  height: clamp(360px, 88vh, 1000px);
  overflow: hidden;
  background: var(--beige);
}

.p-hero__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

.js .p-hero__media {
  clip-path: inset(10% 6% 0 6%);
  transition: clip-path 1.8s var(--ease) 0.4s;
}

.is-loaded .p-hero__media {
  clip-path: inset(0 0 0 0);
}

.js .p-hero__sub,
.js .p-hero__top {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.8s;
}

.is-loaded .p-hero__sub,
.is-loaded .p-hero__top {
  opacity: 1;
}

.p-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: 40px;
  padding: var(--section) var(--gutter);
}

.p-intro__label {
  grid-column: 1 / 4;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

.p-intro__text {
  grid-column: 4 / 10;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.p-intro__meta {
  grid-column: 10 / 13;
  border-top: 1px solid var(--grey-2);
}

.p-intro__meta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-2);
  font-size: 13px;
}

.p-intro__meta dt {
  color: var(--taupe);
}

.p-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(16px, 2.5vw, 40px);
  padding: 0 var(--gutter);
}

.g-item {
  margin: 0;
}

.g-item .g-media {
  position: relative;
  overflow: hidden;
  background: var(--beige);
}

.g-item img,
.g-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.g-full { grid-column: 1 / -1; }
.g-full .g-media { aspect-ratio: 16 / 9; }
.g-half { grid-column: span 6; }
.g-half .g-media { aspect-ratio: 4 / 5; }
.g-offset { grid-column: 4 / 12; margin: clamp(40px, 8vw, 120px) 0; }
.g-offset .g-media { aspect-ratio: 16 / 10; }

.g-item figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--taupe);
}

.js .g-item.reveal .g-media {
  clip-path: inset(12% 0 0 0);
  transition: clip-path 1.5s var(--ease);
}

.js .g-item.reveal.is-visible .g-media {
  clip-path: inset(0);
}

.g-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--black);
  color: var(--sand);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}

.g-video-placeholder i {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(210, 198, 181, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-video-placeholder i::after {
  content: "";
  margin-left: 4px;
  border-left: 13px solid var(--sand);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.p-next {
  margin-top: var(--section);
  border-top: 1px solid var(--grey-2);
}

.p-next__link {
  position: relative;
  display: block;
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  text-align: center;
  overflow: hidden;
}

.p-next__label {
  display: block;
  margin-bottom: 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

.p-next__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 9vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  transition: letter-spacing 0.9s var(--ease);
}

.p-next__cat {
  display: block;
  margin-top: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
}

.p-next__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 18vw, 280px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85) rotate(-4deg);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}

.p-next__link:hover .p-next__img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-4deg);
}

.p-next__link:hover .p-next__title {
  letter-spacing: -0.015em;
}

/* ---------- Real-project options (portrait hero, contained media) ---------- */

/* portrait cover in the first (wide) grid slot */
.w-1.card--tall { grid-column: 1 / 7; }

/* hero framed beside the title — for portrait images */
.p-hero__main {
  display: block;
}

.p-hero--portrait .p-hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.p-hero--portrait .p-hero__title {
  font-size: clamp(48px, 6.4vw, 124px);
  margin-top: clamp(32px, 6vh, 80px);
}

.p-hero__media--portrait {
  justify-self: end;
  width: min(100%, calc(78vh * 1086 / 1448));
  height: auto;
  aspect-ratio: 1086 / 1448;
  margin: clamp(32px, 5vh, 64px) 0 0;
  background: var(--beige);
  box-shadow: 0 50px 80px -50px rgba(18, 17, 16, 0.35);
}

.p-hero__media--portrait img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* gallery: frames that never crop (vertical videos) */
.g-media.is-contain {
  background: var(--beige);
}

.g-media.is-contain img,
.g-media.is-contain video {
  object-fit: contain;
}

.g-offset-tall {
  grid-column: 4 / 10;
  margin: clamp(40px, 8vw, 120px) 0;
}

.g-offset-tall .g-media {
  aspect-ratio: 4 / 5;
}

/* ---------- Cinematic hero: full-bleed image first, title below ---------- */

.p-hero--cinematic .p-hero__media {
  margin: clamp(24px, 4vh, 48px) calc(var(--gutter) * -1) 0;
  height: clamp(360px, 78vh, 920px);
}

.p-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: end;
  padding: clamp(32px, 5vw, 64px) 0 clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--grey-2);
}

.p-hero--cinematic .p-hero__title {
  margin: 0;
  font-size: clamp(48px, 7.5vw, 140px);
}

.p-hero__aside {
  justify-self: end;
  text-align: end;
}

.p-hero__disciplines {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.js .p-hero__aside {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.8s;
}

.is-loaded .p-hero__aside {
  opacity: 1;
}

/* ---------- Story sections (project pages with a "story") ---------- */

.s-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

.s-fig {
  margin: 0;
}

.s-fig__media {
  position: relative;
  overflow: hidden;
  background: var(--beige);
}

.s-fig__media img,
.s-fig__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-fig__media img {
  transition: transform 1.4s var(--ease);
}

.s-fig:hover .s-fig__media img {
  transform: scale(1.03);
}

.s-fig figcaption {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.js .s-fig.reveal .s-fig__media {
  clip-path: inset(14% 0 0 0);
  transition: clip-path 1.5s var(--ease);
}

.js .s-fig.reveal.is-visible .s-fig__media {
  clip-path: inset(0);
}

.s-ba,
.s-zones,
.s-brands,
.s-closing {
  padding: 0 var(--gutter) var(--section);
}

/* Before → After */
.s-ba__before,
.s-ba__after {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}

.s-ba__before { margin-top: 24px; }
.s-ba__b1 { grid-column: 1 / 8; }
.s-ba__b1 .s-fig__media { aspect-ratio: 4 / 3; }
.s-ba__b2 { grid-column: 9 / 12; margin-top: clamp(80px, 14vw, 240px); }
.s-ba__b2 .s-fig__media { aspect-ratio: 3 / 4; }

.s-label--after {
  margin-top: clamp(100px, 14vw, 200px);
  text-align: center;
}

.s-ba__after { margin-top: 32px; }
.s-ba__loop--1 { grid-column: 1 / 4; margin-top: clamp(120px, 20vw, 360px); }
.s-ba__main { grid-column: 5 / 9; }
.s-ba__main .s-fig__media { aspect-ratio: 9 / 16; background: var(--black); }
.s-ba__loop--2 { grid-column: 10 / 13; margin-top: clamp(40px, 6vw, 100px); }
.s-ba__loop .s-fig__media { aspect-ratio: var(--ratio, 3 / 4); }

/* Display zones — three areas, three scales */
.s-zones {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}

.s-zones__1 { grid-column: 1 / 8; grid-row: 1; }
.s-zones__1 .s-fig__media { aspect-ratio: 4 / 3; }
.s-zones__2 { grid-column: 9 / 13; grid-row: 1; margin-top: clamp(80px, 14vw, 220px); }
.s-zones__2 .s-fig__media { aspect-ratio: 3 / 4; }
.s-zones__3 { grid-column: 4 / 8; grid-row: 2; margin-top: clamp(48px, 8vw, 120px); }
.s-zones__3 .s-fig__media { aspect-ratio: 3 / 4; }

/* Brands */
.s-brands {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: end;
}

.s-brands__text { grid-column: 1 / 5; align-self: start; }

.s-brands__names {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.s-brands__1 { grid-column: 5 / 10; }
.s-brands__1 .s-fig__media { aspect-ratio: 3 / 4; }
.s-brands__2 { grid-column: 10 / 13; margin-bottom: clamp(40px, 8vw, 120px); }
.s-brands__2 .s-fig__media { aspect-ratio: 3 / 4; }

/* Details — horizontal drag strip */
.s-details {
  padding-bottom: var(--section);
}

.s-details__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--gutter);
  margin-bottom: 28px;
}

.s-details__hint {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.s-details__strip {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  overflow-x: auto;
  padding: 0 var(--gutter) 18px;
  scroll-padding: 0 var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
  cursor: grab;
}

.s-details__strip.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.s-detail {
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 360px);
  margin: 0;
  scroll-snap-align: start;
}

.s-detail__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--beige);
}

.s-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.s-detail figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink);
}

/* Closing line */
.s-closing {
  text-align: center;
}

.s-closing__text span {
  display: block;
}

.s-closing__text em {
  font-size: 1.08em;
}

.s-closing__text {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

@media (max-width: 860px) {
  .p-hero__row { grid-template-columns: 1fr; }
  .p-hero__aside { justify-self: start; text-align: start; }
  .p-hero__disciplines { justify-content: flex-start; }

  .s-ba__b1 { grid-column: 1 / -1; }
  .s-ba__b2 { grid-column: 5 / 13; margin-top: 24px; }
  .s-ba__main { grid-column: 2 / 12; grid-row: 1; }
  .s-ba__loop--1 { grid-column: 1 / 7; grid-row: 2; margin-top: 24px; }
  .s-ba__loop--2 { grid-column: 7 / 13; grid-row: 2; margin-top: 24px; }

  .s-zones__1 { grid-column: 1 / -1; }
  .s-zones__2 { grid-column: 5 / 13; grid-row: 2; margin-top: 40px; }
  .s-zones__3 { grid-column: 1 / 8; grid-row: 3; margin-top: 40px; }

  .s-brands__text { grid-column: 1 / -1; margin-bottom: 40px; }
  .s-brands__1 { grid-column: 1 / 9; }
  .s-brands__2 { grid-column: 9 / 13; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .s-fig.reveal .s-fig__media { clip-path: none; }
}

/* ---------- Story v2: before · after (dark) · feature · details ---------- */

.p-hero__sub .p-hero__disciplines {
  margin-top: 0;
}

/* Before — label held beside the photo while it scrolls */
.s-before {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
  padding: 0 var(--gutter) var(--section);
}

.s-before__label {
  grid-column: 1 / 3;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.s-before__img { grid-column: 4 / 12; }
.s-before__img .s-fig__media { aspect-ratio: 4 / 3; }

/* After — the section turns dark as it enters */
.s-after {
  padding: var(--section) var(--gutter);
  text-align: center;
  background-color: var(--paper);
  color: var(--black);
  transition: background-color 1.4s var(--ease), color 1.4s var(--ease);
}

.s-after.is-dark {
  background-color: var(--black);
  color: var(--paper);
}

.s-after.is-dark .s-label,
.s-after.is-dark figcaption {
  color: var(--sand);
}

.s-after__label { margin-bottom: clamp(32px, 4vw, 56px); }

.s-after__video {
  width: clamp(260px, 30vw, 440px);
  margin: 0 auto;
}

.s-after__video .s-fig__media {
  aspect-ratio: 9 / 16;
  background: var(--black);
}

/* Feature — one image, smaller, with a caption beside it */
.s-feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: end;
  padding: var(--section) var(--gutter);
}

.s-feature__img { grid-column: 2 / 9; }
.s-feature__img .s-fig__media { aspect-ratio: 4 / 3; }

.s-feature__caption {
  grid-column: 10 / 13;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Details — bigger cards, progress line and counter */
.s-detail { width: clamp(240px, 28vw, 420px); }

/* the progress line replaces the browser's own scrollbar */
.s-details__strip { scrollbar-width: none; }
.s-details__strip::-webkit-scrollbar { display: none; }

.s-detail__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.s-details__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px var(--gutter) 0;
}

.s-details__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--grey-2);
  overflow: hidden;
}

.s-details__bar i {
  position: absolute;
  inset: 0;
  background: var(--black);
  transform: scaleX(0.08);
  transform-origin: left;
  transition: transform 0.3s linear;
}

.s-details__count {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
}

/* Hover effects — mouse only; files stay unchanged, this is display only */
@media (hover: hover) and (pointer: fine) {
  .fx-zoom { cursor: zoom-in; }
  .s-details__strip .fx-zoom { cursor: inherit; }

  .fx-light img {
    filter: brightness(0.42) saturate(0.8);
    transition: filter 1.2s var(--ease), transform 1.4s var(--ease);
  }

  .fx-light:hover img { filter: none; }
}

/* Opening image: lights switch on once, as the page loads */
.js .fx-autolight img { filter: brightness(0.35) saturate(0.8); }

.is-loaded .fx-autolight img {
  filter: none;
  transition: filter 2.2s var(--ease) 1.2s;
}

/* Magnifier lens */
.lens {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 230;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  background-color: var(--beige);
  background-repeat: no-repeat;
  box-shadow: 0 24px 50px -20px rgba(18, 17, 16, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}

.lens.is-on { opacity: 1; }

@media (max-width: 860px) {
  .s-before__label { grid-column: 1 / -1; position: static; margin-bottom: 20px; }
  .s-before__img { grid-column: 1 / -1; }
  .s-after__video { width: min(72vw, 360px); }
  .s-feature__img { grid-column: 1 / -1; }
  .s-feature__caption { grid-column: 1 / -1; margin-top: 16px; }
  .s-detail { width: min(72vw, 320px); }
}

/* ---------- Story v3: before + phone mockup · brand-value stairs ---------- */

/* Before + After — the phone overlaps the edge of the before photo */
.s-transform {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
  padding: 0 var(--gutter) var(--section);
}

.s-transform .s-label { margin-bottom: 14px; }

.s-transform__before { grid-column: 1 / 9; grid-row: 1; }
.s-transform__before .s-fig__media { aspect-ratio: 4 / 3; }

.s-transform__after {
  grid-column: 8 / 12;
  grid-row: 1;
  z-index: 2;
  justify-self: center;
  margin: clamp(80px, 12vw, 200px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-transform__caption {
  grid-column: 1 / 8;
  grid-row: 2;
  max-width: 24ch;
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Phone mockup (pure CSS) */
.phone {
  --radius: clamp(36px, 3.4vw, 50px);
  position: relative;
  width: clamp(230px, 20vw, 320px);
  aspect-ratio: 9 / 19.5;
  padding: 10px;
  border-radius: var(--radius);
  background: #141312;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px #2a2826,
    0 60px 90px -40px rgba(18, 17, 16, 0.55),
    0 30px 40px -30px rgba(18, 17, 16, 0.35);
  cursor: pointer;
}

/* side buttons */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #2a2826;
}

.phone::before { right: -4px; top: 28%; height: 12%; }
.phone::after { left: -4px; top: 22%; height: 8%; }

.phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) - 10px);
  background: #000;
}

.phone__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* the full video, no cropping */
}

.phone__island {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 30%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #000;
}

.phone:focus-visible { outline-offset: 6px; }

.phone__sound {
  margin-top: 22px;
  padding: 8px 18px;
  border: 1px solid var(--black);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.phone__sound:hover {
  background: var(--black);
  color: var(--paper);
}

/* Brand values — a typographic staircase */
.s-values {
  padding: var(--section) var(--gutter);
}

.s-values__sticky {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
}

.s-values__media {
  grid-column: 1 / 5;
  width: min(100%, calc(78vh * 9 / 16));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--beige);
}

.s-values__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-values__text { grid-column: 6 / 13; }

.s-values__list {
  display: flex;
  flex-direction: column-reverse; /* first value on the bottom step */
  margin-top: 24px;
}

.s-values__word {
  margin-left: calc(var(--i) * clamp(14px, 2.4vw, 40px));
  padding: 6px 0;
  border-bottom: 1px solid var(--grey-2); /* the tread of each step */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.s-values__end {
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.s-values__end span { display: block; }
.s-values__end em { font-size: 1.08em; }

/* desktop: the section is pinned while the words light up one by one */
.s-values.is-scroll {
  height: calc(100vh + var(--steps) * 32vh);
  padding-top: 0;
  padding-bottom: 0;
}

.s-values.is-scroll .s-values__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

.s-values.is-scroll .s-values__word {
  color: var(--grey-2);
  transform: translateY(8px);
  transition: color 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.6s var(--ease);
}

.s-values.is-scroll .s-values__word.is-on {
  color: var(--black);
  transform: none;
  border-bottom-color: var(--sand);
}

.s-values.is-scroll .s-values__end {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.s-values.is-done .s-values__end {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .s-transform__before { grid-column: 1 / -1; }
  .s-transform__after { grid-column: 1 / -1; grid-row: 2; margin-top: -60px; }
  .s-transform__after .s-label { order: 2; margin: 18px 0 0; } /* keep the label off the photo */
  .s-transform__caption { grid-column: 1 / -1; grid-row: 3; }
  .phone { width: min(62vw, 280px); }

  .s-values__media { grid-column: 1 / -1; justify-self: center; width: min(60vw, 280px); }
  .s-values__text { grid-column: 1 / -1; margin-top: 40px; }
}

/* ---------- Editorial project page (calm, no hover effects) ---------- */

/* Opening: image inside the margins, centered title below */
.p-hero__media--contained {
  width: min(100%, calc(74vh * 4 / 3));
  height: auto;
  aspect-ratio: 4 / 3;
  margin: clamp(32px, 5vh, 56px) auto 0;
}

.p-hero__media--contained video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-hero__media--contained img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* framed wide variant: a 16:9 image at a calm, moderate size with air around it */
.p-hero__media--wide {
  width: min(100%, 1040px, calc(64vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-top: clamp(40px, 7vh, 80px);
}

/* full-bleed variant: edge to edge, at the image's own 16:9 ratio */
.p-hero__media--full {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  margin: clamp(32px, 5vh, 56px) calc(var(--gutter) * -1) 0;
}

.p-hero__media--full img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-hero__center {
  text-align: center;
  padding: clamp(48px, 6vw, 88px) 0 0;
}

.p-hero--editorial .p-hero__title {
  margin: 0 0 18px;
  font-size: clamp(44px, 6.6vw, 120px);
}

.p-hero--editorial .p-hero__disciplines {
  justify-content: center;
  margin-top: 22px;
}

.js .p-hero__center .p-hero__cat,
.js .p-hero__center .p-hero__disciplines {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.8s;
}

.is-loaded .p-hero__center .p-hero__cat,
.is-loaded .p-hero__center .p-hero__disciplines {
  opacity: 1;
}

/* tighter rhythm between sections on the editorial page */
.project--editorial {
  --section: clamp(72px, 9vw, 140px);
}

/* Overview: centered text, meta as one quiet line */
.project--editorial .p-intro {
  display: block;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.project--editorial .p-intro__label { margin-bottom: 24px; }

.project--editorial .p-intro__text {
  font-size: clamp(20px, 1.9vw, 28px);
}

.project--editorial .p-intro__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-top: 40px;
  border-top: 0;
}

.project--editorial .p-intro__meta div {
  gap: 10px;
  padding: 0;
  border-bottom: 0;
}

/* Row: one line of images with the same height, each keeping its own ratio */
.s-row {
  padding: 0 var(--gutter) var(--section);
}

.s-row__label {
  text-align: center;
  margin-bottom: 28px;
}

.s-row__items {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
}

.s-row--narrow .s-row__items {
  max-width: 980px;
  margin: 0 auto;
}

.s-row__item {
  flex: var(--ar) 1 0;
  min-width: 0;
}

.s-row__item .s-fig__media { aspect-ratio: var(--ar); }

.s-row__item figcaption { text-align: center; }

.s-row__action {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}

.tour-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--black);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.tour-button:hover {
  background: var(--black);
  color: var(--paper);
}

/* Video window above the page */
.lightbox {
  width: min(92vw, 520px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(18, 17, 16, 0.88);
}

.lightbox__video {
  display: block;
  width: 100%;
  max-height: 86vh;
  aspect-ratio: 9 / 16;
  background: #000;
  object-fit: contain;
}

.lightbox__close {
  display: block;
  margin: 0 0 12px auto;
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Values row: all words on one line, faded; the active one stands out */
.s-vrow {
  padding: 0 var(--gutter) var(--section);
}

.s-vrow__sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.s-vrow__label { margin-bottom: clamp(28px, 4vw, 48px); }

.s-vrow__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px clamp(16px, 2vw, 32px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--grey-2);
  border-bottom: 1px solid var(--grey-2);
}

.s-vrow__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.s-vrow__end {
  margin-top: clamp(40px, 5vw, 72px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.s-vrow__end span { display: block; }
.s-vrow__end em { font-size: 1.08em; }

/* scroll mode: pinned while one word at a time is highlighted */
.s-vrow.is-scroll {
  height: calc(100vh + var(--steps) * 45vh);
  padding-bottom: 0;
}

.s-vrow.is-scroll .s-vrow__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

.s-vrow.is-scroll .s-vrow__word {
  opacity: 0.18;
  transition: opacity 0.6s var(--ease);
}

.s-vrow.is-scroll .s-vrow__word.is-active,
.s-vrow.is-done .s-vrow__word {
  opacity: 1;
}

.s-vrow.is-scroll .s-vrow__end {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.s-vrow.is-done .s-vrow__end { opacity: 1; }

@media (max-width: 860px) {
  /* phones: two images per line; the wide "before" photo gets a full line */
  .s-row__items { flex-wrap: wrap; }
  .s-row__item { flex: 1 1 calc(50% - 12px); }
  .s-row--narrow .s-row__item:first-child { flex-basis: 100%; }
  .s-row--narrow .s-row__item:last-child { flex: 0 1 70%; margin: 0 auto; }
  .s-vrow__list { justify-content: center; }
}

/* ---------- Logos: a dark band with the main logo and the sub-brands ---------- */

.s-logos {
  margin-bottom: var(--section);
  padding: clamp(64px, 9vw, 130px) var(--gutter);
  background: #171816; /* the exact background of the logo files, so they blend in */
  color: var(--sand);
  text-align: center;
}

.s-logos__label { color: var(--sand); margin-bottom: clamp(32px, 4vw, 56px); }

.s-logos__main img {
  display: block;
  width: min(100%, 420px);
  margin: 0 auto;
}

.s-logos__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgba(210, 198, 181, 0.18);
}

.s-logos__item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .s-logos__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-logos__item:last-child { grid-column: 1 / -1; width: 50%; margin: 0 auto; }
}

/* ---------- Index: large typographic list of disciplines ---------- */

.s-index {
  padding: 0 var(--gutter) var(--section);
}

.s-index__label { margin-bottom: clamp(24px, 3vw, 40px); }

.s-index__list {
  border-top: 1px solid var(--grey-2);
}

.s-index__row {
  display: grid;
  grid-template-columns: clamp(40px, 6vw, 96px) minmax(0, 1fr) minmax(0, 15em);
  align-items: baseline;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(14px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--grey-2);
}

.s-index__num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--taupe);
}

.s-index__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 7.2vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.s-index__text {
  justify-self: end;
  text-align: end;
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--ink);
}

/* scroll mode: rows are faded, the one in the middle of the screen is solid */
.s-index.is-scroll .s-index__row > * {
  opacity: 0.16;
  transition: opacity 0.6s var(--ease);
}

.s-index.is-scroll .s-index__row.is-active > * {
  opacity: 1;
}

@media (max-width: 860px) {
  .s-index__row { grid-template-columns: 32px minmax(0, 1fr); }
  .s-index__text { grid-column: 2; justify-self: start; text-align: start; margin-top: 8px; }
  .s-index__title { font-size: clamp(40px, 13vw, 96px); }
}

/* ---------- Home hero: the name is the star (no pedestal) ---------- */

.hero {
  --title: clamp(64px, 15vw, 270px);
}

/* ---------- Hero v3: a smaller name, the disciplines faint below it ---------- */

.hero.hero {
  --title: clamp(56px, 12vw, 220px); /* .hero.hero: wins over the earlier size rules */
}

.hero__roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* spread across the exact width of the name */
  align-items: baseline;
  gap: 0.2em 0.6em;
  width: 0;
  min-width: 100%; /* takes the name's width without widening the block */
  margin-top: clamp(18px, 2.4vw, 36px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--title) * 0.12); /* grows and shrinks with the name, so it always fits one line */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
}

/* the last word ends exactly under the last letter (no trailing letter-spacing) */
.hero__role:last-child { margin-right: -0.2em; }

/* each discipline: a mask (overflow hidden) with the word inside */
.hero__role {
  --lit: 0; /* 0 = faint, 1 = fully dark — set while scrolling (js/home.js) */
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.hero__role > span {
  display: inline-block;
  opacity: calc(0.2 + 0.8 * var(--lit));
  transition: opacity 0.3s linear;
}

.hero__dot { opacity: 0.2; }

/* entrance: each word rises from under the line, one after another */
.js .hero__role > span {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease) calc(var(--i) * 0.13s + 0.9s), opacity 0.3s linear;
}

.is-loaded .hero__role > span { transform: none; }

.js .hero__dot {
  opacity: 0;
  transition: opacity 1s var(--ease) 1.5s;
}

.is-loaded .hero__dot { opacity: 0.2; }

/* background video slot (activated in index.html once the video exists) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a soft cream veil keeps the name readable over any video */
.hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(244, 242, 238, 0.55);
}

@media (max-width: 640px) {
  .hero.hero { --title: clamp(56px, 21vw, 130px); }
  .hero__roles { justify-content: center; width: auto; font-size: 11px; letter-spacing: 0.22em; line-height: 2; max-width: 30ch; margin-left: auto; margin-right: auto; }
  .hero__role:last-child { margin-right: 0; }
}

/* ---------- Hero: a faint statement set behind the big name ---------- */

/* one line above the name, one below — each overlapping its edge slightly */
.hero__statement {
  position: absolute;
  left: 50%;
  top: calc((100% - 80px) / 2); /* center on the name (the title area has 80px of space below) */
  z-index: -1; /* behind the name */
  width: 100vw;
  height: calc(var(--title) * 1.43);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transform: translate(-50%, -50%);
  font-size: clamp(30px, 6.2vw, 116px);
  line-height: 1;
  white-space: nowrap;
  color: var(--black);
  opacity: 0.09;
  pointer-events: none;
}

/* both lines in the site's bold typography */
.hero__statement-ordinary,
.hero__statement-mine {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.hero__statement-mine em { font-size: 1.1em; }

/* touching the name: the faint lines drift slightly apart (mouse only, motion allowed) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero__statement-ordinary,
  .hero__statement-mine {
    transition: transform 1.1s var(--ease);
  }

  .hero__head:has(.hero__title:hover) .hero__statement-ordinary {
    transform: translate(-0.12em, -0.22em);
  }

  .hero__head:has(.hero__title:hover) .hero__statement-mine {
    transform: translate(0.12em, 0.22em);
  }
}

/* entrance: the statement appears softly after the name */
.js .hero__statement {
  opacity: 0;
  transition: opacity 1.6s var(--ease) 1.1s;
}

.is-loaded .hero__statement { opacity: 0.09; }

@media (max-width: 640px) {
  /* on phones the name is two lines, so the statement opens wider around it */
  .hero__statement {
    top: 50%;
    height: calc(var(--title) * 2.3);
    font-size: 6.4vw; /* the bold top line is wide — keep it inside the screen */
  }
}

/* Typographic background: "what I do", large and faint, rows drifting in opposite directions */
.hero__bgtype {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.08em;
  overflow: hidden;
  pointer-events: none;
  font-size: clamp(44px, 8vw, 150px);
}

.bgtype__row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  line-height: 1;
  color: var(--black);
  opacity: 0.06;
  animation: bgtype-drift 90s linear infinite;
}

.bgtype__row--sans {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.bgtype__row--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.12em;
}

/* every other row drifts the other way, and each row starts at a different point */
.bgtype__row:nth-child(even) { animation-direction: reverse; }
.bgtype__row:nth-child(2) { margin-left: -18vw; }
.bgtype__row:nth-child(3) { margin-left: -42vw; }
.bgtype__row:nth-child(4) { margin-left: -8vw; }
.bgtype__row:nth-child(5) { margin-left: -30vw; }

@keyframes bgtype-drift {
  to { transform: translate3d(-50%, 0, 0); }
}

.hero__head,
.hero__foot {
  z-index: 1;
}

@media (max-width: 640px) {
  .hero__bgtype { font-size: 15vw; }
}

/* room above the letters so the hover lift is not clipped by the entrance mask */
.hero__title .word {
  padding-top: 0.12em;
  margin-top: -0.12em;
}

.hero__head {
  margin-top: auto;
  margin-bottom: auto; /* centered between the menu and the footer line */
  padding-bottom: 80px;
}

.hero__title {
  font-weight: 600; /* bold, as before; letters near the mouse lift slightly (js/home.js) */
}

@media (max-width: 640px) {
  .hero__head { padding-bottom: 0; }
}

/* ---------- Close-up: one detail, two text blocks set around it ---------- */

.s-closeup {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: 0 var(--gutter) var(--section);
}

.s-closeup__img {
  grid-column: 6 / 12;
  grid-row: 1 / 3;
}

.s-closeup__img .s-fig__media {
  aspect-ratio: 1 / 1;
}

.s-closeup__block h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.s-closeup__block p {
  max-width: 30ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--taupe);
}

.s-closeup__block--1 { grid-column: 1 / 5; grid-row: 1; align-self: end; }
.s-closeup__block--2 { grid-column: 3 / 6; grid-row: 2; align-self: start; }

@media (max-width: 860px) {
  .s-closeup__img { grid-column: 2 / -1; grid-row: 1; }
  .s-closeup__block--1 { grid-column: 1 / 10; grid-row: 2; }
  .s-closeup__block--2 { grid-column: 4 / -1; grid-row: 3; }
}

/* ---------- Home cards: big project number cut by a thin line ---------- */

.card__head {
  margin-bottom: clamp(16px, 1.6vw, 24px);
}

.card__bignum {
  --n: clamp(64px, 7vw, 128px);
  display: block;
  height: calc(var(--n) * 0.62); /* only the top of the number shows above the line */
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}

.card__bignum span {
  display: block;
  margin-left: -0.04em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--n);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.card__head .card__meta {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .nav__links { gap: 28px; }

  .focus {
    --slide-w: clamp(220px, min(40vw, 46vh), 400px);
    --side-x: 36vw;
    --pill-w: 38vw;
  }

  .focus__nav-label { display: none; }

  .about__portrait { grid-column: 1 / 6; }
  .about__content { grid-column: 7 / 13; }
}

@media (max-width: 860px) {
  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav__cta { display: none; }
  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 34px;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
  }

  .nav__links a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 40px;
    letter-spacing: -0.02em;
    text-transform: none;
  }

  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
  }

  .nav.is-open {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* work grid: 6 columns, alternating offsets */
  .work__grid { grid-template-columns: repeat(6, 1fr); }
  .w-1, .w-4, .w-5 { grid-column: 1 / -1; margin-top: 0; }
  .w-2 { grid-column: 3 / 7; margin-top: 0; }
  .w-3 { grid-column: 1 / 5; }
  .w-6 { grid-column: 2 / 7; }
  .w-cta { grid-column: 1 / -1; order: 1; padding: 0; }
  .card--feature .card__media { aspect-ratio: 16 / 10; }

  .section-head {
    grid-template-columns: auto 1fr;
  }

  .section-head__aside {
    grid-column: 1 / -1;
    text-align: start;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
  }

  .about__portrait { grid-column: 1 / 8; margin-bottom: 64px; }
  .about__content { grid-column: 1 / -1; }

  .focus__bottom {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .focus__counter { order: -1; justify-content: center; }
  .focus__info { justify-self: start; text-align: start; }

  .p-intro__label { grid-column: 1 / -1; }
  .p-intro__text { grid-column: 1 / -1; }
  .p-intro__meta { grid-column: 1 / -1; }
  .g-offset { grid-column: 1 / -1; }
  .g-offset-tall { grid-column: 2 / 12; }
  .w-1.card--tall { grid-column: 1 / 6; }

  .p-hero--portrait .p-hero__main { grid-template-columns: 1fr; gap: 0; }
  .p-hero__media--portrait { justify-self: stretch; width: 100%; max-height: none; }
}

@media (max-width: 640px) {
  .hero {
    --title: clamp(64px, 25vw, 150px);
    --ped-w: min(64vw, 280px);
    padding-top: calc(var(--nav-h) + 5vh);
  }

  .hero__head { width: auto; text-align: center; }
  .hero__title { white-space: normal; line-height: 0.9; }
  .hero__title .word { display: block; }
  .hero__stage { margin-top: 0; flex: none; }
  .pedestal__body { height: 120px; }

  .hero__foot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 8px 0 40px;
  }

  .hero__scroll { display: none; }
  .hero__social { justify-self: center; }
  .hero__subtitle { font-size: 11px; letter-spacing: 0.2em; }

  .work__grid { row-gap: 72px; }
  .w-2 { grid-column: 2 / 7; }
  .w-3 { grid-column: 1 / 6; }
  .w-6 { grid-column: 1 / -1; }

  .card__meta {
    grid-template-columns: auto 1fr;
    row-gap: 2px;
  }

  .card__cat { grid-column: 2; }

  .focus {
    --slide-w: 58vw;
    --side-x: 50vw;
    --pill-w: 34vw;
  }

  .focus__nav { display: none; }

  .about__portrait { grid-column: 1 / -1; }
  .expertise { grid-template-columns: 1fr; }

  .footer {
    flex-direction: column;
    align-items: center;
  }

  .g-half { grid-column: 1 / -1; }
  .p-hero__sub { flex-direction: column; gap: 8px; }
  .p-hero__media { height: 62vh; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .curtain { display: none; }
  .marquee__track { animation: none !important; }

  .js .reveal,
  .js .card.reveal .card__clip,
  .js [data-split] .char {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* ---------- Digital product pages: browser frame, structure, screens, design system ---------- */

/* hero inside a simple browser window */
.p-hero__media--browser {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  height: auto;
  border-radius: 10px;
  background: #0c1627;
  box-shadow: 0 30px 60px -30px rgba(18, 17, 16, 0.35);
}

.p-hero__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  background: #1a2234;
}

.p-hero__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.p-hero__media--browser img {
  height: auto;
  aspect-ratio: 16 / 10;
  object-position: top center;
}

/* structure: one level of the product per line */
.s-flow {
  padding: 0 var(--gutter) var(--section);
}

.s-flow__label { margin-bottom: 18px; }

.s-flow__text {
  max-width: 34ch;
  margin-bottom: clamp(32px, 4vw, 56px);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
}

.s-flow__levels { border-top: 1px solid var(--grey-2); }

.s-flow__level {
  display: grid;
  grid-template-columns: clamp(40px, 6vw, 96px) minmax(0, 14em) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--grey-2);
}

.s-flow__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--taupe);
}

.s-flow__name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 500;
  color: var(--black);
}

.s-flow__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.s-flow__nodes li {
  padding: 7px 14px;
  border: 1px solid var(--grey-2);
  border-radius: 99px;
  font-size: 13px;
  color: var(--ink);
}

/* screens: phones on the product's own dark background */
.s-screens {
  margin-bottom: var(--section);
  padding: clamp(64px, 9vw, 130px) var(--gutter);
  background: var(--screens-bg, #060c17);
  color: #eef2f8;
  text-align: center;
}

.s-screens__label { color: #8e9ab0; margin-bottom: 18px; }

.s-screens__text {
  max-width: 36ch;
  margin: 0 auto clamp(40px, 5vw, 72px);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.25;
}

.s-screens__row {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 32px);
}

.s-screens__item {
  flex: 0 1 260px;
  min-width: 0;
  margin: 0;
  transition-delay: var(--d);
}

.s-screens__phone {
  overflow: hidden;
  aspect-ratio: 1170 / 2532;
  padding: 6px;
  border-radius: 34px;
  background: #1a2234;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.s-screens__phone img,
.s-screens__phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 28px;
}

.s-screens__item figcaption {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8e9ab0;
}

.s-screens__item figcaption span { margin-right: 8px; color: #6f9be8; }

/* light variant: one phone on the page background (e.g. the tutorial video) */
.s-screens--light {
  background: transparent;
  color: var(--black);
  padding-top: 0;
}

.s-screens--light .s-screens__label,
.s-screens--light .s-screens__item figcaption { color: var(--taupe); }

.s-screens--light .s-screens__item { flex-basis: 320px; }

.s-screens--light .s-screens__phone {
  aspect-ratio: 9 / 16;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none; /* the video already shows its own phone */
}

.s-screens--light .s-screens__phone video { border-radius: 0; }

/* design system: small color chips on the left, the two typefaces on the right */
.s-system {
  padding: 0 var(--gutter) var(--section);
}

.s-system__label { margin-bottom: clamp(24px, 3vw, 40px); }

.s-system__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--grey-2);
}

.s-system__colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px clamp(16px, 2vw, 32px);
  align-content: start;
}

.s-system__swatch {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}

.s-system__swatch span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(18, 17, 16, 0.08);
}

.s-system__swatch b {
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
}

.s-system__swatch code {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--taupe);
}

.s-system__types {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.s-system__type + .s-system__type {
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--grey-2);
}

.s-system__specimen {
  display: block;
  overflow-wrap: anywhere;
  text-align: start;
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--black);
}

.s-system__font {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}

@media (max-width: 860px) {
  .s-flow__level { grid-template-columns: 40px minmax(0, 1fr); }
  .s-flow__nodes { grid-column: 1 / -1; }

  .s-screens__row {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    scrollbar-width: none;
  }

  .s-screens__item { flex: 0 0 62%; scroll-snap-align: center; }
  .s-screens--light .s-screens__row { justify-content: center; }
  .s-screens--light .s-screens__item { flex-basis: 72%; }

  .s-system__body { grid-template-columns: 1fr; }
}

/* ---------- Showcase hero: printed pages left of the title, live laptop + phone mockup centered below ---------- */

.p-show {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  min-height: calc(100vh - var(--nav-h) - 12vh);
  padding: clamp(24px, 4vh, 56px) 0 clamp(40px, 6vh, 80px);
}

.p-show__text .p-hero__title {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-size: clamp(40px, 4.6vw, 88px);
  line-height: 0.95;
}

.js .p-show__text .p-hero__cat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s var(--ease) 1.3s, transform 1.4s var(--ease) 1.3s;
}

.is-loaded .p-show__text .p-hero__cat { opacity: 1; transform: none; }

/* the stage: sizes follow the mockup's own width (cqw), so it scales as one piece */
.p-mock {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 100 / 64;
}

.p-mock__laptop {
  position: absolute;
  left: 5.5%;
  top: 4%;
  width: 79%;
}

.p-mock__lid {
  padding: 1.3cqw 1.3cqw 1.9cqw;
  border-radius: 2.4cqw 2.4cqw 0.7cqw 0.7cqw;
  background: #0b0b0d;
  box-shadow: 0 0 0 0.2cqw #3c4047, 0 0 0 0.3cqw #15171a;
}

.p-mock__screen {
  position: relative;
  overflow: hidden;
  border-radius: 0.8cqw;
  background: #060c17;
}

.p-mock__screen img {
  display: block;
  width: 100%;
}

.p-mock__screen::after { /* soft glass reflection */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 32%, transparent 45%);
  pointer-events: none;
}

.p-mock__base {
  position: relative;
  width: 114%;
  height: 2.2cqw;
  margin: -0.1cqw 0 0 -7%;
  border-radius: 0.3cqw 0.3cqw 2.4cqw 2.4cqw;
  background: linear-gradient(180deg, #eef0f3 0%, #c7cbd1 40%, #9a9fa7 85%, #7d828a 100%);
}

.p-mock__base::before { /* thumb notch */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15%;
  height: 0.8cqw;
  transform: translateX(-50%);
  border-radius: 0 0 1.1cqw 1.1cqw;
  background: linear-gradient(180deg, #a6abb2, #d3d6da);
}

.p-mock__base::after { /* soft shadow on the floor */
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 1.6cqw;
  height: 3.6cqw;
  z-index: -1;
  border-radius: 50%;
  background: rgba(70, 55, 40, 0.4);
  filter: blur(2.2cqw);
}

.p-mock__phone-wrap {
  position: absolute;
  right: 0;
  top: 15%;
  width: 22%;
}

.p-mock__phone {
  position: relative;
  padding: 0.9cqw;
  border-radius: 4.4cqw;
  background: #0a0a0c;
  box-shadow:
    0 0 0 0.2cqw #9a9fa7,
    0 0 0 0.35cqw #c9ccd1,
    0 5cqw 8cqw -3cqw rgba(60, 45, 30, 0.45),
    0 1.8cqw 3.6cqw -1.2cqw rgba(60, 45, 30, 0.3);
}

.p-mock__phone .p-mock__screen {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1170 / 2532;
  border-radius: 3.6cqw;
}

.p-mock__phone .p-mock__screen img {
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top;
}

.p-mock__status {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: center;
  height: 4.6cqw;
  padding: 0.5cqw 2.4cqw 0;
  font: 600 1.25cqw -apple-system, "SF Pro Text", sans-serif;
  color: #eef2f8;
}

.p-mock__status b { /* battery */
  width: 2cqw;
  height: 0.95cqw;
  border: 0.13cqw solid #eef2f8;
  border-radius: 0.25cqw;
  background: linear-gradient(90deg, #eef2f8 70%, transparent 70%) content-box;
  padding: 0.1cqw;
}

.p-mock__island {
  position: absolute;
  top: 1.7cqw;
  left: 50%;
  z-index: 2;
  width: 32%;
  height: 2.2cqw;
  transform: translateX(-50%);
  border-radius: 1.2cqw;
  background: #000;
}

/* entrance: the laptop rises softly, then the phone glides in from the right */
.js .p-mock__laptop {
  opacity: 0;
  transform: translateY(5%) scale(0.985);
  transition: opacity 1.6s var(--ease) 0.25s, transform 2s var(--ease) 0.25s;
}

.js .p-mock__phone-wrap {
  opacity: 0;
  transform: translate(22%, 6%) rotate(2.5deg);
  transition: opacity 1.4s var(--ease) 0.85s, transform 2s var(--ease) 0.85s;
}

.p-mock.is-visible .p-mock__laptop,
.p-mock.is-visible .p-mock__phone-wrap {
  opacity: 1;
  transform: none;
}

/* after landing, the phone breathes very slowly */
@keyframes mock-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.9cqw); }
}

.p-mock.is-visible .p-mock__phone { animation: mock-float 7s ease-in-out 2.8s infinite; }

@media (max-width: 860px) {
  .p-show {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* ---------- Gentle staggers and hovers on the catalog sections ---------- */

/* items that carry a --d delay arrive one after another */
.js .reveal[style*="--d"] { transition-delay: var(--d); }

.s-screens__phone {
  transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}

.s-screens__item:hover .s-screens__phone {
  transform: translateY(-8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 40px -20px rgba(0, 0, 0, 0.8);
}

.s-flow__nodes li { transition: border-color 0.4s var(--ease), background 0.4s var(--ease); }
.s-flow__level:hover .s-flow__nodes li { border-color: var(--taupe); background: var(--white); }

.s-system__swatch span { transition: transform 0.6s var(--ease); }
.s-system__swatch:hover span { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .js .p-mock__laptop,
  .js .p-mock__phone-wrap { opacity: 1; transform: none; transition: none; }
  .p-mock.is-visible .p-mock__phone { animation: none; }
}

/* printed catalog: an open spread lying behind, the thick closed catalog in front */
.p-book {
  position: relative;
  aspect-ratio: 100 / 80;
}

/* open spread: two pages side by side, a soft fold in the middle, page edges below */
.p-book__open {
  position: absolute;
  left: 0;
  top: 6%;
  display: flex;
  flex-direction: row-reverse; /* Hebrew: the first page sits on the right */
  width: 74%;
  transform: rotate(-5deg);
  background: #fff;
  box-shadow:
    0 1px 0 #ebe7df, 0 2px 0 #fbfaf7, 0 3px 0 #e6e1d8, 0 4px 0 #fbfaf7,
    0 5px 0 #e3ded4, 0 6px 0 #f6f3ee, 0 7px 0 #ddd7cc,
    0 30px 50px -24px rgba(60, 45, 30, 0.4);
}

.p-book__open img {
  display: block;
  width: 50%;
  aspect-ratio: 595.5 / 842.25;
  object-fit: cover;
}

.p-book__open::after { /* the fold */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 44%, rgba(40, 30, 20, 0.16) 49.6%, rgba(255, 255, 255, 0.25) 50.4%, transparent 56%);
  pointer-events: none;
}

/* closed catalog: the cover with a thick block of pages along the right and bottom edges */
.p-book__closed {
  position: absolute;
  right: 3%;
  top: 14%;
  width: 41%;
  aspect-ratio: 595.5 / 842.25;
  transform: rotate(4deg);
  border-radius: 3px 1px 1px 3px;
  /* Hebrew catalog: bound on the right, so the block of pages shows on the left and bottom */
  box-shadow:
    -1px 1px 0 #f4f1ec, -2px 2px 0 #d9d3c9, -3px 3px 0 #f4f1ec, -4px 4px 0 #d6d0c5,
    -5px 5px 0 #f1ede7, -6px 6px 0 #d2ccc0, -7px 7px 0 #efebe4, -8px 8px 0 #cec7ba,
    -9px 9px 0 #ece7df, -10px 10px 0 #c8c1b3,
    -14px 30px 46px -14px rgba(60, 45, 30, 0.5);
  transition: transform 0.9s var(--ease), box-shadow 0.9s var(--ease);
}

.p-book__closed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.p-book__closed::before { /* the binding along the right edge (Hebrew) */
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 5%;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.12) 45%, transparent);
  pointer-events: none;
}

.p-book__closed::after { /* a soft sheen on the cover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.18) 0%, transparent 38%);
  pointer-events: none;
}

.p-book__closed:hover { transform: rotate(4deg) translateY(-10px); }

/* entrance: the open spread is laid down, then the closed catalog lands on top */
.js .p-book__open {
  opacity: 0;
  transform: rotate(-5deg) translateY(24px);
  transition: opacity 1.2s var(--ease) 0.3s, transform 1.6s var(--ease) 0.3s;
}

.js .p-book__closed {
  opacity: 0;
  transform: rotate(9deg) translate(6%, 10%);
  transition: opacity 1.2s var(--ease) 0.7s, transform 1.8s var(--ease) 0.7s;
}

.is-loaded .p-book__open { opacity: 1; transform: rotate(-5deg); }
.is-loaded .p-book__closed { opacity: 1; transform: rotate(4deg); }
.is-loaded .p-book__closed:hover { transform: rotate(4deg) translateY(-10px); }

.p-show__eyebrow { margin-bottom: clamp(16px, 2vw, 24px); }

.js .p-show__eyebrow { opacity: 0; transition: opacity 1.2s var(--ease) 0.6s; }
.is-loaded .p-show__eyebrow { opacity: 1; }

/* the digital catalog: laptop + phone, centered under the title */
.p-show__device {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px) 0 clamp(24px, 4vw, 56px);
}

@media (max-width: 860px) {
  .p-book { width: 94%; margin: 0 auto; }
  .p-show__text { text-align: start; }
}

/* room under the letters so g / p / y are not cut by the entrance mask */
.p-show__text .p-hero__title .word {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* ---------- Reels: vertical social videos on a dark band, rounded like a phone screen ---------- */

.s-row--reels {
  margin-bottom: var(--section);
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  background: #111214;
}

.s-row--reels .s-row__label { color: var(--sand); }

.s-row--reels .s-row__items {
  max-width: var(--reels-max, 580px); /* small enough to see a whole reel on screen at once */
  margin: 0 auto;
  gap: clamp(20px, 3vw, 44px);
}

.s-row--reels .s-fig__media {
  border-radius: 22px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 70px -30px rgba(0, 0, 0, 0.9);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* keeps the rounded corners on the video in Safari */
}

.s-row--reels figcaption {
  margin-top: 18px;
  color: rgba(210, 198, 181, 0.75);
}

/* sound toggle: a small round button in the corner of the reel */
.s-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 18, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fbfaf7;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.s-sound:hover { background: rgba(17, 18, 20, 0.8); transform: scale(1.06); }

.s-sound svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-sound .s-sound__spk { fill: currentColor; }
.s-sound .s-sound__on { display: none; }
.s-sound[aria-pressed="true"] .s-sound__on { display: inline; }
.s-sound[aria-pressed="true"] .s-sound__off { display: none; }

/* the reveal clip keeps the reel's rounded corners */
.js .s-row--reels .s-fig.reveal .s-fig__media { clip-path: inset(14% 0 0 0 round 22px); }
.js .s-row--reels .s-fig.reveal.is-visible .s-fig__media { clip-path: inset(0 round 22px); }

/* ---------- Gentle side entries (projects with motion: "sides") ----------
   In a row, the first image glides in from the left and the last from the right, while the picture
   inside opens from the side it comes from; a single image settles from a slight zoom. */

.js .project--sides .s-row__item.reveal {
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease);
}

.js .project--sides .s-row__item.reveal:first-child:not(:only-child) { transform: translateX(-56px); }
.js .project--sides .s-row__item.reveal:last-child:not(:only-child) { transform: translateX(56px); transition-delay: 0.12s; }
.js .project--sides .s-row__item.reveal.is-visible:first-child:not(:only-child),
.js .project--sides .s-row__item.reveal.is-visible:last-child:not(:only-child) { transform: none; } /* as specific as the rules above, so it wins */

.js .project--sides .s-row__item.reveal:first-child:not(:only-child) .s-fig__media { clip-path: inset(0 16% 0 0); }
.js .project--sides .s-row__item.reveal:last-child:not(:only-child) .s-fig__media { clip-path: inset(0 0 0 16%); }
.js .project--sides .s-row__item.reveal.is-visible:first-child:not(:only-child) .s-fig__media,
.js .project--sides .s-row__item.reveal.is-visible:last-child:not(:only-child) .s-fig__media { clip-path: inset(0); }

/* reels keep their rounded corners while they open */
.js .project--sides .s-row--reels .s-row__item.reveal:first-child:not(:only-child) .s-fig__media { clip-path: inset(0 16% 0 0 round 22px); }
.js .project--sides .s-row--reels .s-row__item.reveal:last-child:not(:only-child) .s-fig__media { clip-path: inset(0 0 0 16% round 22px); }
.js .project--sides .s-row--reels .s-row__item.reveal.is-visible:first-child:not(:only-child) .s-fig__media,
.js .project--sides .s-row--reels .s-row__item.reveal.is-visible:last-child:not(:only-child) .s-fig__media { clip-path: inset(0 round 22px); }

/* a single image: the picture settles from a slight zoom as it appears */
.js .project--sides .s-row__item.reveal:only-child .s-fig__media img { transform: scale(1.08); transition: transform 2.2s var(--ease); }
.js .project--sides .s-row__item.reveal.is-visible:only-child .s-fig__media img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .project--sides .s-row__item.reveal,
  .js .project--sides .s-row__item.reveal .s-fig__media,
  .js .project--sides .s-row__item.reveal .s-fig__media img { transform: none; clip-path: none; }
}

/* a colour-only system: the swatches run across the full width */
.s-system__body--colors { grid-template-columns: 1fr; }
.s-system__body--colors .s-system__colors { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* two reel rows in a row share one dark band */
.s-row--reels + .s-row--reels {
  margin-top: calc(-1 * var(--section));
  padding-top: 0;
}

/* a looping film in the full-width opening fills the frame like the image does */
.p-hero__media--full video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* full-width opening: when the height cap makes it narrower than the screen, keep it centred */
.p-hero__media--full {
  left: 50%;
  width: min(100vw, calc(86vh * 16 / 9));
  margin-left: 0;
  margin-right: 0;
  transform: translateX(-50%);
}

/* a row whose next row belongs with it (e.g. a catalog and its pages): only a small gap below */
.s-row--tight { padding-bottom: clamp(24px, 3vw, 40px); }

/* a dark logo band can carry one line of text and the palette */
.s-logos__main--wide img { width: min(100%, 640px); }

.s-logos__text {
  max-width: 40ch;
  margin: clamp(28px, 3vw, 44px) auto 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(210, 198, 181, 0.85);
}

.s-logos__colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid rgba(210, 198, 181, 0.18);
}

.s-logos__colors li {
  display: grid;
  grid-template-columns: 40px auto;
  column-gap: 12px;
  align-items: center;
  text-align: start;
  transition-delay: var(--d);
}

.s-logos__colors span {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.s-logos__colors b { font-size: 13px; font-weight: 500; color: var(--sand); }
.s-logos__colors code { font-size: 11px; letter-spacing: 0.06em; color: rgba(210, 198, 181, 0.6); }

/* a dark logo band followed by a dark reels band: one continuous dark stretch */
.s-logos:has(+ .s-row--reels) { margin-bottom: 0; }
.s-logos + .s-row--reels { margin-top: 0; padding-top: clamp(24px, 3vw, 48px); }

/* project overview: the block stays centred on the page, the text itself reads from the left */
.project--editorial .p-intro__text { text-align: start; }

/* About: a short CV column stands where the portrait was */
.cv { border-top: 1px solid var(--grey-2); }
.cv__row { padding: 22px 0 24px; border-bottom: 1px solid var(--grey-2); }
.cv .about__label { margin-bottom: 12px; }
.cv dd { margin: 0; line-height: 1.6; color: var(--ink); }
.cv dd b { display: block; font-weight: 500; }
.cv__years { display: block; font-size: 13px; color: var(--taupe); margin-bottom: 4px; }
@media (max-width: 860px) {
  .about__cv { grid-column: 1 / -1; order: 2; margin: 64px 0 0; }
}
.cv__download { margin-top: 28px; }

/* ---------- Language switch + Hebrew (html[lang="he"], dir="rtl", set by js/i18n.js) ---------- */
.nav__end { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav__end .nav__cta, .nav__end .nav__toggle { justify-self: auto; }
.nav__lang {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--grey-2);
  border-radius: 99px;
  font-family: "Assistant", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--black);
  transition: border-color 0.4s var(--ease);
}
.nav__lang:hover { border-color: var(--black); }

/* Hebrew: one family, Assistant, everywhere; the italic serif accents become a light weight */
html[lang="he"] {
  --font-display: "Assistant", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-sans: "Assistant", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-serif: "Assistant", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
html[lang="he"] body { font-size: 17px; font-weight: 400; }
html[lang="he"] * { font-style: normal !important; }
html[dir="rtl"] .cv__tools { direction: ltr; text-align: right; }
html[lang="he"] em, html[lang="he"] i { font-style: normal; font-weight: 300; }
html[lang="he"] body *:not(.nav__logo):not(.hero__title):not(.hero__title *) { letter-spacing: 0 !important; }
html[lang="he"] .nav__links a, html[lang="he"] .nav__cta { font-size: 14px; }
html[lang="he"] [class*="__label"], html[lang="he"] .s-label, html[lang="he"] .link-arrow { font-size: 14px; }

/* arrows point the reading way */
html[dir="rtl"] .link-arrow span, html[dir="rtl"] .p-hero__back span { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .link-arrow:hover span { transform: scaleX(-1) translateX(6px); }
html[dir="rtl"] .link-arrow { background-position: right bottom; }

/* the carousel keeps its own mechanics */
html[dir="rtl"] .focus__stage { direction: ltr; }
html[dir="rtl"] .focus__stage .focus__nav-label { direction: rtl; }
html[dir="rtl"] .marquee { direction: ltr; }
html[dir="rtl"] .marquee__track span { direction: rtl; }

/* ---------- Next project: quieter, smaller, one family ---------- */
.p-next__link { padding: clamp(72px, 9vw, 140px) var(--gutter); }
.p-next__label { margin-bottom: 18px; }
.p-next__title {
  display: inline-block;
  font-weight: 300;
  font-size: clamp(30px, 3.8vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.p-next__link:hover .p-next__title { letter-spacing: -0.01em; }
.p-next__cat {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.p-next__img { width: clamp(140px, 13vw, 210px); opacity: 0; }
.p-next__link:hover .p-next__img { opacity: 0.9; }