@font-face{font-family:"Lahzeh";src:url("/assets/fonts/Lahzeh-FaNum-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Lahzeh";src:url("/assets/fonts/Lahzeh-FaNum-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lahzeh";src:url("/assets/fonts/Lahzeh-FaNum-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lahzeh";src:url("/assets/fonts/Lahzeh-FaNum-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Lahzeh";src:url("/assets/fonts/Lahzeh-FaNum-ExtraBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lahzeh";src:url("/assets/fonts/Lahzeh-FaNum-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root {
  color-scheme: dark;
  --bg: #030406;
  --fg: #f5f7fa;
  --muted: rgba(238, 243, 249, .48);
  --line: rgba(255,255,255,.13);
  --pad: clamp(22px, 3vw, 52px);
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--bg); }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { overflow-x: hidden; overflow-y: auto; }
body {
  font-family: "Lahzeh", Tahoma, Arial, sans-serif;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.experience {
  --scene-scale: 1;
  --scene-dim: 0;
  position: sticky;
  top: 0;
  z-index: 0;
  width:100%;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  isolation:isolate;
  background:#0b0c0e;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.experience::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:#000;
  opacity:var(--scene-dim);
  transition:opacity 60ms linear;
}
#gl {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  transform:scale(var(--scene-scale));
  transform-origin:center;
  will-change:transform;
}

.core-aura {
  --aura-x: 1;
  --aura-y: 1;
  --aura-x2: 1;
  --aura-y2: 1;
  --aura-rot: 0deg;
  --aura-rot2: 0deg;
  --aura-opacity: .13;
  position:absolute; inset:0; z-index:1; pointer-events:none;
  transform:scale(var(--scene-scale));
  transform-origin:center;
  will-change:transform;
}
.core-aura::before,
.core-aura::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(63vw, 820px);
  aspect-ratio:1;
  transform-origin:center;
  will-change:transform,opacity;
  pointer-events:none;
}
.core-aura::before {
  border-radius:46% 54% 52% 48% / 52% 45% 55% 48%;
  transform:translate(-50%,-50%) rotate(var(--aura-rot)) scale(var(--aura-x),var(--aura-y));
  background:radial-gradient(ellipse at 50% 50%, rgba(225,235,255,.18) 0%, rgba(170,194,235,.095) 24%, rgba(100,130,185,.04) 48%, transparent 70%);
  filter:blur(34px);
  opacity:var(--aura-opacity);
}
.core-aura::after {
  width:min(50vw, 660px);
  border-radius:55% 45% 48% 52% / 44% 56% 46% 54%;
  transform:translate(-50%,-50%) rotate(var(--aura-rot2)) scale(var(--aura-x2),var(--aura-y2));
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.19) 0%, rgba(190,210,248,.075) 31%, transparent 68%);
  filter:blur(26px);
  opacity:calc(var(--aura-opacity) * .72);
}

.grain {
  position: absolute; inset: -40%; z-index: 3; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(3%,-4%)} 50%{transform:translate(-5%,2%)} 75%{transform:translate(4%,5%)} 100%{transform:translate(-2%,-3%)} }

.vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 21%, rgba(0,0,0,.08) 41%, rgba(0,0,0,.46) 100%),
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 24%, transparent 76%, rgba(0,0,0,.24));
}

.topbar {
  position: absolute; z-index: 6; top: 0; left: 0; width: 100%; padding: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.microbrand { display:flex; gap:8px; align-items:center; font: 700 11px/1 "Lahzeh", Tahoma, Arial, sans-serif; letter-spacing:.22em; pointer-events:auto; }
.microbrand__slash, .microbrand__mark--muted { opacity:.35; }
.status { display:flex; align-items:center; gap:10px; font: 600 9px/1 "Lahzeh", Tahoma, Arial, sans-serif; letter-spacing:.17em; color:var(--muted); }
.status__dot { width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.9); animation:pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 50%{opacity:.25; box-shadow:none;} }

.hero {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width:min(88vw, 820px); text-align:center; pointer-events:none;
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}

