/* =========================================================
   THE ORE — "Monolith" design system (public site only)
   admin.html keeps assets/site.css; nothing here loads there.
   Sections are appended in build order: foundation, chrome,
   then one section per page.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --bone:#ECE7DE; --bone-2:#E3DDD2; --ink:#191917; --mute:#5E5A53;
  --bronze:#8A6A45;              /* 4.0:1 on bone: lines, focus, large type only */
  --line:rgba(25,25,23,.14); --error:#9B3B2E;
  --display:'Josefin Sans','Noto Kufi Arabic',sans-serif;   /* Latin → Josefin, Arabic falls through to Noto Kufi */
  --text:'IBM Plex Sans Arabic','Josefin Sans',sans-serif;
  --label:'Josefin Sans','IBM Plex Sans Arabic',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --g:clamp(1.2rem,4vw,4rem);            /* side gutter */
  --sec:clamp(6rem,14vw,12rem);          /* section rhythm */
  --frame:13vh 7vw 21vh 7vw;             /* the Monolith photo frame: top, sides, bottom */
  --bar-h:4.6rem;
  --start:left; --end:right; --dir:1;
}
[dir="rtl"]{--start:right;--end:left;--dir:-1}
@media (max-width:760px){:root{--frame:12vh 5vw 33vh 5vw}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{min-height:100vh;background:var(--bone);color:var(--ink);font:300 1.0625rem/1.7 var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
html.is-locked{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
::selection{background:var(--ink);color:var(--bone)}
[hidden]{display:none!important}
.sr-only,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp{opacity:0;pointer-events:none}
.skip{position:fixed;inset-inline-start:1rem;top:1rem;z-index:110;padding:.8rem 1.2rem;border-radius:999px;background:var(--ink);color:var(--bone);translate:0 -250%;transition:translate .3s var(--ease)}
.skip:focus{translate:0 0}

/* ---------- type ---------- */
.kicker{display:flex;align-items:center;gap:.9rem;font:400 .74rem/1.4 var(--label);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.kicker::before{content:"";flex:none;width:2.6rem;height:1px;background:currentColor;opacity:.55}
.kicker:lang(ar){font:500 .92rem/1.4 var(--text);letter-spacing:0;text-transform:none}
.note{color:var(--mute);font-size:.92rem}
.phead{padding:calc(var(--bar-h) + clamp(3.5rem,11vh,8rem)) var(--g) clamp(3rem,7vw,6rem)}
.ptitle{margin-top:1.4rem;font:200 clamp(3rem,9vw,9.5rem)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.ptitle:lang(ar){line-height:1.35;letter-spacing:0}
.psub{margin-top:1.6rem;max-width:46ch;color:var(--mute);font-size:clamp(1.05rem,1.4vw,1.3rem)}

/* ---------- buttons & small parts ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:3.25rem;padding:0 1.9rem;border:1px solid var(--ink);border-radius:999px;
  font:400 .78rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),translate .6s var(--ease)}
.btn:lang(ar){font:500 .98rem/1 var(--text);letter-spacing:0;text-transform:none}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn.solid{background:var(--ink);color:var(--bone)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}
.ring{display:grid;place-items:center;flex:none;width:3.4rem;height:3.4rem;border:1px solid var(--line);border-radius:50%;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),translate .6s var(--ease)}
.arrow{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.5}
[dir="rtl"] .arrow{transform:scaleX(-1)}

/* ---------- page curtain (every page) ----------
   A tall ink panel with curved edges. On load it continues up and away
   (pure CSS, so it clears even if a script fails); on an internal link
   ore-motion.js adds .is-cover and it rises from below before navigating. */
.curtain{position:fixed;left:-10vw;top:0;z-index:90;width:120vw;height:140vh;border-radius:50%/12vh;background:var(--ink);color:var(--bone);
  transform:translateY(-160vh);pointer-events:none;will-change:transform}
.curtain span{position:absolute;left:50%;top:70vh;translate:-50% -50%;font:300 .78rem/1 var(--label);letter-spacing:.6em;white-space:nowrap}
html.js .curtain{animation:curtain-leave .95s .05s var(--ease-io) both}
html.js .curtain.is-cover{animation:curtain-cover .55s var(--ease-io) both}
@keyframes curtain-leave{from{transform:translateY(-20vh)}to{transform:translateY(-160vh)}}
@keyframes curtain-cover{from{transform:translateY(100vh)}to{transform:translateY(-20vh)}}

/* ---------- reveals ----------
   .rv is revealed by app.js (IntersectionObserver) + an ore-motion.js failsafe.
   Frame reveals clip the inner .im — never the observed element itself: an
   element hidden by its own clip-path reports 0 intersection and never reveals. */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.inview{opacity:1;transform:none}
.rv[data-split],.rv.frame-rv{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
/* word masks — padding keeps Arabic ascenders/descenders inside the mask */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .26em;margin:-.14em -.04em -.26em}
.wi{display:inline-block;will-change:transform;transition:transform 1.15s var(--ease);transition-delay:calc(var(--d,0s) + var(--k,0) * .08s)}
.rv .wi{transform:translateY(112%)}
.rv.inview .wi{transform:none}
.frame-rv .im{position:relative;overflow:hidden;border-radius:3px;background:var(--bone-2);clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease)}
.frame-rv .im img{width:100%;height:100%;object-fit:cover;transform:scale(1.24);translate:0 var(--py,0);transition:transform 1.8s var(--ease)}
.frame-rv.inview .im{clip-path:inset(0 round 3px)}
.frame-rv.inview .im img{transform:scale(1.12)}
.frame-rv.inview:hover .im img,.frame-rv.inview:focus-visible .im img{transform:scale(1.18)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .curtain,.preloader,.cursor{display:none!important}
  .rv,.rv .wi,.frame-rv .im,.frame-rv .im img{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important}
  .lw{opacity:1!important}
}

/* =========================================================
   CHROME — top bar, menu overlay, footer, cursor
   The bar blends with `difference`, so it reads dark on bone and
   light over photos — and so does any light logo uploaded in admin.
   ========================================================= */
.bar{position:fixed;inset-inline:0;top:0;z-index:80;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 var(--g);color:#fff;mix-blend-mode:difference;pointer-events:none}
.bar>*{pointer-events:auto}
.bar-brand{display:flex;align-items:center;gap:.8rem;font:300 .76rem/1 var(--label);letter-spacing:.5em;white-space:nowrap}
.bar-brand img{width:auto;height:1.9rem}
.bar-links{display:flex;gap:clamp(1.2rem,2.4vw,2.6rem)}
.bar-links a{position:relative;padding:.5rem 0;font:400 .72rem/1 var(--label);letter-spacing:.24em;text-transform:uppercase}
.bar-links a:lang(ar){font:400 .95rem/1 var(--text);letter-spacing:0;text-transform:none}
.bar-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:var(--end);transition:transform .5s var(--ease)}
.bar-links a:hover::after,.bar-links a.active::after{transform:scaleX(1);transform-origin:var(--start)}
.bar-end{display:flex;align-items:center;gap:.6rem}
.bar-lang,.bar-menu{display:inline-flex;align-items:center;gap:.7rem;min-height:2.75rem;padding:0 1.15rem;border:1px solid currentColor;border-radius:999px;font:400 .78rem/1 var(--text)}
.bar-menu{display:none;font-family:var(--label);letter-spacing:.16em;text-transform:uppercase}
.bar-menu:lang(ar){font-family:var(--text);letter-spacing:0}
.bar-menu-i{position:relative;width:1rem;height:.5rem}
.bar-menu-i i{position:absolute;inset-inline:0;height:1px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.bar-menu-i i:first-child{top:0}
.bar-menu-i i:last-child{top:100%}
.bar-menu[aria-expanded="true"] .bar-menu-i i:first-child{top:50%;transform:rotate(45deg)}
.bar-menu[aria-expanded="true"] .bar-menu-i i:last-child{top:50%;transform:rotate(-45deg)}
@media (max-width:1099px){.bar-links{display:none}.bar-menu{display:inline-flex}}
@media (max-width:420px){.bar-brand span{display:none}}

.menu{position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:var(--g);
  padding:calc(var(--bar-h) + 2rem) var(--g) 5.5rem;background:var(--bone-2);overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .85s var(--ease-io),visibility 0s .85s}
.menu.show{clip-path:inset(0);visibility:visible;transition:clip-path .85s var(--ease-io)}
.menu-links{display:grid;gap:.1rem}
.menu-links a{display:flex;align-items:baseline;gap:1.2rem;width:max-content;max-width:100%}
.menu-n{font:400 .72rem/1 var(--label);letter-spacing:.2em;color:var(--mute)}
.menu-t{font:200 clamp(2.5rem,7vw,6.2rem)/1.12 var(--display);letter-spacing:-.01em;transition:color .4s var(--ease)}
.menu-t:lang(ar){line-height:1.5;letter-spacing:0}
.menu-links a:hover .menu-t,.menu-links a.active .menu-t{color:var(--bronze)}
.menu .wi{transform:translateY(112%)}
.menu.show .wi{transform:none}
.menu-media{justify-self:center;width:min(30vw,26rem);aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--bone)}
.menu-media img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
.menu-media img.swap{opacity:0;transform:scale(1.06)}
.menu-foot{position:absolute;inset-inline:var(--g);bottom:1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;font-size:.92rem;color:var(--mute)}
.menu-foot a:hover{color:var(--ink)}
.menu-close{margin-inline-start:auto}
@media (max-width:760px){.menu{grid-template-columns:1fr}.menu-media{display:none}}
/* short landscape phones: one column that scrolls, footer in the flow so it never sits on a link */
@media (max-height:560px){
  .menu{grid-template-columns:1fr;align-items:start;padding-bottom:1.6rem}
  .menu-media{display:none}
  .menu-t{font-size:clamp(1.9rem,10vh,3.4rem)}
  .menu-foot{position:static;margin-top:1.4rem}
}

.foot{position:relative;overflow:hidden;padding:var(--sec) var(--g) 1.8rem;border-top:1px solid var(--line)}
.foot.rv{opacity:1;transform:none}
.foot-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem 3rem}
.foot-logo{width:auto;height:4.6rem;margin-bottom:1.6rem}
.foot-intro{max-width:32ch;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.6}
.foot .kicker{margin-bottom:.6rem}
.foot-col{display:grid;align-content:start;gap:.55rem}
.foot-col>a{width:max-content;max-width:100%;color:var(--mute);transition:color .3s}
.foot-col>a:hover{color:var(--ink)}
.foot-social{display:flex;gap:.6rem;margin-top:.6rem}
.foot-social a{display:grid;place-items:center;width:2.9rem;height:2.9rem;border:1px solid var(--line);border-radius:50%;transition:background .4s var(--ease),color .4s var(--ease)}
.foot-social a:hover{background:var(--ink);color:var(--bone)}
.foot-social svg{width:1.05rem;height:1.05rem;fill:currentColor}
.foot-mark{margin-top:clamp(3rem,8vw,6rem);font:200 clamp(4rem,20.5vw,21rem)/.78 var(--display);letter-spacing:-.035em;text-align:center;white-space:nowrap;
  translate:0 35%;transition:translate 1.6s var(--ease)}
.foot.inview .foot-mark{translate:0 0}
.foot-copy{margin-top:1.6rem;font-size:.82rem;color:var(--mute)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}}

.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-live{opacity:1}
.cursor-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .5s var(--ease),background .3s}
.cursor.is-link .cursor-dot{transform:scale(4.2)}
.cursor.is-label{mix-blend-mode:normal}
.cursor.is-label .cursor-dot{transform:scale(8.6);background:var(--ink)}
.cursor-label{position:absolute;left:0;top:0;translate:-50% -50%;font:400 .62rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);white-space:nowrap;opacity:0;transition:opacity .25s}
.cursor-label:lang(ar){font:500 .8rem/1 var(--text);letter-spacing:0}
.cursor.is-label .cursor-label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* =========================================================
   HOME — preloader, pinned WebGL stage, two paths
   ========================================================= */
