/* ==========================================================================
   Immersive Creative Portfolio — public site
   Theme tokens come from the dashboard (inline :root vars in <head>).
   ========================================================================== */
:root {
  --paper: #ebe5da; --ink: #1b1813; --night: #0e0d0b; --light: #efe8dc; --accent: #b8935a; --accent2: #7d8a86; --muted: #8c8476;
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif;
  --fs: 16.5px; --hscale: 1; --track: .42em; --btn-radius: 0px; --space: 9rem;
  --gutter: clamp(16px, 4vw, 64px); --maxw: 1440px;
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.76, 0, .24, 1);
  --hero-fg: var(--ink); --hero-sub: color-mix(in srgb, var(--ink) 62%, transparent);
  --line: color-mix(in srgb, var(--light) 14%, transparent);
}
body[data-tone="dark"] { --hero-fg: var(--light); --hero-sub: color-mix(in srgb, var(--light) 70%, transparent); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
html, body { margin: 0; }
body {
  font: 300 var(--fs)/1.65 var(--font-body); color: var(--light); background: var(--night);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
html[dir="rtl"] body { line-height: 1.85; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--accent); color: var(--night); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; inset-inline-start: 16px; z-index: 300; background: var(--paper); color: var(--ink); padding: 10px 16px; }
.skip-link:focus { top: 16px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
html[dir="rtl"] .btn .ico, html[dir="rtl"] .work__view .ico { transform: scaleX(-1); }

/* ---------- Background engine layers ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); pointer-events: none; }
.bg-layer, .bg-layer > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-layer canvas { display: block; }
.bg-layer video, .bg-layer .bg-img { object-fit: cover; will-change: transform; }
.bg-overlay { position: absolute; inset: 0; opacity: 0; }
.bg-shade { position: absolute; inset: 0; background: var(--night); opacity: 0; will-change: opacity; }
.bg-grain { position: absolute; inset: -50%; opacity: var(--grain, .06); 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; mix-blend-mode: overlay; }
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,var(--vignette, .35)) 100%); }
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} }
.bg-fallback { background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--paper) 70%, var(--night))); }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 200; background: var(--pl-bg, var(--paper)); color: var(--ink); display: grid; place-items: center; }
.preloader__inner { width: min(360px, 76vw); text-align: center; }
.preloader__mono { width: 92px; height: 92px; margin: 0 auto 28px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 400 30px/1 var(--font-display); letter-spacing: .08em; position: relative; }
.preloader__mono::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--accent); animation: spin 1.6s linear infinite; }
.preloader__count { font: 300 clamp(64px, 14vw, 140px)/1 var(--font-display); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.preloader__bar { height: 1px; background: color-mix(in srgb, var(--ink) 15%, transparent); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s linear; }
.preloader__caption { margin: 16px 0 0; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; opacity: .6; }
html[dir="rtl"] .preloader__caption { letter-spacing: 0; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.no-js .preloader { display: none; }

.page-transition { position: fixed; inset: 0; z-index: 190; background: var(--night); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.preview-badge { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 260; background: var(--accent); color: var(--night); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 14px; }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); color: var(--hero-fg); transition: color .5s, background .5s, padding .5s, transform .6s var(--ease); }
.nav.is-scrolled { color: var(--light); padding-block: 14px; background: color-mix(in srgb, var(--night) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo { display: flex; align-items: center; gap: 12px; }
.nav__logo img { height: 40px; width: auto; transition: opacity .4s; }
.nav__logo .logo-on-dark { display: none; }
body[data-tone="dark"] .nav__logo .logo-on-light, .nav.is-scrolled .logo-on-light, .nav-open .nav .logo-on-light { display: none; }
body[data-tone="dark"] .nav__logo .logo-on-dark, .nav.is-scrolled .logo-on-dark, .nav-open .nav .logo-on-dark { display: block; }
.footer__brand img { height: 44px; width: auto; }
.preloader__logo { display: block; width: min(220px, 56vw); height: auto; margin: 0 auto 30px; animation: plPulse 1.8s ease-in-out infinite; }
@keyframes plPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.nav__mono { width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; font: 400 14px/1 var(--font-display); letter-spacing: .06em; }
.nav__name { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; }
html[dir="rtl"] .nav__name { letter-spacing: 0; font-size: 14px; }
.nav__links { display: flex; gap: clamp(16px, 2.4vw, 36px); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
html[dir="rtl"] .nav__links { letter-spacing: 0; font-size: 14px; }
.nav__links a { position: relative; padding: 6px 0; opacity: .82; transition: opacity .3s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__tools { display: flex; align-items: center; gap: 14px; }
.nav__lang { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); transition: background .3s, color .3s; }
.nav__lang:hover { background: currentColor; }
.nav__lang:hover { color: var(--accent); background: transparent; border-color: var(--accent); }
.nav__burger { display: none; width: 42px; height: 42px; position: relative; }
.nav__burger i { position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger i:first-child { top: 17px; } .nav__burger i:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.navstyle-centered .nav__links { position: absolute; left: 50%; transform: translateX(-50%); }
.navstyle-minimal .nav__links { display: none; }
.navstyle-minimal .nav__burger { display: block; }
.navstyle-minimal.nav-open .nav__links, .navstyle-minimal .nav__links.is-open { display: flex; }

/* ---------- Buttons ---------- */
.btn { --b: currentColor; display: inline-flex; align-items: center; gap: 14px; padding: 15px 26px; border: 1px solid var(--b); border-radius: var(--btn-radius); font-size: 11.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), border-color .5s; }
html[dir="rtl"] .btn { letter-spacing: 0; font-size: 14px; }
.btn::before { content: ''; position: absolute; inset: 0; background: currentColor; transform: translateY(101%); transition: transform .55s var(--ease); z-index: -1; }
.btn > span, .btn > .ico { position: relative; transition: color .45s; }
.btn:hover::before { transform: translateY(0); }
.btn:hover > span, .btn:hover > .ico { color: var(--btn-hover-fg, var(--night)); }
.btn .ico { transition: transform .5s var(--ease), color .45s; }
.btn:hover .ico { transform: translateX(4px); }
.btn--sm { padding: 10px 18px; font-size: 10.5px; }
.btn--solid, .btn-solid .btn { background: var(--accent); border-color: var(--accent); color: var(--night); }
.btn--solid::before, .btn-solid .btn::before { background: var(--light); }
body[data-tone="light"] .hero .btn:hover > span, body[data-tone="light"] .hero .btn:hover > .ico { color: var(--paper); }
.nav:not(.is-scrolled) .nav__cta:hover > span { color: var(--paper); }
body[data-tone="dark"] .nav:not(.is-scrolled) .nav__cta:hover > span { color: var(--night); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; color: var(--hero-fg); display: flex; overflow: hidden; z-index: 1; }
.hero__inner { position: relative; z-index: 3; width: 100%; padding: 120px var(--gutter) 40px; display: grid; grid-template-rows: auto 1fr auto auto; pointer-events: none; }
.hero__center { align-self: center; display: grid; justify-items: center; gap: 22px; transform: translateY(9vh); }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__eyebrow { margin: 0; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--hero-sub); text-align: center; }
html[dir="rtl"] .hero__eyebrow { letter-spacing: 0; font-size: 14px; }
.hero__name { margin: 0; align-self: center; display: flex; align-items: baseline; justify-content: center; gap: 0; font: 300 calc(clamp(30px, 6.2vw, 108px) * var(--hscale))/1 var(--font-display); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; }
html[dir="rtl"] .hero__name { font-weight: 400; text-transform: none; }
.hero__gap { width: clamp(80px, 18vw, 320px); }
.hero__first, .hero__last { display: inline-block; }
.hero__last { margin-inline-end: calc(var(--track) * -1); }
.hero__title { margin: 0; text-align: center; font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--hero-sub); }
html[dir="rtl"] .hero__title { letter-spacing: 0; font-size: 16px; }
.hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hero__intro { margin: 0; max-width: 34ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: var(--hero-sub); }
.hero__meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--hero-fg) 18%, transparent); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--hero-sub); }
html[dir="rtl"] .hero__meta { letter-spacing: 0; font-size: 13px; }
.hero__scroll { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--hero-sub); }
.hero__scroll-ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; }
.hero__scroll-ring .ico { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100%{transform:translateY(-3px);opacity:.4} 50%{transform:translateY(4px);opacity:1} }
.hero__rays { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__rays i { position: absolute; top: -30%; width: 1px; height: 24%; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.9), transparent); opacity: 0; animation: ray calc(7s + var(--i) * .9s) linear calc(var(--i) * -2.1s) infinite; }
body[data-tone="dark"] .hero__rays i { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent); }
@keyframes ray { 0%{transform:translateY(0);opacity:0} 20%{opacity:.7} 60%{opacity:.35} 100%{transform:translateY(420%);opacity:0} }