.hero::before {
  content:""; position:absolute; left:50%; top:45%; width:clamp(175px,18vw,265px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.18); transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 44px rgba(180,205,255,.035); z-index:-1;
}
.hero::after {
  content:""; position:absolute; left:50%; top:45%; width:clamp(112px,11vw,165px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.07); transform:translate(-50%,-50%) rotate(45deg); z-index:-1;
}
.hero__kicker { margin-bottom:14px; font:600 9px/1 "Lahzeh", Tahoma, Arial, sans-serif; letter-spacing:.35em; color:rgba(255,255,255,.55); }
.hero__title { margin:0; font-size:clamp(88px, 10vw, 182px); line-height:.8; letter-spacing:-.075em; font-weight:300; }
.hero__title strong { font-weight:800; }
.hero__rule { margin:clamp(22px,3.4vh,38px) auto 18px; height:1px; width:min(100%,390px); background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.62),rgba(255,255,255,.04)); }
.hero__tagline { margin:0; font:600 clamp(10px, .82vw, 12px)/1 "Lahzeh", Tahoma, Arial, sans-serif; letter-spacing:.19em; }
.hero__tagline i { font-style:normal; opacity:.32; padding:0 .45em; }
.hero__signal { margin:12px 0 0; font:500 8px/1.4 "Lahzeh", Tahoma, Arial, sans-serif; letter-spacing:.17em; color:rgba(255,255,255,.31); }

.socials {
  position:absolute; z-index:6; left:50%; bottom:var(--pad); transform:translateX(-50%);
  display:flex; gap:clamp(16px,2.2vw,34px); justify-content:center; align-items:center;
}
.socials a { position:relative; padding:6px 0; font:600 9px/1 "Lahzeh", Tahoma, Arial, sans-serif; letter-spacing:.12em; color:rgba(255,255,255,.57); transition:color .35s ease, transform .35s var(--ease); }
.socials a span { color:rgba(255,255,255,.2); margin-right:8px; }
.socials a b { font-weight:400; margin-left:7px; opacity:.35; transition:transform .35s var(--ease), opacity .35s ease; display:inline-block; }
.socials a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:#fff; transition:right .4s var(--ease); }
.socials a:hover, .socials a:focus-visible { color:#fff; transform:translateY(-2px); outline:none; }
.socials a:hover::after, .socials a:focus-visible::after { right:0; }
.socials a:hover b, .socials a:focus-visible b { opacity:1; transform:translate(2px,-2px); }

.telemetry { position:absolute; z-index:6; right:var(--pad); top:50%; transform:translateY(-50%); width:clamp(105px,9vw,150px); display:grid; gap:9px; }
.telemetry__row { display:grid; grid-template-columns:34px 1fr; gap:9px; align-items:center; font:600 7px/1 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.12em; color:rgba(255,255,255,.32); }
.telemetry__row i { display:block; height:1px; background:rgba(255,255,255,.1); overflow:visible; position:relative; }
.telemetry__row b { position:absolute; left:0; right:auto; top:-1px; height:3px; width:3%; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.45); transition:width 90ms linear; }
html[dir="rtl"] .telemetry__row b{left:auto;right:0}

.sound-toggle {
  position:absolute; z-index:7; right:var(--pad); bottom:var(--pad);
  border:0; background:none; padding:8px 0; display:flex; align-items:center; gap:11px;
  cursor:pointer; isolation:isolate;
  font:600 8px/1 "Lahzeh",Tahoma,Arial,sans-serif;
  letter-spacing:.15em; color:rgba(255,255,255,.54);
  transition:color .3s ease, text-shadow .3s ease;
}
.sound-toggle:hover, .sound-toggle:focus-visible { color:#fff; outline:none; }
.sound-toggle::before,
.sound-toggle::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-17px;
  right:-17px;
  top:50%;
  height:34px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  opacity:0;
  transform:translateY(-50%) scale(.82);
  pointer-events:none;
}
body.sound-awaiting .sound-toggle {
  color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.42);
}
body.sound-awaiting .sound-toggle::before { animation:soundAttention 1.75s var(--ease) infinite; }
body.sound-awaiting .sound-toggle::after { animation:soundAttention 1.75s var(--ease) .58s infinite; }
body.sound-awaiting .sound-toggle .eq { filter:drop-shadow(0 0 6px rgba(255,255,255,.72)); }
.eq { display:flex; gap:2px; align-items:center; height:12px; }
.eq i { display:block; width:1px; height:4px; background:currentColor; transform-origin:center; animation:eq 680ms ease-in-out infinite alternate; }
.eq i:nth-child(2){animation-delay:-330ms;height:10px}.eq i:nth-child(3){animation-delay:-180ms;height:7px}.eq i:nth-child(4){animation-delay:-520ms;height:5px}
.sound-toggle.is-muted .eq i { animation:none; height:2px; opacity:.38; }
@keyframes eq { from{transform:scaleY(.4)} to{transform:scaleY(1.25)} }
@keyframes soundAttention {
  0% { opacity:0; transform:translateY(-50%) scale(.82); }
  18% { opacity:.62; }
  72%,100% { opacity:0; transform:translateY(-50%) scale(1.18); }
}