.preloader{display:none}
html.pl .preloader{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:var(--bone);
  clip-path:inset(0);transition:clip-path 1s var(--ease-io);animation:preloader-fail .01s 3.4s forwards}
.preloader-n{font:200 clamp(4.5rem,16vw,14rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preloader .kicker{position:absolute;bottom:6vh;inset-inline-start:var(--g)}
.preloader.is-done{clip-path:inset(0 0 100% 0)}
.preloader.is-gone{display:none!important}
@keyframes preloader-fail{to{visibility:hidden}}
html.pl .curtain:not(.is-cover){display:none}

.stage{position:relative;height:calc(var(--slides,6) * 100vh);height:calc(var(--slides,6) * 100svh)}
/* the bone background lets the title's `difference` blend see the page, not a transparent layer */
.stage-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bone)}
.stage-frame{position:absolute;inset:var(--frame);overflow:hidden;border-radius:3px;background:var(--bone-2);
  clip-path:inset(0 round 3px);transition:clip-path 1.5s var(--ease-io)}
html.pl:not(.pl-out) .stage-frame{clip-path:inset(46% 46% 46% 46% round 3px);animation:frame-fail .01s 3.4s forwards}
@keyframes frame-fail{to{clip-path:inset(0 round 3px)}}
.stage-frame[data-cursor]:not([data-cursor=""]){cursor:pointer}
.stage-frame picture,.stage-frame img,.stage-frame canvas,.stage-fallback{position:absolute;inset:0;width:100%;height:100%}
.stage-frame img{object-fit:cover}
.stage-frame canvas{opacity:0;transition:opacity .9s var(--ease)}
.stage.gl-on .stage-frame canvas{opacity:1}
.stage-fallback img{opacity:0;transition:opacity 1s var(--ease)}
.stage-fallback img.on{opacity:1}
.stage-copy{position:absolute;inset-inline:7vw;bottom:calc(4.5vh + 6.4rem);z-index:3;color:#fff;mix-blend-mode:difference;pointer-events:none}
.stage-title{font:200 clamp(3.4rem,12.5vw,13rem)/1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.stage-title:lang(ar){line-height:1.28;letter-spacing:0}
/* slide 0: sink the baseline ~.17em below the frame edge so the lower quarter of the caps reads dark on the
   bone band; the cap (.4rem + .25em) keeps the baseline clear of the foot row on short viewports */
@media (min-width:761px){
  .stage-title[lang="en"]{translate:0 min(calc(.42em + 6.4rem - 16.5vh), calc(.4rem + .25em))}
}
.stage-title a{pointer-events:auto}
.stage-copy .wi{transform:translateY(112%)}
.stage-copy.inview .wi{transform:none}
.stage-foot{position:absolute;inset-inline:7vw;bottom:4.5vh;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 3rem}
.stage-info{display:grid;gap:.5rem;max-width:52ch}
.stage-meta{color:var(--mute);font-size:.98rem;line-height:1.6}
.stage-foot .kicker,.stage-meta{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stage-foot.inview .kicker,.stage-foot.inview .stage-meta{opacity:1;transform:none}
.stage-foot.inview .stage-meta{transition-delay:.12s}
.stage-rail{position:absolute;inset-inline-end:3.5vw;top:50%;z-index:4;display:grid;justify-items:center;gap:1rem;
  translate:calc(50% * var(--dir)) -50%;font:400 .7rem/1 var(--label);letter-spacing:.2em;color:var(--mute)}
.stage-n{display:grid;justify-items:center;gap:.5rem}
.stage-n b{font-weight:400;color:var(--ink)}
.stage-n i{font-style:normal}
.stage-bar{position:relative;width:1px;height:18vh;overflow:hidden;background:var(--line)}
.stage-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:top;transform:scaleY(0)}
@media (max-width:760px){
  .stage-copy{inset-inline:5vw;bottom:calc(3.5vh + 10rem)}
  .stage-foot{inset-inline:5vw;bottom:3.5vh;flex-direction:column;align-items:flex-start}
  .stage-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem}
  .stage-rail{display:none}
}

.paths{padding:var(--sec) var(--g)}
.path{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t go" ". s go";align-items:center;
  column-gap:clamp(1rem,4vw,4rem);row-gap:.6rem;padding:clamp(2.2rem,5vw,4.2rem) 0;border-bottom:1px solid var(--line)}
.path:first-child{border-top:1px solid var(--line)}
.path-n{grid-area:n;font:400 .72rem/1 var(--label);letter-spacing:.2em;color:var(--mute)}
.path-t{grid-area:t;font:200 clamp(2.6rem,7.5vw,7.6rem)/1.04 var(--display);letter-spacing:-.02em;transition:translate .8s var(--ease)}
.path-t:lang(ar){line-height:1.4;letter-spacing:0}
.path-s{grid-area:s;max-width:44ch;color:var(--mute)}
.path-go{grid-area:go}
.path:hover .path-t{translate:calc(1.2rem * var(--dir)) 0}
.path:hover .path-go{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.path-shot{position:absolute;inset-inline-end:16%;top:50%;z-index:2;width:clamp(10rem,17vw,16rem);aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  translate:0 -50%;rotate:calc(-3deg * var(--dir));clip-path:inset(50%);transition:clip-path .8s var(--ease);pointer-events:none}
.path-shot img{width:100%;height:100%;object-fit:cover}
.path:hover .path-shot{clip-path:inset(0 round 3px)}
@media (hover:none){.path-shot{display:none}}
@media (max-width:760px){.path{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n go" "t t" "s s"}}

/* =========================================================
   WORKS — filter tabs, staggered framed grid
   ========================================================= */
.filters{position:relative;display:flex;gap:clamp(1.4rem,3vw,3rem);margin:0 var(--g);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .chip{position:relative;flex:none;padding:1.1rem 0;font:400 .76rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:color .4s var(--ease)}
.filters .chip:lang(ar){font:400 1rem/1 var(--text);letter-spacing:0;text-transform:none}
.filters .chip.sel,.filters .chip:hover,.filters .chip:focus-visible{color:var(--ink)}
.filters .chip:focus-visible{outline-offset:-4px}   /* the row scrolls, so an outer ring would be clipped */
.filters.is-scroll{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
[dir="rtl"] .filters.is-scroll{-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
.filters.is-scroll::after{content:"";flex:none;width:2.4rem}   /* lets the last tab scroll clear of the fade */
.tab-c{margin-inline-start:.45rem;font:400 .6rem/1 var(--label);letter-spacing:.1em;vertical-align:super}
.filters-ink{position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--ink);transition:left .6s var(--ease),width .6s var(--ease)}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:clamp(1.5rem,6vw,7rem);row-gap:clamp(3.5rem,8vw,7rem);
  padding:clamp(3rem,7vw,6rem) var(--g) var(--sec)}
.wcard{display:block;transition:opacity .32s var(--ease),transform .32s var(--ease)}
.wcard.is-alt{margin-top:clamp(0rem,16vh,12rem)}
.wcard.hidden{display:none}
.wcard .im{aspect-ratio:4/5}
.wcard-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;margin-top:1.3rem}
.wcard-t{font:300 clamp(1.4rem,2.4vw,2.3rem)/1.2 var(--display)}
.wcard-t:lang(ar){line-height:1.5}
.wcard-c{font:400 .7rem/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.wcard-c:lang(ar){font:400 .92rem/1.4 var(--text);letter-spacing:0;text-transform:none}
.works-grid.is-filtering .wcard{opacity:0;transform:translateY(18px)}
@media (max-width:760px){
  .filters{gap:1.2rem}
  .filters .chip{letter-spacing:.14em}
  .works-grid{grid-template-columns:1fr}.wcard.is-alt{margin-top:0}
}

/* =========================================================
   PROJECT — framed hero, gallery, next project, lightbox
   ========================================================= */
.proj-stage{position:relative;height:100vh;height:100svh}
.proj-frame{position:absolute;inset:var(--frame);overflow:hidden;border-radius:3px;background:var(--bone-2)}
.proj-frame img,.proj-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj-frame canvas{opacity:0;transition:opacity .9s var(--ease)}
.proj-frame.gl-on canvas{opacity:1}
.proj-head{position:absolute;inset-inline:7vw;bottom:calc(21vh - .55em);z-index:2;font-size:clamp(3rem,10vw,11rem);color:#fff;mix-blend-mode:difference;pointer-events:none}
.proj-title{font:200 1em/1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.proj-title:lang(ar){line-height:1.3;letter-spacing:0}
.proj-info{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.4rem;padding:2.6rem var(--g) 0}
.back-link{display:inline-flex;align-items:center;gap:.7rem;font:400 .72rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase}
.back-link:lang(ar){font:400 .95rem/1 var(--text);letter-spacing:0;text-transform:none}
.back-link .arrow{transform:scaleX(-1)}
[dir="rtl"] .back-link .arrow{transform:none}
.proj-info .city{color:var(--mute)}
.proj-desc{max-width:34ch;padding:clamp(3.5rem,8vw,7rem) var(--g);font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1.6}
.proj-sec{padding:0 var(--g) var(--sec)}
.proj-sec>.kicker{margin-bottom:2.2rem}
.proj-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.6vw,2.6rem)}
.ph{display:block;width:100%}
.ph .im{display:block;aspect-ratio:4/5}   /* the cell is a <button>, so .im is a span: it must be a block to take its ratio and clip the scaled image */
.ph:nth-child(3n+1){grid-column:1/-1}
.ph:nth-child(3n+1) .im{aspect-ratio:16/9}
.plans .ph .im{aspect-ratio:4/3;background:#fff}
.plans .frame-rv .im img,.plans .frame-rv.inview .im img,.plans .frame-rv.inview:hover .im img{object-fit:contain;transform:none;translate:none}
.next-proj{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:var(--sec) var(--g);border-top:1px solid var(--line)}
.next-t{display:block;margin-top:1.2rem;font:200 clamp(2.6rem,8vw,8.4rem)/1.04 var(--display);letter-spacing:-.02em;transition:translate .8s var(--ease)}
.next-t:lang(ar){line-height:1.4;letter-spacing:0}
.next-im{flex:none;width:clamp(8rem,22vw,20rem);aspect-ratio:4/5;overflow:hidden;border-radius:3px}
.next-im img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.next-proj:hover .next-im img{scale:1.07}
.next-proj:hover .next-t{translate:calc(1rem * var(--dir)) 0}

.lightbox{position:fixed;inset:0;z-index:85;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;touch-action:pan-y pinch-zoom;padding:5rem calc(var(--g) + 4.4rem);background:rgba(236,231,222,.97);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.lightbox.show{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;transform:scale(.97);transition:opacity .35s var(--ease),transform .7s var(--ease)}
.lightbox.show img{transform:none}
.lb-btn{position:absolute;top:50%;translate:0 -50%;background:var(--bone)}
.lb-btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.lb-prev{inset-inline-start:var(--g)}
.lb-next{inset-inline-end:var(--g)}
.lb-prev .arrow{transform:scaleX(-1)}
[dir="rtl"] .lb-prev .arrow{transform:none}
.lb-close{position:absolute;top:1.2rem;inset-inline-end:var(--g)}
.lb-count{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;font:400 .72rem/1 var(--label);letter-spacing:.24em;color:var(--mute)}
@media (max-width:760px){
  .proj-head{inset-inline:5vw;bottom:calc(33vh - .55em)}
  .proj-gallery{grid-template-columns:1fr}
  .ph .im,.ph:nth-child(3n+1) .im{aspect-ratio:4/3}
  .lightbox{padding:4.5rem 1rem 5.5rem}
  .lb-btn{top:auto;bottom:1rem;translate:none}
  .next-proj{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   CONSULTATIONS — numbered rows, booking drawer,
   and the form controls shared with pricing
   ========================================================= */
.crows{padding:0 var(--g) var(--sec)}
.crow{border-bottom:1px solid var(--line)}
.crow:first-child{border-top:1px solid var(--line)}
.crow-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,4vw,4rem);width:100%;padding:clamp(1.7rem,4vw,3rem) 0}
.crow-n{font:400 .72rem/1 var(--label);letter-spacing:.2em;color:var(--mute)}
.crow-t{font:200 clamp(1.8rem,4.6vw,4.6rem)/1.15 var(--display);letter-spacing:-.01em;transition:translate .7s var(--ease)}
.crow-t:lang(ar){line-height:1.5;letter-spacing:0}
.crow-head:hover .crow-t{translate:calc(.8rem * var(--dir)) 0}
.plus{position:relative}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:.95rem;height:1px;background:currentColor;translate:-50% -50%;transition:rotate .5s var(--ease)}
.plus::after{rotate:90deg}
.open>.crow-head .plus::after,.open>.qa-q .plus::after{rotate:0deg}
.crow-head:hover .ring,.qa-q:hover .ring{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.crow-body,.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.crow.open .crow-body,.qa.open .qa-a{grid-template-rows:1fr}
.crow-inner,.qa-a>div{min-height:0;overflow:hidden}
.crow-content{display:grid;justify-items:start;gap:1.4rem;max-width:62ch;margin-inline-start:clamp(2.6rem,7vw,7.2rem);padding-bottom:clamp(2rem,4vw,3rem)}
.crow-content ul{display:grid;gap:.7rem}
.crow-content li{display:flex;gap:.9rem}
.crow-content li::before{content:"";flex:none;width:.9rem;height:1px;margin-top:.85em;background:var(--bronze)}

.drawer{position:fixed;inset:0;z-index:85;visibility:hidden;transition:visibility 0s .75s}
.drawer.show{visibility:visible;transition:none}
.drawer-scrim{position:absolute;inset:0;background:rgba(25,25,23,.4);opacity:0;transition:opacity .6s var(--ease)}
.drawer.show .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(40rem,100%);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.4rem,4vw,3rem);background:var(--bone);translate:calc(100% * var(--dir)) 0;transition:translate .75s var(--ease-io)}
.drawer.show .drawer-panel{translate:0 0}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.drawer-title{margin:1.2rem 0 1.6rem;font:200 clamp(2.2rem,5vw,3.4rem)/1.12 var(--display)}
.drawer-title:lang(ar){line-height:1.45}
.dstep{min-width:0;padding:1.5rem 0;border:0;border-top:1px solid var(--line)}
.dstep-l{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;padding:0;font:500 1rem/1.4 var(--text)}
fieldset.dstep>legend{float:left;width:100%}      /* keeps the legend below the hairline instead of straddling it */
fieldset.dstep>legend+*{clear:both}
.dstep-n{font:400 .7rem/1 var(--label);letter-spacing:.2em;color:var(--mute)}
.bopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.bopt{display:grid;align-content:start;gap:.25rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:6px;transition:border-color .3s,background .3s}
.bopt strong{font-weight:500}
.bopt span,.bopt em{font-size:.86rem;font-style:normal;color:var(--mute)}
.bopt:hover{border-color:var(--ink)}
.bopt.sel{border-color:var(--ink);background:var(--bone-2);box-shadow:inset 0 0 0 1px var(--ink)}
.date{width:100%;min-height:3.3rem;padding:0 1rem;border:1px solid var(--line);border-radius:6px;background:transparent}
.slots{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.5rem;min-height:2.75rem}
.slot{min-height:2.75rem;padding:0 1.2rem;border:1px solid var(--line);border-radius:999px;direction:ltr;transition:background .3s,color .3s,border-color .3s}
.slot:hover{border-color:var(--ink)}
.slot.sel{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.drawer .note{margin:1.2rem 0}

.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
.field{position:relative}
.field input,.field textarea{display:block;width:100%;padding:1.6rem 0 .65rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  font:400 1.05rem/1.4 var(--text);outline:0;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:8.5rem;resize:vertical}
.field input:focus,.field textarea:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.fl{position:absolute;inset-inline-start:0;top:1.55rem;color:var(--mute);font-size:1.02rem;line-height:1.4;pointer-events:none;transform-origin:var(--start) top;
  transition:transform .4s var(--ease),color .4s var(--ease)}
.field :is(input,textarea):is(:focus,:not(:placeholder-shown))+.fl{transform:translateY(-1.3rem) scale(.76);color:var(--ink)}
[dir="rtl"] .field input[dir="ltr"]{text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips .chip{display:inline-flex;align-items:center;gap:.65rem;min-height:2.9rem;padding:0 1.3rem;border:1px solid var(--line);border-radius:999px;font-size:1rem;
  transition:background .3s,color .3s,border-color .3s}
.chips .chip::before{content:"";width:.5rem;height:.5rem;border:1px solid currentColor;border-radius:50%;transition:background .3s}
.chips .chip:hover{border-color:var(--ink)}
.chips .chip.sel{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chips .chip.sel::before{background:var(--bone)}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--error);box-shadow:0 1px 0 0 var(--error)}
.field.is-invalid .fl{color:var(--error)}
.bopts.is-invalid,.slots.is-invalid,.chips.is-invalid,.date.is-invalid{outline:1px solid var(--error);outline-offset:6px;border-radius:6px}
.form-error{margin:1rem 0;color:var(--error);font-size:.95rem}
.form-success{display:none;padding:1.5rem 0;font:200 clamp(1.9rem,4vw,3.2rem)/1.35 var(--display)}
.form-success:lang(ar){line-height:1.6}
.form-success.show{display:block}
@media (max-width:620px){.frow,.bopts{grid-template-columns:1fr}}

/* =========================================================
   PRICING — numbered questionnaire
   ========================================================= */
.form{padding:0 var(--g) var(--sec)}
.fgroup,.sub-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:1.5rem clamp(2rem,6vw,6rem)}
.fgroup{padding:clamp(2.2rem,5vw,4rem) 0;border-top:1px solid var(--line)}
.fgroup-h{position:sticky;top:calc(var(--bar-h) + 1.5rem);align-self:start;display:flex;align-items:baseline;gap:1rem;font:300 clamp(1.3rem,2.2vw,1.9rem)/1.35 var(--display)}
.fgroup-h:lang(ar){line-height:1.6}
.fgroup-n{flex:none;min-width:1.4rem;font:400 .72rem/1 var(--label);letter-spacing:.2em;color:var(--mute)}
.fgroup-sub{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s var(--ease),opacity .5s var(--ease)}
.fgroup-sub.show{grid-template-rows:1fr;opacity:1}
.sub-in{min-height:0;overflow:hidden}
.sub-in>.fgroup-h{position:static;color:var(--mute);font-size:clamp(1.1rem,1.8vw,1.5rem)}
.sub-in>.fgroup-b{padding-bottom:clamp(2.2rem,5vw,4rem)}
.notes-field{margin-top:1.2rem}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-top:clamp(2.2rem,5vw,3.5rem);border-top:1px solid var(--line)}
.form-actions .form-error{margin:0}
.form.is-sent>:not(.form-success){display:none}
.form.is-sent>.form-success{padding:clamp(2rem,6vw,5rem) 0;border-top:1px solid var(--line)}
@media (max-width:900px){.fgroup,.sub-in{grid-template-columns:1fr}.fgroup-h{position:static}}

/* =========================================================
   ABOUT — scroll-lit statement, numbered cards, timeline
   ========================================================= */
.lit{max-width:26em;padding:0 var(--g);font:300 clamp(1.5rem,3.4vw,3.2rem)/1.45 var(--text)}
.lit:lang(ar){line-height:1.8}
.lw{transition:opacity .2s linear}
html.js .lw{opacity:.16}   /* start dim: ore-motion sets the inline opacity on its first pass; reduced motion still wins with !important */
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:var(--sec) var(--g) 0;border-top:1px solid var(--line)}
.acard{display:grid;align-content:start;gap:1rem;padding:clamp(2.2rem,4.4vw,3.6rem) 0;border-bottom:1px solid var(--line)}
.acard:nth-child(odd){padding-inline-end:clamp(1.5rem,4vw,4rem);border-inline-end:1px solid var(--line)}
.acard:nth-child(even){padding-inline-start:clamp(1.5rem,4vw,4rem)}
.acard:last-child:nth-child(odd){grid-column:1/-1;border-inline-end:0;padding-inline-end:0}   /* an odd count (cards are editable in admin) must not leave a dangling divider */
.acard h2{font:300 clamp(1.6rem,3vw,2.6rem)/1.25 var(--display)}
.acard h2:lang(ar){line-height:1.5}
.acard>p:last-child{max-width:54ch;color:var(--mute)}
.steps{padding:var(--sec) var(--g) 0}
.timeline{--tx:clamp(3rem,8vw,7rem);position:relative;display:grid;gap:clamp(2.6rem,6vw,4.6rem);margin-top:3rem;padding-inline-start:var(--tx)}
.timeline::before,.timeline::after{content:"";position:absolute;inset-inline-start:calc(var(--tx) * .35);top:.5rem;bottom:.5rem;width:1px;background:var(--line)}
.timeline::after{background:var(--ink);transform-origin:top;transform:scaleY(var(--tl,0))}
.step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem}
.step::before{content:"";position:absolute;inset-inline-start:calc(var(--tx) * -.65 - 4.5px);top:.85rem;width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;background:var(--bone)}
.step-n{min-width:2.4ch;font:200 clamp(2rem,4vw,3.4rem)/1 var(--display);color:var(--mute)}
.step h3{margin-bottom:.4rem;font:400 clamp(1.15rem,2vw,1.55rem)/1.4 var(--text)}
.step p{max-width:60ch;color:var(--mute)}
.about-cta{padding:var(--sec) var(--g)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}.acard:nth-child(n){padding-inline:0;border-inline-end:0}}

/* =========================================================
   OFFICE — giant contact rows
   ========================================================= */
.contact-list{margin:0 var(--g);border-top:1px solid var(--line)}
.clink{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(0,2.4fr) 3.4rem;align-items:center;gap:1rem 2rem;padding:clamp(1.6rem,4vw,3rem) 0;border-bottom:1px solid var(--line)}
.clink-v{font:200 clamp(1.5rem,4.2vw,4rem)/1.2 var(--display);overflow-wrap:anywhere;transition:translate .7s var(--ease)}
.clink-v:lang(ar){line-height:1.5}
[dir="rtl"] .clink-v[dir="ltr"]{text-align:right}
.clink .arrow{transition:translate .6s var(--ease)}   /* `translate` composes with the RTL flip, which uses `transform` */
a.clink:hover .clink-v,a.clink:focus-visible .clink-v{translate:calc(.8rem * var(--dir)) 0}
a.clink:hover .ring,a.clink:focus-visible .ring{background:var(--ink);color:var(--bone);border-color:var(--ink)}
a.clink:hover .arrow,a.clink:focus-visible .arrow{translate:calc(.3rem * var(--dir)) 0}
.office-map{padding:2.6rem var(--g) 0}
.office-photos{padding-top:var(--sec)}
@media (max-width:760px){.clink{grid-template-columns:minmax(0,1fr) auto}.clink .kicker{grid-column:1/-1}}

/* =========================================================
   LEGAL & FAQ — one reading column, FAQ as an accordion
   ========================================================= */
.legal{max-width:calc(70ch + 2 * var(--g));padding:0 var(--g) var(--sec)}
.legal h2{margin:3rem 0 1rem;font:300 clamp(1.3rem,2.2vw,1.8rem)/1.45 var(--display)}
.legal h2:first-child{margin-top:0}
.legal p{max-width:68ch;color:#3E3B36}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa-q{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;padding:1.7rem 0;font:300 clamp(1.15rem,2vw,1.6rem)/1.5 var(--display)}
.qa-a p{padding-bottom:1.9rem;color:var(--mute)}