/* ID card stage (3D canvas sits above the hero background, below text links) */
.card-stage { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.card-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.card-stage.is-grab { cursor: grab; }
.card-stage.is-dragging { cursor: grabbing; }
.card-hint { position: absolute; z-index: 5; bottom: 150px; inset-inline-end: var(--gutter); margin: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--hero-sub); opacity: 0; transition: opacity .8s; pointer-events: none; }
.card-hint.is-on { opacity: .85; }

/* Static (non-WebGL) card */
.scard { position: absolute; z-index: 4; top: 0; width: clamp(170px, 18vw, 260px); transform-origin: 50% -40%; perspective: 1200px; pointer-events: auto; }
.scard__strap { position: absolute; left: 50%; bottom: 100%; width: 22px; height: 60vh; transform: translateX(-50%); background: var(--strap, #111); }
.scard__strap::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 34px; height: 16px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(#cfcfcf, #8a8a8a); }
.scard__inner { position: relative; transform-style: preserve-3d; transition: transform .9s var(--ease); cursor: pointer; }
.scard.is-flipped .scard__inner { transform: rotateY(180deg); }
.scard__face { display: block; width: 100%; border-radius: 12px; backface-visibility: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.scard__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.scard.is-dropping { animation: scardDrop var(--drop, 1.8s) cubic-bezier(.3,1.4,.5,1) both; }
.scard.is-swaying { animation: scardSway 6s ease-in-out infinite; }
@keyframes scardDrop { 0%{transform:translateY(-120vh) rotate(-14deg)} 55%{transform:translateY(4vh) rotate(6deg)} 75%{transform:translateY(-1.5vh) rotate(-3deg)} 100%{transform:translateY(0) rotate(0)} }
@keyframes scardSway { 0%,100%{transform:rotate(-1.4deg)} 50%{transform:rotate(1.4deg)} }

/* ---------- Sections ---------- */
main { position: relative; z-index: 1; }
.sec { position: relative; padding: var(--space) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.sec-head { display: grid; grid-template-columns: 80px 1fr; gap: 6px 24px; margin-bottom: clamp(48px, 7vw, 96px); align-items: end; }
.sec-head__num { grid-row: span 2; font: 300 14px/1 var(--font-body); color: var(--accent); letter-spacing: .1em; align-self: start; padding-top: 12px; border-top: 1px solid var(--accent); }
.sec-head__eyebrow { font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); display: block; }
html[dir="rtl"] .sec-head__eyebrow { letter-spacing: 0; font-size: 14px; }
.sec-head__title { margin: 0; font: 300 calc(clamp(44px, 7.4vw, 124px) * var(--hscale))/.95 var(--font-display); letter-spacing: -.01em; }
html[dir="rtl"] .sec-head__title { font-weight: 400; line-height: 1.25; }
.sec-head__sub { grid-column: 2; margin: 18px 0 0; max-width: 46ch; color: color-mix(in srgb, var(--light) 64%, transparent); font-size: 1.05em; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.split .w > span { display: inline-block; will-change: transform; }

/* About */
.about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.about__portrait { margin: 0; position: relative; aspect-ratio: 4/5; overflow: hidden; background: #1a1814; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.about__portrait-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2e2820, #12100c); font: 300 96px/1 var(--font-display); color: var(--accent); }
.about__portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 16px 18px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.about__lead { margin: 0 0 28px; font: 300 clamp(26px, 2.8vw, 42px)/1.22 var(--font-display); white-space: pre-line; }
.about__bio { margin: 0 0 48px; color: color-mix(in srgb, var(--light) 70%, transparent); max-width: 60ch; white-space: pre-line; columns: 2 280px; column-gap: 40px; }
.about__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: 26px 18px 0 0; border-inline-end: 1px solid var(--line); }
.stat:last-child { border: 0; }
.stat__num { display: block; font: 300 clamp(44px, 5vw, 76px)/1 var(--font-display); color: var(--light); }
.stat__label { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .stat__label { letter-spacing: 0; font-size: 13px; }
.about__quote { margin: clamp(80px, 11vw, 160px) auto 0; max-width: 1100px; text-align: center; }
.about__quote-label { display: block; font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); margin-bottom: 26px; }
.about__quote p { margin: 0; font: italic 300 clamp(32px, 4.6vw, 72px)/1.12 var(--font-display); }
html[dir="rtl"] .about__quote p { font-style: normal; line-height: 1.5; }
.about__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; margin-top: clamp(64px, 9vw, 120px); }
.about__list h3 { margin: 0 0 16px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.about__list ul { list-style: none; margin: 0; padding: 0; }
.about__list li { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; border-top: 1px solid var(--line); }
.about__list-main { font: 400 20px/1.3 var(--font-display); }
.about__list-sub { grid-row: 2; font-size: 13px; color: var(--muted); }
.about__list-year { grid-row: 1 / span 2; grid-column: 2; font-size: 12px; color: var(--muted); letter-spacing: .1em; }

/* Projects */
.filters { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: -40px 0 48px; }
.filter { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--light) 70%, transparent); transition: all .35s; }
html[dir="rtl"] .filter { letter-spacing: 0; font-size: 13px; }
.filter sup { font-size: 9px; color: var(--accent); margin-inline-start: 2px; }
.filter:hover { border-color: var(--light); color: var(--light); }
.filter.is-active { background: var(--light); color: var(--night); border-color: var(--light); }
.empty { color: var(--muted); font-size: 18px; }
.work { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 64px) clamp(16px, 2.4vw, 36px); }
.work__item { grid-column: span 6; transition: opacity .5s, transform .5s; }
.work--editorial .work__item:nth-child(4n+1) { grid-column: 1 / span 7; }
.work--editorial .work__item:nth-child(4n+2) { grid-column: 9 / span 4; margin-top: 22%; }
.work--editorial .work__item:nth-child(4n+3) { grid-column: 2 / span 5; }
.work--editorial .work__item:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: -12%; }
.work--grid .work__item { grid-column: span 4; }
.work__item.is-hidden { display: none; }
.work__link { display: block; }
.work__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #1a1814; }
.work--editorial .work__item:nth-child(4n+2) .work__media, .work--editorial .work__item:nth-child(4n+3) .work__media { aspect-ratio: 4/5; }
.work__img, .work__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s; }
.work__ph { position: absolute; inset: 0; background: linear-gradient(135deg, #2a241c, #0f0d0a); }
.work__link:hover .work__img { transform: scale(1.06); }
.work__view { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--light); color: var(--night); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; border-radius: 999px; opacity: 0; scale: .85; transition: opacity .45s, scale .6s var(--ease); white-space: nowrap; }
.work__link:hover .work__view { opacity: 1; scale: 1; }
.work__status { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--night); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; }
.work__info { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; padding-top: 18px; }
.work__idx { grid-row: span 2; font-size: 12px; color: var(--accent); padding-top: 8px; }
.work__title { margin: 0; font: 400 clamp(24px, 2.4vw, 36px)/1.1 var(--font-display); }
.work__cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .work__cat { letter-spacing: 0; font-size: 13px; }
.work__curtain { position: absolute; inset: 0; background: var(--night); transform-origin: top; z-index: 2; }
.fx-tilt .work__media { transform-style: preserve-3d; transition: transform .6s var(--ease); }

