/* ============ Jumbo – site styles ============ */

/* ---- Fonts (from the InDesign file) ---- */
@font-face { font-family: 'Almoni Tzar'; src: local('Almoni Tzar DL 4.0 AAA UltraLight'), url('../fonts/almoni-tzar-ultralight-aaa.otf') format('opentype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Almoni Tzar'; src: local('Almoni Tzar DL 4.0 AAA Light'), url('../fonts/almoni-tzar-light-aaa.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Almoni Tzar'; src: local('Almoni Tzar DL 4.0 AAA Regular'), url('../fonts/almoni-tzar-regular-aaa.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Almoni Tzar'; src: local('Almoni Tzar DL 4.0 AAA Medium'), url('../fonts/almoni-tzar-medium-aaa.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Almoni Tzar'; src: local('Almoni Tzar DL 4.0 AAA Bold'), url('../fonts/almoni-tzar-bold-aaa.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Almoni Tzar'; src: local('Almoni Tzar DL 4.0 AAA UltraBold'), url('../fonts/almoni-tzar-ultrabold-aaa.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Almoni'; src: url('../fonts/almoni-light-aaa.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Almoni'; src: url('../fonts/almoni-regular-aaa.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Almoni'; src: url('../fonts/almoni-bold-aaa.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bodoni FLF'; src: url('../fonts/BodoniFLF-Roman.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  --yellow: #FCC24A;
  --black: #000;
  --ink: #111;
  --muted: #6b6b6b;
  --line: rgba(0,0,0,.28);
  --bg: #E6E6E4;
  --tzar: 'Almoni Tzar', 'Assistant', 'Arial Narrow', sans-serif;
  --almoni: 'Almoni', 'Assistant', Arial, sans-serif;
  --bodoni: 'Bodoni FLF', 'Bodoni 72', 'Didot', serif;
  --ease: cubic-bezier(.22,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--almoni);
  color: var(--ink);
  background-color: var(--bg);
  /* one background for the whole site – soft light-grey like the reference */
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.07) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before { /* fine grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, footer { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Header ---- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 0; }
.logo { position: absolute; left: clamp(16px, 2.2vw, 36px); top: clamp(16px, 2.2vw, 30px); width: clamp(58px, 4.6vw, 80px); }
.logo img { width: 100%; height: auto; transition: opacity .4s; }
.logo .logo-light { position: absolute; inset: 0; opacity: 0; }
.site-header.on-dark .logo-dark { opacity: 0; }
.site-header.on-dark .logo-light { opacity: 1; }
.burger { position: absolute; right: clamp(16px, 2.6vw, 44px); top: clamp(22px, 2.6vw, 38px); width: 30px; height: 22px; display: grid; align-content: center; gap: 7px; }
.burger span { display: block; height: 2px; background: var(--black); transition: transform .4s var(--ease), width .3s, background .3s; margin-inline-start: auto; width: 100%; }
.burger:hover span:last-child { width: 62%; }
.site-header.on-dark .burger span, body.menu-open .burger span { background: #fff; }
body.menu-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); width: 100%; }
body.menu-open .logo-dark { opacity: 0; } body.menu-open .logo-light { opacity: 1; }

.menu { position: fixed; inset: 0; z-index: 40; background: #0b0b0b; color: #fff; display: grid; place-content: center; clip-path: circle(0% at calc(100% - 50px) 40px); transition: clip-path .8s var(--ease); }
body.menu-open .menu { clip-path: circle(150% at calc(100% - 50px) 40px); }
.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu li a { font-family: var(--tzar); font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: 1.05; display: inline-block; transition: color .3s, transform .4s var(--ease); }
.menu li a:hover { color: var(--yellow); transform: translateX(-10px); }
.menu-foot { position: absolute; bottom: 30px; inset-inline: 0; text-align: center; font-size: 13px; letter-spacing: .3em; color: #777; direction: ltr; }

/* ---- Hero / project wheel ---- */
.hero-track { position: relative; /* height set by JS */ }
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-bar { position: absolute; left: 0; top: 4.94vw; width: 5.92vw; height: 18vw; background: var(--yellow); z-index: 3; transform-origin: top; animation: barIn 1.2s var(--ease) both .2s; }
@keyframes barIn { from { transform: scaleY(0); } }
.hero-bar { display: none; }
.hero-count { position: absolute; left: clamp(16px, 2.4vw, 40px); bottom: clamp(16px, 3vh, 40px); top: auto; font-family: var(--bodoni); font-size: clamp(76px, 9vw, 160px); line-height: .8; color: rgba(0,0,0,.59); z-index: 120; pointer-events: none; direction: ltr; letter-spacing: -.02em; }
.hero-count .d { display: inline-block; transition: transform .5s var(--ease), opacity .5s; }

.wheel { position: absolute; inset: 0; --D: 560px; }
.w-item { position: absolute; left: 0; top: 0; width: var(--D); height: var(--D); will-change: transform; cursor: pointer; }
.w-disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.w-disc::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 60% 46%, rgba(255,255,255,.5), rgba(255,255,255,0) 52%); pointer-events: none; transition: opacity .6s; }
.w-item.is-active:hover .w-disc::after { opacity: 0; }
.w-disc img { width: 100%; height: 100%; object-fit: cover; opacity: .54; transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.w-item.is-active:hover .w-disc img { opacity: 1; transform: scale(1.04); }
.w-item.is-active:hover .w-text { opacity: 0 !important; transform: translateY(8px); }
.w-text { position: absolute; top: 32%; right: 36%; width: 58%; text-align: right; color: #000; pointer-events: none; transition: opacity .35s, transform .5s var(--ease); }
.w-title { font-family: var(--tzar); font-weight: 400; font-size: calc(var(--D) * .157); line-height: .75; margin: 0; letter-spacing: -.005em; }
.w-title span { display: block; }
.w-sub { font-family: var(--tzar); font-weight: 200; font-size: calc(var(--D) * .053); line-height: 1.05; margin-top: calc(var(--D) * .03); max-width: calc(var(--D) * .42); margin-right: 0; margin-left: auto; text-align: right; }
.w-rule { display: block; width: calc(var(--D) * .134); height: 1px; background: rgba(0,0,0,.75); margin: calc(var(--D) * .03) 0 calc(var(--D) * .02) auto; margin-left: auto; margin-right: 0; }
.w-tags { font-family: var(--tzar); font-weight: 200; font-size: calc(var(--D) * .037); }
.w-badge { position: absolute; top: -3.8%; right: 5%; width: 27%; height: 27%; border-radius: 50%; border: calc(var(--D) * .036) solid #000; background: #fff; display: grid; place-items: center; font-family: var(--tzar); font-weight: 500; font-size: calc(var(--D) * .09); color: var(--yellow); line-height: 1; transition: transform .6s var(--ease); }
.w-item.is-active .w-badge { animation: badgePop .7s var(--ease); }
@keyframes badgePop { 0% { transform: scale(.6) rotate(-30deg); } 100% { transform: none; } }
.w-cta { position: absolute; left: 50%; bottom: 13%; transform: translate(-50%, 10px); background: #000; color: #fff; font-family: var(--tzar); font-size: calc(var(--D) * .036); padding: .55em 1.4em .5em; border-radius: 99px; opacity: 0; transition: opacity .4s, transform .5s var(--ease); white-space: nowrap; }
.w-item.is-active:hover .w-cta { opacity: 1; transform: translate(-50%, 0); }

.hero-nav { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; }
.arrow { position: absolute; pointer-events: auto; font-family: var(--tzar); font-weight: 200; font-size: 15px; display: grid; justify-items: center; gap: 4px; padding: 6px 0; transition: opacity .3s; }
.arrow i { position: relative; display: block; width: 86px; height: 1px; background: #000; transition: width .4s var(--ease); }
.arrow i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-top: 1px solid #000; }
.arrow-prev i::after { left: 0; border-left: 1px solid #000; transform: rotate(-45deg); }
.arrow-next i::after { right: 0; border-right: 1px solid #000; transform: rotate(45deg); }
.arrow:hover i { width: 110px; }
.arrow[disabled] { opacity: .25; cursor: default; }

/* ---- About ---- */
.about { position: relative; z-index: 5; margin-top: -100vh; margin-top: -100svh; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; background: #1b1b1b; color: #fff; overflow-x: clip; overflow-y: visible; }
.about-photo { position: absolute; inset: 0; background: url('../img/brand/about.jpg') center / cover no-repeat; filter: grayscale(1) brightness(.5) contrast(1.05); overflow: hidden; }
.about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%); }
.about-stage { position: relative; width: 100%; aspect-ratio: 2752 / 1329; }
.about-bar { position: absolute; left: 10.25%; width: 4.65%; top: 8.9%; height: 63%; background: #000; z-index: 2; transform-origin: bottom; transform: scaleY(0); transition: transform 1.2s var(--ease) .1s; }
.about-stripe { position: absolute; left: 0; width: 68.5%; top: 47.6%; height: 3.3%; background: #fff; z-index: 3; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.about-chip { position: absolute; left: 11.8%; width: 1.8%; top: 65.2%; height: 2.8%; background: var(--yellow); z-index: 4; opacity: 0; transition: opacity .6s 1.2s; }
.ring { position: absolute; overflow: visible; z-index: 2; pointer-events: none; transform: translateY(calc(var(--par, 0) * 1px)); }
.ring circle { fill: none; stroke: var(--yellow); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease); }
.ring-1 { width: 52.9%; left: 38.55%; top: 50%; margin-top: -26.45%; transform-origin: center; }
.ring-1 circle { stroke-width: 6.87; transition-delay: .2s; }
.ring-2 { width: 38.7%; left: 15.65%; top: 50%; margin-top: -19.35%; }
.ring-2 circle { stroke-width: 9.39; transition-delay: .45s; }
.ring-3 { width: 15.95%; left: 5.35%; top: 50%; margin-top: -7.97%; }
.ring-3 circle { stroke-width: 22.8; transition-delay: .7s; }
.ring svg, .ring { rotate: -81.5deg; }
.about-title { position: absolute; right: 7%; top: 26%; margin: 0; z-index: 5; font-family: var(--tzar); font-weight: 800; font-size: 5.06vw; line-height: .78; text-align: right; }
.about-title span { display: block; overflow: hidden; padding-bottom: .06em; }
.about-title span::before { content: none; }
.about-text { position: absolute; right: 7.3%; top: 48.6%; width: 34%; z-index: 5; text-align: right; }
.about-text h3 { margin: 0 0 .25em; font-family: var(--tzar); font-weight: 700; font-size: 1.85vw; line-height: 1.1; }
.about-text p { margin: 0; font-family: var(--tzar); font-weight: 200; font-size: 1.6vw; line-height: 1.42; color: #f1f1f1; }
.about .about-title span, .about .about-text { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.about .about-title span:nth-child(2) { transition-delay: .12s; }
.about .about-text { transition-delay: .35s; }
.about.in .about-title span, .about.in .about-text { opacity: 1; transform: none; }
.about.in .ring circle { stroke-dashoffset: 0; }
.about.in .about-bar { transform: none; }
.about.in .about-stripe { transform: none; }
.about.in .about-chip { opacity: 1; }

/* ---- Shared section title ---- */
.section-title { font-family: var(--tzar); font-weight: 400; text-align: center; margin: 0; line-height: 1; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Gallery ---- */
.gallery { position: relative; padding: clamp(150px, 16vw, 260px) 0 clamp(70px, 7vw, 110px); --G: clamp(230px, 23vw, 380px); --gap: clamp(8px, .8vw, 14px); }
.gallery .section-title { font-size: clamp(48px, 4.4vw, 80px); margin-bottom: clamp(50px, 5.5vw, 90px); }
.g-viewport { position: relative; direction: ltr; overflow: hidden; padding: 40px 0; margin: -40px 0; cursor: grab; touch-action: pan-y; }
.g-viewport.dragging { cursor: grabbing; }
.g-track { display: flex; gap: var(--gap); width: max-content; direction: ltr; will-change: transform; }
.g-col { display: grid; gap: var(--gap); align-content: center; }
.g-col.big { width: var(--G); }
.g-col.small { width: calc((var(--G) - var(--gap)) / 2); }
.g-item { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #ddd; transition: border-radius .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease), filter .5s; z-index: 1; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.g-item.hover { border-radius: 2px; z-index: 5; background: transparent; }
.g-col.big .g-item.hover { transform: scale(1.12); }
.g-col.small .g-item.hover { transform: scale(1.55); }
.g-item.hover img { transform: scale(1.03); }
.g-label { position: absolute; z-index: 20; top: 0; left: 0; background: #000; color: #fff; padding: 18px 22px 20px; min-width: 210px; max-width: 280px; pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .45s var(--ease); text-align: right; }
.g-label.show { opacity: 1; transform: none; }
.g-label strong { display: block; font-family: var(--tzar); font-weight: 400; font-size: 28px; line-height: 1; margin-bottom: 8px; }
.g-label span { display: block; font-family: var(--almoni); font-weight: 300; font-size: 13.5px; line-height: 1.5; color: #d8d8d8; }
.g-label strong::after { content: ""; display: block; width: 34px; height: 2px; background: var(--yellow); margin-top: 10px; }
.g-progress { width: 90px; height: 1px; margin: clamp(56px, 6vw, 90px) auto 0; background: #000; position: relative; }
.g-progress::before, .g-progress::after { content: ""; position: absolute; top: -3px; width: 6px; height: 6px; border-top: 1px solid #000; }
.g-progress::before { left: 0; border-left: 1px solid #000; transform: rotate(-45deg); }
.g-progress::after { right: 0; border-right: 1px solid #000; transform: rotate(45deg); }
.g-progress i { position: absolute; top: -1px; height: 3px; width: 26px; background: var(--yellow); left: 0; }

/* ---- Clients ---- */
.clients { padding: clamp(60px, 6vw, 110px) clamp(16px, 4vw, 70px) clamp(110px, 11vw, 190px); }
.clients .section-title { font-size: clamp(38px, 3.35vw, 60px); margin-bottom: clamp(36px, 3.6vw, 60px); }
/* continuous logo carousel */
.clients { padding-left: 0; padding-right: 0; }
.logos-marquee { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content; animation: logosRun 55s linear infinite; }
.logos-marquee:hover .logos { animation-play-state: paused; }
.logos + .logos { margin-top: clamp(14px, 1.6vw, 26px); animation-direction: reverse; }
.logos + .logos + .logos { animation-direction: normal; animation-duration: 48s; }
@keyframes logosRun { to { transform: translateX(-50%); } }
.logo-cell { flex: none; height: clamp(70px, 7vw, 110px); display: grid; place-items: center; padding: 0 clamp(28px, 3.2vw, 56px); }
.logo-cell img { height: var(--lh); width: auto; max-width: 240px; object-fit: contain; }

/* ---- Contact ---- */
.contact { padding: clamp(40px, 4vw, 70px) clamp(16px, 4vw, 60px) clamp(110px, 10vw, 170px); }
.contact-inner { max-width: 1010px; margin: 0 auto; }
.contact-head { background: #000; color: #fff; padding: clamp(22px, 2.4vw, 34px) clamp(22px, 3vw, 44px); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; }
.contact-head::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: var(--yellow); }
.contact-head h2 { margin: 0; font-family: var(--tzar); font-weight: 800; font-size: clamp(36px, 3.4vw, 56px); line-height: 1; }
.contact-head span { font-family: var(--tzar); font-weight: 200; font-size: clamp(17px, 1.4vw, 22px); color: #cfcfcf; }
.contact-form { position: relative; display: grid; grid-template-columns: 1fr 1fr 24%; column-gap: 26px; margin-top: 26px; }
.f { display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); padding: 26px 4px 8px; transition: border-color .3s; }
.f:focus-within { border-color: #000; }
.f > span { font-family: var(--tzar); font-weight: 700; font-size: 18px; white-space: nowrap; letter-spacing: .02em; }
.f input, .f textarea { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--almoni); font-size: 17px; color: #000; outline: none; padding: 2px 0; resize: none; }
.f textarea::placeholder { color: #000; font-family: var(--tzar); font-weight: 700; font-size: 18px; letter-spacing: .02em; opacity: 1; }
.f.invalid { border-color: #c0392b; }
.f textarea { overflow: hidden; }
.f-name { grid-column: 1 / -1; }
.f-phone { grid-column: 1; }
.f-mail { grid-column: 2 / -1; }
.f-msg { grid-column: 1 / 3; grid-row: 3; }
.contact-mail { grid-column: 1 / 3; grid-row: 4; justify-self: start; margin-top: 30px; font-family: var(--almoni); font-weight: 700; letter-spacing: .14em; font-size: 14px; color: #000; position: relative; }
.contact-mail::after { content: ""; position: absolute; bottom: -4px; right: 0; width: 100%; height: 2px; background: var(--yellow); transform-origin: right; transform: scaleX(.3); transition: transform .4s var(--ease); }
.contact-mail:hover::after { transform: scaleX(1); }
.send { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; height: 48px; padding: 0 40px; border-radius: 99px; background: var(--yellow); color: #000; font-family: var(--tzar); font-weight: 700; font-size: 19px; white-space: nowrap; transition: transform .3s var(--ease), background .3s; }
.send:hover { transform: translateY(-2px); background: #ffd36f; }
.form-status { grid-column: 1 / 3; grid-row: 5; min-height: 1.4em; margin: 16px 0 0; font-family: var(--tzar); font-size: 18px; }

/* ---- Footer ---- */
.site-footer { position: relative; color: #ececec; padding: 0 clamp(14px, 3vw, 48px) clamp(14px, 3vw, 48px); }
.f-card { position: relative; overflow: hidden; border-radius: clamp(16px, 1.8vw, 26px); background: #0e0e0e; border: 1px solid rgba(255,255,255,.07); padding: clamp(26px, 3.6vw, 56px) clamp(22px, 4vw, 64px) clamp(22px, 2.6vw, 38px); }
.f-card::before { content: ""; position: absolute; width: 60vmax; height: 60vmax; left: -22vmax; bottom: -38vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(252,194,74,.16), rgba(252,194,74,0) 62%); }
.f-card > * { position: relative; }
.f-top { display: flex; align-items: center; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap; }
.f-cta { margin: 0; font-family: var(--tzar); font-weight: 300; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.05; }
.f-cta span { color: var(--yellow); }
.f-sub { flex: 1; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); min-width: 260px; }
.f-sub input { flex: 1; min-width: 0; height: 48px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; padding: 0 22px; font-family: var(--almoni); font-size: 16px; outline: none; transition: border-color .3s, background .3s; }
.f-sub input::placeholder { color: rgba(255,255,255,.45); text-align: right; }
.f-sub input:focus { border-color: var(--yellow); background: rgba(255,255,255,.09); }
.f-sub button { height: 48px; padding: 0 30px; border-radius: 99px; background: var(--yellow); color: #000; font-family: var(--tzar); font-weight: 700; font-size: 18px; white-space: nowrap; transition: transform .3s var(--ease), background .3s; }
.f-sub button:hover { transform: translateY(-2px); background: #ffd36f; }
.f-note { margin: 10px 0 0; min-height: 1.2em; font-family: var(--tzar); font-size: 16px; color: var(--yellow); }
.f-card hr { border: 0; height: 1px; background: rgba(255,255,255,.35); margin: clamp(22px, 2.6vw, 40px) 0 clamp(26px, 3.2vw, 50px); }
.f-word { width: clamp(96px, 8vw, 130px); height: auto; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px 30px; flex-wrap: wrap; margin-top: clamp(26px, 3.4vw, 54px); }
.f-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.4vw, 36px); font-family: var(--tzar); font-size: 18px; }
.f-nav a { transition: color .3s; } .f-nav a:hover { color: var(--yellow); }
.f-meta { display: flex; align-items: center; gap: 22px; font-size: 13px; color: #8f8f8f; flex-wrap: wrap; }
.f-mail { font-family: var(--almoni); letter-spacing: .06em; color: #cfcfcf; direction: ltr; transition: color .3s; }
.f-mail:hover { color: var(--yellow); }
.to-top { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 17px; transition: background .3s, color .3s, border-color .3s; }
.to-top:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }

/* ============ Project page ============ */
.project main { padding-top: 0; }
.p-hero { position: relative; aspect-ratio: 2609 / 920; background: #ddd center / cover no-repeat; overflow: hidden; }
.p-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 2.2s var(--ease) forwards; }
@keyframes heroZoom { to { transform: none; } }
.p-bar { position: absolute; left: 0; top: calc(100vw * 116 / 2609); width: 6.25%; height: calc(100vw * (1651 - 189) / 2609); background: var(--yellow); z-index: 3; transform-origin: top; animation: barIn 1.3s var(--ease) both .2s; }
.p-title { position: absolute; left: 9.6%; top: 17%; z-index: 2; direction: rtl; text-align: left; }
.p-num { font-family: var(--bodoni); font-size: 7.6vw; line-height: .9; color: rgba(0,0,0,.59); direction: ltr; text-align: left; }
.p-title h1 { margin: .02em 0 0; font-family: var(--tzar); font-weight: 400; font-size: 6.85vw; line-height: .75; color: rgba(0,0,0,.64); text-align: left; }
.p-title h1 span { display: block; }
.p-title > * { animation: rise 1.1s var(--ease) both; } .p-title h1 { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.p-band { position: relative; aspect-ratio: 2609 / 657; overflow: hidden; }
.p-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-copy { position: absolute; left: 8.6%; top: 21%; width: 47%; z-index: 2; text-align: left; }
.p-copy h2 { margin: 0; font-family: var(--almoni); font-weight: 700; font-size: 1.85vw; line-height: 1.1; }
.p-copy .lead { margin: .2em 0 .5em; font-family: var(--almoni); font-weight: 300; font-size: 1.25vw; }
.p-copy p { margin: 0 0 .35em; font-family: var(--almoni); font-weight: 300; font-size: 1.25vw; line-height: 1.32; }
.p-pair { display: grid; grid-template-columns: 1fr 1fr; direction: ltr; }
.p-pair figure { margin: 0; aspect-ratio: 1304 / 661; overflow: hidden; }
.p-pair img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.p-pair figure:hover img { transform: scale(1.04); }
.p-soon { position: absolute; left: 9.6%; bottom: 14%; font-family: var(--tzar); font-weight: 200; font-size: 22px; z-index: 2; }
.p-nav { direction: ltr; display: flex; justify-content: center; gap: clamp(80px, 12vw, 200px); padding: clamp(40px, 4vw, 70px) 20px clamp(80px, 8vw, 130px); }
.p-nav .arrow { position: static; }
.p-nav .arrow small { font-family: var(--tzar); font-weight: 400; font-size: 13px; color: var(--muted); }
.p-placeholder { position: absolute; right: 8%; top: 50%; width: 34%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; overflow: hidden; }
.p-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }

/* ============ Dark theme – charcoal + grain + soft yellow glow ============ */
:root { --bg: #181818; --ink: #ececec; --line: rgba(255,255,255,.22); }
body { background: var(--bg); color: var(--ink); }
body::before { opacity: .55; mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* stone texture, blended with multiply over the charcoal + yellow glow (sharp tile at native size) */
html { background: #1e1e1e; }
body { background: transparent; }
.bg-texture { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url('../img/brand/texture-tile.jpg') 0 0 / 1258px auto repeat; mix-blend-mode: multiply; }
.bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-glow i { position: absolute; border-radius: 50%; will-change: transform; }
.bg-glow .g1 { width: 78vmax; height: 78vmax; left: -24vmax; top: -26vmax;
  background: radial-gradient(circle, rgba(252,194,74,.26) 0%, rgba(252,194,74,.13) 30%, rgba(252,194,74,.04) 52%, rgba(252,194,74,0) 68%); }
.bg-glow .g2 { width: 56vmax; height: 56vmax; right: -22vmax; bottom: -26vmax;
  background: radial-gradient(circle, rgba(252,194,74,.13) 0%, rgba(252,194,74,.05) 40%, rgba(252,194,74,0) 68%); }

.logo .logo-dark { opacity: 0; } .logo .logo-light { opacity: 1; }
.burger span { background: #f2f2f2; }
.hero-count { color: rgba(255,255,255,.5); }
.arrow { color: #e4e4e4; }
.arrow i { background: currentColor; }
.arrow i::after, .arrow-prev i::after, .arrow-next i::after { border-color: currentColor; }

.w-disc { background: #0e0e0e; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.w-disc::after { background: radial-gradient(circle at 60% 46%, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.w-text { color: #fff; }
.w-rule { background: rgba(255,255,255,.8); }
.w-badge { border-color: #f4f4f4; background: #111; }
.w-cta { background: var(--yellow); color: #000; }

.g-item { background: #2a2a2a; }
.g-label { background: #f4f4f4; color: #111; }
.g-label span { color: #555; }
.g-progress { background: #d9d9d9; }
.g-progress::before, .g-progress::after { border-color: #d9d9d9; }

.logo-cell img, .logo-cell.light img { filter: none; mix-blend-mode: normal; opacity: .95; } /* flat white logos (img/logos-mono) */

.contact-head { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.06); }
.f:focus-within { border-color: #fff; }
.f input, .f textarea { color: #fff; }
.f textarea::placeholder { color: #ececec; }
.contact-mail { color: #ececec; }

.p-copy { color: #111; }
.p-hero { background-color: #2a2a2a; }

/* about – split half-circle composition (mirrored for RTL) */
.about { --split: 72%; display: block; overflow: hidden; margin-top: 0; background: transparent; } /* continues the site background */
.about::after { display: none; content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ab-photo { position: absolute; top: 0; bottom: 0; left: var(--split); right: 0; overflow: hidden; }
.ab-disc { position: absolute; top: 50%; left: 0; height: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%) scale(.82); opacity: 0; transition: transform 1.6s var(--ease), opacity 1.2s; background: #222; }
.ab-disc img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; filter: grayscale(1) contrast(1.1) brightness(.9); }
.ab-split { position: absolute; left: var(--split); top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.22); transform-origin: top; transform: scaleY(0); transition: transform 1.4s var(--ease) .2s; }
.ab-orb { position: absolute; top: 50%; left: calc(var(--split) - 11vw); width: 72vh; aspect-ratio: 1; border-radius: 50%; background: #242427; transform: translate(-50%, -50%) scale(.7); opacity: 0; transition: transform 1.6s var(--ease) .15s, opacity 1.2s .15s; }
.ab-dot { position: absolute; left: var(--split); top: 50%; width: clamp(46px, 3.6vw, 62px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; transform: translate(-50%, -50%) scale(0); transition: transform .8s var(--ease) .9s; z-index: 3; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ab-dot img { width: 62%; }
.ab-line { position: absolute; left: 0; width: calc(var(--split) - 53vw); top: 50%; height: 1px; background: rgba(255,255,255,.22); transform-origin: right; transform: scaleX(0); transition: transform 1.4s var(--ease) .5s; }
.ab-go { position: absolute; left: 7vw; top: 50%; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: #141416; transform: translate(-50%, -50%); display: grid; place-items: center; transition: background .3s, border-color .3s; opacity: 0; transition-property: background, border-color, opacity; transition-duration: .3s, .3s, .8s; transition-delay: 0s, 0s, 1s; }
.ab-go i { width: 8px; height: 8px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateX(2px) rotate(45deg); }
.ab-go:hover { background: var(--yellow); border-color: var(--yellow); }
.ab-go:hover i { border-color: #000; }
.ab-copy { position: absolute; right: calc(100% - var(--split) + 4.2vw); top: 50%; transform: translateY(-44%); width: min(640px, 46vw); text-align: right; z-index: 2; }
.ab-copy h2 { margin: 0; font-family: var(--tzar); font-weight: 800; font-size: clamp(58px, 7.4vw, 132px); line-height: .84; color: #fff; letter-spacing: -.005em; }
.ab-copy h2 span { display: block; opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.ab-copy h2 span:nth-child(2) { transition-delay: .1s; } .ab-copy h2 span:nth-child(3) { transition-delay: .2s; }
.ab-copy h3 { margin: clamp(26px, 3vw, 44px) 0 6px; font-family: var(--tzar); font-weight: 700; font-size: clamp(19px, 1.5vw, 24px); color: #fff; }
.ab-copy p { margin: 0; max-width: 470px; font-family: var(--almoni); font-weight: 300; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: #a9a9ad; }
.ab-more { display: inline-block; margin-top: 22px; font-family: var(--tzar); font-weight: 700; font-size: 18px; color: #fff; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; transition: color .3s; }
.ab-more:hover { color: var(--yellow); }
.ab-copy h3, .ab-copy p, .ab-more { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease) .45s, transform 1s var(--ease) .45s, color .3s; }
.ab-scroll { position: absolute; right: calc(100% - var(--split) + 4.2vw); bottom: 6vh; display: flex; align-items: center; gap: 10px; font-family: var(--tzar); font-size: 15px; color: #d6d6d6; }
.ab-scroll i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #d6d6d6; animation: abPulse 2s ease-in-out infinite; }
@keyframes abPulse { 50% { transform: translateY(4px); } }
.about.in .ab-disc { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.about.in .ab-orb { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.about.in .ab-split, .about.in .ab-line { transform: none; }
.about.in .ab-dot { transform: translate(-50%, -50%) scale(1); }
.about.in .ab-go { opacity: 1; }
.about.in .ab-copy h2 span, .about.in .ab-copy h3, .about.in .ab-copy p, .about.in .ab-more { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .about { --split: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 100px 22px 70px; }
  .ab-photo { position: relative; left: auto; right: auto; height: 62vw; margin: 0 -22px 36px; }
  .ab-disc { left: 50%; height: 100%; }
  .ab-split, .ab-line, .ab-go, .ab-dot, .ab-scroll { display: none; }
  .ab-orb { left: 20%; top: 70%; width: 90vw; }
  .ab-copy { position: relative; right: auto; top: auto; transform: none; width: auto; }
  .ab-copy h2 { font-size: 15vw; }
}

/* project page – layout from InDesign page 3 (content width 3702pt) */
.pj-top { position: relative; aspect-ratio: 3702 / 1794; background: #fff; overflow: hidden; }
.pj-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .47; transform: scale(1.05); animation: heroZoom 2.4s var(--ease) forwards; }
.pj-panel { position: absolute; left: 0; top: 0; width: 35.04%; height: 100%; background: #fff; z-index: 2; }
.pj-mark { display: none; } /* the header shows the mark instead (.logo-mark) */
/* project pages: small "back home" button on the right, under the menu */
.back-home { position: absolute; right: clamp(16px, 2.6vw, 44px); top: clamp(64px, 5.6vw, 92px); display: flex; align-items: center; gap: 8px; padding: 7px 14px 6px; border-radius: 99px; font-family: var(--tzar); font-size: 15px; line-height: 1; color: #eee; border: 1px solid rgba(255,255,255,.3); background: rgba(20,20,20,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, color .3s, border-color .3s; }
.back-home i { width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
.back-home:hover { background: var(--yellow); border-color: var(--yellow); color: #000; }
.back-home:hover i { transform: translateX(3px) rotate(45deg); }
.site-header.on-light .back-home:not(:hover) { color: #111; border-color: rgba(0,0,0,.25); background: rgba(255,255,255,.6); }
body.menu-open .back-home { opacity: 0; pointer-events: none; }

/* project pages: the round Jumbo mark from InDesign as the header logo */
.logo.logo-mark { left: 3.67vw; top: 2.6vw; width: clamp(40px, 3.1vw, 62px); }
.logo.logo-mark img { opacity: 1; border-radius: 50%; transition: transform .5s var(--ease); }
.logo.logo-mark:hover img { transform: rotate(-12deg) scale(1.06); }
.pj-copy { position: absolute; left: 16.9%; top: 25.6%; width: 64%; color: #111; text-align: justify; text-align-last: right; }
.pj-copy h2 { margin: 0 0 .25em; font-family: var(--almoni); font-weight: 700; font-size: 1.92vw; line-height: 1.12; text-align: right; }
.pj-copy h2 span { display: block; }
.pj-copy p { margin: 0 0 .25em; font-family: var(--almoni); font-weight: 300; font-size: 1.39vw; line-height: 1.32; }
.pj-head { position: absolute; left: 32.5%; top: 19.1%; z-index: 3; text-align: left; }
.pj-num { font-family: var(--bodoni); font-size: 11.6vw; line-height: .8; color: rgba(0,0,0,.59); direction: ltr; }
.pj-title { margin: .1em 0 0 1.75vw; font-family: var(--tzar); font-weight: 400; font-size: 10.5vw; line-height: .72; color: rgba(0,0,0,.64); }
.pj-title span { display: block; }
/* full-colour opening photo: white title so it stays readable */
.pj-top--photo .pj-num, .pj-top--photo .pj-title { color: rgba(255,255,255,.95); text-shadow: 0 4px 30px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); }
.pj-top--photo .pj-head { left: 38%; }
.pj-top--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.42) 36%, rgba(0,0,0,.18) 62%, rgba(0,0,0,0) 80%); }
.pj-head > * { animation: rise 1.1s var(--ease) both; } .pj-title { animation-delay: .15s; }
.pj-colors { position: relative; aspect-ratio: 3702 / 549; display: flex; direction: ltr; }
.pj-colors i { flex: 1; transform-origin: bottom; animation: colorUp 1s var(--ease) both; }
.pj-colors i:nth-child(2) { animation-delay: .12s; } .pj-colors i:nth-child(3) { animation-delay: .24s; }
@keyframes colorUp { from { transform: scaleY(0); } }
.pj-wide, .pj-pair figure { margin: 0; overflow: hidden; }
.pj-wide { aspect-ratio: 3702 / 1429; }
.pj-wide img, .pj-pair img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pj-wide:hover img, .pj-pair figure:hover img { transform: scale(1.03); }
.pj-wide.pj-wide--native { aspect-ratio: auto; }
.pj-wide--native img { height: auto; display: block; }
.pj-pair { display: grid; grid-template-columns: 2385fr 1318fr; aspect-ratio: 3702 / 1151; direction: ltr; }
.site-header.on-light .logo .logo-dark { opacity: 1; }
.site-header.on-light .logo .logo-light { opacity: 0; }
.site-header.on-light .burger span { background: #111; }
@media (max-width: 900px) {
  .pj-top { aspect-ratio: auto; display: flex; flex-direction: column; }
  .pj-backdrop { position: relative; order: 2; height: 70vw; }
  .pj-panel { position: relative; width: auto; height: auto; padding: 96px 22px 30px; }
  .pj-mark { display: none; }
  .pj-copy { position: static; width: auto; }
  .pj-copy h2 { font-size: 24px; } .pj-copy p { font-size: 16px; }
  .pj-head { position: relative; top: auto; left: auto; order: 1; background: #fff; padding: 0 22px 26px; }
  .pj-num { font-size: 18vw; } .pj-title { font-size: 16vw; }
  .pj-colors { aspect-ratio: auto; height: 18vw; }
  .pj-wide { aspect-ratio: 16 / 9; }
  .pj-pair { grid-template-columns: 1fr; aspect-ratio: auto; }
  .pj-pair figure { aspect-ratio: 4 / 3; }
}

/* gallery arrows */
.g-arrows { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(56px, 6vw, 90px); direction: ltr; }
.g-arrows .g-progress { margin: 0; }
.g-arrows .g-progress::before, .g-arrows .g-progress::after { content: none; }
.g-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.g-arrow i { position: relative; width: 10px; height: 1px; background: #eee; }
.g-arrow i::after { content: ""; position: absolute; top: -2.5px; width: 5px; height: 5px; border-top: 1px solid #eee; }
.g-left i::after { left: 0; border-left: 1px solid #eee; transform: rotate(-45deg); }
.g-right i::after { right: 0; border-right: 1px solid #eee; transform: rotate(45deg); }
.g-arrow:hover { background: var(--yellow); border-color: var(--yellow); }
.g-arrow:hover i, .g-arrow:hover i::after { background-color: #000; border-color: #000; }
.g-arrow:hover i::after { background: none; }
.g-item { cursor: zoom-in; }

/* full-size image viewer */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(12,12,12,.94); display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; direction: ltr; }
body.lb-open .lightbox { opacity: 1; visibility: visible; }
body.lb-open { overflow: hidden; }
.lb-stage { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: 16px; max-height: 100vh; }
.lb-stage img { max-width: min(100%, 1500px); max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; opacity: 0; transform: scale(.96); transition: opacity .45s, transform .6s var(--ease); }
.lb-stage img.ready { opacity: 1; transform: none; }
.lb-stage figcaption { direction: rtl; display: flex; align-items: baseline; gap: 14px; color: #eee; }
.lb-stage strong { font-family: var(--tzar); font-weight: 400; font-size: 26px; }
.lb-stage span { font-family: var(--almoni); font-weight: 300; font-size: 14px; color: #aaa; }
.lb-stage em { font-style: normal; font-family: var(--bodoni); color: var(--yellow); font-size: 16px; direction: ltr; }
.lb-close { position: absolute; top: 18px; right: 24px; width: 48px; height: 48px; font-size: 34px; line-height: 1; color: #eee; transition: color .3s, transform .4s var(--ease); }
.lb-close:hover { color: var(--yellow); transform: rotate(90deg); }
.lb-nav { width: 56px; height: 56px; justify-self: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #eee; font-size: 30px; line-height: 1; transition: background .3s, color .3s, border-color .3s; }
.lb-nav:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }
.lb-prev { grid-column: 1; grid-row: 1; } .lb-next { grid-column: 3; grid-row: 1; }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr; }
  .lb-stage { grid-row: 1; padding: 0 12px; }
  .lb-nav { position: absolute; bottom: 24px; }
  .lb-prev { left: 24px; } .lb-next { right: 24px; }
}

/* contact – two columns: heading on the right, form on the left */
.contact-inner { max-width: 1180px; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.contact-head { background: none; border: 0; padding: 0; display: block; }
.contact-head::before { display: none; }
.contact-head h2 { font-size: clamp(56px, 6.4vw, 104px); font-weight: 800; line-height: .88; }
.contact-head h2 b { color: var(--yellow); }
.contact-head p { margin: 22px 0 0; max-width: 360px; font-family: var(--tzar); font-weight: 300; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; color: #bdbdbd; }
.contact-head .contact-mail { display: inline-block; margin-top: 34px; letter-spacing: .06em; font-size: 15px; font-weight: 400; direction: ltr; }
.contact-form { grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 4px; margin-top: 6px; }
.contact-form .f { flex-direction: column; align-items: stretch; gap: 8px; padding: 18px 0 12px; border-bottom-color: rgba(255,255,255,.18); }
.contact-form .f:focus-within { border-bottom-color: var(--yellow); }
.contact-form .f > span { font-family: var(--tzar); font-weight: 300; font-size: 15px; letter-spacing: .04em; color: #9d9d9d; }
.contact-form .f input, .contact-form .f textarea { font-size: 19px; padding: 2px 0; }
.contact-form .f textarea { min-height: 84px; line-height: 1.5; overflow: auto; }
.contact-form .f textarea::placeholder { font-family: var(--almoni); font-weight: 300; font-size: 17px; color: rgba(255,255,255,.35); letter-spacing: 0; }
.contact-form .f-name { grid-column: 1; grid-row: 1; }
.contact-form .f-phone { grid-column: 2; grid-row: 1; }
.contact-form .f-mail { grid-column: 1 / -1; grid-row: 2; }
.contact-form .f-msg { grid-column: 1 / -1; grid-row: 3; }
.contact-form .send { grid-column: 1 / -1; grid-row: 4; justify-self: end; align-self: start; margin-top: 30px; }
.contact-form .form-status { grid-column: 1 / -1; grid-row: 5; }
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 36px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .f-name, .contact-form .f-phone, .contact-form .f-mail, .contact-form .f-msg, .contact-form .send, .contact-form .form-status { grid-column: 1; grid-row: auto; }
}

/* preloader – dark grain, drifting yellow light, small logo and a yellow progress bar */
.loader { position: fixed; inset: 0; z-index: 200; background: #111; display: grid; place-items: center; overflow: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.loader::after { content: ""; position: absolute; inset: 0; opacity: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ld-glow { position: absolute; width: 90vmax; height: 90vmax; left: 50%; top: 50%; margin: -45vmax 0 0 -45vmax; border-radius: 50%; filter: blur(50px);
  background: radial-gradient(circle, rgba(252,194,74,.20) 0%, rgba(252,194,74,.12) 25%, rgba(252,194,74,.05) 45%, rgba(252,194,74,0) 68%); animation: ldDrift 16s ease-in-out infinite alternate; }
@keyframes ldDrift { 0% { transform: translate(-18vw, -10vh) scale(.92); } 50% { transform: translate(10vw, 6vh) scale(1.05); } 100% { transform: translate(-4vw, 12vh) scale(.96); } }
.ld-mark { position: relative; z-index: 1; width: clamp(84px, 7vw, 110px); height: auto; overflow: visible; animation: ldIn 1s var(--ease) both; }
.ld-track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 7; }
.ld-ring { fill: none; stroke: #fff; stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s linear; }
.ld-disc { fill: #050505; }
.ld-m { fill: none; stroke: var(--yellow); stroke-width: 4.3; }
.ld-center { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.ld-center img { width: clamp(90px, 8vw, 120px); animation: ldIn 1s var(--ease) both; }
@keyframes ldIn { from { opacity: 0; transform: translateY(10px); } }
.ld-bar { width: clamp(150px, 14vw, 210px); height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--yellow); box-shadow: 0 0 12px rgba(252,194,74,.7); transition: width .35s var(--ease); }
.ld-pct { font-family: var(--bodoni); font-size: 14px; letter-spacing: .12em; color: rgba(255,255,255,.55); direction: ltr; }
.loader.done { opacity: 0; visibility: hidden; }
body.loading { overflow: hidden; }

/* capture mode (?shot) – final states, no entrance animations */
.shot *, .shot *::before, .shot *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-delay: 0s !important; }
.shot .pj-backdrop, .shot .pj-head > *, .shot .pj-colors i, .shot .hero-bar { animation: none !important; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .hero-bar { top: 74px; width: 22px; height: 150px; }
  .about-stage { aspect-ratio: auto; min-height: 100svh; padding: 120px 20px 80px; display: flex; flex-direction: column; justify-content: center; }
  .about-title { position: relative; right: auto; top: auto; font-size: 13vw; line-height: .82; margin-bottom: 28px; }
  .about-text { position: relative; right: auto; top: auto; width: auto; }
  .about-text h3 { font-size: 24px; } .about-text p { font-size: 19px; }
  .about-bar { left: 6%; width: 9%; } .about-chip { left: 8%; width: 4%; height: 1.4%; }
  .about-stripe { top: 22%; height: 1.2%; }
  .about-title, .about-text { text-shadow: 0 2px 18px rgba(0,0,0,.6); }
  .ring-1 { width: 120vw; left: 10vw; margin-top: -60vw; }
  .ring-2 { width: 80vw; left: -30vw; margin-top: -40vw; }
  .ring-3 { width: 34vw; left: -8vw; margin-top: -17vw; }
  .logo-cell img { height: calc(var(--lh) * .75); }
  .contact-form { grid-template-columns: 1fr; }
  .f-name, .f-phone, .f-mail, .f-msg, .contact-mail, .form-status { grid-column: 1; grid-row: auto; }
  .send { grid-column: 1; grid-row: auto; margin-top: 30px; justify-self: start; }
  .p-hero { aspect-ratio: 4 / 3; }
  .p-bar { top: 70px; width: 18px; height: 60vw; }
  .p-num { font-size: 14vw; } .p-title h1 { font-size: 13vw; }
  .p-title { top: 22%; left: 8%; }
  .p-band { aspect-ratio: auto; display: flex; flex-direction: column; }
  .p-band img { position: relative; height: 56vw; order: 2; object-position: right center; }
  .p-copy { position: relative; left: auto; top: auto; width: auto; padding: 34px 22px 26px; text-align: right; }
  .p-copy h2 { font-size: 26px; } .p-copy .lead, .p-copy p { font-size: 17px; }
  .p-pair { grid-template-columns: 1fr; }
  .p-placeholder { width: 60%; right: 6%; top: 60%; }
}
@media (max-width: 560px) {
  .logos { animation-duration: 40s; }
  .gallery { --G: 62vw; }
  .arrow i { width: 60px; } .arrow:hover i { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ---- Intro: office film over the grainy grey background ---- */
.intro { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; color: #fff; isolation: isolate; }
.intro-media { position: absolute; inset: 0; z-index: -2; background: #2a2a2a center / cover no-repeat; filter: grayscale(1) contrast(1.1) brightness(.8); transform: translateZ(0); }
.intro-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity 1.2s ease; will-change: opacity; }
.intro-media video.is-on { opacity: 1; }
@keyframes introDrift { from { transform: scale(1.04); } to { transform: scale(1.13); } }
.intro::before { /* vignette + fade into the page below */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(75% 70% at 50% 48%, rgba(24,24,24,.15) 0%, rgba(24,24,24,.72) 100%),
    linear-gradient(180deg, rgba(24,24,24,.45) 0%, rgba(24,24,24,0) 26%, rgba(24,24,24,0) 64%, rgba(30,30,30,1) 100%); }
.intro::after { /* heavy grain on top of the film */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
@keyframes grainShift { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.intro-copy { position: relative; z-index: 2; text-align: center; padding: 0 16px; max-width: 1500px; }
.intro-kicker { display: inline-flex; align-items: center; gap: 18px; margin: 0 0 clamp(18px, 3vh, 34px); font-family: var(--tzar); font-weight: 300; font-size: clamp(15px, 1.25vw, 21px); letter-spacing: .28em; color: rgba(255,255,255,.78); }
.intro-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.intro-title { margin: 0; font-family: var(--tzar); font-weight: 800; font-size: clamp(48px, 8.2vw, 158px); line-height: .9; letter-spacing: -.012em; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.intro-title > span { display: block; overflow: hidden; padding: .04em 0 .02em; }
.intro-title > span:first-child { font-weight: 200; }
.intro-title b { display: inline-block; font-weight: inherit; transform: translateY(105%); transition: transform 1.25s var(--ease); }
.intro-title > span + span b { transition-delay: .16s; }
.intro-title em { font-style: normal; color: var(--yellow); }
.intro-kicker, .intro-down { opacity: 0; transition: opacity 1s ease .7s; }
.intro.in .intro-title b { transform: none; }
.intro.in .intro-kicker, .intro.in .intro-down { opacity: 1; }
.intro-down { position: absolute; z-index: 2; left: 50%; bottom: clamp(22px, 5vh, 52px); transform: translateX(-50%); display: grid; justify-items: center; gap: 14px; color: #fff; font-family: var(--tzar); font-weight: 400; font-size: clamp(17px, 1.3vw, 21px); letter-spacing: .08em; }
.intro-down i { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); transition: background .35s, border-color .35s; }
.intro-down i::before { content: ""; position: absolute; left: 50%; top: 16px; width: 1px; height: 24px; background: currentColor; transform: translateX(-50%); animation: introArrow 1.8s var(--ease) infinite; }
.intro-down i::after { content: ""; position: absolute; left: 50%; top: 31px; width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateX(-50%) rotate(45deg); animation: introArrow 1.8s var(--ease) infinite; }
@keyframes introArrow { 0% { translate: 0 -6px; opacity: 0; } 35% { opacity: 1; } 100% { translate: 0 8px; opacity: 0; } }
.intro-down:hover i { background: var(--yellow); border-color: var(--yellow); color: #000; }
.shot .intro-title b { transform: none; transition: none; } .shot .intro-kicker, .shot .intro-down { opacity: 1; }
@media (max-width: 700px) {
  .intro-title { font-size: clamp(40px, 12.5vw, 64px); line-height: .95; }
  .intro-kicker { gap: 10px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) { .intro-media video.is-on, .intro::after, .intro-down i::before, .intro-down i::after { animation: none; } }

/* ---- Menu: a light card with numbered items (opens from the burger) ---- */
.menu { position: fixed; inset: auto; top: clamp(10px, 1.4vw, 18px); right: clamp(10px, 1.4vw, 18px); width: min(560px, calc(100vw - 20px));
  padding: clamp(64px, 6vw, 84px) clamp(28px, 3vw, 46px) clamp(30px, 3vw, 42px); border-radius: 26px;
  background: #ECE8E4; color: #141414; display: block; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  clip-path: inset(0 0 100% 100% round 26px); transition: clip-path .75s var(--ease); z-index: 49; }
body.menu-open .menu { clip-path: inset(0 0 0 0 round 26px); }
body::after { content: ""; position: fixed; inset: 0; z-index: 48; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
body.menu-open::after { opacity: 1; pointer-events: auto; }
.menu ul { text-align: right; }
.menu li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s var(--ease); }
body.menu-open .menu li { opacity: 1; transform: none; }
body.menu-open .menu li:nth-child(1) { transition-delay: .12s; } body.menu-open .menu li:nth-child(2) { transition-delay: .17s; }
body.menu-open .menu li:nth-child(3) { transition-delay: .22s; } body.menu-open .menu li:nth-child(4) { transition-delay: .27s; }
body.menu-open .menu li:nth-child(5) { transition-delay: .32s; } body.menu-open .menu li:nth-child(6) { transition-delay: .37s; }
.menu li a { display: inline-flex; align-items: baseline; gap: 16px; padding: 4px 0; font-family: var(--tzar); font-weight: 500; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.12; letter-spacing: .02em; color: #141414; transform: none; }
.menu li a small { font-family: var(--almoni); font-weight: 400; font-size: 13px; letter-spacing: .08em; color: #6c6863; direction: ltr; min-width: 44px; }
.menu li a span { position: relative; }
.menu li a span::after { content: ""; position: absolute; right: 0; bottom: .08em; height: 2px; width: 0; background: var(--yellow); transition: width .45s var(--ease); }
.menu li a i { position: relative; width: .42em; height: .42em; align-self: center; margin-top: .06em; transition: transform .45s var(--ease); }
.menu li a i::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-left: 2px solid currentColor; border-top: 2px solid currentColor; }
.menu li a i::after { content: ""; position: absolute; left: 0; top: 0; width: 141%; height: 2px; background: currentColor; transform-origin: 0 50%; transform: rotate(45deg); }
.menu li a:hover { color: #141414; transform: none; }
.menu li a:hover span::after { width: 100%; }
.menu li a:hover i { transform: translate(-5px, -5px); }
.menu-foot { position: static; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.12); text-align: right; letter-spacing: .24em; font-size: 12px; color: #77726c; }
body.menu-open .burger span { background: #141414; }
.burger { z-index: 51; }

/* ---- Side menu: always visible, in the style of the reference (cream card, [01] numbers, arrows) ---- */
.side-nav { position: fixed; z-index: 45; right: clamp(18px, 2.4vw, 40px); top: clamp(18px, 2.2vw, 32px);
  display: grid; gap: 0; padding: 0; direction: rtl; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35);
  opacity: 0; translate: 14px 0; transition: opacity .8s ease .2s, translate .8s var(--ease) .2s; }
body:not(.loading) .side-nav { opacity: 1; translate: 0 0; }
.side-nav a { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; color: rgba(255,255,255,.88); transition: color .3s; }
.side-nav a:hover, .side-nav a.is-active { color: #fff; }
.side-nav small { font-family: var(--almoni); font-weight: 400; font-size: 10.5px; letter-spacing: .06em; color: rgba(255,255,255,.45); direction: ltr; min-width: 34px; transition: color .3s; }
.side-nav span { position: relative; font-family: var(--tzar); font-weight: 500; font-size: 21px; line-height: 1.15; letter-spacing: .03em; white-space: nowrap; }
.side-nav span::after { content: ""; position: absolute; right: 0; bottom: 0; height: 2px; width: 0; background: var(--yellow); transition: width .45s var(--ease); }
.side-nav b { position: relative; width: 9px; height: 9px; align-self: center; margin-top: 2px; opacity: .55; transition: transform .4s var(--ease), opacity .3s; }
.side-nav b::before { content: ""; position: absolute; inset: 0; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; }
.side-nav b::after { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 1.5px; background: currentColor; transform-origin: 0 50%; transform: rotate(45deg); }
.side-nav a:hover span::after { width: 100%; }
.side-nav a:hover b { transform: translate(-3px, -3px); opacity: 1; }
.side-nav a.is-active span::after { width: 100%; }
.side-nav a.is-active small { color: var(--yellow); }
.side-nav a.is-active b { opacity: 1; }
@media (min-width: 901px) { body.home .burger { display: none; } }
@media (max-width: 900px) { .side-nav { display: none; } }
/* capture helper for the promo video (never active on the live site) */
html.ovl, html.ovl body { background: transparent !important; }
html.ovl body::before, html.ovl .bg-glow, html.ovl .bg-texture, html.ovl .intro-media, html.ovl .intro::after { display: none !important; }
html.ovl main > :not(.intro), html.ovl footer { visibility: hidden !important; }

/* phones: the project number centred at the very bottom */
@media (max-width: 900px) {
  .hero-count { left: 50%; right: auto; bottom: 14px; transform: translateX(-50%); font-size: 64px; text-align: center; }
}

/* phones: the film and the wheel never scroll the page natively – every swipe there is handled
   by the site (one circle per swipe). Needed on iPhone inside frames, where preventDefault is ignored. */
@media (pointer: coarse) {
  .intro, .hero { touch-action: none; overscroll-behavior: none; }
}

/* ---- project film ---- */
.pj-film { position: relative; margin: 0; background: #0b0b0b; overflow: hidden; }
.pj-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pj-sound { position: absolute; left: clamp(14px, 2vw, 30px); bottom: clamp(14px, 2vw, 28px); display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 9px; border-radius: 99px; background: rgba(15,15,15,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22); color: #fff; font-family: var(--tzar); font-size: 16px; line-height: 1; transition: background .3s, color .3s; }
.pj-sound:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }
.pj-sound i { position: relative; width: 16px; height: 14px; }
.pj-sound i::before { content: ""; position: absolute; left: 0; top: 3px; width: 6px; height: 8px; background: currentColor; clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%); width: 10px; }
.pj-sound i::after { content: ""; position: absolute; right: 0; top: 1px; width: 5px; height: 12px; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 8px 8px 0; opacity: .5; }
.pj-film.has-sound .pj-sound i::after { opacity: 1; }

/* ---- project pages: "curtain" scroll – the opening stays back and drifts slowly,
        the rest of the page slides up over it (like the reference) ---- */
.project main > * { position: relative; z-index: 1; }
.project main > .pj-top { z-index: 0; will-change: transform; }




/* images drift inside their frames while the page scrolls (set by project.js) */
.pj-wide img, .pj-pair figure img { transform: translate3d(0, var(--py, 0px), 0) scale(1.1); transition: none; will-change: transform; }
.pj-wide:hover img, .pj-pair figure:hover img { transform: translate3d(0, var(--py, 0px), 0) scale(1.1); }

/* main project text – smaller, airier */
.pj-copy { top: 50%; transform: translateY(-50%); width: 60%; left: 19%; text-align: right; text-align-last: auto; }
.pj-copy h2 { font-size: 1.5vw; line-height: 1.3; margin-bottom: 1.1em; letter-spacing: .005em; }
.pj-copy p { font-size: 1.04vw; line-height: 1.85; margin-bottom: 1.05em; letter-spacing: .01em; color: #2a2a2a; }
@media (max-width: 900px) {
  .pj-copy { transform: none; width: auto; left: auto; }
  .pj-copy h2 { font-size: 21px; line-height: 1.35; margin-bottom: .9em; }
  .pj-copy p { font-size: 15px; line-height: 1.85; margin-bottom: 1em; }
}
/* ---- project text hierarchy (label · heading · text · solution) ---- */
.pj-copy { width: 66%; left: 17%; }
.pj-kicker { display: block; margin: 0 0 .7em; font-family: var(--almoni); font-weight: 700; font-size: .78vw; letter-spacing: .32em; color: var(--accent, #c79a3c); }
.pj-copy p + .pj-kicker { margin-top: 2.1em; }
.pj-copy h2 { font-size: 1.62vw; line-height: 1.22; margin-bottom: .75em; }
.pj-copy p { font-size: .98vw; line-height: 1.8; margin-bottom: .9em; }
.pj-tags { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: .35em 1.4em; }
.pj-tags li { font-family: var(--tzar); font-weight: 700; font-size: 1.45vw; line-height: 1.1; color: #111; }
@media (max-width: 900px) {
  .pj-copy { width: auto; left: auto; }
  .pj-kicker { font-size: 11px; }
  .pj-copy h2 { font-size: 22px; } .pj-copy p { font-size: 15px; }
  .pj-tags li { font-size: 20px; }
}

/* ---- last screen: previous / next project (no footer on project pages) ---- */
body.project .site-footer { display: none; }
.pj-next { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; height: 100vh; height: 100svh; min-height: 480px; background: #111; }
.pj-next-item { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; color: #fff; text-align: center; padding: 0 6%; }
.pj-next-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.35); transform: scale(1.04); transition: opacity .8s ease, transform 1.4s var(--ease), filter .8s ease; }
.pj-next-item:hover img { opacity: .85; filter: none; transform: scale(1); }
.pj-next-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0) 55%); pointer-events: none; }
.pj-next-item > span, .pj-next-item > strong { position: relative; z-index: 1; }
.pj-next-label { font-family: var(--almoni); font-size: 15px; letter-spacing: .14em; color: rgba(255,255,255,.75); }
.pj-next-item strong { font-family: var(--tzar); font-weight: 700; font-size: clamp(38px, 5.2vw, 96px); line-height: .95; letter-spacing: -.005em; }
.pj-next-item.is-prev { border-left: 1px solid rgba(255,255,255,.08); }
@media (max-width: 900px) {
  .pj-next { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pj-next-item img { opacity: .45; }
  .pj-next-item.is-prev { border-left: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}
/* phone: dark opening – the title first on the site background, then the text, then the photo */
@media (max-width: 900px) {
  .pj-top--dark .pj-head { order: 0; left: auto; top: auto; background: transparent; padding: 124px 22px 0; text-align: right; }
  .pj-top--dark .pj-num, .pj-top--dark .pj-title { color: #fff; text-shadow: none; }
  .pj-top--dark .pj-num { font-size: 15vw; }
  .pj-top--dark .pj-title { margin: .08em 0 0; font-size: 14vw; }
  .pj-top--dark .pj-panel { order: 1; padding: 26px 22px 34px; }
  .pj-top--dark .pj-backdrop { object-position: 100% 50%; }
}

/* ---- project opening on the site's dark background ---- */
/* the panel is the site's own textured charcoal; the photo starts at a clean straight edge */
.pj-top.pj-top--dark { background: transparent; }
.pj-top--dark .pj-panel { background: transparent; }
.pj-top--dark .pj-backdrop { opacity: 1; }
@media (min-width: 901px) {
  .pj-top--dark .pj-backdrop { clip-path: inset(0 0 0 35.04%); }
}
.pj-top--dark .pj-copy { color: #f1f1f1; }
.pj-top--dark .pj-copy h2 { color: #fff; }
.pj-top--dark .pj-copy p { color: rgba(255,255,255,.7); }
.pj-top--dark .pj-tags li { color: #fff; }
.pj-top--dark .pj-tags { margin-bottom: 1.2em; }
.pj-copy h2 + p + .pj-tags { margin-top: 1.6em; }
.pj-top--dark::after { display: none; }

/* ---- last screen on the dark site background – images show on hover ---- */
.pj-next { background: transparent; }
.pj-next-item img { opacity: 0; }
.pj-next-item:hover img { opacity: .6; }
.pj-next-item::after { background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0) 60%); opacity: 0; transition: opacity .8s ease; }
.pj-next-item:hover::after { opacity: 1; }
.pj-next-item.is-prev { border-left: 1px solid rgba(255,255,255,.12); }
@media (hover: none) { .pj-next-item img { opacity: .3; } }

/* rows of extra mockups: same height, each as wide as its own proportions, edge to edge */
.pj-row { display: flex; direction: ltr; }
.pj-row figure { position: relative; margin: 0; overflow: hidden; min-width: 0; background: #e9e9e9; }
.pj-row figure img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translate3d(0, var(--py, 0px), 0) scale(1.1); }
@media (max-width: 700px) {
  .pj-row { flex-direction: column; }
  .pj-row figure { flex: none !important; width: 100%; }
}

/* gentle movement on hover: the picture drifts against the mouse, the name follows it, the label slides in */
.pj-next-item { --mx: 0; --my: 0; }
.pj-next-item img { transform: translate3d(calc(var(--mx) * -26px), calc(var(--my) * -18px), 0) scale(1.1); transition: opacity .9s ease, transform 1.2s cubic-bezier(.22,.61,.36,1), filter .9s ease; }
.pj-next-item:hover img { transform: translate3d(calc(var(--mx) * -26px), calc(var(--my) * -18px), 0) scale(1.04); }
.pj-next-item strong { transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0); transition: transform 1s cubic-bezier(.22,.61,.36,1), letter-spacing 1s cubic-bezier(.22,.61,.36,1); }
.pj-next-item:hover strong { letter-spacing: .01em; }
.pj-next-label { transition: transform .9s cubic-bezier(.22,.61,.36,1), color .6s ease; }
.pj-next-item.is-prev:hover .pj-next-label { transform: translateX(10px); color: var(--yellow, #fcc24a); }
.pj-next-item.is-next:hover .pj-next-label { transform: translateX(-10px); color: var(--yellow, #fcc24a); }

/* ===== project opening v2 (InDesign page 6): wheel picture + centred box, number & name on the box edge ===== */
.pj-top.pj-top--box { aspect-ratio: auto; min-height: 62.8vw; padding: 15.4vw 0 6vw; background: #fff; overflow: hidden; }
.pj-top--box::after { display: none; }
.pj-top--box .pj-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .47; clip-path: none; }
.pj-top--box .pj-panel { position: relative; left: auto; top: auto; width: 66.5%; height: auto; min-height: 36.6vw; margin: 0 auto; padding: 10.1vw 15.5% 4.2vw; background: rgba(0,0,0,.64); z-index: 1; }
.pj-top--box .pj-copy { position: static; width: auto; transform: none; color: #fff; text-align: right; }
.pj-top--box .pj-copy h2 { color: #fff; font-size: 1.67vw; line-height: 1.25; margin-bottom: .6em; }
.pj-top--box .pj-copy p { color: rgba(255,255,255,.82); font-size: 1vw; line-height: 1.75; }
.pj-top--box .pj-tags li { color: #fff; }
.pj-top--box .pj-head { position: absolute; z-index: 2; top: 15.4vw; left: 14.75%; right: 15.25%; transform: translateY(-50%);
  display: flex; justify-content: space-between; align-items: center; direction: ltr; text-align: left; }
.pj-top--box .pj-head > * { animation: rise 1.1s var(--ease) both; }
.pj-top--box .pj-num { font-size: 9.9vw; line-height: .8; color: rgba(0,0,0,.59); text-shadow: none; }
.pj-top--box .pj-title { margin: 0; direction: rtl; font-size: 10.5vw; line-height: .78; color: rgba(0,0,0,.64); text-shadow: none; white-space: nowrap; }
.pj-top--box .pj-title span { display: inline; }
.pj-top--box .pj-title span + span::before { content: " "; }
/* b – the site's dark look: dim picture on charcoal, smoked box, white type */
.pj-top--box.look-b { background: transparent; }
.pj-top--box.look-b .pj-backdrop { opacity: .32; }
.pj-top--box.look-b .pj-panel { background: rgba(14,14,14,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pj-top--box.look-b .pj-num, .pj-top--box.look-b .pj-title { color: rgba(255,255,255,.92); }
/* c – the project's own brand colour for the box and the name */
.pj-top--box.look-c .pj-panel { background: color-mix(in srgb, var(--brand) 90%, transparent); }
.pj-top--box.look-c .pj-num, .pj-top--box.look-c .pj-title { color: var(--brand); }
/* light opening: dark header controls */
body.pj-light .burger span { background: #111; }
body.pj-light .back-home:not(:hover) { color: #111; border-color: rgba(0,0,0,.25); background: rgba(255,255,255,.6); }
@media (max-width: 900px) {
  .pj-top.pj-top--box { min-height: 0; padding: 112px 16px 36px; display: block; }
  .pj-top--box .pj-backdrop { position: absolute; height: 100%; order: 0; }
  .pj-top--box .pj-head { position: relative; top: auto; left: auto; right: auto; transform: none; margin-bottom: -5vw; padding: 0 4px; background: transparent; }
  .pj-top--box .pj-num { font-size: 15vw; } .pj-top--box .pj-title { font-size: 12vw; white-space: normal; text-align: right; }
  .pj-top--box .pj-panel { width: 100%; min-height: 0; padding: 12vw 22px 28px; }
  .pj-top--box .pj-copy h2 { font-size: 22px; } .pj-top--box .pj-copy p { font-size: 15px; }
}