/* Eleven-piece composition: geometry follows Mahdi's supplied visual reference. */
:root{--red:#ef3b23;--coral:#e77a60;--portrait-width:calc((100svh - var(--header)) * .365)}
.intro-layout{grid-template-columns:38% 62%;padding-left:4.3%;min-height:700px}
.hero-copy{padding-top:10vh;padding-right:38px}
.hero-copy h1{font-size:clamp(66px,6.35vw,116px);font-weight:600;letter-spacing:-.055em;line-height:.96;color:#d92f1f}
.role{margin-bottom:32px;color:#d92f1f}
.hero-line{max-width:380px;color:#d92f1f;font-size:clamp(23px,1.85vw,32px);line-height:1.48}
.hero-caption{max-width:320px;color:#737373}
.enter-work{margin-top:auto;margin-bottom:32px;padding-top:32px}
.circle-arrow{width:86px;height:86px;border:3px solid #333;font-size:49px}
.hero-foot{padding-bottom:24px;gap:25px}
.hero-directions{display:flex;align-items:center;gap:7px;margin:0 0 23px;direction:ltr}
.hero-directions button{min-width:45px;min-height:42px;border:1px solid #ddd;font-size:13px;transition:background .2s,color .2s,border-color .2s;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 11px}
.hero-directions button span{display:none;font-size:12px}
.hero-directions button[aria-pressed=true]{background:#222;border-color:#222;color:white}
.hero-directions button[aria-pressed=true] span{display:inline}
.hero-directions .replay-motion{border:0;min-width:38px;font-size:23px;padding:0}
.hero-directions button:hover{border-color:var(--red);color:var(--red)}
.hero-directions button:disabled{color:#aaa;cursor:default}
.visual-composition{min-height:700px;isolation:isolate}
.portrait-cutout{width:var(--portrait-width);max-width:none;background:white;z-index:5;animation:none}
.portrait-cutout img{height:115%;right:-18px;bottom:0}
.portrait-name{display:none}
.collage{position:absolute;right:calc(var(--portrait-width) + 16px);top:12px;width:min(calc(100% - var(--portrait-width) - 16px),calc((100svh - var(--header) - 20px)*.615));aspect-ratio:620/1008;z-index:2;container-type:inline-size;font-family:Arial,Helvetica,sans-serif}
.collage-piece{position:absolute;margin:0;transform-origin:right center;will-change:transform}
.collage.pending .collage-piece{opacity:0}
.piece-surface{position:relative;width:100%;height:100%;overflow:hidden;transition:filter .6s;transform:translateZ(0)}
.piece-surface>img,.piece-surface>video{display:block;width:100%;height:100%;object-fit:cover}
.sculpture .piece-surface{overflow:visible;animation:sculpture-drift 7s ease-in-out infinite}
.sculpture img{object-fit:contain;mix-blend-mode:multiply}
.piece-blossom{left:29.8%;top:5.8%;width:29.7%;height:15.4%}
.piece-blossom .piece-surface{animation-delay:-2.5s}
.piece-painting{left:64.5%;top:0;width:35.2%;height:21.5%}
.piece-studio{left:2.1%;top:23.4%;width:33.4%;height:18.4%}
.piece-studio .piece-surface{background:var(--coral)}
.piece-studio img{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;object-position:25% center;transform:scale(1.32)}
.piece-words{left:37.6%;top:23%;width:60.8%;height:19.3%;color:var(--red)}
.piece-words .piece-surface{overflow:visible;display:flex;flex-direction:column;justify-content:center;padding-left:3%}
.piece-words strong{font-size:12.2cqw;line-height:.9;font-weight:750;letter-spacing:-.065em;white-space:nowrap;display:block}
.word-top,.word-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:5px;line-height:1;margin:0 0 4px;color:#242424}
.word-top{font-weight:650;font-size:4cqw;letter-spacing:-.05em}
.word-bottom{margin-top:7px;align-items:center}
.word-bottom b{font-size:4.65cqw;letter-spacing:-.055em;white-space:nowrap}
.word-bottom>span{font-size:1.65cqw;font-weight:500;line-height:1.2}
.word-side{position:absolute;left:-3.5%;top:8%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:1.7cqw;font-weight:500;letter-spacing:.03em}
.piece-torus{left:0;top:44%;width:25.8%;height:15.6%}
.piece-torus .piece-surface{animation-delay:-4.5s}
.piece-torus figcaption{font-size:3.1cqw;line-height:1.2;font-weight:650;white-space:nowrap;letter-spacing:-.04em;margin-top:2px}
.piece-faces{left:28.4%;top:43.7%;width:33.4%;height:20.6%}
.piece-object{left:64.5%;top:43.5%;width:35.2%;height:33.4%}
.piece-people{left:1.1%;top:65.5%;width:61%;height:19.6%}
.piece-people img{filter:grayscale(1);object-position:50% 58%;transition:transform 4s ease}
.piece-people:hover img{transform:scale(1.07)}
.piece-people figcaption{position:absolute;bottom:0;left:0;background:#ffffffed;padding:6px 8px;font-size:1.6cqw;letter-spacing:.04em;color:#222}
.piece-swatch{left:14.7%;top:86.8%;width:21%;height:13.2%}
.piece-swatch .piece-surface{background:var(--coral);color:#222;padding:11%;display:flex;flex-direction:column;justify-content:space-between}
.piece-swatch span{font-size:3.6cqw;font-weight:700;letter-spacing:-.045em;line-height:.95}
.piece-swatch small{font-size:1.25cqw;letter-spacing:.05em}
.piece-wave{left:38.2%;top:87.1%;width:24.4%;height:12.4%}
.piece-wave .piece-surface{animation-delay:-1s}
.piece-code{left:64.5%;top:78.6%;width:35.2%;height:21.4%}
.piece-code .piece-surface{display:flex;flex-direction:column;justify-content:space-between}
.code-lines{font-family:monospace;font-size:2.26cqw;line-height:1.3;letter-spacing:-.085em;color:#666;white-space:nowrap;animation:code-breathe 5s ease-in-out infinite}
.code-lines span{color:var(--red);font-weight:bold}
.piece-code p{font-size:1.7cqw;letter-spacing:.07em;margin:4px 0 0;color:#222}
@keyframes sculpture-drift{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(-3px,-8px,0) rotate(2deg)}}
@keyframes code-breathe{0%,100%{opacity:.65}50%{opacity:1}}
/* Three deliberately related treatments; all retain the eleven-piece rhythm. */
body[data-hero="2"] .piece-words{color:#222}
body[data-hero="2"] .piece-words strong{font-size:10.3cqw;line-height:1}
body[data-hero="2"] .word-top{font-size:3.4cqw}
body[data-hero="2"] .word-bottom b{font-size:3.05cqw}
body[data-hero="2"] .word-bottom>span{font-size:1.4cqw}
body[data-hero="2"] .word-top,body[data-hero="2"] .word-bottom{color:var(--red)}
body[data-hero="2"] .piece-swatch .piece-surface{background:#ef3b23;color:white}
body[data-hero="2"] .piece-studio .piece-surface{background:#ef3b23}
body[data-hero="2"] .piece-faces img{filter:contrast(1.35)}
body[data-hero="2"] .piece-painting{left:63.5%;top:1%;width:36.2%;height:21.5%}
body[data-hero="2"] .piece-blossom{left:27%;top:5%;width:33%;height:16%}
body[data-hero="2"] .piece-torus{left:-1%;width:27.5%;height:16.5%}
body[data-hero="2"] .sculpture .piece-surface{animation-duration:9s}
body[data-hero="3"] .piece-words .piece-surface{background:#ef3b23;color:white;padding:4% 5%}
body[data-hero="3"] .piece-words strong{font-size:10.8cqw;line-height:.96}
body[data-hero="3"] .word-top{font-size:3.3cqw;color:white}
body[data-hero="3"] .word-bottom{color:white}
body[data-hero="3"] .word-bottom b{font-size:3.8cqw}
body[data-hero="3"] .word-side{display:none}
body[data-hero="3"] .piece-code .piece-surface{background:#202020;padding:5%}
body[data-hero="3"] .code-lines{color:#ccc;font-size:2.03cqw}
body[data-hero="3"] .piece-code p{color:white}
body[data-hero="3"] .piece-swatch .piece-surface{background:#222;color:white}
body[data-hero="3"] .piece-studio .piece-surface{background:#eb684d}
body[data-hero="3"] .piece-people figcaption{background:var(--red);color:white}
body[data-view=work] .collage *,body.motion-paused .collage *{animation-play-state:paused!important}
body.motion-paused .piece-people img{transition:none;transform:none}
html[lang=ar] .hero-directions{align-self:flex-end}
@media(min-width:1700px){.hero-copy{padding-top:10vh}}
@media(max-width:1150px) and (min-width:801px){:root{--portrait-width:25vw}.intro-layout{grid-template-columns:38% 62%}.hero-copy{padding-top:80px;padding-right:18px}.hero-copy h1{font-size:6.3vw}.hero-line{font-size:22px}.collage{width:calc(100% - var(--portrait-width) - 12px);right:calc(var(--portrait-width) + 12px);top:60px}.hero-directions{gap:4px}.hero-directions button{padding:0 8px;min-width:40px}.hero-directions button span{font-size:11px}.visual-composition{min-height:700px}.circle-arrow{width:64px;height:64px;font-size:37px}.enter-work small{display:none}}
@media(max-width:800px){:root{--portrait-width:31vw}.intro-layout{padding:0}.hero-copy{padding:36px 7% 0;column-gap:16px}.hero-copy h1{font-size:clamp(61px,11vw,88px);line-height:.96}.hero-copy>.eyebrow{margin-bottom:20px}.role{margin-bottom:20px}.hero-line{font-size:22px;max-width:360px;margin-bottom:12px}.hero-caption{font-size:16px;max-width:340px}.enter-work{margin:0;padding:0}.circle-arrow{width:56px;height:56px;font-size:32px;border-width:2px}.hero-directions{grid-column:1/-1;margin:23px 0 0}.hero-directions button{min-height:40px}.hero-foot{display:none}.visual-composition{height:112vw;min-height:0;max-height:850px;margin-top:25px}.portrait-cutout{width:var(--portrait-width);max-width:none}.portrait-cutout img{height:112%;right:-5.5vw}.collage{right:calc(var(--portrait-width) + 9px);top:0;width:calc(100% - var(--portrait-width) - 23px);height:auto;aspect-ratio:620/1008}.piece-torus figcaption{margin-top:3px}.word-top{margin-bottom:3px}.word-bottom{margin-top:4px}.piece-people figcaption{padding:4px}.sculpture .piece-surface{animation-name:sculpture-drift-small}html[lang=ar] .hero-copy{padding:30px 7% 0}html[lang=ar] .hero-directions{justify-self:start}}
@media(max-width:420px){.hero-copy h1{font-size:61px}.hero-line{font-size:21px}.hero-caption{font-size:15px}.circle-arrow{width:49px;height:49px;font-size:29px}.visual-composition{height:112vw}.hero-directions{gap:6px}}
@keyframes sculpture-drift-small{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.collage *{animation:none!important;transition:none!important}}

/* Studio is the selected direction. Two new layouts retain its visual vocabulary. */
.wordmark img{filter:none}
.wordmark:after{display:none}
.contact-mark{color:var(--red)}
.contact-mark>span{color:white}
.contact-rail:hover .contact-mark{color:white}
.hero-copy{padding-top:7vh}
.role{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;font-size:clamp(17px,1.52vw,26px);color:#363636;line-height:1.5;margin-bottom:24px}
.role-prompt,.role-game{color:#686868}
.role-divider{color:#aaa;font-weight:300}
.hero-caption{max-width:395px;font-size:16px;line-height:1.7;color:#686868}
.hero-line{max-width:400px;margin-bottom:17px;color:#333}
.hero-links{display:flex;align-items:center;flex-wrap:wrap;gap:7px 21px;margin:23px 0 7px;direction:ltr}
.profile-link{display:inline-flex;align-items:center;gap:7px;min-height:40px;font-size:13px;color:#333;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.profile-link svg{width:16px;height:16px;flex:none}
.profile-link .link-arrow{font-size:13px;margin-left:-2px;color:#888}
.profile-link:hover{color:#d92f1f;border-bottom-color:#ef3b23}
.enter-work{padding-top:22px;margin-bottom:26px}
.hero-directions{gap:7px}
.hero-directions button[aria-pressed=true]:hover{color:white}
body.motion-paused .enter-work .circle-arrow{transform:none;transition:none}
body[data-hero="2"] .piece-torus{left:0}
.piece-torus figcaption{padding-left:0;text-align:center;font-size:2.8cqw}
.piece-words{color:#222}
.piece-words strong{font-size:11.6cqw;line-height:.94;letter-spacing:-.06em}
.word-top{color:var(--red);font-size:3.7cqw}
.word-bottom{color:var(--red)}
.word-bottom b{font-size:4.25cqw}
.piece-swatch span{font-size:3.3cqw;line-height:1.02}
.piece-code .piece-surface{border-top:2px solid var(--red);padding-top:8%;justify-content:space-between}
.process-label{font-size:1.45cqw;letter-spacing:.08em;color:#666;line-height:1.4}
.process-words{display:flex;flex-direction:column;font-size:6.05cqw;line-height:1.05;font-weight:600;letter-spacing:-.055em}
.process-words>span:first-child{color:var(--red)}
.piece-code p{font-size:1.4cqw;letter-spacing:.025em;white-space:nowrap}
body[data-hero="4"] .piece-blossom{left:2.1%;top:.5%;width:33.4%;height:21%}
body[data-hero="4"] .piece-painting{left:38%;top:0;width:61.7%;height:21.5%}
body[data-hero="4"] .piece-painting video{object-position:70% 50%}
body[data-hero="4"] .piece-torus{left:68%;top:44%;width:30%;height:18.5%}
body[data-hero="4"] .piece-torus figcaption{font-size:2.8cqw;text-align:center}
body[data-hero="4"] .piece-faces{left:38%;top:43.7%;width:26.5%;height:20.6%}
body[data-hero="4"] .piece-object{left:2.1%;top:43.5%;width:33.4%;height:33.4%}
body[data-hero="4"] .piece-people{left:38%;top:65.5%;width:61.7%;height:19.6%}
body[data-hero="4"] .piece-code{left:2.1%;top:78.6%;width:33.4%;height:21.4%}
body[data-hero="4"] .piece-code .piece-surface{background:#222;border:0;color:white;padding:9%}
body[data-hero="4"] .process-label,body[data-hero="4"] .piece-code p{color:#bbb}
body[data-hero="4"] .piece-swatch{left:38%;top:86.8%;width:24.4%;height:13.2%}
body[data-hero="4"] .piece-swatch .piece-surface{background:var(--red);color:white}
body[data-hero="4"] .piece-wave{left:70%;top:86.8%;width:28%;height:13.2%}
body[data-hero="4"] .piece-studio .piece-surface{background:#ef593f}
body[data-hero="4"] .word-bottom b{font-size:4cqw}
body[data-hero="5"] .piece-painting{left:2.1%;top:0;width:59.7%;height:21.5%}
body[data-hero="5"] .piece-blossom{left:65%;top:1%;width:34.7%;height:20.5%}
body[data-hero="5"] .piece-words strong{font-size:10.3cqw;line-height:1}
body[data-hero="5"] .word-top{font-size:3.4cqw}
body[data-hero="5"] .word-bottom b{font-size:3.05cqw}
body[data-hero="5"] .word-bottom>span{font-size:1.4cqw}
body[data-hero="5"] .piece-studio .piece-surface{background:#ed7a62}
body[data-hero="5"] .piece-swatch .piece-surface{background:#222;color:white}
body[data-hero="5"] .piece-faces .piece-surface{background:#ef593f}
body[data-hero="5"] .piece-faces img{mix-blend-mode:multiply}
body[data-hero="5"] .piece-code .piece-surface{border-top:0;border-left:2px solid var(--red);padding:1% 0 1% 9%}
body[data-hero="5"] .process-words{font-size:5.35cqw;line-height:1.07}
html[lang=ar] .role{letter-spacing:0;font-size:clamp(16px,1.4vw,23px)}
html[lang=ar] .hero-links{direction:rtl}
html[lang=ar] .hero-caption{line-height:1.85;font-size:16px}
@media(min-width:1700px){.hero-copy{padding-top:8vh}.hero-links{gap:25px}.profile-link{font-size:14px}}
@media(max-width:1150px) and (min-width:801px){.hero-copy{padding-top:60px}.role{font-size:17px;gap:5px 9px;margin-bottom:20px}.hero-caption{font-size:15px;line-height:1.65}.hero-line{font-size:21px}.hero-links{gap:5px 12px;margin-top:15px}.profile-link{font-size:12px;gap:5px}.profile-link svg{width:14px;height:14px}.enter-work{padding-top:18px;margin-bottom:20px}.hero-directions button{padding-inline:7px}.hero-foot{font-size:10px}}
@media(max-width:800px){.hero-copy{padding-top:32px}.role{grid-column:1/-1;font-size:17px;gap:7px 9px;margin-bottom:20px}.hero-line{font-size:22px;line-height:1.45;max-width:420px}.hero-caption{max-width:420px;font-size:16px;line-height:1.7}.hero-links{grid-column:1/-1;margin:15px 0 0;gap:7px 18px}.profile-link{font-size:13px}.hero-directions{margin-top:19px}.enter-work{padding:0;margin:0}.visual-composition{margin-top:28px}html[lang=ar] .hero-links{justify-content:flex-start}html[lang=ar] .hero-copy .role{font-size:17px}html[lang=ar] .hero-copy .hero-caption{font-size:16px}html[lang=ar] .hero-copy .hero-line{font-size:20px}}
@media(max-width:420px){.role{font-size:16px;gap:6px 8px}.hero-links{gap:5px 14px}.profile-link{font-size:12px}.hero-line{font-size:21px}}