:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --surface-2: #171717;
  --ink: #f2f0e9;
  --muted: #97978f;
  --line: rgba(242, 240, 233, .16);
  --lime: #d8ff44;
  --orange: #ff6b2c;
  --pad: clamp(22px, 4vw, 72px);
  --header-h: 92px;
  --radius: 22px;
  --ease: cubic-bezier(.22,.76,.23,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, Arial, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.modal-open, body.menu-open { overflow: hidden; }
::selection { background: var(--lime); color: #080808; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }
.noise { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .065; mix-blend-mode: soft-light; 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='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.section-pad { padding-left: var(--pad); padding-right: var(--pad); }
.eyebrow { display: block; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.site-header { height: var(--header-h); position: fixed; z-index: 70; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--pad); mix-blend-mode: difference; color: #fff; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 16px; width: max-content; transition: transform .35s var(--ease); }
.brand-logo-image { display: block; width: clamp(150px, 18vw, 260px); height: auto; object-fit: contain; }
.brand-logo-dark { filter: drop-shadow(0 0 18px rgba(198,255,56,.08)); }
.brand-logo-light { display: none; }
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.brand-mark { font: 600 24px/1 Space Grotesk, sans-serif; letter-spacing: -.08em; }
.brand-mark span, .loader-mark span { color: var(--lime); }
.brand-name { font-size: 12px; letter-spacing: .02em; opacity: .82; }
.brand-mark{display:none;}

.nav { display: flex; align-items: center; gap: 9px; }
.nav a { position: relative; padding: 10px 13px; font-size: 12px; }
.nav a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 0; background: transparent; padding: 0; }
.menu-toggle span { display: block; width: 24px; height: 1px; background: currentColor; margin: 6px auto; transition: .3s var(--ease); }
.mobile-menu { position: fixed; inset: 0; z-index: 65; padding: calc(var(--header-h) + 45px) var(--pad) 40px; background: var(--lime); color: #090909; display: flex; flex-direction: column; transform: translateY(-101%); transition: transform .65s var(--ease); }
.mobile-menu a { font: 600 clamp(44px, 13vw, 84px)/1 Space Grotesk, sans-serif; letter-spacing: -.07em; border-bottom: 1px solid rgba(0,0,0,.23); padding: 12px 0; display: flex; justify-content: space-between; }
.mobile-menu a span { font: 400 11px/1 'DM Mono', monospace; letter-spacing: 0; }
.mobile-menu small { margin-top: auto; font-family: 'DM Mono', monospace; text-transform: uppercase; }
.menu-open .mobile-menu { transform: translateY(0); }
.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.page-loader { position: fixed; inset: 0; z-index: 120; background: #070707; display: grid; place-items: center; transition: transform .9s var(--ease), visibility .9s; }
.page-loader.is-done { transform: translateY(-105%); visibility: hidden; }
.loader-mark { font: 700 clamp(70px, 12vw, 180px)/1 Space Grotesk, sans-serif; letter-spacing: -.09em; }
.loader-line { position: absolute; left: 5vw; right: 5vw; bottom: 7vh; height: 1px; background: #262626; }
.loader-line i { display: block; width: var(--progress, 0%); height: 100%; background: var(--lime); transition: width .08s linear; }
.loader-count { position: absolute; right: 5vw; bottom: calc(7vh + 14px); font: 400 12px/1 'DM Mono', monospace; }

.cursor { position: fixed; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 200; pointer-events: none; opacity: 0; border: 1px solid var(--ink); border-radius: 50%; transition: width .25s, height .25s, margin .25s, background .25s, opacity .2s; mix-blend-mode: difference; }
.cursor.is-on { opacity: 1; }
.cursor.is-active { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: #fff; }

.pjax-root { outline: none; transition: opacity .24s ease, transform .45s var(--ease), filter .45s; }
.is-transitioning .pjax-root { opacity: .3; transform: translateY(12px); filter: blur(5px); }
.hero { min-height: 100svh; position: relative; padding-top: calc(var(--header-h) + 54px); padding-bottom: 42px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 40vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(216,255,68,.12), transparent 68%); right: -12vw; top: 8vh; filter: blur(15px); pointer-events: none; }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; font: 400 11px/1.4 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hero-meta span:nth-child(2) { text-align: center; }
.hero-meta span:nth-child(3) { text-align: right; }
.availability i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--lime); margin-right: 8px; box-shadow: 0 0 0 5px rgba(216,255,68,.08); }
.hero-title { margin: 7vh 0 6vh; position: relative; z-index: 2; }
.hero-line { overflow: hidden; font: 600 clamp(70px, 11.3vw, 210px)/.78 Space Grotesk, sans-serif; letter-spacing: -.085em; white-space: nowrap; }
.hero-line-offset { padding-left: 14vw; }
.hero-line-end { text-align: right; padding-right: 3vw; }
.kinetic-word { display: inline-block; will-change: transform; }
.outline-word { color: transparent; -webkit-text-stroke: 1.2px rgba(242,240,233,.72); }
.accent-word { color: var(--lime); }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; position: relative; z-index: 2; }
.hero-bottom > p { width: min(460px, 60vw); margin: 0; color: #c1c1ba; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.55; }
.round-link { width: 124px; height: 124px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; transition: transform .35s var(--ease), background .35s, color .35s; }
.round-link:hover { background: var(--ink); color: var(--bg); }
.round-link span { font: 400 10px/1 'DM Mono', monospace; text-transform: uppercase; }
.round-link svg { position: absolute; width: 27px; bottom: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hero-orbit { position: absolute; width: clamp(145px, 14vw, 250px); right: 6vw; top: 23vh; aspect-ratio: 1; display: grid; place-items: center; opacity: .48; }
.hero-orbit svg { position: absolute; inset: 0; animation: spin 22s linear infinite; }
.hero-orbit text { fill: var(--ink); font: 500 10px 'DM Mono', monospace; letter-spacing: .15em; }
.hero-orbit > span { font: 600 31px/1 Space Grotesk, sans-serif; letter-spacing: -.08em; }
@keyframes spin { to { transform: rotate(360deg); } }

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; background: var(--lime); color: #0b0b0b; transform: rotate(-1deg) scale(1.02); }
.ticker-track { display: flex; gap: 27px; width: max-content; animation: ticker 34s linear infinite; will-change: transform; }
.ticker span { font: 600 clamp(22px, 3vw, 48px)/1 Space Grotesk, sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.ticker i { font-style: normal; font-size: 20px; }
@keyframes ticker { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* The stack marquee contains mostly LTR technology/product names. Keep its internal
   movement LTR even when the Arabic document itself is RTL, otherwise flex row
   direction can reverse the duplicated sequence and break the seamless loop. */
html[dir="rtl"] .ticker { direction: ltr; }
html[dir="rtl"] .ticker-track { direction: ltr; flex-direction: row; }
html[dir="rtl"] .ticker-track span,
html[dir="rtl"] .ticker-track i { direction: ltr; unicode-bidi: isolate; }


.work-intro { padding-top: clamp(130px, 17vw, 240px); padding-bottom: 90px; }
.section-heading { display: grid; grid-template-columns: 1fr 2.2fr 1fr; align-items: end; gap: 32px; }
.section-heading h2 { grid-column: 2; margin: 0; font: 500 clamp(54px, 7vw, 120px)/.94 Space Grotesk, sans-serif; letter-spacing: -.07em; }
.section-heading h2 em, .subhero h1 em, .contact-strip h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.04em; }
.section-heading p { margin: 0; color: var(--muted); max-width: 350px; line-height: 1.65; font-size: 14px; }

.horizontal-work { position: relative; }
.horizontal-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.horizontal-track { height: 100%; display: flex; width: max-content; will-change: transform; }
.project-slide { flex: 0 0 100vw; height: 100%; padding: calc(var(--header-h) + 25px) var(--pad) 55px; display: grid; grid-template-columns: .8fr 1.3fr; gap: clamp(30px, 6vw, 110px); align-items: center; position: relative; }
.project-slide::before { content: ''; position: absolute; left: var(--pad); top: var(--header-h); width: 45px; height: 2px; background: var(--project-accent); }
.project-copy { max-width: 560px; }
.project-topline, .work-row-meta { display: flex; justify-content: space-between; gap: 20px; font: 400 10px/1.3 'DM Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.project-copy h3 { font: 600 clamp(58px, 7vw, 120px)/.84 Space Grotesk, sans-serif; letter-spacing: -.08em; margin: 34px 0 28px; }
.project-copy > p { color: #b9b9b2; line-height: 1.65; font-size: clamp(14px, 1.1vw, 18px); margin: 0 0 28px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.project-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; font: 400 9px/1 'DM Mono', monospace; text-transform: uppercase; color: #bcbcb5; }
.project-actions { display: flex; gap: 24px; margin-top: 32px; align-items: center; }
.text-link { background: none; border: 0; border-bottom: 1px solid #555; padding: 0 0 5px; cursor: pointer; font: 500 12px/1.3 'DM Mono', monospace; transition: border-color .2s, transform .35s var(--ease); }
.text-link:hover { border-color: var(--project-accent, var(--lime)); }
.text-link span { margin-left: 8px; }
.text-link.is-loading { opacity: .5; pointer-events: none; }
.project-visual { position: relative; transition: transform .35s var(--ease); transform-style: preserve-3d; }
.browser-frame { border: 1px solid rgba(255,255,255,.22); border-radius: 18px; overflow: hidden; background: #151515; box-shadow: 0 50px 100px rgba(0,0,0,.38); }
.browser-top { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #1a1a1a; border-bottom: 1px solid rgba(255,255,255,.08); }
.browser-top i { width: 7px; height: 7px; border-radius: 50%; background: #505050; }
.browser-top span { margin-left: auto; margin-right: auto; font: 400 9px/1 'DM Mono', monospace; color: #737373; }
.browser-frame img { width: 100%; aspect-ratio: 1.35/1; object-fit: cover; }
.floating-label { position: absolute; right: -15px; bottom: -20px; max-width: 300px; padding: 12px 14px; border-radius: 999px; background: var(--project-accent); color: #070707; font: 500 9px/1 'DM Mono', monospace; text-transform: uppercase; transform: translateZ(40px); }
.project-slide-end { grid-template-columns: 1fr; background: var(--lime); color: #080808; }
.project-slide-end > div { margin: auto; text-align: center; }
.project-slide-end .eyebrow { color: rgba(0,0,0,.55); }
.project-slide-end h3 { margin: 30px 0 55px; font: 600 clamp(70px, 9vw, 155px)/.83 Space Grotesk, sans-serif; letter-spacing: -.085em; }
.project-slide-end h3 em { font: 400 italic .9em/1 Georgia, serif; }
.big-cta { display: inline-flex; align-items: center; gap: 35px; padding: 18px 24px; border: 1px solid rgba(0,0,0,.3); border-radius: 999px; font: 500 12px 'DM Mono', monospace; transition: transform .35s var(--ease); }
.big-cta span { font-size: 18px; }
.work-progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 18px; height: 1px; background: var(--line); transform-origin: left; }
.work-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }

.services { padding-top: 180px; padding-bottom: 180px; display: grid; grid-template-columns: .8fr 1.4fr; gap: 7vw; align-items: start; }
.services .section-heading { display: block; position: sticky; top: 160px; align-self: start; height: max-content; }
.services .section-heading h2 { margin-top: 25px; font-size: clamp(54px, 6.3vw, 105px); }
.service-stack { display: grid; gap: 16px; }
.service-card { min-height: 260px; position: sticky; top: calc(120px + (var(--stack-i) * 14px)); padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #0f0f0f; display: grid; grid-template-columns: 80px 1fr 1fr 30px; gap: 24px; align-items: start; box-shadow: 0 -15px 50px rgba(0,0,0,.25); }
.service-card > span { font: 400 10px 'DM Mono', monospace; color: var(--muted); }
.service-card h3 { margin: 0; font: 500 clamp(28px, 3vw, 50px)/1 Space Grotesk, sans-serif; letter-spacing: -.05em; }
.service-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 13px; }
.service-card > i { font-style: normal; font-size: 24px; }

.manifesto { position: relative; min-height: 95vh; background: #efede5; color: #0b0b0b; overflow: hidden; display: flex; align-items: center; }
.manifesto-word { position: absolute; left: -3vw; top: -1vw; font: 700 28vw/.8 Space Grotesk, sans-serif; letter-spacing: -.1em; color: rgba(0,0,0,.035); white-space: nowrap; }
.manifesto-inner { position: relative; z-index: 1; width: 100%; }
.manifesto .eyebrow { color: rgba(0,0,0,.45); }
.manifesto-copy { max-width: 1250px; margin: 40px 0 0; font: 500 clamp(38px, 5.8vw, 94px)/1.07 Space Grotesk, sans-serif; letter-spacing: -.055em; }
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; margin-right: .12em; }
.split-word i { font-style: normal; display: inline-block; transform: translateY(120%); transition: transform .8s var(--ease); }
.manifesto-copy.is-active .split-word i { transform: translateY(0); }
.manifesto-copy .split-word:nth-child(3n) i { transition-delay: .06s; }
.manifesto-copy .split-word:nth-child(4n) i { transition-delay: .12s; }

.principles { padding-top: 150px; padding-bottom: 150px; }
.principle { display: grid; grid-template-columns: 100px 1.2fr 1fr; gap: 35px; align-items: start; padding: 38px 0 50px; border-top: 1px solid var(--line); }
.principle > span { font: 400 10px 'DM Mono', monospace; color: var(--muted); }
.principle h3 { margin: 0; font: 500 clamp(31px, 4vw, 64px)/1 Space Grotesk, sans-serif; letter-spacing: -.055em; }
.principle p { margin: 3px 0 0; color: var(--muted); line-height: 1.7; max-width: 520px; }

.contact-strip { background: var(--lime); color: #070707; overflow: hidden; position: relative; }
.contact-marquee { white-space: nowrap; border-bottom: 1px solid rgba(0,0,0,.18); padding: 10px 0; transform: rotate(1deg) scale(1.02); }
.contact-marquee span { display: inline-block; font: 600 13px 'DM Mono', monospace; animation: ticker 18s linear infinite; }
.contact-strip-inner { min-height: 75vh; padding-top: 100px; padding-bottom: 70px; display: grid; grid-template-columns: .55fr 1.45fr .55fr; gap: 30px; align-items: center; }
.contact-strip .eyebrow { color: rgba(0,0,0,.55); align-self: start; margin-top: 18px; }
.contact-strip h2 { margin: 0; font: 600 clamp(64px, 8vw, 135px)/.87 Space Grotesk, sans-serif; letter-spacing: -.08em; }
.contact-disc { width: clamp(150px, 16vw, 250px); aspect-ratio: 1; border-radius: 50%; background: #090909; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin-left: auto; transition: transform .35s var(--ease); }
.contact-disc span { text-align: center; font: 500 clamp(17px, 1.5vw, 23px)/1.1 Space Grotesk, sans-serif; }
.contact-disc b { font: 400 22px/1 'DM Mono', monospace; }

.subhero { min-height: 78vh; padding-top: calc(var(--header-h) + 110px); padding-bottom: 90px; display: grid; grid-template-columns: .5fr 2fr .7fr; gap: 30px; align-content: end; }
.subhero-kicker { font: 400 10px/1.2 'DM Mono', monospace; text-transform: uppercase; color: var(--muted); }
.subhero-kicker span { color: var(--lime); margin-right: 12px; }
.subhero h1 { grid-column: 2 / 4; margin: 0; font: 600 clamp(70px, 9.8vw, 175px)/.84 Space Grotesk, sans-serif; letter-spacing: -.085em; }
.subhero > p { grid-column: 3; margin: 45px 0 0; color: var(--muted); line-height: 1.65; }
.work-list { padding-bottom: 150px; }
.work-row { border-top: 1px solid var(--line); padding: 60px 0; display: grid; grid-template-columns: 70px 1fr 1.15fr; gap: 4vw; align-items: center; }
.work-row-number { align-self: start; padding-top: 4px; font: 400 10px 'DM Mono', monospace; color: var(--project-accent); }
.work-row-main h2 { margin: 28px 0 20px; font: 600 clamp(52px, 6.5vw, 100px)/.9 Space Grotesk, sans-serif; letter-spacing: -.07em; }
.work-row-main > p { max-width: 600px; color: var(--muted); line-height: 1.65; margin-bottom: 25px; }
.work-row-visual { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); transition: transform .35s var(--ease); }
.work-row-visual img { width: 100%; }

.about-hero > p { font-size: 15px; }
.about-grid { padding-top: 80px; padding-bottom: 160px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 8vw; align-items: center; }
.code-window { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 50px 100px rgba(0,0,0,.22); }
.code-window-top { height: 46px; display: flex; gap: 7px; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line); color: #5f5f5f; font: 400 9px 'DM Mono', monospace; }
.code-window-top i { width: 7px; height: 7px; border-radius: 50%; background: #474747; }
.code-window-top span { margin: auto; }
.code-window pre { padding: 40px; overflow: auto; margin: 0; font: 400 clamp(11px, 1.1vw, 16px)/1.9 'DM Mono', monospace; color: #a2a2a2; }
.code-window b { color: var(--lime); font-weight: 400; }
.code-window em { color: #f7f3e7; font-style: normal; }
.about-copy h2 { margin: 22px 0 35px; font: 500 clamp(55px, 6vw, 95px)/.94 Space Grotesk, sans-serif; letter-spacing: -.07em; }
.about-copy p { color: var(--muted); line-height: 1.8; max-width: 620px; }
.stack-cloud { padding-top: 70px; padding-bottom: 160px; }
.stack-cloud-inner { margin-top: 55px; display: flex; flex-wrap: wrap; gap: 12px; }
.stack-cloud-inner span { padding: 16px 22px; border-radius: 999px; border: 1px solid var(--line); font: 500 clamp(17px, 2.4vw, 34px)/1 Space Grotesk, sans-serif; transition-delay: var(--delay); }
.stack-cloud-inner span:nth-child(2n) { background: var(--ink); color: var(--bg); }
.stack-cloud-inner span:nth-child(3n) { background: var(--lime); color: var(--bg); border-color: var(--lime); }

.contact-page { min-height: 100vh; padding-top: calc(var(--header-h) + 100px); padding-bottom: 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }
.contact-heading { position: sticky; top: 145px; }
.contact-heading h1 { margin: 35px 0 30px; font: 600 clamp(67px, 8vw, 130px)/.84 Space Grotesk, sans-serif; letter-spacing: -.08em; }
.contact-heading h1 em { font: 400 italic .9em/1 Georgia, serif; }
.contact-heading > p { color: var(--muted); line-height: 1.7; max-width: 520px; }
.contact-form { padding-top: 14px; }
.field { display: block; border-top: 1px solid var(--line); padding: 30px 0 25px; position: relative; }
.field > span { display: block; font: 400 9px/1 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 18px; }
.field input, .field textarea, .field select { width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; resize: vertical; padding: 0; font: 500 clamp(21px, 2.4vw, 34px)/1.3 Space Grotesk, sans-serif; letter-spacing: -.03em; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: #111; color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #444; }
.field i { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.field:focus-within i { transform: scaleX(1); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 30px; }
.form-bottom p { color: var(--muted); max-width: 280px; font-size: 11px; line-height: 1.5; }
.send-button { width: 155px; height: 155px; border-radius: 50%; border: 0; background: var(--lime); color: #090909; display: grid; place-items: center; cursor: pointer; transition: transform .35s var(--ease), opacity .2s; }
.send-button span { font: 500 14px/1 Space Grotesk, sans-serif; }
.send-button b { font: 400 22px/1 'DM Mono', monospace; margin-top: -36px; }
.send-button:disabled { opacity: .55; cursor: wait; }
.form-status { margin-top: 24px; min-height: 20px; font: 400 11px/1.5 'DM Mono', monospace; opacity: 0; transform: translateY(6px); transition: .3s; }
.form-status.is-showing { opacity: 1; transform: translateY(0); }
.form-status.is-success { color: var(--lime); }
.form-status.is-error { color: #ff857d; }

.site-footer { padding: 80px var(--pad) 30px; background: #090909; }
.footer-rule { height: 1px; background: var(--line); }
.footer-grid { padding: 45px 0 65px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.footer-grid strong { display: block; margin-top: 12px; font: 500 22px Space Grotesk, sans-serif; }
.footer-grid p { margin: 12px 0 0; color: #c3c3bd; font-size: 12px; }
.footer-right { text-align: right; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 25px; display: flex; justify-content: space-between; color: var(--muted); font: 400 9px 'DM Mono', monospace; text-transform: uppercase; }
.back-top { background: transparent; border: 0; cursor: pointer; text-transform: uppercase; font: inherit; transition: transform .35s var(--ease); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.project-modal { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.project-modal.is-open { visibility: visible; pointer-events: auto; }
.project-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; }
.project-modal-panel { position: absolute; right: 0; top: 0; height: 100%; width: min(880px, 92vw); background: #101010; border-left: 1px solid var(--line); padding: 38px clamp(25px, 4vw, 70px) 60px; overflow-y: auto; transform: translateX(101%); transition: transform .65s var(--ease); }
.project-modal.is-open .project-modal-backdrop { opacity: 1; }
.project-modal.is-open .project-modal-panel { transform: translateX(0); }
.modal-close { margin-left: auto; display: block; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; font: 400 10px 'DM Mono', monospace; transition: transform .35s var(--ease); }
.modal-project-head { padding: 75px 0 45px; }
.modal-project-head .eyebrow { color: var(--project-accent); }
.modal-project-head h2 { margin: 20px 0; font: 600 clamp(60px, 8vw, 115px)/.88 Space Grotesk, sans-serif; letter-spacing: -.08em; }
.modal-project-head p { max-width: 650px; color: var(--muted); line-height: 1.65; font-size: 15px; }
.modal-project-image { border: 1px solid var(--line); border-radius: 17px; overflow: hidden; }
.modal-project-image img { width: 100%; }
.modal-project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding: 55px 0; }
.modal-project-grid p { color: var(--muted); line-height: 1.7; }
.modal-project-footer { border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between; gap: 30px; font: 400 10px/1.5 'DM Mono', monospace; text-transform: uppercase; }
.modal-project-footer span { color: var(--muted); }
.modal-project-footer a { color: var(--lime); }

@media (max-width: 1050px) {
  :root { --header-h: 78px; }
  .section-heading { grid-template-columns: .5fr 2fr; }
  .section-heading h2 { grid-column: 2; }
  .section-heading p { grid-column: 2; margin-top: 16px; }
  .project-slide { grid-template-columns: .85fr 1.15fr; gap: 35px; }
  .services { grid-template-columns: 1fr; }
  .services .section-heading { position: relative; top: 0; margin-bottom: 55px; }
  .service-card { position: relative; top: 0; }
  .contact-strip-inner { grid-template-columns: .3fr 1.4fr .55fr; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-heading { position: relative; top: 0; max-width: 850px; }
}

@media (max-width: 899px) {
  :root { --pad: 22px; }
  .nav { display: none; }
  .menu-toggle { display: block; }
  .brand-logo-image { width: clamp(136px, 34vw, 200px); }
  .brand-name { display: none; }
  .cursor { display: none; }
  .hero { padding-top: calc(var(--header-h) + 34px); }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta span:nth-child(2) { text-align: right; }
  .hero-meta span:nth-child(3) { display: none; }
  .hero-title { margin: 9vh 0 8vh; }
  .hero-line { font-size: clamp(61px, 17vw, 120px); line-height: .83; white-space: normal; }
  .hero-line-offset { padding-left: 8vw; }
  .hero-line-end { text-align: left; padding-right: 0; padding-left: 15vw; }
  .hero-bottom { align-items: center; }
  .hero-bottom > p { width: 65vw; font-size: 14px; }
  .round-link { width: 88px; height: 88px; flex: 0 0 88px; }
  .round-link svg { display: none; }
  .hero-orbit { width: 130px; right: -30px; top: 19vh; opacity: .3; }
  .work-intro { padding-top: 110px; padding-bottom: 55px; }
  .section-heading { display: block; }
  .section-heading h2 { margin-top: 20px; font-size: clamp(52px, 15vw, 95px); }
  .section-heading p { margin-top: 26px; }
  .horizontal-work { height: auto !important; }
  .horizontal-sticky { position: relative; height: auto; overflow: visible; }
  .horizontal-track { display: block; width: auto; transform: none !important; }
  .project-slide { min-height: 95svh; height: auto; padding: 90px var(--pad); display: grid; grid-template-columns: 1fr; gap: 45px; border-top: 1px solid var(--line); }
  .project-copy h3 { font-size: clamp(59px, 18vw, 105px); }
  .project-visual { order: -1; }
  .floating-label { right: 10px; bottom: -15px; max-width: 85%; }
  .project-slide-end { min-height: 75svh; }
  .project-slide-end h3 { font-size: clamp(60px, 17vw, 110px); }
  .work-progress { display: none; }
  .services { padding-top: 110px; padding-bottom: 110px; }
  .service-card { grid-template-columns: 40px 1fr; min-height: auto; padding: 27px 22px; }
  .service-card p { grid-column: 2; }
  .service-card > i { display: none; }
  .manifesto { min-height: 85vh; }
  .manifesto-copy { font-size: clamp(39px, 10vw, 70px); }
  .principles { padding-top: 90px; padding-bottom: 90px; }
  .principle { grid-template-columns: 45px 1fr; }
  .principle p { grid-column: 2; }
  .contact-strip-inner { min-height: 70vh; grid-template-columns: 1fr; align-content: center; }
  .contact-strip h2 { font-size: clamp(60px, 16vw, 110px); }
  .contact-disc { margin: 20px 0 0 auto; width: 155px; }
  .subhero { grid-template-columns: 1fr; min-height: 75vh; padding-top: calc(var(--header-h) + 70px); }
  .subhero h1, .subhero > p { grid-column: 1; }
  .subhero h1 { font-size: clamp(67px, 18vw, 120px); }
  .subhero > p { margin-top: 15px; max-width: 500px; }
  .work-row { grid-template-columns: 35px 1fr; padding: 45px 0; }
  .work-row-visual { grid-column: 2; grid-row: 1; margin-bottom: 30px; }
  .work-row-main { grid-column: 2; }
  .about-grid { grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 100px; }
  .code-window { order: 2; }
  .contact-page { padding-top: calc(var(--header-h) + 70px); }
  .contact-heading h1 { font-size: clamp(65px, 17vw, 110px); }
  .field input, .field textarea, .field select { font-size: 23px; }
  .form-bottom { align-items: flex-end; }
  .send-button { width: 125px; height: 125px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-right { text-align: left; }
  .modal-project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hero-bottom > p { width: 62vw; }
  .round-link { width: 78px; height: 78px; flex-basis: 78px; }
  .project-slide { padding-top: 75px; padding-bottom: 75px; min-height: auto; }
  .browser-top span { font-size: 8px; }
  .project-actions { gap: 16px; flex-wrap: wrap; }
  .service-card { grid-template-columns: 30px 1fr; }
  .principle { grid-template-columns: 30px 1fr; gap: 18px; }
  .contact-disc { width: 135px; }
  .work-row { grid-template-columns: 25px 1fr; gap: 15px; }
  .form-bottom { flex-direction: column; align-items: stretch; }
  .send-button { margin-left: auto; }
  .footer-bottom { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .kinetic-word, .horizontal-track, [data-tilt] { transform: none !important; }
  .split-word i { transform: none !important; }
}

/* Direct contact shortcuts */
.direct-contact { margin-top: 44px; border-top: 1px solid var(--line); max-width: 560px; }
.direct-contact a { display: grid; grid-template-columns: 110px 1fr 24px; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color .25s, padding-left .35s var(--ease); }
.direct-contact a:hover { color: var(--lime); padding-left: 8px; }
.direct-contact span { color: var(--muted); font: 500 9px/1 'DM Mono', monospace; text-transform: uppercase; }
.direct-contact strong { font: 500 clamp(13px, 1.35vw, 18px)/1.3 Space Grotesk, sans-serif; word-break: break-word; }
.direct-contact b { font: 400 17px/1 'DM Mono', monospace; }
.footer-grid a { color: inherit; text-decoration: none; }
.footer-grid a:hover { color: var(--lime); }
@media (max-width: 620px) {
  .direct-contact a { grid-template-columns: 1fr 24px; gap: 8px; }
  .direct-contact span { grid-column: 1 / -1; }
}

/* v1.2 multilingual / SEO / AI + automation update */
.header-actions{display:flex;align-items:center;gap:14px}.language-switch{display:flex;align-items:center;gap:3px;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px}.language-switch a{padding:6px 7px;font:500 8px/1 'DM Mono',monospace;letter-spacing:.04em;opacity:.58;border-radius:999px}.language-switch a[aria-current="true"]{background:#fff;color:#080808;opacity:1}.mobile-language-switch{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}.mobile-language-switch a{font:600 13px/1 'DM Mono',monospace!important;letter-spacing:.02em!important;border:1px solid rgba(0,0,0,.3)!important;padding:10px 12px!important;border-radius:999px;display:block!important}.mobile-language-switch a[aria-current="true"]{background:#0b0b0b;color:var(--lime)}
.footer-person{display:grid;grid-template-columns:74px 1fr;gap:17px;align-items:center}.footer-portrait{width:74px;height:74px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:#111;display:grid;place-items:center}.footer-portrait img{width:100%;height:100%;object-fit:cover}.footer-portrait span{font:700 22px/1 Space Grotesk,sans-serif;letter-spacing:-.08em;color:var(--lime)}.footer-person strong{margin-top:7px}.footer-person p{margin-top:4px}.footer-socials{margin-top:12px;display:flex;justify-content:flex-end;gap:13px;font:500 9px 'DM Mono',monospace;text-transform:uppercase}.footer-socials a{color:var(--muted)}.footer-socials a:hover{color:var(--lime)}
html[dir="rtl"] body{font-family:"Noto Kufi Arabic",Manrope,Arial,sans-serif}html[dir="rtl"] .hero-line,html[dir="rtl"] .section-heading h2,html[dir="rtl"] .project-copy h3,html[dir="rtl"] .project-slide-end h3,html[dir="rtl"] .service-card h3,html[dir="rtl"] .manifesto-copy,html[dir="rtl"] .principle h3,html[dir="rtl"] .contact-strip h2,html[dir="rtl"] .subhero h1,html[dir="rtl"] .work-row-main h2,html[dir="rtl"] .about-copy h2,html[dir="rtl"] .contact-heading h1,html[dir="rtl"] .field input,html[dir="rtl"] .field textarea,html[dir="rtl"] .field select{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:-.035em}html[dir="rtl"] .hero-line{line-height:.9}html[dir="rtl"] .hero-line-offset{padding-left:0;padding-right:14vw}html[dir="rtl"] .hero-line-end{text-align:left;padding-right:0;padding-left:3vw}html[dir="rtl"] .hero-meta span:nth-child(3){text-align:left}html[dir="rtl"] .hero-meta span:nth-child(1){text-align:right}html[dir="rtl"] .project-slide::before{left:auto;right:var(--pad)}html[dir="rtl"] .floating-label{right:auto;left:-15px}html[dir="rtl"] .service-card>i{transform:scaleX(-1)}html[dir="rtl"] .contact-disc{margin-left:0;margin-right:auto}html[dir="rtl"] .field i{transform-origin:right}html[dir="rtl"] .footer-right{text-align:left}html[dir="rtl"] .footer-socials{justify-content:flex-start}html[dir="rtl"] .project-modal-panel{right:auto;left:0;border-left:0;border-right:1px solid var(--line);transform:translateX(-101%)}html[dir="rtl"] .project-modal.is-open .project-modal-panel{transform:translateX(0)}html[dir="rtl"] .modal-close{margin-left:0;margin-right:auto}html[dir="rtl"] .code-window,html[dir="rtl"] .browser-frame,html[dir="rtl"] .project-tags,html[dir="rtl"] [dir="ltr"]{direction:ltr}html[dir="rtl"] .direct-contact a{transition:color .25s,padding-right .35s var(--ease)}html[dir="rtl"] .direct-contact a:hover{padding-left:0;padding-right:8px}
@media(max-width:1050px){.language-switch{display:none}}@media(max-width:899px){.header-actions{gap:5px}.footer-socials{justify-content:flex-start}html[dir="rtl"] .hero-meta span:nth-child(2){text-align:left}html[dir="rtl"] .hero-line-offset{padding-left:0;padding-right:8vw}html[dir="rtl"] .hero-line-end{text-align:right;padding-left:15vw;padding-right:0}html[dir="rtl"] .floating-label{left:10px;right:auto}html[dir="rtl"] .contact-disc{margin:20px auto 0 0}.footer-person{grid-template-columns:64px 1fr}.footer-portrait{width:64px;height:64px}}

/* ===== Arabic typography & RTL refinement v1.4 — Noto Kufi restored =====
   Arabic glyphs need generous vertical metrics and zero tracking. These overrides
   intentionally neutralize Latin display tricks that can clip or collide Arabic. */
html[dir="rtl"] body{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  line-height:1.65;
}
html[dir="rtl"] .hero-line,
html[dir="rtl"] .section-heading h2,
html[dir="rtl"] .project-copy h3,
html[dir="rtl"] .project-slide-end h3,
html[dir="rtl"] .service-card h3,
html[dir="rtl"] .manifesto-copy,
html[dir="rtl"] .principle h3,
html[dir="rtl"] .contact-strip h2,
html[dir="rtl"] .subhero h1,
html[dir="rtl"] .work-row-main h2,
html[dir="rtl"] .about-copy h2,
html[dir="rtl"] .contact-heading h1,
html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea,
html[dir="rtl"] .field select,
html[dir="rtl"] .direct-contact strong{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0 !important;
  text-rendering:optimizeLegibility;
}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .subhero-kicker,
html[dir="rtl"] .project-topline,
html[dir="rtl"] .work-row-meta,
html[dir="rtl"] .project-tags span,
html[dir="rtl"] .field>span,
html[dir="rtl"] .direct-contact span,
html[dir="rtl"] .mobile-menu small{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0 !important;
  text-transform:none;
}
html[dir="rtl"] .hero-title{margin:4vh 0 5vh}
html[dir="rtl"] .hero-line{
  line-height:1.12;
  overflow:visible;
  white-space:normal;
  padding-block:.08em;
}
html[dir="rtl"] .hero-line-offset{padding-left:0;padding-right:8vw}
html[dir="rtl"] .hero-line-end{text-align:left;padding-right:0;padding-left:4vw}
html[dir="rtl"] .outline-word{
  color:rgba(242,240,233,.74);
  -webkit-text-stroke:0;
  text-shadow:none;
}
html[dir="rtl"] .section-heading h2,
html[dir="rtl"] .project-copy h3,
html[dir="rtl"] .project-slide-end h3,
html[dir="rtl"] .service-card h3,
html[dir="rtl"] .principle h3,
html[dir="rtl"] .contact-strip h2,
html[dir="rtl"] .subhero h1,
html[dir="rtl"] .work-row-main h2,
html[dir="rtl"] .about-copy h2,
html[dir="rtl"] .contact-heading h1{
  line-height:1.16;
}
html[dir="rtl"] .section-heading h2 em,
html[dir="rtl"] .subhero h1 em,
html[dir="rtl"] .contact-strip h2 em,
html[dir="rtl"] .project-slide-end h3 em,
html[dir="rtl"] .contact-heading h1 em{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  font-style:normal;
  font-weight:500;
  line-height:1.22;
  letter-spacing:0;
}
html[dir="rtl"] .manifesto-copy{line-height:1.28}
html[dir="rtl"] .manifesto-word{line-height:1.05}
html[dir="rtl"] .split-word{overflow:visible;padding-block:.08em}
html[dir="rtl"] .project-copy>p,
html[dir="rtl"] .service-card p,
html[dir="rtl"] .principle p,
html[dir="rtl"] .subhero>p,
html[dir="rtl"] .about-copy p,
html[dir="rtl"] .contact-heading>p,
html[dir="rtl"] .form-bottom p{line-height:1.9}
html[dir="rtl"] .contact-heading{position:relative;top:auto}
html[dir="rtl"] .contact-heading h1{margin-top:28px;margin-bottom:28px}
/* The Arabic contact page must never remain hidden waiting for a reveal observer
   after navigation. Its sections render immediately; other pages keep motion. */
html[dir="rtl"] .contact-page .reveal{opacity:1;transform:none}
html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea,
html[dir="rtl"] .field select{line-height:1.65}
html[dir="rtl"] .field input[dir="ltr"]{font-family:Manrope,Arial,sans-serif;letter-spacing:0!important}
html[dir="rtl"] .direct-contact strong[dir="ltr"]{font-family:Manrope,Arial,sans-serif}
@media(max-width:899px){
  html[dir="rtl"] .hero-line{line-height:1.16}
  html[dir="rtl"] .hero-line-offset{padding-right:4vw}
  html[dir="rtl"] .hero-line-end{padding-left:5vw;text-align:right}
  html[dir="rtl"] .subhero h1,
  html[dir="rtl"] .contact-heading h1,
  html[dir="rtl"] .contact-strip h2{line-height:1.2}
}

/* ========================================================================== 
   Ambient motion layer — lightweight, custom, reduced-motion aware
   ========================================================================== */
:root{--ambient-x:72%;--ambient-y:28%;--ambient-scroll:0px}
.ambient-grid,.ambient-pointer-glow{position:fixed;inset:0;pointer-events:none;z-index:0;contain:strict}
.ambient-grid{opacity:.19;background-image:linear-gradient(rgba(216,255,68,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(216,255,68,.035) 1px,transparent 1px);background-size:72px 72px;background-position:var(--ambient-scroll) var(--ambient-scroll);-webkit-mask-image:radial-gradient(circle at 52% 38%,#000 0,rgba(0,0,0,.76) 35%,transparent 76%);mask-image:radial-gradient(circle at 52% 38%,#000 0,rgba(0,0,0,.76) 35%,transparent 76%)}
.ambient-pointer-glow{z-index:0;background:radial-gradient(circle 430px at var(--ambient-x) var(--ambient-y),rgba(216,255,68,.055),transparent 67%);mix-blend-mode:screen}
/* Keep ambient effects behind the application without collapsing the original
   interactive stacking order. Header/menu must stay above page content. */
.pjax-root,.site-footer{position:relative;z-index:2}
.site-header{position:fixed;z-index:70}
.mobile-menu{position:fixed;z-index:65}

.ambient-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.88}
.hero .ambient-canvas{z-index:1}
.hero-meta,.hero-title,.hero-bottom,.hero-orbit{z-index:2}
.services{position:relative;isolation:isolate;overflow:visible}
.contact-page{position:relative;isolation:isolate;overflow:clip}
.services>.section-heading{z-index:2}
.services>.service-stack,.contact-page>.contact-heading,.contact-page>.contact-form{position:relative;z-index:1}
.ambient-canvas-network{opacity:.62;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ambient-canvas-contact{opacity:.72;-webkit-mask-image:radial-gradient(circle at 72% 60%,#000 0,rgba(0,0,0,.78) 42%,transparent 80%);mask-image:radial-gradient(circle at 72% 60%,#000 0,rgba(0,0,0,.78) 42%,transparent 80%)}

.cursor-trail-dot{position:fixed;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;z-index:199;opacity:0;background:rgba(216,255,68,.22);box-shadow:0 0 18px rgba(216,255,68,.16);transition:opacity .25s ease;will-change:transform}
.cursor-trail-dot.is-on{opacity:calc(.22 - (var(--trail-i) * .035))}

.project-visual{overflow:visible}
.browser-frame{position:relative;transition:box-shadow .45s var(--ease)}
.browser-frame::after{content:"";position:absolute;inset:1px;border-radius:18px;pointer-events:none;z-index:3;background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.02) 35%,rgba(216,255,68,.13) 49%,rgba(255,255,255,.035) 56%,transparent 73%);transform:translateX(-135%) skewX(-10deg);transition:transform .95s cubic-bezier(.22,.76,.23,1);mix-blend-mode:screen;clip-path:inset(0 round 18px)}
.project-visual:hover .browser-frame::after{transform:translateX(135%) skewX(-10deg)}
.project-visual:hover .browser-frame{box-shadow:0 58px 120px rgba(0,0,0,.45),0 0 55px rgba(216,255,68,.035)}

.brand-logo-image{transition:filter .45s var(--ease),transform .45s var(--ease)}
.brand:hover .brand-logo-image{transform:translateZ(0) scale(1.018)}
.brand:hover .brand-logo-dark{filter:drop-shadow(0 0 22px rgba(216,255,68,.18))}

@media(max-width:900px),(pointer:coarse){.ambient-grid,.ambient-pointer-glow,.cursor-trail-dot,.ambient-canvas{display:none!important}.browser-frame::after{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-grid,.ambient-pointer-glow,.cursor-trail-dot,.ambient-canvas{display:none!important}.browser-frame::after{display:none}.brand-logo-image{transition:none!important}}


/* Lighthouse accessibility / interaction hardening */
.mobile-menu[inert]{pointer-events:none;visibility:hidden}
.menu-open .mobile-menu:not([inert]){visibility:visible}
.footer-right p a{display:inline-flex;align-items:center;min-height:30px;padding:4px 0;line-height:1.25}
.footer-right p{line-height:1.2}

/* ==========================================================================
   Interaction stacking hardening — header, language switch and mobile menu
   ========================================================================== */
.site-header{pointer-events:none}
.site-header>.brand,.site-header>.header-actions{pointer-events:auto}
.nav,.nav a,.language-switch,.language-switch a,.menu-toggle{pointer-events:auto}
.mobile-menu[inert]{pointer-events:none;visibility:hidden}
.menu-open .mobile-menu:not([inert]){pointer-events:auto;visibility:visible}
.page-loader.is-done{pointer-events:none}

/* ========================================================================== 
   v1.6 Dual art direction — dark default + editorial light mode
   Light mode intentionally changes composition, surfaces and visual rhythm;
   it is not a simple palette inversion.
   ========================================================================== */
html { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1e9;
  --surface: #fffdf8;
  --surface-2: #e9e5dc;
  --ink: #171b24;
  --muted: #686d76;
  --line: rgba(23, 27, 36, .14);
  --lime: #3157ff;
  --orange: #ff6748;
  --radius: 26px;
}

/* Theme control: a small physical switch, placed next to language controls. */
.theme-toggle {
  position: relative;
  width: 58px;
  height: 30px;
  flex: 0 0 58px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
.theme-toggle:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.5); }
.theme-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.theme-toggle-knob {
  position: absolute;
  z-index: 2;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f2e9;
  box-shadow: 0 3px 10px rgba(0,0,0,.24);
  transition: transform .42s var(--ease), background-color .35s ease, box-shadow .35s ease;
}
.theme-icon { position: absolute; top: 7px; width: 15px; height: 15px; z-index: 1; opacity: .48; transition: opacity .3s ease, transform .42s var(--ease); }
.theme-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { right: 6px; }
.theme-icon-moon svg path { fill: currentColor; stroke: none; }
.theme-icon-sun { left: 6px; opacity: 0; transform: rotate(-35deg) scale(.7); }
html[data-theme="light"] .theme-toggle-knob { transform: translateX(28px); background: #fff; box-shadow: 0 3px 12px rgba(28,49,122,.22); }
html[data-theme="light"] .theme-icon-moon { opacity: 0; transform: rotate(28deg) scale(.7); }
html[data-theme="light"] .theme-icon-sun { opacity: .82; transform: rotate(0) scale(1); }

.mobile-preferences { margin-top: 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.mobile-preference-label { display: block; margin-bottom: 10px; font: 600 9px/1 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.mobile-preferences .mobile-language-switch { margin-top: 0; }
.mobile-theme-choice { display: grid; justify-items: end; }
.theme-toggle-menu { border-color: rgba(0,0,0,.34); background: rgba(0,0,0,.08); color: #0a0a0a; }
.theme-toggle-menu .theme-toggle-knob { background: #0a0a0a; }
html[data-theme="light"] .theme-toggle-menu { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; }
html[data-theme="light"] .theme-toggle-menu .theme-toggle-knob { background: #fff; }

/* Coordinated mode transition without touching transform-heavy animation nodes. */
.theme-is-changing body,
.theme-is-changing .site-header,
.theme-is-changing .mobile-menu,
.theme-is-changing .ticker,
.theme-is-changing .service-card,
.theme-is-changing .manifesto,
.theme-is-changing .contact-strip,
.theme-is-changing .site-footer,
.theme-is-changing .project-modal-panel,
.theme-is-changing .contact-form,
.theme-is-changing .browser-frame,
.theme-is-changing .browser-top,
.theme-is-changing .code-window {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: .48s;
  transition-timing-function: var(--ease);
}

/* ---------- LIGHT / editorial canvas ---------- */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,103,72,.075), transparent 27%),
    radial-gradient(circle at 88% 19%, rgba(49,87,255,.085), transparent 30%),
    var(--bg);
  color: var(--ink);
}
html[data-theme="light"] ::selection { background: #171b24; color: #fffdf8; }
html[data-theme="light"] .noise { opacity: .032; mix-blend-mode: multiply; }

/* A floating editorial toolbar replaces dark mode's blend-mode header. */
html[data-theme="light"] .site-header {
  top: 13px;
  left: max(14px, calc(var(--pad) * .45));
  right: max(14px, calc(var(--pad) * .45));
  width: auto;
  height: 68px;
  padding: 0 15px 0 10px;
  border: 1px solid rgba(23,27,36,.11);
  border-radius: 22px;
  background: rgba(255,253,248,.88);
  color: #171b24;
  mix-blend-mode: normal;
  box-shadow: 0 16px 45px rgba(41,45,56,.09), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
html[data-theme="light"] .nav a { color: #1f2530; }
html[data-theme="light"] .nav a::after { height: 2px; bottom: 4px; background: #3157ff; }
html[data-theme="light"] .language-switch { border-color: rgba(23,27,36,.14); background: rgba(23,27,36,.035); }
html[data-theme="light"] .language-switch a { color: #333946; opacity: .56; }
html[data-theme="light"] .language-switch a:hover { opacity: .9; }
html[data-theme="light"] .language-switch a[aria-current="true"] { background: #3157ff; color: #fff; opacity: 1; box-shadow: 0 4px 12px rgba(49,87,255,.2); }
html[data-theme="light"] .theme-toggle-header { border-color: rgba(23,27,36,.16); background: #e7e4db; color: #263044; }
html[data-theme="light"] .theme-toggle-header:hover { border-color: rgba(49,87,255,.38); box-shadow: 0 0 0 4px rgba(49,87,255,.055); }

html[data-theme="light"] .page-loader { background: #f4f1e9; color: #171b24; }
html[data-theme="light"] .loader-line { background: rgba(23,27,36,.12); }
html[data-theme="light"] .cursor { border-color: #3157ff; mix-blend-mode: normal; }
html[data-theme="light"] .cursor.is-active { background: rgba(49,87,255,.13); border-color: #3157ff; }
html[data-theme="light"] .cursor-trail-dot { background: rgba(49,87,255,.26); box-shadow: 0 0 18px rgba(49,87,255,.2); }

/* Hero becomes a spacious magazine cover with blue/coral light wells. */
html[data-theme="light"] .hero::before {
  width: 46vw;
  right: -10vw;
  top: 4vh;
  background: radial-gradient(circle, rgba(49,87,255,.15), rgba(49,87,255,.045) 43%, transparent 70%);
  filter: blur(2px);
}
html[data-theme="light"] .hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -11vw;
  bottom: -12vw;
  width: 34vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,103,72,.115), transparent 68%);
  pointer-events: none;
}
html[data-theme="light"] .hero-meta { color: #777b81; }
html[data-theme="light"] .availability i { background: #3157ff; box-shadow: 0 0 0 5px rgba(49,87,255,.08); }
html[data-theme="light"] .outline-word { color: transparent; -webkit-text-stroke: 1.35px rgba(23,27,36,.58); }
html[data-theme="light"] .accent-word { color: #3157ff; text-shadow: 0 12px 45px rgba(49,87,255,.12); }
html[data-theme="light"] .hero-bottom > p { color: #555c66; }
html[data-theme="light"] .round-link { background: rgba(255,255,255,.42); border-color: rgba(23,27,36,.18); box-shadow: inset 0 1px rgba(255,255,255,.8); }
html[data-theme="light"] .round-link:hover { background: #171b24; color: #fff; border-color: #171b24; }

/* Accent ticker becomes a saturated transition band rather than dark mode's lime tape. */
html[data-theme="light"] .ticker {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(95deg, #3157ff 0%, #594dff 42%, #ff6748 115%);
  box-shadow: 0 16px 45px rgba(49,87,255,.14);
}

html[data-theme="light"] .section-heading p,
html[data-theme="light"] .project-copy > p,
html[data-theme="light"] .work-row-main > p,
html[data-theme="light"] .principle p,
html[data-theme="light"] .about-copy p,
html[data-theme="light"] .contact-heading > p { color: #626873; }
html[data-theme="light"] .project-tags span { color: #59606a; background: rgba(255,255,255,.48); }

/* Project previews look like physical product mockups on a desk. */
html[data-theme="light"] .browser-frame {
  border-color: rgba(26,31,42,.13);
  background: #fffdf8;
  box-shadow: 0 34px 75px rgba(30,35,48,.15), 0 3px 10px rgba(30,35,48,.05);
}
html[data-theme="light"] .browser-top { background: #e9e5dc; border-bottom-color: rgba(26,31,42,.1); }
html[data-theme="light"] .browser-top i:nth-child(1) { background: #ff715d; }
html[data-theme="light"] .browser-top i:nth-child(2) { background: #f2b94b; }
html[data-theme="light"] .browser-top i:nth-child(3) { background: #55b982; }
html[data-theme="light"] .browser-top span { color: #727783; }
html[data-theme="light"] .browser-frame::after {
  background: linear-gradient(105deg, transparent 16%, rgba(255,255,255,.12) 34%, rgba(49,87,255,.16) 48%, rgba(255,255,255,.22) 56%, transparent 74%);
  mix-blend-mode: multiply;
}
html[data-theme="light"] .project-visual:hover .browser-frame { box-shadow: 0 42px 88px rgba(30,35,48,.19), 0 0 0 5px rgba(49,87,255,.045); }
html[data-theme="light"] .project-slide-end { color: #fff; background: linear-gradient(135deg, #3157ff 0%, #473cdf 65%, #6b43e8 100%); }
html[data-theme="light"] .project-slide-end .eyebrow { color: rgba(255,255,255,.62); }
html[data-theme="light"] .work-progress i { background: #3157ff; }

/* Services become stacked paper cards with subtle content-category tints. */
html[data-theme="light"] .service-card {
  border-color: rgba(23,27,36,.1);
  background: rgba(255,253,248,.94);
  box-shadow: 0 -12px 34px rgba(51,55,65,.07), 0 2px 0 rgba(255,255,255,.9) inset;
}
html[data-theme="light"] .service-card:nth-child(3n+1) { background: linear-gradient(145deg, #fffdf8 40%, #eef1ff 100%); }
html[data-theme="light"] .service-card:nth-child(3n+2) { background: linear-gradient(145deg, #fffdf8 40%, #fff0e9 100%); }
html[data-theme="light"] .service-card:nth-child(3n) { background: linear-gradient(145deg, #fffdf8 40%, #edf7f1 100%); }
html[data-theme="light"] .service-card > i { color: #3157ff; }

/* In light mode the manifesto flips dark, creating a chapter break rather than another pale section. */
html[data-theme="light"] .manifesto { background: #151a27; color: #f8f5ee; }
html[data-theme="light"] .manifesto-word { color: rgba(255,255,255,.035); }
html[data-theme="light"] .manifesto .eyebrow { color: rgba(255,255,255,.48); }
html[data-theme="light"] .manifesto-copy { text-shadow: 0 16px 65px rgba(0,0,0,.17); }
html[data-theme="light"] .principle { border-top-color: rgba(23,27,36,.14); }
html[data-theme="light"] .principle > span { color: #3157ff; }

/* CTA switches to crisp cobalt and uses a paper disc. */
html[data-theme="light"] .contact-strip { color: #fff; background: linear-gradient(118deg, #3157ff 0%, #3f4ee8 54%, #5941cf 100%); }
html[data-theme="light"] .contact-marquee { border-bottom-color: rgba(255,255,255,.2); }
html[data-theme="light"] .contact-strip .eyebrow { color: rgba(255,255,255,.6); }
html[data-theme="light"] .contact-disc { background: #fffdf8; color: #171b24; box-shadow: 0 24px 65px rgba(12,22,70,.23); }

/* Work list images receive a framed editorial treatment. */
html[data-theme="light"] .work-row-visual { padding: 7px; background: #fffdf8; border-color: rgba(23,27,36,.11); box-shadow: 0 22px 55px rgba(30,35,48,.11); }

/* The about-code block stays dark on purpose: a terminal island inside the light page. */
html[data-theme="light"] .code-window {
  background: #151a27;
  border-color: rgba(23,27,36,.1);
  box-shadow: 0 34px 80px rgba(35,39,50,.16);
}
html[data-theme="light"] .code-window-top { color: #798195; border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="light"] .code-window-top i { background: #535d72; }
html[data-theme="light"] .code-window pre { color: #aeb6c8; }
html[data-theme="light"] .code-window b { color: #89a0ff; }
html[data-theme="light"] .code-window em { color: #fff7e9; }
html[data-theme="light"] .stack-cloud-inner span:nth-child(2n) { background: #171b24; color: #fff; border-color: #171b24; }
html[data-theme="light"] .stack-cloud-inner span:nth-child(3n) { background: #3157ff; color: #fff; border-color: #3157ff; box-shadow: 0 10px 25px rgba(49,87,255,.12); }

/* Contact form becomes a clean paper panel; content remains the visual focus. */
html[data-theme="light"] .contact-form {
  padding: clamp(25px, 3vw, 44px);
  border: 1px solid rgba(23,27,36,.1);
  border-radius: 30px;
  background: rgba(255,253,248,.82);
  box-shadow: 0 30px 75px rgba(34,39,50,.09), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .field select option { background: #fffdf8; color: #171b24; }
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder { color: #a3a5a5; }
html[data-theme="light"] .send-button { color: #fff; background: #3157ff; box-shadow: 0 18px 38px rgba(49,87,255,.2); }
html[data-theme="light"] .form-status.is-success { color: #2451e4; }
html[data-theme="light"] .form-status.is-error { color: #c63d2d; }
html[data-theme="light"] .direct-contact a:hover { color: #3157ff; }

/* Light mode ends with a deep footer: intentional bookend and strong contrast. */
html[data-theme="light"] .site-footer { background: #151a27; color: #f5f2eb; }
html[data-theme="light"] .site-footer .eyebrow,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-socials a { color: #8891a4; }
html[data-theme="light"] .site-footer .footer-grid p { color: #b8bfcc; }
html[data-theme="light"] .site-footer .footer-rule,
html[data-theme="light"] .site-footer .footer-bottom { border-color: rgba(255,255,255,.12); }
html[data-theme="light"] .footer-portrait { background: #0e1320; border-color: rgba(255,255,255,.12); }
html[data-theme="light"] .footer-portrait span { color: #8da2ff; }
html[data-theme="light"] .footer-grid a:hover,
html[data-theme="light"] .footer-socials a:hover { color: #8da2ff; }

/* Modal turns into a bright product sheet instead of a dark drawer. */
html[data-theme="light"] .project-modal-backdrop { background: rgba(17,22,34,.5); }
html[data-theme="light"] .project-modal-panel { background: #fffdf8; border-left-color: rgba(23,27,36,.13); box-shadow: -30px 0 80px rgba(15,20,32,.16); }
html[data-theme="light"] .modal-close { background: #f2efe7; }
html[data-theme="light"] .modal-project-footer a { color: #3157ff; }

/* Ambient system changes character too: ink-blue grid + a dual-color light well. */
html[data-theme="light"] .ambient-grid {
  opacity: .36;
  background-image: linear-gradient(rgba(49,87,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(49,87,255,.035) 1px,transparent 1px);
  -webkit-mask-image: radial-gradient(circle at 52% 36%,#000 0,rgba(0,0,0,.62) 33%,transparent 73%);
  mask-image: radial-gradient(circle at 52% 36%,#000 0,rgba(0,0,0,.62) 33%,transparent 73%);
}
html[data-theme="light"] .ambient-pointer-glow {
  background:
    radial-gradient(circle 390px at var(--ambient-x) var(--ambient-y), rgba(49,87,255,.085), transparent 66%),
    radial-gradient(circle 310px at calc(var(--ambient-x) - 14%) calc(var(--ambient-y) + 20%), rgba(255,103,72,.055), transparent 68%);
  mix-blend-mode: multiply;
}
html[data-theme="light"] .ambient-canvas-network { opacity: .43; }
html[data-theme="light"] .ambient-canvas-contact { opacity: .48; }

/* Arabic light-mode outline text must remain solid because Arabic strokes are not used. */
html[data-theme="light"][dir="rtl"] .outline-word { color: rgba(23,27,36,.72); -webkit-text-stroke: 0; }
html[data-theme="light"][dir="rtl"] .mobile-preference-label { font-family: "Noto Kufi Arabic", Tahoma, Arial, sans-serif; letter-spacing: 0; text-transform: none; }

/* Light mobile menu becomes a saturated blue navigation sheet. */
html[data-theme="light"] .mobile-menu { background: linear-gradient(155deg, #3157ff 0%, #5542db 100%); color: #fff; }
html[data-theme="light"] .mobile-menu a { border-bottom-color: rgba(255,255,255,.23); }
html[data-theme="light"] .mobile-language-switch a { border-color: rgba(255,255,255,.38)!important; color: #fff; }
html[data-theme="light"] .mobile-language-switch a[aria-current="true"] { background: #fff; color: #273fbd; }

@media (max-width: 1050px) {
  .theme-toggle-header { margin-left: 2px; }
}
@media (max-width: 899px) {
  .theme-toggle-header { display: none; }
  html[data-theme="light"] .site-header { top: 9px; left: 9px; right: 9px; height: 62px; padding-left: 8px; border-radius: 19px; }
  html[data-theme="light"] .menu-toggle { color: #171b24; }
  html[data-theme="light"] .contact-form { padding: 22px; border-radius: 24px; }
}
@media (max-width: 520px) {
  .mobile-preferences { grid-template-columns: 1fr; align-items: start; }
  .mobile-theme-choice { justify-items: start; }
  html[data-theme="light"] .site-header { left: 7px; right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle-knob, .theme-icon { transition: none!important; }
}
html[data-theme="light"] .site-footer .footer-rule { background: rgba(255,255,255,.12); }


/* ========================================================================== 
   v1.6.2 Light-mode refinement — same brand, borderless visual language
   Dark mode is untouched. Light mode relies on open space, tonal surfaces and
   soft depth instead of outlined cards. The exact original logo asset is used
   in both modes; only its presentation changes in light mode.
   ========================================================================== */
html[data-theme="light"] {
  --line: rgba(23,27,36,.08);
}

/* Exact same logo artwork as dark mode. The filter converts the existing dark
   plate into a soft light treatment while preserving the original geometry. */
html[data-theme="light"] .brand {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html[data-theme="light"] .brand::before { display: none; }
html[data-theme="light"] .brand-logo-image {
  display: block;
  width: clamp(150px, 15vw, 208px);
  mix-blend-mode: multiply;
  filter: invert(1) hue-rotate(200deg) saturate(.82) brightness(1.08) drop-shadow(0 10px 18px rgba(35,45,85,.08));
}
html[data-theme="light"] .brand:hover .brand-logo-image {
  filter: invert(1) hue-rotate(200deg) saturate(.88) brightness(1.08) drop-shadow(0 13px 23px rgba(49,87,255,.12));
}

/* Floating header: glass and depth, no outline. */
html[data-theme="light"] .site-header {
  border: 0;
  background: rgba(249,246,238,.91);
  box-shadow: 0 14px 42px rgba(34,39,50,.085);
}
html[data-theme="light"] .language-switch {
  border: 0;
  background: rgba(23,27,36,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.78);
}
html[data-theme="light"] .language-switch a[aria-current="true"] {
  box-shadow: 0 5px 14px rgba(49,87,255,.17);
}
html[data-theme="light"] .theme-toggle-header {
  border: 0;
  background: rgba(23,27,36,.075);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
html[data-theme="light"] .theme-toggle-header:hover {
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(49,87,255,.10), inset 0 1px rgba(255,255,255,.9);
}

/* Remove the outlined-card vocabulary across the light experience. */
html[data-theme="light"] .round-link,
html[data-theme="light"] .browser-frame,
html[data-theme="light"] .service-card,
html[data-theme="light"] .work-row-visual,
html[data-theme="light"] .code-window,
html[data-theme="light"] .stack-cloud-inner span,
html[data-theme="light"] .footer-portrait,
html[data-theme="light"] .project-modal-panel,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .modal-project-image,
html[data-theme="light"] .big-cta {
  border-color: transparent;
}
html[data-theme="light"] .round-link {
  border: 0;
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 42px rgba(35,40,53,.08), inset 0 1px rgba(255,255,255,.9);
}
html[data-theme="light"] .round-link:hover { border: 0; }
html[data-theme="light"] .ticker { border-top: 0; border-bottom: 0; }

/* Content meta uses typography instead of rules. */
html[data-theme="light"] .project-topline,
html[data-theme="light"] .work-row-meta {
  border-bottom: 0;
  padding-bottom: 8px;
}
html[data-theme="light"] .project-tags span {
  border: 0;
  background: rgba(49,87,255,.065);
  color: #505969;
}
html[data-theme="light"] .text-link {
  border-bottom: 0;
  color: #3157ff;
  text-decoration: underline;
  text-decoration-color: rgba(49,87,255,.24);
  text-underline-offset: 5px;
}
html[data-theme="light"] .text-link:hover { border-color: transparent; text-decoration-color: currentColor; }

/* Project visuals feel suspended, not boxed. */
html[data-theme="light"] .browser-frame {
  border: 0;
  box-shadow: 0 32px 78px rgba(32,37,49,.14), 0 8px 24px rgba(32,37,49,.05);
}
html[data-theme="light"] .browser-top { border-bottom: 0; }
html[data-theme="light"] .project-visual:hover .browser-frame {
  box-shadow: 0 42px 94px rgba(31,36,49,.18), 0 12px 30px rgba(49,87,255,.07);
}

/* Stacked services keep their paper character without visible outlines. */
html[data-theme="light"] .service-card {
  border: 0;
  box-shadow: 0 -10px 30px rgba(47,52,64,.055), 0 18px 55px rgba(47,52,64,.055);
}

/* Principles/work rows use rhythm and whitespace rather than separators. */
html[data-theme="light"] .principle,
html[data-theme="light"] .work-row {
  border-top: 0;
}
html[data-theme="light"] .principle { padding-top: 48px; }
html[data-theme="light"] .work-row { margin: 16px 0 34px; }
html[data-theme="light"] .work-row-visual {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 26px 64px rgba(30,35,48,.11);
}

/* Terminal remains a dark island, but without a hard frame. */
html[data-theme="light"] .code-window { border: 0; box-shadow: 0 34px 80px rgba(35,39,50,.15); }
html[data-theme="light"] .code-window-top { border-bottom: 0; background: rgba(255,255,255,.025); }
html[data-theme="light"] .stack-cloud-inner span {
  border: 0;
  background: rgba(23,27,36,.055);
}
html[data-theme="light"] .stack-cloud-inner span:nth-child(2n) { border: 0; }
html[data-theme="light"] .stack-cloud-inner span:nth-child(3n) { border: 0; }

/* Contact becomes open editorial layout instead of a panel full of rules. */
html[data-theme="light"] .contact-form {
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="light"] .field {
  border-top: 0;
  padding: 24px 0 22px;
}
html[data-theme="light"] .field + .field { margin-top: 6px; }
html[data-theme="light"] .direct-contact { border-top: 0; }
html[data-theme="light"] .direct-contact a { border-bottom: 0; padding-top: 19px; padding-bottom: 19px; }

/* Footer/modal keep contrast without hairline frames. */
html[data-theme="light"] .site-footer .footer-bottom { border-top: 0; }
html[data-theme="light"] .footer-portrait { border: 0; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
html[data-theme="light"] .project-modal-panel { border-left: 0; border-right: 0; }
html[data-theme="light"][dir="rtl"] .project-modal-panel { border-right: 0; }
html[data-theme="light"] .modal-close { border: 0; box-shadow: 0 9px 24px rgba(25,30,42,.08); }
html[data-theme="light"] .modal-project-image { border: 0; box-shadow: 0 20px 50px rgba(25,30,42,.09); }
html[data-theme="light"] .modal-project-footer { border-top: 0; }

/* Mobile keeps the same borderless language. */
html[data-theme="light"] .mobile-menu a { border-bottom: 0; }
html[data-theme="light"] .mobile-language-switch a {
  border: 0!important;
  background: rgba(255,255,255,.12);
}
html[data-theme="light"] .theme-toggle-menu { border: 0; }
@media (max-width: 899px) {
  html[data-theme="light"] .brand { padding: 0; border-radius: 0; }
  html[data-theme="light"] .brand-logo-image { width: clamp(142px, 37vw, 178px); }
  html[data-theme="light"] .contact-form { padding: 4px 0 0; border-radius: 0; }
  html[data-theme="light"] .project-slide { border-top: 0; }
}


/* ==========================================================================
   v1.6.3 Light header parity — no outer navigation card
   The light theme keeps its palette, but the header follows the same open
   composition as dark mode: logo + menu controls directly over the page.
   ========================================================================== */
html[data-theme="light"] .site-header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-h);
  padding: 0 var(--pad);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #171b24;
  mix-blend-mode: normal;
}

@media (max-width: 899px) {
  html[data-theme="light"] .site-header {
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    padding: 0 var(--pad);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 520px) {
  html[data-theme="light"] .site-header { left: 0; right: 0; }
}


/* ========================================================================== 
   v1.6.4 Logo parity refinement — light mode keeps the same visual scale
   and overall brand feel as dark mode. Only a minimal tone conversion is
   applied so the original artwork remains visually consistent on pale UI.
   ========================================================================== */
html[data-theme="light"] .brand {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] .brand-logo-image {
  width: clamp(150px, 18vw, 260px);
  height: auto;
  mix-blend-mode: normal;
  filter: invert(1) hue-rotate(180deg) saturate(.96) brightness(1.02) contrast(1.01);
}
html[data-theme="light"] .brand:hover .brand-logo-image {
  filter: invert(1) hue-rotate(180deg) saturate(1) brightness(1.02) contrast(1.01) drop-shadow(0 0 12px rgba(49,87,255,.08));
}
@media (max-width: 899px) {
  html[data-theme="light"] .brand-logo-image { width: clamp(136px, 34vw, 200px); }
}


/* ========================================================================== 
   v1.6.6 Light logo accent correction — keep the same logo and sizing, but
   correct the light-mode accent color from red to cobalt blue. This override
   supersedes the previous hue tuning.
   ========================================================================== */
html[data-theme="light"] .brand-logo-image {
  filter: invert(1) hue-rotate(-42deg) saturate(1.18) brightness(.99) contrast(1.04);
}
html[data-theme="light"] .brand:hover .brand-logo-image {
  filter: invert(1) hue-rotate(-42deg) saturate(1.22) brightness(.99) contrast(1.04) drop-shadow(0 0 12px rgba(49,87,255,.08));
}


/* ========================================================================== 
   v1.6.7 Adaptive light header contrast
   Light mode keeps its own palette on pale surfaces, then automatically
   switches only the header region that crosses a dark/saturated section.
   ========================================================================== */
html[data-theme="light"] .site-header .nav a,
html[data-theme="light"] .site-header .language-switch,
html[data-theme="light"] .site-header .language-switch a,
html[data-theme="light"] .site-header .theme-toggle-header,
html[data-theme="light"] .site-header .menu-toggle,
html[data-theme="light"] .site-header .brand-logo-image {
  transition: color .24s ease, background-color .24s ease, box-shadow .24s ease, filter .24s ease, opacity .24s ease, transform .35s var(--ease);
}

/* Menu / language / theme controls when their side of the header is over a
   dark chapter, blue CTA, footer, or another declared dark surface. */
html[data-theme="light"] .site-header.is-actions-over-dark .nav a {
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 12px rgba(0,0,0,.18);
}
html[data-theme="light"] .site-header.is-actions-over-dark .nav a:hover,
html[data-theme="light"] .site-header.is-actions-over-dark .nav a.active {
  color: #fff;
}
html[data-theme="light"] .site-header.is-actions-over-dark .nav a::after {
  background: #fff;
}
html[data-theme="light"] .site-header.is-actions-over-dark .language-switch {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.07);
}
html[data-theme="light"] .site-header.is-actions-over-dark .language-switch a {
  color: rgba(255,255,255,.66);
  opacity: 1;
}
html[data-theme="light"] .site-header.is-actions-over-dark .language-switch a:hover {
  color: #fff;
}
html[data-theme="light"] .site-header.is-actions-over-dark .language-switch a[aria-current="true"] {
  background: #fff;
  color: #3157ff;
  box-shadow: 0 5px 15px rgba(0,0,0,.13);
}
html[data-theme="light"] .site-header.is-actions-over-dark .theme-toggle-header {
  background: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.07);
}
html[data-theme="light"] .site-header.is-actions-over-dark .theme-toggle-header:hover {
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.09);
}
html[data-theme="light"] .site-header.is-actions-over-dark .theme-toggle-header .theme-toggle-knob {
  background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
}
html[data-theme="light"] .site-header.is-actions-over-dark .menu-toggle {
  color: #fff;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.18));
}

/* The logo adapts independently. On a dark surface the original white artwork
   is restored, while a hue shift keeps its accent in the light theme's blue
   family instead of reverting to lime. */
html[data-theme="light"] .site-header.is-brand-over-dark .brand-logo-image {
  mix-blend-mode: normal;
  filter: hue-rotate(140deg) saturate(1.12) brightness(1.04) drop-shadow(0 0 14px rgba(255,255,255,.08));
}
html[data-theme="light"] .site-header.is-brand-over-dark .brand:hover .brand-logo-image {
  filter: hue-rotate(140deg) saturate(1.18) brightness(1.05) drop-shadow(0 0 18px rgba(255,255,255,.12));
}


/* ========================================================================== 
   v1.7.0 Performance + horizontal motion refinement
   ========================================================================== */
.horizontal-track {
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  contain: layout style;
}
.project-slide {
  contain: layout style paint;
  backface-visibility: hidden;
}
.browser-frame img,
.work-row-visual img,
.modal-project-image img {
  display: block;
  transform: translateZ(0);
}
.horizontal-work.is-horizontal-active .horizontal-track { will-change: transform; }

/* Decorative background lettering stays visible as an outline without being
   treated as low-contrast readable text by accessibility tooling. */
.manifesto-word {
  color: transparent;
  -webkit-text-stroke: 1px rgba(11,11,11,.16);
}
html[data-theme="light"] .manifesto-word {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.14);
}