/* Services */
.svc { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--line); }
.svc__item { position: relative; display: grid; grid-template-columns: 60px 52px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.svc__item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--svc-bg, none) center/cover, color-mix(in srgb, var(--light) 5%, transparent); opacity: 0; transition: opacity .6s; }
.svc__item:hover::before { opacity: .22; }
.svc__num { font-size: 12px; color: var(--accent); }
.svc__icon { color: var(--accent); font-size: 28px; display: grid; }
.svc__title { margin: 0; font: 300 clamp(30px, 3.6vw, 58px)/1.05 var(--font-display); transition: transform .6s var(--ease), color .4s; }
.svc__item:hover .svc__title { transform: translateX(14px); color: var(--accent); }
html[dir="rtl"] .svc__item:hover .svc__title { transform: translateX(-14px); }
.svc__desc { margin: 0; color: color-mix(in srgb, var(--light) 64%, transparent); max-width: 46ch; }
.svc__float { position: fixed; z-index: 5; top: 0; left: 0; width: 280px; aspect-ratio: 4/5; pointer-events: none; overflow: hidden; opacity: 0; scale: .8; transition: opacity .35s, scale .5s var(--ease); }
.svc__float.is-on { opacity: 1; scale: 1; }
.svc__float img { width: 100%; height: 100%; object-fit: cover; }