.boot { position:absolute; z-index:20; inset:0; display:grid; place-items:center; background:#020305; transition:opacity 1.05s var(--ease), visibility 1.05s; }
.boot::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%,rgba(85,101,124,.12),transparent 31%); }
.boot.is-gone { opacity:0; visibility:hidden; pointer-events:none; }
.boot__inner { position:relative; width:min(560px,calc(100vw - 44px)); text-align:center; }
.boot__eyebrow { margin-bottom:26px; font:600 9px/1 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.35em; color:rgba(255,255,255,.32); }
.boot__logo { font-size:clamp(72px,10vw,142px); line-height:.8; letter-spacing:-.08em; font-weight:300; }
.boot__logo strong { font-weight:800; }
.boot__copy { width:min(360px,100%); margin:31px auto 26px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:14px; font:600 7px/1.4 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.13em; color:rgba(255,255,255,.33); }
.enter { width:min(360px,100%); height:58px; border:1px solid rgba(255,255,255,.23); background:rgba(255,255,255,.045); color:#fff; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:0 19px; font:600 9px/1 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.16em; transition:background .35s ease,border-color .35s ease,transform .35s var(--ease); }
.enter:hover,.enter:focus-visible{outline:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.65);transform:translateY(-2px)}
.enter b{font-size:14px;font-weight:400}
.boot__hint { margin:14px 0 0; font:500 7px/1.5 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.07em; color:rgba(255,255,255,.22); }

