/* Zawiya Studio — motion study 04. Type and review controls shared by both concepts. */
:root{--review-h:76px}body:not(.concept-selector):not(.device-review){padding-top:var(--review-h)}html{scroll-padding-top:calc(var(--review-h) + 24px)}body{font-size:16px}.sakin{--muted:#5a6052}.noor{--muted:#bec6bc}p{font-size:16px;line-height:1.8}h2,h3{font-weight:500}h2{line-height:1.07}.eyebrow{font-size:11px;letter-spacing:.15em;line-height:1.6}.textlink,.solid{font-size:14px;min-height:46px}.links,.nav-actions,.footer-nav{font-size:13px}.links a,.lang{padding-block:12px}.logo small{font-size:9px}.hero-sakin p,.hero-description,.intro-bottom p,.heading-row p,.experience p,.sakin-manifesto p,.sakin-story .story-copy p,.service-section .service-intro p,details p,.dialog p{font-size:16px;line-height:1.8}.hero-sakin p{max-width:370px}.intro-bottom p{max-width:490px}.heading-row p{max-width:310px}.tabs button{font-size:13px;min-height:44px}.collection-top .micro,.property-meta small,.property-meta p,.sample-note,.destination small,.destination p,.studio-credit p,.copyright,.dialog-head,.modal-grid label,.gallery-controls{font-size:12px;line-height:1.7}.property-meta small{font-weight:500;letter-spacing:.04em}.sample-note{max-width:850px}.label{font-size:10px;font-weight:600}.heart{height:44px;width:44px}.property-meta .round{width:48px;height:48px}.chapter-line,.hero-sakin .hero-foot{font-size:11px}.footer{padding-bottom:55px}.studio-credit a.link{font-size:14px}.studio-credit a.link small{font-size:12px}.scene-open,.skip-journey{font-size:13px;min-height:44px}.journey-label,.chapter-buttons button,.journey-counter{font-size:11px}.motion-active .journey-stage{top:var(--review-h);height:calc(100svh - var(--review-h))}.motion-active .journey-top{font-size:11px}.motion-active .journey-controls{bottom:35px}.motion-active .gallery-panel .gallery-copy{bottom:115px}.modal-grid input,.modal-grid select{font-size:16px}.dialog .stats{font-size:14px}.dialog-head button{min-width:44px;min-height:44px}.menu{width:44px;height:44px}.toast{top:calc(var(--review-h) + 12px);font-size:14px}.page-progress{top:var(--review-h);z-index:61}
.zawiya-lockup{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:400 17px/1.2 'DM Sans',sans-serif;letter-spacing:-.035em}.zawiya-lockup svg{width:32px;height:32px;flex:none;color:#ffb65c}.zawiya-lockup b{font-weight:600!important;color:inherit!important}.sakin .studio-credit .zawiya-lockup svg{color:#985529}.studio-credit .zawiya-lockup{font-size:25px}.studio-credit .zawiya-lockup svg{width:44px;height:44px}.intro-caption{display:flex;flex-direction:column;align-items:center;gap:18px}.intro-caption small{font-size:10px;letter-spacing:.25em}
.review-bar{position:fixed;top:0;left:0;right:0;height:var(--review-h);padding:10px 3%;display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:60;background:#f4f1e9;color:#28302b;border-bottom:1px solid #d3d4c7;box-shadow:0 2px 14px #00000009;font-family:'DM Sans',sans-serif}.review-bar a:focus-visible,.review-bar button:focus-visible{outline:2px solid #806134;outline-offset:3px}.review-brand{flex-shrink:0}.review-brand svg{color:#ac642c}.concept-switch{display:flex;align-items:stretch;padding:4px;gap:4px;border-radius:9px;background:#e6e5dc;border:1px solid #d8d8ce}.concept-switch a{min-height:44px;padding:6px 17px;min-width:184px;display:flex;align-items:center;gap:11px;border-radius:6px;transition:background .2s,color .2s}.concept-switch a:hover{background:#d6d9cd}.concept-switch a[aria-current=page]{background:#24382f;color:#f8f3e5;box-shadow:0 2px 4px #0001}.concept-switch a[href="sakin.html"][aria-current=page]{background:#8b503b}.switch-number{font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}.concept-switch b{display:block;font-size:13px;font-weight:600;letter-spacing:.08em}.concept-switch small{display:block;font-size:11px;margin-top:3px;opacity:.8}.switch-dot{width:5px;height:5px;margin-left:auto;background:currentColor;border-radius:50%;opacity:0}.concept-switch [aria-current] .switch-dot{opacity:1}.review-actions{display:flex;gap:18px;align-items:center}.review-actions a,.review-actions button{font-size:12px;min-height:44px;display:flex;align-items:center;gap:7px}.review-actions .motion{border-left:1px solid #cdcec0;padding:8px 0 8px 18px;white-space:nowrap}.review-actions .motion>span:first-child{font-size:20px}.review-actions .motion[aria-pressed=true]{color:#845038}
/* Immersive NOOR: a native-scroll camera flight through photographic objects. */
.spatial-journey{position:relative;background:#080f10;color:#f5f0e4}.spatial-stage{position:relative;min-height:760px;isolation:isolate;overflow:hidden;background:#080f10}.spatial-stage .topnav{height:96px;position:relative;z-index:12;color:#f2edde;border-color:#ffffff24}.spatial-stage .links{color:#e7e9e3}.spatial-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 25%,#3b40372e,transparent 52%),linear-gradient(115deg,#081213,#161d1b 60%,#060a0d)}.atmosphere-image{position:absolute;inset:-5%;background:linear-gradient(90deg,#080e10 4%,#090f1199 50%,#070e1177),url('assets/noor-1536.webp') center/cover;opacity:.45}.spatial-floor{position:absolute;left:-50%;right:-50%;height:100%;top:50%;transform:perspective(500px) rotateX(70deg);background:repeating-linear-gradient(90deg,transparent 0 149px,#d9c39612 150px 151px),repeating-linear-gradient(0deg,transparent 0 99px,#d9c3960d 100px 101px);mask-image:linear-gradient(transparent,#0008 55%,transparent)}.sculpture-orbit{position:absolute;width:76vw;height:140vh;top:-30%;right:-25%;border:1px solid #d9c0926b;border-radius:50%;transform:rotate(-28deg);box-shadow:inset 6px 0 20px #bdc5b31a,4px 0 5px #cfb78920}.orbit-b{width:60vw;right:-17%;top:-24%;transform:rotate(-34deg);border-width:8px;border-color:#c4aa7c12;box-shadow:inset 0 0 0 1px #e8d9b052,10px 0 45px #000}.spatial-lens{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 44%;pointer-events:none;z-index:1}.spatial-world{position:absolute;inset:0;transform-style:preserve-3d}.spatial-frame{position:absolute;left:50%;top:44%;width:min(74vw,1050px);height:min(58svh,650px);margin:0;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity;visibility:hidden}.frame-face{position:absolute;inset:0;padding:6px;border-radius:7px;background:linear-gradient(125deg,#f0e5c8,#788178 26%,#e2d9be 47%,#4c5852 78%,#cbc4ae);box-shadow:0 15px 60px #0008;overflow:hidden}.frame-face picture{width:100%;height:100%;border-radius:3px;overflow:hidden;display:block}.frame-face img{object-fit:cover;object-position:center}.frame-back{position:absolute;inset:0;border-radius:7px;background:linear-gradient(90deg,#676f64,#d8cbae,#737567);transform:translate3d(10px,5px,-15px);box-shadow:0 0 0 1px #dcd3b759}.frame-tag{position:absolute;bottom:19px;left:24px;padding:8px 10px;color:#fff6e6;background:#0c1719b8;font-size:10px;letter-spacing:.14em;border:1px solid #ffffff29;backdrop-filter:blur(5px)}.spatial-intro{position:absolute;left:6%;top:29%;z-index:3;max-width:770px;pointer-events:none;transform-origin:left center}.spatial-intro h1{font-family:'DM Sans','Noto Sans Arabic',sans-serif;font-weight:400;font-size:clamp(64px,7.2vw,118px);line-height:1.03;letter-spacing:-.065em;text-shadow:0 2px 35px #03090cb0}.spatial-intro h1 em{display:block;font:italic 400 1.15em/.95 'Cormorant Garamond','Noto Sans Arabic',serif;color:#dac8a3;letter-spacing:-.05em}.spatial-intro p{font-size:17px;line-height:1.75;color:#d1d9d1;margin-top:29px;max-width:400px;text-shadow:0 2px 15px #000}.spatial-intro .eyebrow{color:#d8c396;margin-bottom:25px;font-size:11px}.spatial-enter{pointer-events:auto;display:flex;align-items:center;gap:35px;margin-top:30px;padding:8px 0;font-size:14px}.spatial-enter>span:last-child{border:1px solid #a0a797;border-radius:50%;width:46px;height:46px;display:grid;place-content:center;font-size:20px}.spatial-hud{position:absolute;z-index:5;left:4%;right:4%;bottom:25px;display:grid;grid-template-columns:1fr auto;gap:13px 30px;color:#f2eede}.spatial-hud:before{content:'';position:absolute;inset:-75px -5vw -30px;z-index:-1;background:linear-gradient(transparent,#080f10ef 50%);pointer-events:none}.spatial-caption{display:flex;gap:22px;align-items:baseline;min-width:0}.spatial-count{font-size:12px;color:#cbb994;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.08em}.spatial-title{font:400 clamp(22px,2.4vw,36px)/1.2 'DM Sans','Noto Sans Arabic',sans-serif;letter-spacing:-.035em}.spatial-controls{display:flex;gap:7px;align-items:center}.spatial-controls button,.spatial-controls select{height:46px;min-width:46px;border:1px solid #919c866e;color:#f1ecdf;background:#1c2822e6;padding:0 14px;border-radius:0;font-size:13px}.spatial-controls>button:not(.space-expand){font-size:25px}.spatial-controls select{width:100px;cursor:pointer;font-size:12px}.spatial-controls button:hover{background:#45513d}.spatial-controls button:disabled{opacity:.3;cursor:default}.spatial-controls .space-expand{padding:0 20px;margin-left:4px}.space-progress{direction:ltr;grid-column:1/-1;appearance:none;-webkit-appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:ew-resize;--progress:0%}.space-progress::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#d0b88d var(--progress),#8b967844 var(--progress))}.space-progress::-moz-range-track{height:2px;background:#8b967844}.space-progress::-moz-range-progress{background:#d0b88d;height:2px}.space-progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:10px;width:10px;margin-top:-4px;background:#e2d0ad;border-radius:50%}.space-progress::-moz-range-thumb{height:10px;width:10px;border:0;background:#e2d0ad;border-radius:50%}.spatial-hud-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;color:#b7c3b4;letter-spacing:.12em}.spatial-hud-bottom>a{font-size:12px;color:#efe8d4;letter-spacing:0;border-bottom:1px solid #c1b799;padding:8px 0;min-height:34px}.spatial-hud-bottom i{display:inline-block;width:26px;height:1px;background:#c4b292;margin:0 0 4px 10px}.spatial-on .spatial-journey{height:900svh}.spatial-on .spatial-stage{position:sticky;top:var(--review-h);height:calc(100svh - var(--review-h));min-height:0}.spatial-stage .topnav{background:linear-gradient(#081013bb,transparent)}.spatial-lightbox{background:#101918;color:#f1eada;border:1px solid #797c65;width:min(1400px,96vw);max-height:94svh;padding:24px;margin:auto}.spatial-lightbox::backdrop{background:#050a0af2;backdrop-filter:blur(7px)}.space-lightbox-head,.space-lightbox-foot{display:flex;justify-content:space-between;align-items:center;gap:20px}.space-lightbox-head h2{font:400 24px 'DM Sans',sans-serif;letter-spacing:-.02em}.space-close,.space-lightbox-foot button{min-height:44px;min-width:44px;border:1px solid #657160;padding:10px 16px;font-size:14px}.space-full-image{width:100%;height:min(68svh,850px);object-fit:contain;margin:18px 0}.space-lightbox-foot{font-size:10px;letter-spacing:.1em}.space-lightbox-foot button{font-size:24px}.spatial-concept:not(.spatial-on) .spatial-intro{display:none}.spatial-concept:not(.spatial-on) .spatial-frame:first-child{visibility:visible;transform:translate(-50%,-50%);width:80%;height:55%}.spatial-concept:not(.spatial-on) .spatial-stage{height:calc(100svh - var(--review-h));min-height:600px}.spatial-concept:not(.spatial-on) .spatial-hud-bottom>span:nth-child(2){display:none}.spatial-concept .brand-intro{display:none}
/* Concept overview and device review. */
.concept-selector .intro p,.concept-selector .concept .description{font-size:15px;line-height:1.8;max-width:380px}.concept-selector .concept .description{color:#e0e8db}.concept-selector .concept.light .description{color:#384432}.concept-selector .header-caption,.concept-selector .eyebrow,.concept-selector .concept-top{font-size:10px}.concept-selector .header-link,.concept-selector .concept-link{font-size:14px}.concept-selector .notes h3{font-size:14px}.concept-selector .notes p{font-size:13px;color:#bbc6b1}.concept-selector .bottom,.concept-selector .bottom span{font-size:11px}.concept-selector .viewtools{font-size:13px}.concept-selector header .zawiya-lockup{font-size:24px}.concept-selector header .zawiya-lockup svg{width:40px;height:40px}.concept-selector .concept{min-height:580px}.concept-selector .concept:first-child:before{content:'';position:absolute;top:12%;left:20%;width:70%;height:41%;border:5px solid #c8c7b599;border-radius:5px;transform:perspective(600px) rotateY(-26deg) rotateZ(-4deg);background:url('assets/interior-new-768.webp') center/cover;box-shadow:20px 22px 0 -5px #66716835,0 35px 70px #000a;z-index:-1}.concept-selector .concept:first-child:after{background:linear-gradient(0deg,#091614fa 5%,#09161480 48%,#09161430 75%)}.device-review{font-family:'DM Sans',sans-serif;font-size:13px}.device-review header>a{display:flex;gap:12px;align-items:center}.device-review button,.device-review select{min-height:44px}.device-review footer{font-size:11px}
[dir=rtl] .spatial-intro{left:auto;right:6%;transform-origin:right center}[dir=rtl] .spatial-intro h1,[dir=rtl] .spatial-intro h1 em{font-family:'Noto Sans Arabic',sans-serif;line-height:1.5;font-style:normal;letter-spacing:0;font-size:clamp(40px,5vw,74px)}[dir=rtl] .spatial-title{letter-spacing:0}[dir=rtl] .spatial-controls,[dir=rtl] .spatial-count{direction:ltr}
@media(max-width:1100px){.review-bar{gap:12px;padding-inline:2%}.review-actions{gap:10px}.review-actions .overview-link{display:none}.concept-switch a{min-width:163px;padding-inline:12px}.spatial-intro h1{font-size:clamp(62px,8vw,100px)}.spatial-intro{top:28%}.spatial-controls select{width:76px}.spatial-stage .links{gap:19px}.spatial-title{font-size:25px}}
@media(max-width:720px){:root{--review-h:108px}.review-bar{padding:4px 4% 7px;display:grid;grid-template-columns:1fr auto;grid-template-rows:38px 52px;gap:4px 12px}.review-brand .zawiya-lockup{font-size:14px;gap:7px}.review-brand svg{width:27px;height:27px}.review-actions{grid-column:2;grid-row:1;gap:12px}.review-actions .overview-link{display:flex;font-size:11px}.review-actions .motion{border:0;padding:0;font-size:10px;gap:4px;min-height:38px}.review-actions .motion>span:first-child{font-size:17px}.concept-switch{grid-column:1/-1;grid-row:2;width:100%;padding:3px;gap:4px}.concept-switch a{min-width:0;flex:1;padding:4px 10px;gap:8px;min-height:44px}.concept-switch b{font-size:12px}.concept-switch small{font-size:10px}.switch-number{font-size:10px}.review-actions .motion-label{font-size:10px}.spatial-stage .topnav{height:74px}.spatial-stage .logo strong{font-size:15px}.spatial-stage .logo small{font-size:7px}.spatial-stage .links{background:#17231e;top:74px}.spatial-intro{left:6%;right:6%;top:19%;max-width:400px}.spatial-intro h1{font-size:clamp(48px,12.6vw,73px);line-height:1.02}.spatial-intro .eyebrow{font-size:9px;margin-bottom:16px}.spatial-intro p{font-size:14px;line-height:1.7;max-width:255px;margin-top:20px}.spatial-enter{font-size:12px;margin-top:17px;gap:20px}.spatial-enter>span:last-child{width:39px;height:39px}.spatial-lens{perspective:760px;perspective-origin:50% 44%}.spatial-frame{width:85vw;height:43svh;top:43%}.frame-face{padding:4px}.frame-tag{bottom:12px;left:14px;font-size:8px;padding:5px 7px}.spatial-on .spatial-journey{height:760svh}.spatial-hud{left:6%;right:6%;bottom:14px;gap:6px;grid-template-columns:1fr}.spatial-caption{gap:12px}.spatial-title{font-size:20px;line-height:1.35}.spatial-count{font-size:10px}.spatial-controls{justify-content:stretch;gap:6px}.spatial-controls select{flex:1;width:60px;min-width:0;font-size:11px}.spatial-controls .space-expand{font-size:11px;margin:0;padding:0 11px}.spatial-controls>button{padding:0 10px}.spatial-hud-bottom{font-size:9px;gap:10px}.spatial-hud-bottom a{font-size:11px;min-height:30px;padding:5px 0}.spatial-hud-bottom>span:last-child{display:none}.spatial-hud-bottom i{width:14px;margin-left:5px}.space-progress{height:16px}.sculpture-orbit{width:130vw;right:-70%;height:130vh}.orbit-b{right:-60%;width:115vw}.spatial-lightbox{padding:15px}.space-lightbox-head h2{font-size:18px}.space-close{font-size:12px;padding:8px 12px;white-space:nowrap}.space-lightbox-foot{font-size:8px}.space-full-image{height:60svh}.spatial-concept:not(.spatial-on) .spatial-stage{min-height:590px}.spatial-concept:not(.spatial-on) .spatial-frame:first-child{width:88%;height:49%;top:40%}.eyebrow{font-size:10px}.hero-sakin p,.intro-bottom p,.heading-row p,.experience p,.sakin-manifesto p,.sakin-story .story-copy p,.service-section .service-intro p,details p,.dialog p{font-size:15px}.hero-sakin h1{font-size:clamp(57px,15vw,84px)}.hero-sakin p{max-width:330px}.heading-row{gap:24px}.property-meta small,.property-meta p,.sample-note,.destination small,.destination p,.copyright{font-size:12px}.links,.footer-nav{font-size:13px}.hero-copy .eyebrow{font-size:10px}.topnav .logo small{font-size:7px}.chapter-line,.hero-sakin .hero-foot{font-size:10px}.tabs button{font-size:12px}.collection-top .micro{font-size:11px}.hero-sakin .sun-seal{font-size:9px}.studio-credit .zawiya-lockup{font-size:23px}.motion-active .journey-top{top:20px;font-size:9px}.motion-active .journey-controls{bottom:25px}.journey-label,.journey-counter{font-size:10px}.skip-journey{font-size:11px}.motion-active .gallery-panel .gallery-copy{bottom:155px}.scene-open{font-size:13px}.gallery-copy .eyebrow{font-size:10px}.concept-selector .intro p,.concept-selector .concept .description{font-size:14px}.concept-selector .notes p{font-size:13px}.concept-selector .concept-top{font-size:9px}.concept-selector .concept{min-height:550px}.concept-selector .header-caption{font-size:8px}.concept-selector header .zawiya-lockup{font-size:19px;gap:7px}.concept-selector header .zawiya-lockup svg{width:30px;height:30px}.device-review header{font-size:12px}.device-review header .zawiya-lockup{font-size:13px}.device-review header .zawiya-lockup svg{width:24px;height:24px}}
@media(max-height:650px) and (min-width:721px){.spatial-stage .topnav{height:72px}.spatial-intro{top:23%}.spatial-intro h1{font-size:66px}.spatial-intro p{font-size:14px;margin-top:18px}.spatial-enter{margin-top:10px}.spatial-intro .eyebrow{margin-bottom:15px}.spatial-frame{height:53svh}.spatial-hud{bottom:12px;gap:5px}.spatial-title{font-size:24px}}
@media(max-height:580px) and (max-width:720px){.spatial-stage .topnav{height:56px}.spatial-stage .links{top:56px}.spatial-intro{top:24%}.spatial-intro h1{font-size:38px}.spatial-intro p,.spatial-intro .eyebrow,.spatial-enter{display:none}.spatial-hud{grid-template-columns:1fr auto;gap:4px;bottom:8px}.spatial-caption{align-self:center}.spatial-title{font-size:16px}.spatial-controls select,.space-expand{display:none}.spatial-hud-bottom>span{display:none}.spatial-frame{height:53svh}.spatial-hud-bottom a{min-height:22px;font-size:10px}.spatial-controls button{min-width:36px;height:36px}.spatial-count{font-size:9px}}
@media(prefers-reduced-motion:reduce){.concept-switch a{transition:none}.spatial-journey{height:auto!important}.spatial-stage{position:relative!important;top:0!important}.spatial-intro{display:none!important}.sculpture-orbit{transform:none}.spatial-world{transform:none!important}}
@media(min-width:721px){.spatial-intro{top:24%}.spatial-intro h1{font-size:clamp(60px,6.6vw,104px)}.spatial-intro p{font-size:16px;margin-top:24px}.spatial-enter{margin-top:20px}}
.spatial-top-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}.spatial-controls button:focus-visible,.spatial-controls select:focus-visible,.space-progress:focus-visible{outline:2px solid #e5c598;outline-offset:4px}.spatial-stage .spatial-intro .spatial-enter:focus-visible{outline:2px solid #e5c598;outline-offset:4px}