/* Skills */
.marquee { overflow: hidden; margin: 0 calc(var(--gutter) * -1) clamp(56px, 8vw, 110px); border-block: 1px solid var(--line); padding: 22px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
html[dir="rtl"] .marquee__track { animation-direction: reverse; }
.marquee__item { font: italic 300 clamp(40px, 5.4vw, 86px)/1 var(--font-display); padding: 0 .6em; white-space: nowrap; }
.marquee__item::after { content: '✦'; font-style: normal; font-size: .3em; color: var(--accent); vertical-align: middle; margin-inline-start: 1.2em; }
html[dir="rtl"] .marquee__item { font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }
.skills__label { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin: 0 0 30px; }
.tools { list-style: none; margin: 0 0 clamp(56px, 8vw, 100px); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 40px 20px; }
.tool { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.tool__ring { width: 112px; height: 112px; transform: rotate(-90deg); }
.tool__ring circle { fill: none; stroke: var(--line); stroke-width: 1.5; }
.tool__ring .tool__arc { stroke: var(--c); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 1.8s var(--ease); }
.tool.is-in .tool__arc { stroke-dashoffset: calc(100 - var(--lvl)); }
.tool__badge { position: absolute; top: 34px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--c) 18%, var(--night)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); font: 500 15px/1 var(--font-body); }
.tool__badge img { width: 26px; height: 26px; object-fit: contain; }
.tool__name { margin-top: 14px; font: 400 19px/1.2 var(--font-display); }
.tool__lvl { font-size: 11px; color: var(--muted); letter-spacing: .14em; }
.tool__desc { font-size: 12.5px; color: var(--muted); max-width: 20ch; }
.crafts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 56px; }
.craft { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.craft__name { font: 400 19px/1.2 var(--font-display); }
.craft__bar { height: 1px; background: var(--line); position: relative; }
.craft__bar i { position: absolute; inset-block: -1px; inset-inline-start: 0; width: calc(var(--lvl) * 1%); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
html[dir="rtl"] .craft__bar i { transform-origin: right; }
.craft.is-in .craft__bar i { transform: scaleX(1); }
.craft__lvl { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Experience */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 220px; width: 1px; background: var(--line); }
.tl { display: grid; grid-template-columns: 220px 1fr; gap: 0 56px; padding: 30px 0; position: relative; }
.tl::before { content: ''; position: absolute; top: 40px; inset-inline-start: 216px; width: 9px; height: 9px; border-radius: 50%; background: var(--night); border: 1px solid var(--accent); }
.tl__when { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.tl__role { margin: 0; font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--font-display); }
.tl__company { margin: 6px 0 0; color: var(--accent); font-size: 14px; letter-spacing: .06em; }
.tl__desc { margin: 12px 0 0; color: color-mix(in srgb, var(--light) 66%, transparent); max-width: 62ch; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 120px); }
.contact__email { display: inline-block; font: 300 clamp(28px, 3.6vw, 56px)/1.1 var(--font-display); border-bottom: 1px solid var(--accent); padding-bottom: 6px; word-break: break-all; transition: color .3s; }
.contact__email:hover { color: var(--accent); }
.contact__dl { margin: 44px 0; display: grid; gap: 20px; }
.contact__dl div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contact__dl dt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.contact__dl dd { margin: 0; }
.contact__dl a:hover { color: var(--accent); }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; letter-spacing: .1em; transition: border-color .3s, background .3s; }
.social a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.social__mono { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--light); color: var(--night); font: 500 11px/1 var(--font-body); }
.social img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cform { display: grid; gap: 28px; align-content: start; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { position: relative; display: block; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--light) 25%, transparent); color: var(--light); font: 300 18px/1.5 var(--font-body); padding: 22px 0 10px; resize: vertical; transition: border-color .3s; border-radius: 0; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field span { position: absolute; inset-inline-start: 0; top: 22px; font-size: 14px; color: var(--muted); pointer-events: none; transition: all .35s var(--ease); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field textarea:focus + span, .field textarea:not(:placeholder-shown) + span { top: 0; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
html[dir="rtl"] .field input:focus + span, html[dir="rtl"] .field input:not(:placeholder-shown) + span, html[dir="rtl"] .field textarea:focus + span, html[dir="rtl"] .field textarea:not(:placeholder-shown) + span { letter-spacing: 0; font-size: 12px; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #d07a62; }
.cform .btn { justify-self: start; }
.cform__status { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--accent); }
.cform__status.is-error { color: #e0957f; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Footer */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 56px var(--gutter) 40px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.footer__text { margin: 0; color: var(--muted); font-size: 14px; }
.footer__copy { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.footer__social .social__name { display: none; }
.footer__social a { padding: 6px; }

/* WhatsApp */
.wa { position: fixed; z-index: 120; bottom: var(--wa-offset); display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--wa-size); min-width: var(--wa-size); background: var(--wa-bg); color: var(--wa-fg); border-radius: 50%; box-shadow: 0 14px 40px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(20px) scale(.8); animation: waIn .8s var(--ease) var(--wa-delay) forwards; }
.wa svg { width: 52%; height: 52%; }
.wa--bottom-right { right: var(--wa-offset); } .wa--bottom-left { left: var(--wa-offset); }
.wa--pill { border-radius: 999px; padding: 0 22px 0 16px; } .wa--pill svg { width: calc(var(--wa-size) * .5); height: calc(var(--wa-size) * .5); }
.wa--pill span { font-size: 13px; letter-spacing: .06em; font-weight: 500; }
.wa--square { border-radius: 16px; }
.wa--anim-pulse::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--wa-bg); animation: waPulse 2.4s ease-out infinite; }
.wa--anim-bounce { animation: waIn .8s var(--ease) var(--wa-delay) forwards, waBounce 3s ease-in-out calc(var(--wa-delay) + 1s) infinite; }
@keyframes waIn { to { opacity: 1; transform: none; } }
@keyframes waPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes waBounce { 0%,100%,60% { transform: none; } 70% { transform: translateY(-8px); } 80% { transform: none; } 90% { transform: translateY(-3px); } }
@media (min-width: 761px) { .wa--hide-desktop { display: none; } }
@media (max-width: 760px) {
  .wa--hide-mobile { display: none; }
  .wa--m-bottom-right { right: var(--wa-offset); left: auto; }
  .wa--m-bottom-left { left: var(--wa-offset); right: auto; }
  .wa--m-bottom-center { left: 50%; right: auto; margin-left: calc(var(--wa-size) / -2); }
  .wa--m-bottom-center.wa--pill { margin-left: 0; translate: -50% 0; }
}

/* ---------- Project page ---------- */
.pj__hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.pj__cover { position: absolute; inset: 0; }
.pj__cover-img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.pj__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, color-mix(in srgb, var(--night) 85%, transparent) 85%, var(--night)); }
.pj__hero-inner { position: relative; padding: 140px var(--gutter) 64px; width: 100%; max-width: var(--maxw); margin: 0 auto; }
.pj__back { display: inline-block; margin-bottom: 40px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.pj__back:hover { color: var(--accent); }
.pj__title { margin: 6px 0 0; font: 300 calc(clamp(52px, 9vw, 160px) * var(--hscale))/.92 var(--font-display); letter-spacing: -.015em; }
html[dir="rtl"] .pj__title { line-height: 1.2; font-weight: 400; }
.pj__summary { margin: 24px 0 0; max-width: 52ch; font-size: 18px; color: color-mix(in srgb, var(--light) 76%, transparent); }
.pj__body { max-width: var(--maxw); margin: 0 auto; padding: 72px var(--gutter); display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 100px); }
.pj__meta { margin: 0; display: grid; gap: 22px; align-content: start; }
.pj__meta div { border-top: 1px solid var(--line); padding-top: 12px; }
.pj__meta dt { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.pj__meta dd { margin: 4px 0 0; font: 400 21px/1.3 var(--font-display); }
.link-arrow { color: var(--accent); border-bottom: 1px solid; }
.pj__desc p { margin: 0 0 1.2em; font-size: 1.12em; color: color-mix(in srgb, var(--light) 82%, transparent); max-width: 66ch; }
.pj__desc p:first-child { font: 300 clamp(24px, 2.4vw, 34px)/1.35 var(--font-display); color: var(--light); }
.pj__credits { margin-top: 40px; }
.pj__credits h2, .pj__files h2, .pj__related h2 { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin: 0 0 18px; }
.pj__credits ul { list-style: none; margin: 0; padding: 0; columns: 2 220px; }
.pj__credits li { padding: 6px 0; font-size: 14px; color: color-mix(in srgb, var(--light) 70%, transparent); }
.pj__gallery { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 28px); }
.gal { margin: 0; }
.gal--wide { grid-column: 1 / -1; }
.gal__btn { display: block; width: 100%; position: relative; overflow: hidden; background: #1a1814; cursor: zoom-in; }
.gal__media { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.gal__btn:hover .gal__media { transform: scale(1.03); }
.gal__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); color: #fff; font-size: 18px; border: 1px solid rgba(255,255,255,.4); padding-left: 4px; }
.gal figcaption { padding: 10px 0 0; font-size: 13px; color: var(--muted); }
.pj__files { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter); }
.pj__files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pj__files a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); transition: border-color .3s; }
.pj__files a:hover { border-color: var(--accent); }
.pj__files small { margin-inline-start: auto; color: var(--muted); }
.pj__nav { max-width: var(--maxw); margin: 0 auto; padding: 60px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); }
.pj__nav-link { display: grid; gap: 6px; }
.pj__nav-next { text-align: end; }
.pj__nav-link span { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.pj__nav-link strong { font: 300 clamp(26px, 3.4vw, 52px)/1.1 var(--font-display); transition: color .3s; }
.pj__nav-link:hover strong { color: var(--accent); }
.pj__related { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter) 100px; }
.notfound { min-height: 80vh; display: grid; place-content: center; text-align: center; gap: 24px; padding: 120px var(--gutter); }
.notfound h1 { font: 300 clamp(40px, 6vw, 90px)/1 var(--font-display); margin: 0; }
.notfound .btn { justify-self: center; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 250; background: rgba(8,7,6,.96); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.lb__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; }
.lb__stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 0 70px; touch-action: pan-y; }
.lb__stage img, .lb__stage video { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.lb__prev, .lb__next { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; background: rgba(0,0,0,.3); }
.lb__prev { left: 12px; } .lb__next { right: 12px; }
.lb__prev:hover, .lb__next:hover, .lb__close:hover { border-color: var(--accent); color: var(--accent); }
.lb__cap { padding: 14px var(--gutter) 22px; text-align: center; color: color-mix(in srgb, var(--light) 76%, transparent); min-height: 54px; }

/* Maintenance */
.maint { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 16px; padding: 24px; background: var(--paper); color: var(--ink); }
.maint .nav__mono { margin: 0 auto; width: 64px; height: 64px; font-size: 20px; }
.maint h1 { font: 300 clamp(36px, 6vw, 72px)/1 var(--font-display); margin: 0; }

/* ---------- Reveal defaults (JS adds motion; content always visible without JS) ---------- */
.js .reveal { opacity: 0; }
.js.no-motion .reveal, .js .reveal.is-in { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .work--editorial .work__item:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .work--grid .work__item { grid-column: span 6; }
  .svc__item { grid-template-columns: 44px 40px 1fr; }
  .svc__desc { grid-column: 3; }
}
@media (max-width: 860px) {
  .nav__links { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: center; gap: 22px; background: var(--night); color: var(--light); font: 300 34px/1 var(--font-display); letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
  .nav__links.is-open { opacity: 1; visibility: visible; }
  .navstyle-centered .nav__links { left: 0; transform: none; }
  .nav__burger { display: block; }
  .nav-open .nav { color: var(--light); }
  .nav__cta, .nav__name { display: none; }
  .about__grid, .contact__grid, .pj__body { grid-template-columns: 1fr; }
  .about__portrait { max-width: 460px; }
  .timeline::before { inset-inline-start: 4px; }
  .tl { grid-template-columns: 1fr; padding-inline-start: 32px; gap: 6px; }
  .tl::before { inset-inline-start: 0; top: 36px; }
}
@media (max-width: 760px) {
  :root { --space: 5.5rem; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head__num { grid-row: auto; width: 40px; }
  .sec-head__sub { grid-column: 1; }
  .hero__inner { padding-top: 96px; padding-bottom: 24px; grid-template-rows: auto auto 1fr auto; }
  .hero__bottom { align-self: end; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .3em; }
  .hero__center { align-self: start; transform: none; margin-top: 4.5vh; gap: 14px; }
  .hero__name { flex-direction: column; align-items: center; gap: .12em; font-size: calc(clamp(34px, 11vw, 64px) * var(--hscale)); letter-spacing: calc(var(--track) * .7); }
  .hero__gap { display: none; }
  .hero__title { font-size: 10.5px; letter-spacing: .36em; }
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__intro { max-width: 34ch; font-size: 14px; line-height: 1.55; }
  .hero__meta span + span { display: none; }
  .hero__meta { flex-direction: column; gap: 4px; font-size: 10px; }
  .hero__scroll { display: none; }
  .card-hint { bottom: auto; top: 46%; inset-inline-end: 50%; transform: translateX(50%); }
  .work { grid-template-columns: 1fr; }
  .work__item, .work--editorial .work__item:nth-child(n), .work--grid .work__item { grid-column: 1 / -1; margin-top: 0; }
  .work--editorial .work__item:nth-child(n) .work__media { aspect-ratio: 4/3.4; }
  .work__view { opacity: 1; scale: 1; left: auto; right: 12px; top: auto; bottom: 12px; translate: 0; padding: 9px 14px; }
  .svc__item { grid-template-columns: 34px 1fr; gap: 10px 14px; }
  .svc__icon { display: none; }
  .svc__desc { grid-column: 2; }
  .svc__float { display: none; }
  .cform__row { grid-template-columns: 1fr; }
  .contact__dl div { grid-template-columns: 1fr; gap: 4px; }
  .footer__inner { grid-template-columns: 1fr; }
  .pj__gallery { grid-template-columns: 1fr; }
  .lb__stage { padding: 0 8px; }
  .lb__prev, .lb__next { top: auto; bottom: -60px; translate: 0; }
  .about__bio { columns: 1; }
  .stat { padding-inline-end: 10px; }
  .tools { grid-template-columns: repeat(2, 1fr); }
  .crafts { grid-template-columns: 1fr; }
  .scard { width: 46vw; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-grain, .marquee__track, .hero__rays i, .hero__scroll-ring .ico, .preloader__mono::after { animation: none !important; }
}
.no-motion .bg-grain, .no-motion .marquee__track, .no-motion .hero__rays i { animation: none !important; }