.fallback { position:absolute; z-index:30; inset:0; place-items:center; background:#0b0c0e; text-align:center; padding:30px; }
.fallback:not([hidden]) { display:grid; }
.fallback strong { display:block; font-size:72px; letter-spacing:-.08em; }
.fallback span { font:600 9px/1 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.28em; }
.fallback p { color:var(--muted); max-width:440px; line-height:1.7; }
.noscript { position:fixed; inset:0; display:grid; place-items:center; background:#0b0c0e; color:#fff; z-index:99; }

body.is-live .hero { animation:heroIn 1.55s var(--ease) both; animation-delay:.18s; }
body.is-live .socials, body.is-live .telemetry, body.is-live .sound-toggle, body.is-live .topbar { animation:uiIn 1.25s var(--ease) both; animation-delay:.5s; }
@keyframes heroIn { from{opacity:0;transform:translate(-50%, calc(-50% + 22px))} to{opacity:1;transform:translate(-50%, -50%)} }
@keyframes uiIn { from{opacity:0} to{opacity:1} }

@media (max-width: 850px) {
  :root { --pad: 22px; }
  .hero { top: 55%; width:calc(100vw - 44px); }
  .hero__title { font-size:clamp(72px,21vw,118px); }
  .hero__rule { margin:18px auto 14px; width:min(78vw,320px); }
  .hero__signal { display:none; }
  .telemetry { top:92px; right:22px; transform:none; width:100px; }
  .socials { gap:15px; bottom:22px; width:calc(100vw - 44px); flex-wrap:wrap; }
  .socials a { font-size:8px; }
  .socials a span { display:none; }
  .sound-toggle { right:auto; left:22px; bottom:22px; }
  body.is-live .hero { animation:heroInMobile 1.45s var(--ease) both; animation-delay:.2s; }
  @keyframes heroInMobile { from{opacity:0;transform:translate(-50%, calc(-50% + 18px))} to{opacity:1;transform:translate(-50%, -50%)} }
}

@media (max-width: 540px) {
  .telemetry { display:none; }
  .hero { top:57%; }
  
.hero::before {
  content:""; position:absolute; left:50%; top:45%; width:clamp(175px,18vw,265px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.18); transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 44px rgba(180,205,255,.035); z-index:-1;
}
.hero::after {
  content:""; position:absolute; left:50%; top:45%; width:clamp(112px,11vw,165px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.07); transform:translate(-50%,-50%) rotate(45deg); z-index:-1;
}
.hero__kicker { font-size:8px; }
  .hero__tagline { font-size:8px; letter-spacing:.13em; }
  .topbar { align-items:center; }
  .status { font-size:7px; }
  .socials a b { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .status__dot, .eq i, .sound-toggle::before, .sound-toggle::after { animation:none !important; }
  * { scroll-behavior:auto !important; }
}


.scroll-cue {
  position:absolute; z-index:7; left:var(--pad); bottom:var(--pad); display:flex; align-items:center; gap:12px;
  font:600 8px/1 "Lahzeh",Tahoma,Arial,sans-serif; letter-spacing:.15em; color:rgba(255,255,255,.42);
  transition:color .3s ease;
}
.scroll-cue:hover,.scroll-cue:focus-visible{color:#fff;outline:none}
.scroll-cue i{display:block;width:42px;height:1px;background:rgba(255,255,255,.26);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scrollCue 2.4s ease-in-out infinite}
@keyframes scrollCue{0%,20%{transform:translateX(-100%)}55%{transform:translateX(0)}80%,100%{transform:translateX(100%)}}

.portfolio-section{
  position:relative;
  z-index:10;
  min-height:100svh;
  background:#07080a;
  border-top:1px solid rgba(255,255,255,.1);
  border-radius:clamp(24px,2.8vw,42px) clamp(24px,2.8vw,42px) 0 0;
  box-shadow:0 -26px 90px rgba(0,0,0,.62),0 -1px 0 rgba(255,255,255,.025);
  padding:clamp(82px,9vw,140px) clamp(22px,4vw,68px) clamp(90px,11vw,170px);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}
.portfolio-section::before{
  content:"";
  position:absolute;
  top:16px;
  left:50%;
  width:48px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  transform:translateX(-50%);
}
.portfolio-shell{width:min(1500px,100%);margin:0 auto}
.portfolio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(36px,5vw,72px)}
.portfolio-eyebrow{margin:0 0 14px;font:700 9px/1 "Lahzeh",Tahoma,Arial,sans-serif;letter-spacing:.24em;color:rgba(255,255,255,.36)}
.portfolio-head h2{margin:0;max-width:850px;font-size:clamp(34px,4.6vw,74px);line-height:.96;letter-spacing:-.055em;font-weight:400}
.portfolio-count{white-space:nowrap;font:700 9px/1 "Lahzeh",Tahoma,Arial,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.32)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.3vw,34px)}
.project-card{min-width:0;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.project-media{display:block;position:relative;overflow:hidden;background:#0d0f12;aspect-ratio:16/10}
.project-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));pointer-events:none}
.project-media img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform .8s var(--ease),filter .8s var(--ease);filter:saturate(.82) contrast(1.03)}
.project-card:hover .project-media img{transform:scale(1.035);filter:saturate(1) contrast(1.02)}
.project-copy{padding:19px 2px 10px}
.project-topline{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.project-topline h3{margin:0;font-size:clamp(18px,1.45vw,25px);font-weight:600;letter-spacing:-.025em}
.project-topline span{color:rgba(255,255,255,.35);font-size:14px}
.project-copy p{margin:12px 0 20px;color:rgba(236,241,247,.48);font-size:13px;line-height:1.75;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:3.5em}
.project-link{display:inline-flex;align-items:center;gap:9px;font:700 8px/1 "Lahzeh",Tahoma,Arial,sans-serif;letter-spacing:.15em;color:rgba(255,255,255,.58);border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:8px;transition:.3s color,.3s border-color}
.project-link:hover,.project-link:focus-visible{color:#fff;border-color:#fff;outline:none}
.portfolio-empty{min-height:340px;border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:20px;color:rgba(255,255,255,.35)}
.portfolio-empty span{font:700 10px/1 "Lahzeh",Tahoma,Arial,sans-serif}.portfolio-empty p{font-size:18px}

@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-head{align-items:flex-start}.portfolio-head h2{max-width:650px}}
@media(max-width:850px){.scroll-cue{left:auto;right:22px;bottom:66px}.sound-toggle{bottom:22px}.socials{bottom:22px}.portfolio-section{padding-left:22px;padding-right:22px}}
@media(max-width:640px){.portfolio-grid{grid-template-columns:1fr}.portfolio-head{display:block}.portfolio-count{display:block;margin-top:18px}.portfolio-section{padding-top:70px}.scroll-cue{bottom:82px}.project-copy p{min-height:0}}

/* =========================================================
   HEXTM V3 — cinematic scene switch / bilingual UI
   ========================================================= */
html{scroll-behavior:auto!important;scroll-snap-type:none!important;overflow:hidden}
html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
body{overflow:hidden!important}
.site-stage{position:fixed;inset:0;overflow:hidden;background:#07080a}
.experience{position:absolute!important;inset:0!important;top:0!important;width:100%;height:100%;min-height:0!important;z-index:1;overflow:hidden;transform:translate3d(0,0,0) scale(1);filter:brightness(1) blur(0);transition:transform .82s cubic-bezier(.16,1,.3,1),filter .82s cubic-bezier(.16,1,.3,1),opacity .82s ease;will-change:transform,filter,opacity}
body.view-work .experience{transform:translate3d(0,-2.5%,0) scale(.94);filter:brightness(.52) blur(3px);opacity:.58;pointer-events:none}
#gl,.core-aura{transform:none!important}
.topbar-right{display:flex;align-items:center;gap:22px;pointer-events:auto}
.language-switch{display:flex;align-items:center;gap:7px;font:700 9px/1 "Lahzeh",Tahoma,Arial,sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.28)}
.language-switch button{appearance:none;border:0;background:none;color:inherit;padding:5px 1px;cursor:pointer;transition:color .25s ease,opacity .25s ease;font:inherit;letter-spacing:inherit}.language-switch button:hover,.language-switch button:focus-visible,.language-switch button.is-active{color:#fff;outline:none}.language-switch i{font-style:normal;opacity:.32}
.socials a em{font-style:normal}

.portfolio-section{position:absolute!important;inset:0!important;z-index:20!important;width:100%;height:100%;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:0 -40px 140px rgba(0,0,0,.85)!important;padding:0!important;background:#07080a!important;overflow-y:auto!important;overscroll-behavior:contain;transform:translate3d(0,104%,0);opacity:.995;pointer-events:none;transition:transform .82s cubic-bezier(.16,1,.3,1);will-change:transform;scrollbar-color:rgba(255,255,255,.18) transparent}
.portfolio-section::before{content:""!important;position:fixed!important;inset:0 0 auto 0!important;left:0!important;top:0!important;width:100%!important;height:1px!important;transform:none!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent)!important;border-radius:0!important;opacity:.9}
body.view-work .portfolio-section{transform:translate3d(0,0,0);pointer-events:auto}
.work-progress{position:sticky;top:0;z-index:25;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.06));transform-origin:left;transform:scaleX(.08);pointer-events:none}
.portfolio-shell{width:min(1500px,100%);margin:0 auto;padding:clamp(76px,7vw,118px) clamp(22px,4vw,68px) clamp(90px,10vw,160px)}
.portfolio-head{opacity:0;transform:translateY(28px);transition:opacity .55s ease .28s,transform .72s cubic-bezier(.16,1,.3,1) .24s}
.portfolio-grid,.portfolio-empty{opacity:0;transform:translateY(34px);transition:opacity .62s ease .39s,transform .78s cubic-bezier(.16,1,.3,1) .34s}
body.view-work .portfolio-head,body.view-work .portfolio-grid,body.view-work .portfolio-empty{opacity:1;transform:none}
.work-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:18px}.work-language{display:flex}
.project-card{border-top:1px solid rgba(255,255,255,.13)!important}
.project-media{border:1px solid rgba(255,255,255,.11);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.project-media::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.035);z-index:2;pointer-events:none}
.project-link b{font-weight:400}.portfolio-count em{font-style:normal}
.scroll-cue{border:0;background:none;cursor:pointer;color:rgba(255,255,255,.42);padding:0}

