.hello{font-size:12px;letter-spacing:0;font-family:'DM Sans',Arial,sans-serif}.work-heading{display:grid;grid-template-columns:1.6fr 1fr;gap:50px;align-items:end;margin:30px 0 70px}.work .work-heading h2{font-size:clamp(70px,8.2vw,135px);margin:0;line-height:.88}.work-heading>p{font-size:14px;line-height:1.8;max-width:340px;color:#6f685e;margin:0 0 4px auto}.case{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;padding:40px 0 55px;border-top:1px solid #1c1b193d;margin-bottom:35px;align-items:center}.case-copy{min-width:0}.case-kicker{display:flex;justify-content:space-between;gap:12px;font:8px monospace;letter-spacing:1px;color:#6e665b;margin-bottom:27px}.case-kicker>span:first-child{color:#be420b}.case h3{font-size:clamp(30px,3.3vw,51px);letter-spacing:-1.9px;line-height:1.1;margin:0 0 22px}.case h3>span{display:block;color:#8f8576;font-size:.68em;font-weight:500;margin-top:6px;letter-spacing:-1px}.case-copy>p{font-size:13px;line-height:1.85;color:#625b51;margin:0 0 20px}.case-copy>.case-lead{font-size:16px;line-height:1.5;font-weight:600;color:#27241e;letter-spacing:-.3px}.feature-list{list-style:none;margin:24px 0;padding:0;font-size:11px;line-height:1.65;color:#625b51}.feature-list li{position:relative;padding-left:18px;margin:10px 0}.feature-list li:before{content:'↗';position:absolute;left:0;color:#c9440b}.tech-tags{display:flex;gap:7px;flex-wrap:wrap;margin:25px 0}.tech-tags span{border:1px solid #bcb3a4;padding:7px 9px;font:9px monospace}.case-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:11px;margin:25px 0 0}.case-links a:not(.case-primary),.source-links a{border-bottom:1px solid #8c8171;padding-bottom:4px}.case-links .case-primary{display:inline-block;padding:14px 18px;color:#f4ede1;background:#24241f;transition:background .2s,transform .2s}.case-links .case-primary:hover{background:#c44912;transform:translateY(-2px)}.case-visual{margin:0;min-width:0;background:#d3c8b6;padding:16px 16px 12px;transform:perspective(1300px) rotateY(-4deg) rotateX(2deg);transition:transform .7s}.case-visual:hover{transform:perspective(1300px) rotateY(0) rotateX(0)}.preview-bar{display:flex;justify-content:space-between;gap:15px;align-items:center;font:7px monospace;letter-spacing:1px;color:#6a6154;padding:5px 3px 17px}.preview-dots{letter-spacing:3px;font-size:6px;color:#8c8171}.preview-bar>a{font-size:16px;color:#24241f}.case-visual img{display:block;width:100%;height:auto;aspect-ratio:1.42;object-fit:cover;object-position:top;border:1px solid #13171920}.case-visual figcaption{font-size:8px;line-height:1.5;color:#746b5d;padding:12px 0 0}.case-amposter{padding-top:45px}.backend-note{border-left:2px solid #c9501c;padding-left:17px;margin:25px 0}.backend-note>span{font:8px monospace;letter-spacing:1px;color:#a74923}.backend-note>p{font-size:11px;line-height:1.9;color:#6d6457;margin:8px 0 0}.source-links{display:flex;gap:20px;flex-wrap:wrap;font-size:9px;margin-top:20px;color:#6d6457}.platform-visual{background:#20221e;color:#e9e2d4;padding:40px;position:relative;overflow:hidden}.platform-visual:before{content:'';position:absolute;width:190px;height:190px;border:1px solid #ffffff0c;border-radius:50%;right:-70px;top:-90px;box-shadow:0 0 0 30px #ffffff03,0 0 0 60px #ffffff02;pointer-events:none}.platform-wordmark{font-size:50px;line-height:1;font-weight:700;letter-spacing:-3px;color:#ff7a35}.platform-wordmark>span{font-size:.65em;color:#e9e2d4;letter-spacing:-1px}.platform-wordmark>i{float:right;font-style:normal;font-size:28px}.platform-sub{font:8px monospace;letter-spacing:1.5px;color:#a5a394;margin:17px 0 32px}.platform-clients{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;padding:22px 0}.platform-clients>div{display:flex;flex-direction:column;gap:9px}.platform-clients>div+div{border-left:1px solid #ffffff24;padding-left:22px}.platform-clients span{font:9px monospace;color:#ff975d}.platform-clients strong{font-size:32px;letter-spacing:-1px;font-weight:500}.platform-clients small{font-size:9px;color:#aba99d}.platform-features{display:flex;gap:10px 15px;flex-wrap:wrap;margin:24px 0;font-size:10px;color:#cfccbf}.platform-features>span:before{content:'+';color:#ff7a35;margin-right:6px}.platform-services{display:flex;gap:18px;font:9px monospace;color:#9d9e8c;border-bottom:1px solid #ffffff24;padding-bottom:24px}.platform-backend{margin-top:24px}.platform-backend>small{font:8px monospace;letter-spacing:1px;color:#a4a595}.platform-backend>strong{display:block;font-size:19px;font-weight:500;letter-spacing:-.6px;margin-top:14px}.platform-backend>strong>span{color:#ff7a35;padding:0 6px}.platform-backend>p{font:9px monospace;line-height:1.8;color:#9b9e8c;margin-top:12px}.archive-heading{display:flex;justify-content:space-between;align-items:end;margin-top:80px;gap:30px}.archive-heading h3{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:17px 0 0}.archive-heading>span{font:10px monospace;color:#817563}.archive-heading .eyebrow{color:#9a4824;font-size:8px}.project-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:30px 0 15px}.project-filters button{padding:10px 15px;font:10px 'DM Sans',Arial,sans-serif;border:1px solid #bcb3a4;background:transparent;color:#625b51;cursor:pointer;transition:background .2s,color .2s}.project-filters button span{font:8px monospace;margin-left:8px;color:#847664}.project-filters button.active{background:#25251f;color:#eee7da;border-color:#25251f}.project-filters button.active span{color:#bcb5a8}.filter-count{margin-left:auto;font:9px monospace;color:#7b7162}.project-archive{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.archive-project{border-top:1px solid #bdb3a3;min-width:0}.archive-project[hidden]{display:none}.archive-project summary{list-style:none;display:flex;align-items:center;gap:15px;min-height:100px;padding:20px 0;cursor:pointer}.archive-project summary::-webkit-details-marker{display:none}.archive-number{font:9px monospace;color:#b34d23;align-self:flex-start;margin-top:6px}.archive-name{font-size:17px;font-weight:600;letter-spacing:-.5px;line-height:1.3}.archive-name>small{display:block;font:8px monospace;letter-spacing:0;color:#817666;margin-top:8px;line-height:1.7}.project-kind{margin-left:auto;text-align:right;font:7px monospace;letter-spacing:.5px;color:#897f6f;max-width:90px}.expand-mark{font-size:21px;color:#796e5e;transition:transform .3s}.archive-project[open] .expand-mark{transform:rotate(45deg);color:#c84c14}.archive-body{padding:0 20px 25px 30px;animation:enter .35s ease}.archive-body p{font-size:12px;line-height:1.8;color:#6c6356;margin:0 0 18px}.archive-body a{font-size:10px;color:#993a10;border-bottom:1px solid #cbb09b;padding-bottom:3px}.archive-body>div{display:flex;flex-wrap:wrap;gap:15px}.profile-facts{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:35px;border-top:1px solid #ffffff24;padding-top:30px}.profile-facts small{font:8px monospace;letter-spacing:1px;color:#ff985b;display:block;margin-bottom:12px}.profile-facts strong{font-size:14px;font-weight:500;color:#c9c3b7}.about .profile-facts p{font-size:11px;line-height:1.8;color:#8d877a;margin:8px 0 0}.profile-links{display:flex;gap:25px;flex-wrap:wrap;margin-top:30px}.profile-links a{font-size:11px;color:#e9e2d4;border-bottom:1px solid #817867;padding-bottom:6px}footer>a{font-size:clamp(65px,10vw,150px)}
@media(max-width:1000px){.case{gap:27px;grid-template-columns:1fr 1fr}.case-kicker{font-size:7px;letter-spacing:.5px;gap:8px}.case-copy>p{font-size:12px}.platform-visual{padding:26px}.platform-wordmark{font-size:39px}.platform-backend>strong{font-size:16px}.project-kind{display:none}.case-visual img{aspect-ratio:1.05;object-fit:cover;object-position:left top}.work-heading{gap:25px}.work-heading>p{font-size:12px}.archive-name{font-size:15px}}
@media(max-width:700px){.work-heading{display:block;margin-bottom:40px}.work .work-heading h2{font-size:16vw}.work-heading>p{margin:24px 0 0;max-width:440px;font-size:13px}.case{grid-template-columns:1fr;gap:30px;padding:28px 0 35px;margin-bottom:20px}.case h3{font-size:40px;letter-spacing:-1.6px}.case-kicker{font-size:8px;margin-bottom:23px}.case-copy>p{font-size:13px}.case-visual{transform:none;order:-1}.case-visual img{aspect-ratio:1.42;object-position:top}.case-amposter .platform-visual{order:0}.platform-visual{padding:30px}.platform-wordmark{font-size:50px}.platform-clients strong{font-size:30px}.platform-backend>strong{font-size:21px}.project-archive{grid-template-columns:1fr}.archive-heading{margin-top:45px;align-items:center}.archive-heading h3{font-size:24px}.archive-project summary{min-height:90px}.archive-name{font-size:17px}.project-kind{display:block}.filter-count{font-size:8px}.project-filters button{padding:9px 11px}.project-filters button span{margin-left:4px}.profile-facts{grid-template-columns:1fr;gap:22px}.hello{font-size:10px}.coordinate{display:none}.about h2{font-size:clamp(37px,9vw,65px)}footer>div{gap:15px}}
@media(prefers-reduced-motion:reduce){.case-visual,.case-visual:hover{transform:none}}
.amposter-gallery{background:#d8d0c2;padding-bottom:16px}.case-visual .amposter-desktop{height:auto;aspect-ratio:1897/967;object-fit:contain;background:#fff}.amposter-phones{display:flex;gap:16px;padding:0 15px;align-items:end;margin-top:-28px;position:relative}.case-visual .amposter-phones img{width:24%;height:auto;aspect-ratio:auto;object-fit:contain;border:3px solid #2a2a27;border-radius:14px;box-shadow:0 12px 18px #24201625;background:#fff;transition:transform .5s}.amposter-phones img:nth-child(2){transform:translateY(8px)}.amposter-gallery:hover .amposter-phones img{transform:translateY(-7px)}.amposter-phones>span{font-size:19px;letter-spacing:-.5px;line-height:1.2;padding:0 0 20px 5px;color:#37352c}.amposter-phones small{display:block;font:8px monospace;letter-spacing:0;line-height:1.6;color:#847868;margin-top:10px}.amposter-gallery figcaption{margin-top:18px}
.scroll-journey .sculpture canvas{pointer-events:auto}
.laptop-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.sculpture:focus-within{outline:2px solid var(--orange);outline-offset:-10px}
/* Compact project layouts with the same dark palette as the hero. */
.work{background:#141414;color:#eeeae7;padding:70px 5% 85px}
.work .section-top{border-bottom:1px solid #ffffff18;padding-bottom:18px}
.work .section-top .eyebrow{color:#f77c43;font-size:9px}
.work .section-top>span{color:#96928d}
.work-heading{gap:40px;margin:35px 0 45px;grid-template-columns:1.2fr 1fr}
.work .work-heading h2{font-size:clamp(58px,7vw,100px);line-height:.88}
.work .work-heading h2 span{color:#8d8d8d}
.work-heading>p{color:#aaa7a3;font-size:13px;line-height:1.8}
.case{background:#202020;border:1px solid #ffffff12;border-radius:18px;padding:30px;gap:35px;grid-template-columns:1fr 1.22fr;margin-bottom:25px;box-shadow:0 12px 35px #00000012}
.case h3{font-size:clamp(28px,3vw,43px);letter-spacing:-1.5px;color:#f4f0eb}
.case h3>span{color:#aaa6a0}
.case-kicker{font-size:8px;letter-spacing:1px;color:#98928a;margin-bottom:22px}
.case-kicker>span:first-child{color:#ff975f}
.case-copy>.case-lead{color:#e4e0da;font-size:16px}
.case-copy>p{color:#b0aca6;font-size:12px;line-height:1.8}
.feature-list{color:#b0aca6;font-size:11px;margin:20px 0}
.feature-list li:before{color:#fa8a4f}
.tech-tags{gap:6px;margin:22px 0}
.tech-tags span{border:1px solid #ffffff1c;background:#ffffff04;border-radius:5px;color:#c1bbb3;font:9px 'DM Sans',Arial,sans-serif;padding:6px 9px}
.case-links{gap:18px;font-size:11px;margin-top:20px}
.case-links .case-primary{background:#f47b3e;color:#141414;border-radius:6px;padding:12px 16px;font-weight:600}
.case-links .case-primary:hover{background:#ff995c}
.case-links a:not(.case-primary),.source-links a{color:#d5cec5;border-bottom-color:#706960}
.source-links{color:#b7b0a7;font-size:9px}
.backend-note{border-left-color:#b99b80;margin:20px 0;padding-left:14px}
.backend-note>span{color:#c8b49f}.backend-note>p{color:#aaa198;font-size:11px}
.case-visual,.case-visual:hover{transform:none;background:#181818;border:1px solid #ffffff12;border-radius:11px;padding:12px 12px 10px;overflow:hidden}
.case-visual>a{display:block;border-radius:5px;overflow:hidden}
.preview-bar{color:#978e84;padding:2px 2px 12px;font-size:7px}
.preview-dots{color:#776c60}.preview-bar>a{color:#c5b9ab}
.case-visual img{aspect-ratio:auto;max-height:410px;object-fit:contain;object-position:top;background:#181818;border:0}
.case-visual figcaption{color:#8e8378;font-size:8px;line-height:1.5}
.amposter-gallery{background:#191919}
.amposter-phones{gap:12px;padding:0 8px;margin-top:-20px}
.case-visual .amposter-phones img{border-color:#3b3732;border-radius:12px;box-shadow:0 8px 18px #0004}
.amposter-phones>span{color:#cec4b8;font-size:20px}
.amposter-phones small{color:#998c7e;font-size:8px}
.archive-heading{margin-top:55px;padding-top:28px;border-top:1px solid #ffffff18}
.archive-heading .eyebrow{color:#f28b53}.archive-heading h3{font-size:27px;letter-spacing:-.8px;color:#e8e2d9}
.archive-heading>span{color:#93887b}
.project-filters button{border-color:#464039;border-radius:6px;color:#bdb1a3;background:#242220}
.project-filters button span{color:#a08c77}.project-filters button.active{background:#e5d8c6;border-color:#e5d8c6;color:#27221c}.project-filters button.active span{color:#776653}
.filter-count{color:#a08e7b}
.project-archive{gap:12px}
.archive-project{border:1px solid #ffffff12;background:#202020;border-radius:9px;padding:0 18px}
.archive-project:hover,.archive-project[open]{background:#292725;border-color:#6d6052}
.archive-project summary{min-height:98px;gap:13px}
.archive-number{color:#f29664}.archive-name{color:#e4dacc;font-size:16px}.archive-name>small{color:#aa957c;font-size:8px}
.project-kind{color:#95816b}.expand-mark{color:#c0a789}.archive-project[open] .expand-mark{color:#ff9e69}
.archive-body{padding:0 5px 22px 27px}.archive-body p{color:#b5a796}.archive-body a{color:#e2b697;border-color:#7a6653}
@media(max-width:1000px){.case{padding:23px;gap:25px;grid-template-columns:1fr 1fr}.case-copy>p{font-size:12px}.case h3{font-size:32px}}
@media(max-width:700px){.work{padding:45px 5% 65px}.work-heading{display:block;margin-bottom:30px}.work .work-heading h2{font-size:15vw}.work-heading>p{margin:23px 0 0}.case{grid-template-columns:1fr;padding:20px;gap:25px;margin-bottom:20px;border-radius:13px}.case-visual{order:-1}.case h3{font-size:34px}.case-visual img{max-height:300px}.case-copy>p{font-size:13px}.project-archive{grid-template-columns:1fr}.archive-heading h3{font-size:24px}.archive-project summary{min-height:90px}.archive-name{font-size:16px}}

.annotation{font-size:11px}.annotation .fine{font-size:9px}
@media(max-width:600px){.annotation{font-size:9px}.annotation .fine{font-size:7px}}


/* Rotating last headline word, typed with an editor-style caret. */
.word-wrap{white-space:nowrap}
.line:has(.word-wrap){padding-bottom:.12em;margin-bottom:calc(8px - .12em)}/* room for the term underline */
.word{pointer-events:auto;outline:none}
.word.is-term{cursor:help;text-decoration:underline dotted var(--orange);text-decoration-thickness:.045em;text-underline-offset:.07em}
.word.is-term:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:4px}
.caret{display:inline-block;width:.06em;height:.72em;margin-left:.05em;background:var(--orange);vertical-align:-.01em;animation:caret 1.06s steps(1) infinite}
.word-wrap.typing .caret{animation:none}
.reduced .caret{display:none}
@media(prefers-reduced-motion:reduce){.caret{display:none}}
@keyframes caret{50%{opacity:0}}
.word-tip{position:absolute;z-index:6;top:0;left:0;margin:0;width:max-content;max-width:min(340px,calc(100vw - 32px));padding:14px 16px;border-radius:8px;background:#f3ede3;color:#1d1b17;font-size:13px;line-height:1.55;box-shadow:0 14px 34px #0008;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.word-tip.open{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s}
.word-tip strong{font-weight:700}.word-tip [lang=ar]{color:#a8461a}

/* Responsive pass: readable small labels, real touch targets and phone-friendly layout. */
.archive-name{flex:1}
.archive-heading>span{white-space:nowrap}
.section-top>span,.work .section-top .eyebrow,.case-kicker,.backend-note>span,.archive-heading .eyebrow,.profile-facts small{font-size:10px}
.preview-bar{font-size:9px}
.case-visual figcaption,.amposter-phones small,.archive-name>small,.filter-count,.project-filters button span{font-size:10px}
.project-kind{font-size:9px;max-width:110px}
.tech-tags span,.skills{font-size:11px}
.source-links{font-size:11px}
footer>div{font-size:11px}
footer{padding-bottom:70px}
@media(max-aspect-ratio:9/10){.scroll-journey .annotation{top:auto;bottom:34px;left:5%;right:auto}}
@media(pointer:coarse){
 .case-links a,.source-links a,.archive-body a,.profile-links a,footer>div a,.hero .text-link{position:relative}
 .case-links a::after,.source-links a::after,.archive-body a::after,.profile-links a::after,footer>div a::after,.hero .text-link::after{content:'';position:absolute;inset:-12px -8px}
 .project-filters button{min-height:42px}
}
@media(max-width:600px){
 .hero .eyebrow{font-size:10px}
 .annotation .fine{font-size:9px}
 .case-kicker{font-size:10px}
 footer>div{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;font-size:12px}
 footer{padding-bottom:50px}
}
@media(max-aspect-ratio:9/10) and (max-height:719px){.scroll-journey .annotation{display:none}}
/* Phones held sideways: a short hero that still fits headline, intro and buttons. */
@media(orientation:landscape) and (max-height:520px){
 .scroll-journey .hero-copy{padding-top:82px;width:54%}
 .scroll-journey h1{font-size:min(11vw,19vh)}
 .hero .eyebrow{margin-bottom:10px}
 .hero .intro{font-size:13px;line-height:1.5;margin:12px 0 14px;max-width:330px}
 .hero .btn-primary,.hero .btn-ghost{min-height:46px}.hero .btn-primary .btn-icon{width:34px;height:34px}
 .scroll-journey .annotation{display:none}
}

/* Language menu in the header. */
.lang-menu{position:relative;font-size:12px}
.lang-menu summary{list-style:none;display:flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid #ffffff26;border-radius:999px;color:#d9d2c5;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:border-color .2s,color .2s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{border-color:#ff641b99;color:#fff}
.lang-menu summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.lang-menu svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.lang-menu ul{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:20;min-width:160px;margin:0;padding:6px;list-style:none;background:#1d1c19;border:1px solid #ffffff1f;border-radius:10px;box-shadow:0 14px 34px #0008}
.lang-menu a{display:block;padding:11px 12px;border-radius:6px;font-size:14px;color:#d9d2c5}
.lang-menu a:hover,.lang-menu a:focus-visible{background:#2a2925;color:#fff}
.lang-menu a[aria-current=true]{color:var(--orange)}

/* Arabic typography: Alexandria for display type, IBM Plex Sans Arabic for text.
   Arabic letters connect, so letter-spacing always stays at 0. */
html[lang=ar] body,html[lang=ar] body *{font-family:'IBM Plex Sans Arabic','DM Sans',Arial,sans-serif!important;letter-spacing:0!important}
html[lang=ar] :is(h1,h2,h3,footer>a),html[lang=ar] :is(h1,h2,h3,footer>a) *{font-family:'Alexandria','IBM Plex Sans Arabic',sans-serif!important}
html[lang=ar] h1{font-size:clamp(60px,7.2vw,124px);line-height:1.22;font-weight:800}
html[lang=ar] h2{line-height:1.25}
html[lang=ar] .line{padding-bottom:.06em}
html[lang=ar] .line:has(.word-wrap){padding-bottom:.3em;margin-bottom:-.24em}
html[lang=ar] .work .work-heading h2{font-size:clamp(48px,5.6vw,84px);line-height:1.2}
html[lang=ar] footer>a{font-size:clamp(52px,8vw,118px);line-height:1.2}
html[lang=ar] .about h2{font-size:clamp(34px,4.6vw,64px);line-height:1.35}
html[lang=ar] .intro,html[lang=ar] .case-copy>p,html[lang=ar] .work-heading>p,html[lang=ar] .about p:not(.eyebrow){line-height:1.9}
html[lang=ar] .eyebrow,html[lang=ar] .case-kicker,html[lang=ar] .annotation{font-weight:600}
html[lang=ar] .word.is-term{text-underline-offset:.28em}
@media(max-width:600px){html[lang=ar] h1{font-size:15vw}html[lang=ar] .work .work-heading h2{font-size:13vw}html[lang=ar] footer>a{font-size:15vw}}

/* Right-to-left layout: mirror the physical offsets the base styles use. */
[dir=rtl] .scroll-journey .hero-copy,[dir=rtl] .hero-copy{padding-left:0;padding-right:4%}
[dir=rtl] .annotation{right:auto;left:5%}
[dir=rtl] .status-light{margin-right:0;margin-left:8px}
[dir=rtl] .fine{margin:10px 15px 0 0}
[dir=rtl] .caret{margin-left:0;margin-right:.05em}
[dir=rtl] .work-heading>p{margin:0 auto 4px 0}
[dir=rtl] .feature-list li{padding-left:0;padding-right:18px}
[dir=rtl] .feature-list li:before{left:auto;right:0;content:'↖'}
[dir=rtl] .backend-note{border-left:0;border-right:2px solid #b99b80;padding-left:0;padding-right:14px}
[dir=rtl] .amposter-phones>span{padding:0 5px 20px 0}
[dir=rtl] .project-kind{text-align:left}
[dir=rtl] .filter-count{margin-left:0;margin-right:auto}
[dir=rtl] .project-filters button span{margin-left:0;margin-right:8px}
[dir=rtl] .archive-body{padding:0 27px 22px 5px}
[dir=rtl] footer>a>span{right:auto;left:0}
@media(max-aspect-ratio:9/10){[dir=rtl] .scroll-journey .annotation{left:auto;right:5%}}
@media(max-width:700px){[dir=rtl] .work-heading>p{margin:23px 0 0}}
/* Arabic letterforms need a little more size than Latin to read as clearly at label sizes. */
html[lang=ar] :is(.eyebrow,.case-kicker,.profile-facts small,.section-top>span,.archive-heading .eyebrow,.backend-note>span,.project-kind,.filter-count,.case-visual figcaption,.annotation){font-size:12px}
html[lang=ar] :is(.annotation .fine,.skills,footer>div,.amposter-phones small){font-size:12px}
html[lang=ar] .about .profile-facts p,html[lang=ar] .archive-body p,html[lang=ar] .backend-note>p,html[lang=ar] .feature-list{font-size:13px}
[dir=rtl] footer>div>[dir=ltr]{text-align:right}

/* Icons: one Lucide sprite, stroked in the current text colour. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Hero identity: the name leads, the role sits under it. */
.scroll-journey .hero-copy{padding-top:clamp(96px,15vh,190px)}
.hero-name{display:grid;gap:6px;margin-bottom:clamp(22px,3.4vh,40px)}
.hero-name-text{margin:0;font-size:clamp(21px,1.75vw,27px);font-weight:600;letter-spacing:-.015em;color:var(--bone)}
.hero-role{margin:0;display:flex;align-items:center;gap:10px;font-size:15px;color:#a8a194}
.hero-role::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #ff641b22}

/* Floating dock: site navigation, the CV and the language menu in one place. */
.dock{position:fixed;z-index:30;bottom:max(16px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:flex;align-items:center;gap:2px;padding:6px;border-radius:18px;background:#161512cc;border:1px solid #ffffff17;box-shadow:0 14px 36px #0008,inset 0 1px 0 #ffffff0d;backdrop-filter:blur(16px) saturate(1.2)}
.dock-item{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:12px;color:#b4ac9e;font-size:14px;font-weight:500;transition:background .2s,color .2s}
.dock-item:hover{color:var(--bone);background:#ffffff0d}
.dock-item[aria-current=true]{color:var(--bone);background:#ffffff14}
.dock-item[aria-current=true] .icon{color:var(--orange)}
.dock-sep{width:1px;height:22px;margin:0 4px;background:#ffffff1c}
.dock .lang-menu summary{min-height:42px;border:0;border-radius:12px;padding:0 13px;color:#b4ac9e}
.dock .lang-menu summary:hover,.dock .lang-menu[open] summary{background:#ffffff0d;color:var(--bone)}
.dock .lang-menu ul{top:auto;bottom:calc(100% + 12px)}
.dock .lang-menu svg{width:1.15em;height:1.15em;stroke-width:1.8}
@media(max-width:600px){
 .dock{left:10px;right:10px;translate:none;justify-content:space-between;padding:5px;border-radius:16px}
 .dock-item{flex-direction:column;justify-content:center;gap:4px;min-height:56px;min-width:0;flex:1;padding:0 4px;font-size:11px}
 .dock-item .icon,.dock .lang-menu summary svg{width:24px;height:24px;stroke-width:1.7}
 .dock-item[data-section=top]{display:none}
 .dock-sep{height:30px;margin:0 3px;flex:none}
 .dock .lang-menu summary{flex-direction:column;justify-content:center;gap:4px;min-height:56px;padding:0 14px;font-size:11px}
}


@media(max-width:600px){.scroll-journey .hero-copy{padding-top:56px}.hero-name{margin-bottom:18px}}