/* New independent photographic edition. Original project imagery is unmodified. */
.intro-running .hero-content{opacity:0;animation:none}.intro-finished .hero-content{animation:hero-emerge 1.4s ease both}
:root{--pad:clamp(24px,6vw,100px);--gold:#efbb4d;--bg:#101311}
.header{height:105px;background:linear-gradient(#090d0de8,transparent);border-color:#ffffff16;padding-right:calc(var(--pad) + 30px)}
.header nav{gap:32px}.header .nav-contact{margin-left:15px}
.hero{min-height:820px;min-height:max(820px,100svh);padding-top:260px;padding-bottom:205px;isolation:isolate}
.hero-cinema{position:absolute;inset:0;z-index:-4;background:#171d1c}
.cinema-shot{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.045);transition:opacity 1.8s ease,transform 8s linear;will-change:opacity}
.cinema-shot.is-active{opacity:1;transform:scale(1)}
.cinema-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#090e0ef2 0%,#090e0ed4 30%,#090e0e50 68%,#090e0e25),linear-gradient(0deg,#101311 0%,transparent 38%,#10131150 100%)}
.hero .network{inset:30px 0 0 30%;z-index:-2;opacity:.36;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000)}
.network-label{display:none}.hero-content{max-width:690px}.hero .eyebrow{font-size:9px;letter-spacing:2.6px}
h1{font-size:clamp(38px,4.1vw,64px);letter-spacing:-2.3px;line-height:1.17;margin:26px 0 23px}
h1 em{color:#f0d49a}.hero-description{font-size:13px;line-height:1.95;max-width:360px;color:#d4d6ce}
.hero-actions{margin-top:30px;gap:28px}.button{padding:17px 22px;font-size:11px;gap:33px}.text-link{font-size:11px}
.hero-bottom{bottom:25px;font-size:8px;left:var(--pad);right:var(--pad)}
.cinema-controls{position:absolute;bottom:107px;left:var(--pad);right:calc(var(--pad) + 22px);display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.cinema-caption{display:flex;flex-direction:column;gap:8px;max-width:340px}.cinema-name{font-size:17px;letter-spacing:.2px}.cinema-location{font-size:10px;line-height:1.7;color:#c4c7c1}
.cinema-nav{display:flex;align-items:center;gap:10px}.cinema-dot{width:82px;height:52px;padding:3px;border:1px solid #ffffff40;background:#ffffff08;cursor:pointer;opacity:.5;transition:opacity .3s,border-color .3s}.cinema-dot img{display:block;width:100%;height:100%;object-fit:cover}.cinema-dot.is-current{opacity:1;border-color:var(--gold)}.cinema-dot:hover{opacity:1}
.cinema-pause{border:1px solid #ffffff30;background:#10131170;color:var(--ink);width:36px;height:36px;cursor:pointer;margin-left:5px;font-size:14px}
.company-numbers{display:grid;grid-template-columns:repeat(4,1fr);padding:39px var(--pad) 43px;border-bottom:1px solid var(--line);background:#141814}.company-numbers>div{display:flex;flex-direction:column;align-items:center;gap:10px;border-right:1px solid var(--line)}.company-numbers>div:last-child{border:0}.company-numbers strong{font-weight:400;font-size:38px;letter-spacing:-1.5px}.company-numbers strong span{font-size:26px;color:var(--gold);margin-left:3px}.company-numbers>div>span{font-size:11px;color:var(--muted);letter-spacing:.4px}
.section-pad{padding-top:90px;padding-bottom:90px}h2{font-size:clamp(33px,3.2vw,48px);letter-spacing:-1.6px;line-height:1.2}.section-label{margin-bottom:47px;font-size:8px}.lead{font-size:21px}.about-copy>p:not(.lead),.service-copy,.contact-grid>div>p:not(.eyebrow){font-size:13px;line-height:1.95}.service-end{font-size:16px}.facts strong{font-size:26px}.services-grid{gap:13%}.orbital{max-width:340px}
.portfolio-heading{margin-bottom:40px}.portfolio-heading p{font-size:12px}.project-index{display:flex;gap:9px;flex-wrap:wrap;padding:0 0 42px;margin-bottom:15px;max-width:1000px}.project-index a{font-size:10px;padding:10px 13px;border:1px solid #ffffff20;color:var(--muted);transition:color .2s,border .2s}.project-index a:hover{border-color:var(--gold);color:var(--ink)}
.project{width:88%;margin-bottom:85px;scroll-margin-top:30px}.project:nth-child(even){margin-left:12%}.project-image{position:relative;background:#191d1a;border:1px solid #ffffff0d;overflow:hidden;transition:clip-path 1.1s cubic-bezier(.16,.8,.2,1);clip-path:inset(0)}
.project.is-pending .project-image{clip-path:inset(0 0 12% 0)}.project img{max-height:660px;object-fit:contain;width:100%;height:auto;transform:none}.project:hover img{transform:none}.project-caption{padding:20px 0 21px}.project h3{font-size:24px;letter-spacing:-.4px}.project p{font-size:10px;line-height:1.85;max-width:47%}.credit-copy{font-size:clamp(21px,2vw,29px);max-width:780px;line-height:1.75}.credit-motif{margin-bottom:30px}.collaboration{padding-top:50px;padding-bottom:90px}.contact-grid{gap:12%}.phone{font-size:31px}.contact{padding-bottom:95px}
.contact-rail{position:fixed;right:17px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:10px}.contact-rail a{width:43px;height:43px;border:1px solid #ffffff2b;background:#171d19df;backdrop-filter:blur(12px);display:grid;place-items:center;color:#e8e9de;box-shadow:0 4px 20px #0002;transition:background .2s,border .2s;position:relative;border-radius:50%}.contact-rail a:hover{background:#2c3328;border-color:var(--gold)}.contact-rail svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.contact-rail .rail-whatsapp{background:#1f5935;color:#b8f5ce;border-color:#44865d}.contact-rail a span{position:absolute;right:53px;white-space:nowrap;padding:9px 13px;background:#171d19;color:var(--ink);font-size:10px;border:1px solid #ffffff25;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .2s,transform .2s}.contact-rail a:hover span,.contact-rail a:focus-visible span{opacity:1;transform:none}
.intro.is-playing{background:#0a0f0e;animation:intro-exit 1.2s ease 3.6s forwards}.intro-architecture{position:absolute;inset:0;background:linear-gradient(90deg,#07100bc9,#07100b60),url('./assets/projects/01-mall-of-arabia.jpeg') center/cover;animation:intro-pan 4.8s cubic-bezier(.16,.8,.2,1) both}.intro .intro-map{opacity:.8;animation:intro-map-reveal 4.8s ease both;mix-blend-mode:screen}.intro-brand{width:min(510px,75vw);animation:intro-logo 4.1s cubic-bezier(.16,.8,.2,1) both}.intro-brand span{margin-top:-35px;font-size:8px;letter-spacing:4px;color:#ede8da}.intro-rule{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#efbb4d,transparent);width:65%;top:64%;transform-origin:left;animation:intro-rule 4s ease both}.intro-skip{bottom:35px}.intro-lines{display:none}
@keyframes intro-pan{from{transform:scale(1.13);filter:brightness(.5)}to{transform:scale(1);filter:brightness(.7)}}@keyframes intro-logo{0%,18%{opacity:0;transform:translateY(15px);clip-path:inset(0 100% 0 0)}48%,78%{opacity:1;transform:none;clip-path:inset(0)}100%{opacity:0;transform:translateY(-16px);clip-path:inset(0)}}@keyframes intro-map-reveal{0%{opacity:0;transform:scale(1.1)}35%{opacity:.8}100%{opacity:.3;transform:scale(1)}}@keyframes intro-rule{0%{opacity:0;transform:scaleX(0)}35%,70%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@media(min-width:1700px){h1{font-size:68px}.hero{padding-top:290px}.hero-description{font-size:14px}}
@media(max-width:900px){.hero{min-height:850px;padding-top:235px}.header nav{gap:22px}.header .nav-contact{margin-left:0}.hero .network{left:5%;opacity:.25}.cinema-controls{right:65px}.cinema-dot{width:66px;height:44px}.cinema-caption{max-width:260px}.company-numbers strong{font-size:33px}.company-numbers>div>span{font-size:10px}.section-pad{padding-top:75px;padding-bottom:75px}.project{width:92%}.project:nth-child(even){margin-left:8%}.contact-rail{right:10px}.contact-rail a{width:38px;height:38px}}
@media(max-width:600px){.header{height:92px;padding-right:24px;background:linear-gradient(#090d0ded,#090d0d20)}.header nav{top:91px}.hero{min-height:840px;padding-top:187px;padding-bottom:240px}.hero-cinema{inset:0 -15% 0 -45%}.cinema-shot{background-position:60% center}.cinema-shade{background:linear-gradient(90deg,#090e0ed9,#090e0e60),linear-gradient(0deg,#101311 0%,transparent 55%,#10131170)}.hero-content{max-width:340px}.hero .eyebrow{font-size:7px;letter-spacing:1.6px}h1{font-size:35px;letter-spacing:-1.5px;line-height:1.22;margin:25px 0 22px}h1 em{font-size:34px}.hero-description{font-size:12px;max-width:285px;line-height:1.9}.hero-actions{margin-top:26px;gap:20px}.button{padding:15px 16px;gap:18px;font-size:10px}.text-link{font-size:10px}.hero-bottom{font-size:7px;bottom:24px;gap:10px;letter-spacing:.7px}.cinema-controls{bottom:106px;right:24px;left:24px;display:block}.cinema-caption{gap:5px;max-width:280px;margin-bottom:17px}.cinema-name{font-size:14px}.cinema-location{font-size:8px}.cinema-nav{gap:8px}.cinema-dot{width:64px;height:42px}.cinema-pause{width:32px;height:32px;margin-left:2px}.company-numbers{grid-template-columns:1fr 1fr;padding:28px 24px;row-gap:30px}.company-numbers>div:nth-child(2){border:0}.company-numbers strong{font-size:32px}.company-numbers strong span{font-size:22px}.company-numbers>div>span{font-size:10px}.section-pad{padding-top:65px;padding-bottom:65px}h2{font-size:32px;letter-spacing:-1px}.about-copy>p:not(.lead),.service-copy,.contact-grid>div>p:not(.eyebrow){font-size:12px}.section-label{margin-bottom:35px}.lead{font-size:20px}.facts{gap:45px}.facts strong{font-size:24px}.orbital{max-width:230px;margin-bottom:15px}.portfolio-heading{margin-bottom:25px}.portfolio-heading p{font-size:11px}.project-index{flex-wrap:nowrap;overflow-x:auto;padding-bottom:14px;margin-bottom:33px;gap:7px;scrollbar-width:thin;scrollbar-color:#65572f transparent}.project-index a{flex-shrink:0;font-size:9px;padding:9px 11px}.project,.project:nth-child(even){width:100%;margin:0 0 46px}.project-image{margin-inline:-4px}.project h3{font-size:21px}.project p{font-size:9px;max-width:100%}.project-caption{padding-top:17px;padding-bottom:20px}.credit-copy{font-size:21px;line-height:1.7}.collaboration{padding-top:35px}.phone{font-size:28px}.contact-rail{top:auto;bottom:19px;right:12px;transform:none;gap:8px}.contact-rail a{width:38px;height:38px}.contact-rail a:last-child{display:none}.contact-rail svg{width:16px;height:16px}footer{padding-bottom:100px}.intro-brand{width:85vw}.intro-brand span{margin-top:-15px;font-size:6px;letter-spacing:2.5px}.intro-rule{top:61%;width:75%}}
@media(prefers-reduced-motion:reduce){.cinema-shot{transition:none;transform:none}.intro.is-playing{display:none}.project.is-pending .project-image{clip-path:inset(0)}.intro-architecture,.intro-brand,.intro-rule{animation:none}.hero-content{animation:none}}

/* Readability revision: photography is an ambient layer behind the content. */
.hero-cinema{filter:brightness(.66) saturate(.7)}
.cinema-shade{background:linear-gradient(90deg,rgba(9,14,14,.94) 0%,rgba(9,14,14,.89) 38%,rgba(9,14,14,.64) 72%,rgba(9,14,14,.55) 100%),linear-gradient(0deg,#101311 0%,transparent 50%,rgba(9,14,14,.25) 100%)}
.hero .network{opacity:.11}
.hero-content{max-width:760px;animation:none!important}
.intro-running .hero-content,.intro-finished .hero-content{opacity:1;transform:none;animation:none}
h1{font-size:clamp(44px,4.4vw,64px);line-height:1.2;letter-spacing:-1.8px;font-weight:400}
h1 em{color:#edcf93}
.hero-description{font-size:16px;line-height:1.85;max-width:470px;color:#e1e3dc}
.hero .eyebrow{font-size:10px;letter-spacing:2px}
.header nav{font-size:14px}.button,.text-link{font-size:13px}.button{padding:18px 23px}
.cinema-name{font-size:18px}.cinema-location{font-size:12px;color:#d5d8d1}
.about-copy>p:not(.lead),.service-copy,.contact-grid>div>p:not(.eyebrow){font-size:15px;line-height:1.9}
.portfolio-heading p{font-size:14px}.project p{font-size:12px}.company-numbers>div>span{font-size:12px}
/* A single gentle reveal, followed by a crossfade into the same live background. */
.intro.is-playing{background:rgba(9,14,14,.97);animation:intro-safety-exit .9s ease 3.5s forwards;transition:opacity .95s cubic-bezier(.22,.61,.36,1);opacity:1}
.intro.is-playing.is-leaving{opacity:0;pointer-events:none}
.intro-architecture,.intro .intro-map,.intro-rule,.intro-lines{display:none}
.intro-brand{width:min(470px,74vw);animation:soft-brand-in .85s cubic-bezier(.22,.61,.36,1) .12s both;clip-path:none;transform:none}
.intro-brand span{font-size:9px;letter-spacing:3px;color:#cecdbf;margin-top:-28px}
.intro-skip{font-size:12px}
@keyframes soft-brand-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes intro-safety-exit{to{opacity:0;visibility:hidden}}
@media(max-width:900px){.hero{padding-top:225px}.hero-content{max-width:620px}.hero-description{max-width:420px}}
@media(max-width:600px){
 .hero{padding-top:177px;min-height:910px;padding-bottom:260px}
 .hero-cinema{inset:0 -15% 0 -45%}
 .cinema-shade{background:linear-gradient(90deg,rgba(9,14,14,.91),rgba(9,14,14,.77)),linear-gradient(0deg,#101311,transparent 75%)}
 .hero-content{max-width:100%;padding-right:5px}
 h1{font-size:38px;line-height:1.22;letter-spacing:-1.35px}
 h1 em{font-size:inherit}
 .hero-description{font-size:15px;line-height:1.85;max-width:330px}
 .hero .eyebrow{font-size:9px;letter-spacing:1.3px}
 .hero-actions{gap:20px;flex-wrap:wrap}
 .button{font-size:12px;padding:16px 18px}.text-link{font-size:12px}
 .cinema-caption{max-width:290px}.cinema-name{font-size:16px}.cinema-location{font-size:11px}
 .hero-bottom{font-size:8px;letter-spacing:.4px}
 .about-copy>p:not(.lead),.service-copy,.contact-grid>div>p:not(.eyebrow){font-size:14px}
 .portfolio-heading p{font-size:13px}.project p{font-size:11px}.company-numbers>div>span{font-size:11px}
 .intro-brand{width:83vw}.intro-brand span{font-size:7px;letter-spacing:1.8px;margin-top:-14px}
}
@media(prefers-reduced-motion:reduce){.intro.is-playing{display:none}.intro-brand{animation:none}.hero-content{animation:none}}
/* Write on the original artwork, letter by letter; never replace its geometry. */
.intro.is-playing{animation:intro-safety-exit .9s ease 5s forwards}
.written-logo{display:block;width:100%;height:auto;overflow:visible}
.write-stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:brand-write .75s cubic-bezier(.4,0,.2,1) forwards}
.letter-r{animation-delay:.15s}.letter-i{animation-delay:.68s;animation-duration:.45s}.letter-s{animation-delay:1s;animation-duration:.8s}.letter-e{animation-delay:1.6s;animation-duration:.65s}.letter-gold{animation-delay:2.05s;animation-duration:.55s}
.write-subtitle{opacity:0;animation:brand-detail-in .6s ease 2.3s forwards}
.intro-brand>span{opacity:0;animation:brand-detail-in .6s ease 2.45s forwards}
@keyframes brand-write{to{stroke-dashoffset:0}}
@keyframes brand-detail-in{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.write-stroke{stroke-dashoffset:0;animation:none}.write-subtitle,.intro-brand>span{opacity:1;animation:none}}