html[dir="rtl"] .portfolio-head,html[dir="rtl"] .project-copy{text-align:right}
html[dir="rtl"] .project-topline{direction:rtl}
html[dir="rtl"] .portfolio-eyebrow,html[dir="rtl"] .portfolio-count,html[dir="rtl"] .project-link{letter-spacing:0}
html[dir="rtl"] .hero__kicker,html[dir="rtl"] .hero__tagline,html[dir="rtl"] .hero__signal{letter-spacing:0}

body.is-transitioning .portfolio-section,body.is-transitioning .experience{pointer-events:none!important}

@media(max-width:850px){.topbar-right{gap:12px}.status{display:none}.work-language{display:flex}.portfolio-shell{padding-top:70px}.portfolio-head{align-items:flex-start}.portfolio-section{box-shadow:0 -26px 90px rgba(0,0,0,.82)!important}}
@media(max-width:640px){.portfolio-shell{padding-left:22px;padding-right:22px}.portfolio-head{display:block}.work-head-side{align-items:flex-start;margin-top:18px}.portfolio-grid{grid-template-columns:1fr}.project-media{border-color:rgba(255,255,255,.14)}}
@media(prefers-reduced-motion:reduce){.portfolio-section,.experience,.portfolio-head,.portfolio-grid,.portfolio-empty{transition-duration:.01ms!important}}

/* Persian typography ------------------------------------------------------ */
html[dir="rtl"] body {
  font-family: "Lahzeh", Tahoma, Arial, sans-serif;
}
html[dir="rtl"] .microbrand,
html[dir="rtl"] .status,
html[dir="rtl"] .hero__kicker,
html[dir="rtl"] .hero__tagline,
html[dir="rtl"] .hero__signal,
html[dir="rtl"] .socials a,
html[dir="rtl"] .telemetry__row,
html[dir="rtl"] .sound-toggle,
html[dir="rtl"] .scroll-cue,
html[dir="rtl"] .portfolio-eyebrow,
html[dir="rtl"] .portfolio-count,
html[dir="rtl"] .project-link {
  font-family: "Lahzeh", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] .hero__title {
  font-family: "Lahzeh", Tahoma, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  font-size: clamp(66px, 8.6vw, 142px);
}
html[dir="rtl"] .portfolio-head h2,
html[dir="rtl"] .project-copy h3 {
  font-family: "Lahzeh", Tahoma, Arial, sans-serif;
  letter-spacing: -.025em;
}
.portfolio-description {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.48);
  font-size: clamp(13px,1.1vw,16px);
  line-height: 1.9;
}
html[dir="rtl"] .portfolio-description { line-height: 2; }

html[dir="ltr"] body,html[dir="rtl"] body{font-family:"Lahzeh",Tahoma,Arial,sans-serif}

/* =========================================================
   HEXTM V3.3 — default Persian / refined work typography
   ========================================================= */
html[data-lang="en"] .hero__title{
  font-weight:800;
  letter-spacing:-.055em;
}
.portfolio-eyebrow{
  font-size:8px;
  margin-bottom:11px;
}
.portfolio-head h2{
  max-width:760px;
  font-size:clamp(30px,3.7vw,58px);
  line-height:1.08;
  letter-spacing:-.042em;
  font-weight:500;
}
.portfolio-description{
  max-width:700px;
  margin-top:14px;
  font-size:clamp(12px,.95vw,14px);
  line-height:1.85;
}
html[dir="rtl"] .portfolio-head h2{
  font-size:clamp(28px,3.45vw,54px);
  line-height:1.35;
  letter-spacing:-.02em;
  font-weight:600;
}
html[dir="rtl"] .portfolio-description{
  font-size:clamp(12px,.92vw,14px);
  line-height:1.95;
}
@media(max-width:640px){
  .portfolio-head h2{font-size:clamp(28px,9vw,42px)}
  html[dir="rtl"] .portfolio-head h2{font-size:clamp(27px,8.4vw,40px)}
}