/*
 * JUST ON TIME — front-end stylesheet.
 * Ported from the reference design and rewritten with logical properties (inline/block)
 * so the same rules render correctly in English (LTR) and Arabic (RTL).
 * Design tokens (colors, fonts) come from the dynamic stylesheet printed by the theme.
 */

:root{color-scheme:dark;--bg:#171719;--panel:#202023;--panel-soft:#262429;--ink:#f1ece5;--muted:#b9b2ad;--plum:#633f69;--plum-light:#85588c;--accent:#c19ac7;--eyebrow:#c19bc4;--line:rgba(242,236,229,.15);--button-1:#68476d;--button-2:#4f3154;--serif:Georgia,'JOT Gelasio','Times New Roman',serif;--sans:Inter,'JOT Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--header-h:82px;--admin-bar:var(--wp-admin--admin-bar--height,0px);--a-sign:1;--hero-dir:90deg;--header-solid:rgba(23,23,25,.94)}
[dir=rtl]{--a-sign:-1;--hero-dir:270deg}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--admin-bar) + 8px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.025em}
h1{font-size:clamp(3rem,7vw,6.8rem);margin-bottom:1.25rem}
h2{font-size:clamp(2.4rem,5vw,4.5rem);margin-bottom:1rem}
h3{font-size:clamp(1.5rem,2.4vw,2.05rem);margin-bottom:.65rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:4px;font-size:13px}
.skip-link:focus{top:calc(var(--admin-bar) + 10px)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
#main:focus{outline:none}

/* ---------------------------------------------------------------- Header */
.site-header{min-height:var(--header-h);padding:8px max(clamp(20px,5vw,76px),calc((100% - var(--content-max,1296px)) / 2));display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:50;top:var(--admin-bar);inset-inline:0;width:100%;background:linear-gradient(180deg,rgba(15,15,16,.84),rgba(15,15,16,.10));border-bottom:1px solid rgba(255,255,255,.08);transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.is-sticky{position:fixed}
.site-header.is-scrolled{background-color:var(--header-solid);box-shadow:0 10px 30px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font:500 13px var(--sans);letter-spacing:.19em;color:var(--logo-color,inherit)}
.brand .brand-mark{height:var(--logo-size,40px);width:auto;aspect-ratio:1;flex:none}
.brand .brand-logo{height:var(--logo-size,40px);width:auto;max-width:none;object-fit:contain;flex:none}
.footer-brand .brand-mark{height:var(--footer-logo-size,40px)}
.footer-brand .brand-logo{height:var(--footer-logo-size,40px)}
.brand .brand-text{display:block}
.brand .brand-name{display:block}
.brand small{display:block;font-size:8px;letter-spacing:.29em;color:#c6bfc1;margin-top:3px}
.main-nav{display:flex;align-items:center;gap:clamp(18px,3vw,42px);font-size:13px;color:#e6e0db;margin-inline-start:auto}
.main-nav a{transition:color .2s}
.main-nav a:hover,.main-nav a[aria-current]{color:#c19ac7}
.main-nav .nav-cta{padding:12px 18px;border:1px solid rgba(239,228,238,.42);border-radius:4px;color:#f2e9f3}
.main-nav .nav-cta[aria-current]{color:#f2e9f3}
.header-actions{display:flex;align-items:center;gap:10px;margin-inline-start:clamp(14px,2vw,26px)}
.lang-physical-left .header-actions{flex-direction:row-reverse}
.lang-toggle{display:inline-grid;place-items:center;min-width:42px;height:36px;padding:0 10px;border:1px solid rgba(239,228,238,.42);border-radius:4px;font:600 12px/1 var(--sans);letter-spacing:.14em;color:#f2e9f3;transition:background-color .2s,border-color .2s,color .2s}
.lang-toggle:hover{background:rgba(193,154,199,.14);border-color:rgba(207,163,213,.7)}
.lang-toggle:lang(ar){font-family:'JOT IBM Plex Sans Arabic',var(--sans);letter-spacing:0;font-size:13px}
.menu-toggle{display:none;width:42px;height:42px;background:transparent;border:0;flex-direction:column;justify-content:center;align-items:center;padding:0;cursor:pointer;color:#eee7e1;box-sizing:border-box;container-type:size}
.menu-toggle i{width:59.52cqw;height:1px;background:currentColor;display:block;flex:none;transition:transform .2s,opacity .2s}
.menu-toggle i+i{margin-top:calc(16.67cqh - 1px)}
.menu-toggle[aria-expanded=true] i:first-child{transform:translateY(16.67cqh) rotate(45deg)}
.menu-toggle[aria-expanded=true] i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] i:last-child{transform:translateY(-16.67cqh) rotate(-45deg)}

/* Optional: hamburger menu on desktop too */
.menu-desktop-hamburger .menu-toggle{display:flex}
.menu-desktop-hamburger .main-nav{display:none;position:absolute;top:calc(var(--header-h) - 1px);inset-inline:auto clamp(20px,5vw,76px);min-width:280px;padding:15px 22px 22px;background:rgba(23,23,25,.97);border:1px solid var(--line);border-radius:0 0 8px 8px;flex-direction:column;align-items:stretch;gap:0}
.menu-desktop-hamburger .main-nav.open{display:flex}
.menu-desktop-hamburger .main-nav>a{padding:12px 3px;border-bottom:1px solid rgba(255,255,255,.08)}
.menu-desktop-hamburger .main-nav .nav-cta{text-align:center;margin-top:13px;padding:12px}

/* ---------------------------------------------------------------- Heroes */
.hero,.page-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(780px,92vh);padding:130px max(clamp(25px,9vw,140px),calc((100% - var(--content-max,1296px)) / 2)) 90px;overflow:hidden;background:#19191b}
.hero:before,.page-hero:before{content:"";position:absolute;z-index:-2;inset:0;top:var(--img-top,0px);background-image:var(--hero);background-size:var(--img-fit,cover);background-repeat:no-repeat;background-position:var(--img-x,50%) calc(var(--img-y,48%) + var(--img-dy,0px));transform-origin:var(--img-x,50%) var(--img-y,50%);transform:scale(calc(var(--img-z,1) * 1.005));clip-path:inset(calc(var(--img-y,50%) * (1 - 1 / (var(--img-z,1) * 1.005))) calc((100% - var(--img-x,50%)) * (1 - 1 / (var(--img-z,1) * 1.005))) calc((100% - var(--img-y,50%)) * (1 - 1 / (var(--img-z,1) * 1.005))) calc(var(--img-x,50%) * (1 - 1 / (var(--img-z,1) * 1.005))))}
.hero:after,.page-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(var(--hero-dir),rgba(17,17,18,.94) 0%,rgba(17,17,18,.78) 36%,rgba(17,17,18,.24) 77%,rgba(17,17,18,.10) 100%),linear-gradient(0deg,rgba(17,17,18,.52),transparent 36%)}
.hero-copy{max-width:740px;position:relative}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--eyebrow);font-size:11px;font-weight:600;margin-bottom:18px}
.hero h1{max-width:800px}
.hero-sub{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2.15rem);color:#eee7e1;margin-bottom:32px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 25px;border-radius:5px;font-size:14px;font-weight:600;transition:transform .2s,background .2s;cursor:pointer;border:0}
.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(135deg,var(--button-1),var(--button-2));color:#fff;box-shadow:0 8px 32px rgba(36,14,41,.28)}
.hero-index{position:absolute;inset-inline-end:clamp(24px,6vw,90px);bottom:42px;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;color:#e4ddd7;direction:ltr}
.hero-index i{width:46px;height:1px;background:#aa90ad}

/* Former page heroes become section banners on the one-page layout. */
.page-hero{min-height:560px;padding-top:160px}
.page-hero .hero-title{font-size:clamp(3.3rem,7.4vw,6rem);margin-bottom:1.25rem}
.section-hero{min-height:520px;padding-top:150px}
.section-hero:after{background:linear-gradient(180deg,var(--bg) 0%,rgba(23,23,25,0) 22%),linear-gradient(var(--hero-dir),rgba(17,17,18,.95),rgba(17,17,18,.68) 48%,rgba(17,17,18,.13)),linear-gradient(0deg,rgba(17,17,18,.48),transparent 50%)}
.projects-hero:after{background:linear-gradient(180deg,var(--bg) 0%,rgba(23,23,25,0) 22%),linear-gradient(var(--hero-dir),rgba(17,17,18,.93),rgba(17,17,18,.48) 58%,rgba(17,17,18,.06)),linear-gradient(0deg,rgba(17,17,18,.4),transparent 45%)}
.services-hero{min-height:560px}
.projects-hero,.contact-hero{min-height:500px}
.jot-section{position:relative}
.jot-section+.jot-section{border-top:1px solid rgba(242,236,229,.06)}

/* ---------------------------------------------------------------- Trust strip */
.trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:26px max(clamp(20px,10vw,160px),calc((100% - var(--content-max,1296px)) / 2));background:#1c1c1e;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.trust-strip>div{display:flex;justify-content:center;align-items:center;gap:15px;min-height:58px;color:#ddd6d0;font:17px var(--serif)}
.trust-strip>div+div{border-inline-start:1px solid var(--line)}
.line-icon{width:31px;height:31px;flex:none;color:#e9e1dc}

/* ---------------------------------------------------------------- Sections */
.section{padding:clamp(68px,9vw,128px) max(clamp(22px,7vw,108px),calc((100% - var(--content-max,1296px)) / 2))}
.section-heading{margin-bottom:34px}
.section-heading h2{margin-bottom:0}
.section-heading .section-lead{max-width:510px;margin:18px 0 0}
.section-lead,.body-copy{color:#c4bdb8;max-width:650px;font-size:16px;line-height:1.8}
.expertise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.image-card{min-height:360px;padding:22px;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;transition:transform .25s,border-color .25s}
.image-card:hover{transform:translateY(-5px);border-color:rgba(207,163,213,.55)}
.image-card:before{content:"";position:absolute;inset:0;top:var(--img-top,0px);z-index:-2;background-image:var(--card-image);background-size:var(--img-fit,cover);background-repeat:no-repeat;background-position:var(--img-x,50%) var(--img-y,50%);transform-origin:var(--img-x,50%) var(--img-y,50%);transform:scale(var(--img-z,1));transition:transform .4s}
.image-card:hover:before{transform:scale(calc(var(--img-z,1) * 1.04))}
.image-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(15,15,16,.94),rgba(15,15,16,.08) 86%)}
.image-card h3{font-size:clamp(1.45rem,2.5vw,2.15rem);margin:10px 0 2px}
.icon-disc{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#4c3551;border:1px solid rgba(255,255,255,.12)}
.icon-disc .line-icon{width:30px;height:30px}

/* ---------------------------------------------------------------- Wall Visualizer */
.visualizer-section{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.45fr);gap:42px;align-items:center;background:linear-gradient(135deg,#221f25,#1a191c);border:1px solid rgba(201,164,206,.18);border-radius:16px;margin:4px max(clamp(16px,3vw,48px),calc((100% - var(--content-max,1296px) - 130px) / 2));padding:clamp(24px,5vw,58px)}
.visualizer-intro h2{font-size:clamp(2.7rem,4vw,4.1rem)}
.visualizer-intro>p.viz-intro-text{color:#c5bec4;max-width:330px}
.viz-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#bcb4bf;font-weight:600;margin:26px 0 0}
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:14px}
.swatch{position:relative;width:34px;height:34px;padding:0;border-radius:50%;background:transparent;border:0;cursor:pointer;transition:transform .2s;display:inline-grid;place-items:center}
.swatch .swatch-fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--swatch);border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 0 rgba(255,255,255,0);transition:box-shadow .2s}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-checked=true] .swatch-fill{box-shadow:0 0 0 3px #29252c,0 0 0 4px #e5d8e7}
.swatch-circle{border-radius:50%}
.swatch-rounded{border-radius:9px}
.swatch-square{border-radius:2px}
.swatch-drop{border-radius:50% 50% 50% 0;rotate:-45deg}
.swatch-drop:hover{transform:scale(1.08)}
.swatch .swatch-name{display:none}
.swatch.swatch-chip,.swatches-chip .swatch{width:auto;height:auto;border-radius:6px;display:inline-flex;flex-direction:column;align-items:stretch;gap:6px;padding:0}
.swatch.swatch-chip .swatch-fill,.swatches-chip .swatch .swatch-fill{width:68px;height:42px;border-radius:6px}
.swatches-chip .swatch .swatch-name,.swatch.swatch-chip .swatch-name{display:block;font-size:10.5px;color:#d4cbd5;max-width:68px;text-align:start;line-height:1.25}
.viz-current{display:flex;align-items:center;gap:9px;margin:18px 0 0;font-size:13px;color:#d4cbd5;min-height:22px}
.viz-current-dot{width:12px;height:12px;border-radius:50%;background:var(--viz-current,#f4f1ec);border:1px solid rgba(255,255,255,.35);flex:none;transition:background-color .3s}
.viz-current-hex{color:#9d949e;font-size:11px;letter-spacing:.08em}
.visualizer-workspace{min-width:0}
.viz-stage{position:relative;margin:0;width:100%;overflow:hidden;border-radius:8px;border:1px solid rgba(255,255,255,.19);aspect-ratio:1.5;background:#222}
.viz-stage img,.viz-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.viz-stage canvas{opacity:0;transition:opacity var(--viz-fade,.4s) ease}
.viz-stage.is-painted canvas{opacity:1}
.viz-stage-name{position:absolute;z-index:4;bottom:12px;inset-inline-start:12px;padding:4px 9px;border-radius:2px;background:rgba(20,18,21,.72);font-family:var(--serif);font-size:13px;pointer-events:none}
.viz-loading{position:absolute;z-index:5;top:12px;inset-inline-end:12px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;opacity:0;transition:opacity .2s;animation:jot-spin .8s linear infinite}
.viz-stage.is-loading .viz-loading{opacity:1}
@keyframes jot-spin{to{transform:rotate(360deg)}}
.visualizer-note{font-size:11px;color:#aaa1aa;margin:10px 0 0}
.viz-spaces-wrap{grid-column:1/-1;min-width:0}
.viz-spaces-head{display:flex;align-items:end;justify-content:space-between;gap:16px}
.viz-spaces-head .viz-label{margin:0}
.viz-nav{display:flex;gap:8px}
.viz-nav button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.viz-nav button:hover{background:rgba(193,154,199,.14);border-color:rgba(207,163,213,.6)}
.viz-nav .line-icon{width:18px;height:18px}
.viz-prev .line-icon{scale:-1 1}
[dir=rtl] .viz-prev .line-icon{scale:1 1}
[dir=rtl] .viz-next .line-icon{scale:-1 1}
.viz-spaces{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,calc((100% - 4*14px)/4.6));gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin-top:14px;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;overscroll-behavior-x:contain}
.viz-card{scroll-snap-align:start;display:flex;flex-direction:column;text-align:start;padding:0;border:1px solid var(--line);border-radius:10px;background:#1d1c20;overflow:hidden;cursor:pointer;transition:border-color .25s,transform .25s,box-shadow .25s;color:inherit}
.viz-card:hover{transform:translateY(-3px);border-color:rgba(207,163,213,.45)}
.viz-card[aria-pressed=true]{border-color:#a982ae;box-shadow:0 0 0 1px #a982ae inset}
.viz-card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:#2a272c}
.viz-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.viz-card:hover .viz-card-media img{transform:scale(1.04)}
.viz-card-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.viz-card-title{font-family:var(--serif);font-size:18px;line-height:1.2;color:#f1ece5}
.viz-card-text{font-size:12.5px;line-height:1.5;color:#b5adb3}

/* ---------------------------------------------------------------- Projects preview */
.projects-preview{padding-top:clamp(72px,8vw,108px)}
.split-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}
.text-link{color:#e8d7e9;font-size:13px;border-bottom:1px solid rgba(204,166,210,.55);padding-bottom:5px;white-space:nowrap}
.project-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.project-tile{position:relative;height:220px;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
.project-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.project-tile:hover img{transform:scale(1.04)}
.project-tile:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(10,10,11,.8))}
.project-tile span{position:absolute;z-index:1;bottom:17px;inset-inline-start:18px;font:19px var(--serif)}

/* ---------------------------------------------------------------- Closing CTA */
.closing-cta{margin:0 max(clamp(16px,3vw,48px),calc((100% - var(--content-max,1296px) - 130px) / 2)) clamp(35px,6vw,74px);padding:clamp(30px,5vw,62px);display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid rgba(216,185,221,.23);border-radius:12px;background:linear-gradient(110deg,#2a222d,#211c24 45%,#29212b);position:relative;overflow:hidden}
.closing-cta:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(190,147,197,.14);border-radius:50%;inset-inline-end:21%;top:-65%;box-shadow:0 0 0 30px rgba(190,147,197,.025),0 0 0 60px rgba(190,147,197,.02)}
.closing-cta>*{position:relative;z-index:1}
.closing-cta h2{font-size:clamp(2rem,3.7vw,3.5rem);margin:0}
.closing-cta .eyebrow{margin-bottom:10px}
.section-about .closing-cta,.section-services .closing-cta,.section-projects .closing-cta{margin-top:clamp(10px,2vw,24px)}

/* ---------------------------------------------------------------- Footer */
.site-footer{padding:44px max(clamp(22px,7vw,108px),calc((100% - var(--content-max,1296px)) / 2)) 24px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:25px}
.footer-links{display:flex;justify-content:flex-end;gap:clamp(15px,3vw,38px);font-size:12px;color:#d0c8c3}
.footer-links a:hover{color:#c19ac7}
.site-footer>p,.site-footer>small{grid-column:1/-1;margin:0;color:#a89f9c;text-align:center;font-size:12px}
.site-footer>small{border-top:1px solid var(--line);padding-top:17px;font-size:10px}

/* ---------------------------------------------------------------- About */
.story-layout{display:grid;grid-template-columns:1fr .9fr;gap:8vw;align-items:center}
.story-layout h2{max-width:610px}
.story-image{width:100%;height:440px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.stats-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:35px max(clamp(22px,9vw,130px),calc((100% - var(--content-max,1296px)) / 2));background:#211e23;border-block:1px solid var(--line)}
.stats-band>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.stats-band>div+div{border-inline-start:1px solid var(--line)}
.stats-band strong{font:clamp(2.6rem,5vw,4.6rem) var(--serif);line-height:1.08;font-weight:400}
.stats-band span{font:20px var(--serif);color:#e1d9d3}
.stats-band small{color:#a9a0a1;font-size:11px;margin-top:5px}
.commitment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.commitment-card{padding:30px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(145deg,#222225,#1b1b1d)}
.commitment-card h3{margin-top:20px}
.commitment-card p,.process-grid p{color:#bdb5b0;font-size:14px;line-height:1.7;margin-bottom:0}
.process-section{background:#1c1b1e;border-block:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.process-grid article{position:relative;padding-block:8px;padding-inline:0 22px}
.process-grid b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #8a6a8d;color:#e7cce9;font:20px var(--serif);margin-bottom:15px}
.process-grid h3{font-size:27px}

/* ---------------------------------------------------------------- Services */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-card{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#202023}
.service-card img{width:100%;height:205px;object-fit:cover}
.service-card>div{padding:22px}
.service-card .line-icon{color:#c7a4cb}
.service-card h3{margin-top:12px}
.service-card p{color:#bbb4b0;font-size:14px;line-height:1.7;margin-bottom:0}
.process-banner{padding-top:54px;padding-bottom:56px;background:#211e23;border-block:1px solid var(--line)}
.process-banner>h2{font-size:clamp(2.3rem,4vw,3.7rem)}
.process-grid.compact{margin-top:30px}
.process-grid.compact article{display:flex;align-items:center;gap:15px;border-inline-end:1px solid var(--line)}
.process-grid.compact b{margin:0}
.process-grid.compact h3{margin:0}

/* ---------------------------------------------------------------- Projects */
.filter-row{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 27px}
.filter{background:transparent;border:1px solid var(--line);padding:9px 17px;border-radius:4px;color:#d6cfca;font-size:12px;cursor:pointer}
.filter.active,.filter:hover{background:#492b4f;border-color:#714c77;color:#fff}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.project-card{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#202023;transition:transform .25s}
.project-card:hover{transform:translateY(-3px)}
.project-card[hidden]{display:none}
.project-card img{width:100%;height:clamp(220px,31vw,390px);object-fit:cover}
.project-card>div{padding:22px}
.project-card .eyebrow{font-size:10px;margin-bottom:10px}
.project-card h3{margin-bottom:8px}
.project-card div>p:last-child{color:#bbb4b0;font-size:14px;margin-bottom:0}

/* ---------------------------------------------------------------- Contact */
.contact-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start;padding-top:65px}
.contact-form{display:grid;gap:16px;padding:clamp(24px,4vw,45px);border:1px solid var(--line);border-radius:10px;background:#1d1d20;scroll-margin-top:calc(var(--header-h) + var(--admin-bar) + 16px)}
.contact-form>.eyebrow{margin-bottom:-6px}
.contact-form h2{font-size:clamp(2.2rem,4vw,3.3rem);margin-bottom:8px}
.contact-form label{display:grid;gap:7px;color:#ddd6d0;font-size:13px}
.contact-form input,.contact-form textarea{width:100%;background:#222225;border:1px solid rgba(243,237,229,.24);border-radius:5px;padding:14px 15px;color:#f4eee7;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:#9c77a3;box-shadow:0 0 0 3px rgba(121,78,129,.17)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#969092}
.contact-form input[dir=ltr]::placeholder{text-align:start}
[dir=rtl] .contact-form input[dir=ltr]{text-align:right}
.contact-form textarea{resize:vertical}
.contact-form [aria-invalid=true]{border-color:#c46b7d}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.optional{color:#9e9692;font-size:11px}
.form-status{font-size:12px;color:#aaa2a4;margin:0}
.form-status.is-visible{color:#e3c9e5}
.form-status.is-error{color:#f0b6c1}
.form-status.is-success{color:#cfe8cf}
.contact-form button[disabled]{opacity:.6;cursor:progress;transform:none}
.hp-field{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.contact-side{display:grid;gap:16px}
.contact-note{display:flex;gap:18px;padding:24px;border:1px solid var(--line);border-radius:9px;background:#202023}
.contact-note>.line-icon{width:34px;height:34px;color:#c6a1cc}
.contact-note h3{font-size:23px}
.contact-note p:not(.eyebrow){font-size:13px;color:#bdb5b0}
.contact-note .eyebrow{font-size:10px;margin-bottom:10px}

/* ---------------------------------------------------------------- Arabic typography
   Arabic letters must not be spaced or upper-cased; Arabic faces need more line height. */
[lang=ar] body,.lang-ar{font-size:16.5px}
.lang-ar h1,.lang-ar h2,.lang-ar h3{letter-spacing:0;line-height:1.28}
.lang-ar h1{font-size:calc(clamp(3rem,7vw,6.8rem) * var(--type-scale,.9))}
.lang-ar h2{font-size:calc(clamp(2.4rem,5vw,4.5rem) * var(--type-scale,.9))}
.lang-ar .page-hero .hero-title{font-size:calc(clamp(3.3rem,7.4vw,6rem) * var(--type-scale,.9))}
.lang-ar .eyebrow,.lang-ar .viz-label{letter-spacing:0;text-transform:none;font-size:13px}
.lang-ar .brand small{letter-spacing:0;font-size:10px;margin-top:2px}
.lang-ar .hero-sub{line-height:1.5}
.lang-ar .section-lead,.lang-ar .body-copy{line-height:1.95}
.lang-ar .image-card h3{line-height:1.25}
.lang-ar .trust-strip>div{font-size:18px}
.lang-ar .main-nav{font-size:14.5px}
.lang-ar .text-link{font-size:14px}
.lang-ar .filter{font-size:13.5px}
.lang-ar .closing-cta h2{line-height:1.3}
.lang-ar .stats-band span{font-size:21px}
.lang-ar .stats-band small{font-size:12.5px}
.lang-ar .contact-form label{font-size:14px}
.lang-ar .form-status,.lang-ar .visualizer-note{font-size:12.5px}
.lang-ar .footer-links{font-size:13.5px}
.lang-ar .site-footer>p{font-size:13px}
.lang-ar .site-footer>small{font-size:11.5px}

/* ---------------------------------------------------------------- Entrance animations
   Content is hidden only after the script has confirmed it can reveal it (html.jot-anim-ready). */
.jot-anim-ready [data-anim]:not([data-anim=float]):not([data-anim-trigger=hover]):not(.is-in){opacity:0}
.jot-anim-ready [data-anim].is-in{animation-duration:var(--a-dur,700ms);animation-timing-function:var(--a-ease,ease);animation-delay:var(--a-delay,0ms);animation-fill-mode:both}
.jot-anim-ready [data-anim].anim-done{animation:none!important;opacity:1}
[data-anim=fade].is-in{animation-name:jot-fade}
[data-anim=fade-up].is-in{animation-name:jot-fade-up}
[data-anim=fade-down].is-in{animation-name:jot-fade-down}
[data-anim=fade-start].is-in{animation-name:jot-fade-start}
[data-anim=fade-end].is-in{animation-name:jot-fade-end}
[data-anim=zoom-in].is-in{animation-name:jot-zoom-in}
[data-anim=zoom-out].is-in{animation-name:jot-zoom-out}
[data-anim=flip-x].is-in{animation-name:jot-flip-x}
[data-anim=flip-y].is-in{animation-name:jot-flip-y}
[data-anim=rotate-in].is-in{animation-name:jot-rotate-in}
[data-anim=blur-in].is-in{animation-name:jot-blur-in}
[data-anim=wipe].is-in{animation-name:jot-wipe}
[data-anim=paint].is-in{animation-name:jot-paint}
[data-anim=bounce-in].is-in{animation-name:jot-bounce-in}
[data-anim=float]{animation:jot-float var(--a-dur,3000ms) ease-in-out var(--a-delay,0ms) infinite alternate}
[data-anim-dir=up]{--a-dx:0;--a-dy:1}
[data-anim-dir=down]{--a-dx:0;--a-dy:-1}
[data-anim-dir=start]{--a-dx:-1;--a-dy:0}
[data-anim-dir=end]{--a-dx:1;--a-dy:0}
@keyframes jot-fade{from{opacity:0}to{opacity:1}}
@keyframes jot-fade-up{from{opacity:0;transform:translate3d(calc(var(--a-dist,24px) * var(--a-dx,0) * var(--a-sign)),calc(var(--a-dist,24px) * var(--a-dy,1)),0)}to{opacity:1;transform:none}}
@keyframes jot-fade-down{from{opacity:0;transform:translate3d(0,calc(var(--a-dist,24px) * -1),0)}to{opacity:1;transform:none}}
@keyframes jot-fade-start{from{opacity:0;transform:translate3d(calc(var(--a-dist,24px) * -1 * var(--a-sign)),0,0)}to{opacity:1;transform:none}}
@keyframes jot-fade-end{from{opacity:0;transform:translate3d(calc(var(--a-dist,24px) * var(--a-sign)),0,0)}to{opacity:1;transform:none}}
@keyframes jot-zoom-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes jot-zoom-out{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:none}}
@keyframes jot-flip-x{from{opacity:0;transform:perspective(900px) rotateX(70deg)}to{opacity:1;transform:none}}
@keyframes jot-flip-y{from{opacity:0;transform:perspective(900px) rotateY(calc(70deg * var(--a-sign)))}to{opacity:1;transform:none}}
@keyframes jot-rotate-in{from{opacity:0;transform:rotate(calc(-12deg * var(--a-sign))) scale(.94)}to{opacity:1;transform:none}}
@keyframes jot-blur-in{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
@keyframes jot-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes jot-paint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[dir=rtl] [data-anim=paint].is-in{animation-name:jot-paint-rtl}
@keyframes jot-paint-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes jot-bounce-in{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}80%{transform:scale(.98)}100%{opacity:1;transform:none}}
@keyframes jot-float{from{transform:translate3d(0,calc(var(--a-dist,12px) * -.5),0)}to{transform:translate3d(0,calc(var(--a-dist,12px) * .5),0)}}

/* ---------------------------------------------------------------- Paint-roller intro */
html.jot-intro-pending::before{content:"";position:fixed;inset:0;z-index:2147483000;background:var(--intro-cover,#efe9e1)}
html.jot-intro-pending body{overflow:hidden}
.jot-intro{position:fixed;inset:0;z-index:2147483001;overflow:hidden;cursor:wait;touch-action:none}
.jot-intro canvas{position:absolute;inset:0;width:100%;height:100%}
.jot-intro .jot-roller{position:absolute;top:0;left:0;will-change:transform;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.jot-intro .jot-intro-logo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.jot-intro .jot-intro-logo svg{width:min(120px,26vw);height:auto;color:#3a3540;opacity:.85}
.jot-intro.is-leaving{transition:opacity var(--intro-fade,450ms) ease;opacity:0}
.jot-intro-skip{position:absolute;bottom:18px;inset-inline-end:18px;z-index:3;padding:8px 12px;border-radius:4px;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.6);color:#2a2730;font:600 12px var(--sans);cursor:pointer}

/* ---------------------------------------------------------------- Generic pages (posts, legal pages, 404) */
.page-shell{padding:calc(var(--header-h) + 70px) clamp(22px,7vw,108px) 80px;max-width:980px;margin-inline:auto}
.page-shell h1{font-size:clamp(2.4rem,5vw,4rem)}
.page-shell .entry-content{color:#d6cfca;line-height:1.85}
.page-shell .entry-content a{color:#e8d7e9;border-bottom:1px solid rgba(204,166,210,.55)}
.page-shell .entry-content img{height:auto;border-radius:8px}
.page-shell .post-list article{padding:24px 0;border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------------- Responsive (matches the reference breakpoints) */
@media(max-width:1024px){
	.viz-spaces{grid-auto-columns:minmax(190px,calc((100% - 2*14px)/3.3))}
}
@media(max-width:800px){
	:root{--header-h:72px}
	.site-header{padding:8px 21px}
	.brand{font-size:11px;letter-spacing:.14em}
	.site-header .brand-mark,.site-header .brand-logo{height:calc(var(--logo-size,40px) * .875)}
	.footer-brand .brand-mark,.footer-brand .brand-logo{height:calc(var(--footer-logo-size,40px) * .875)}
	.menu-toggle{display:flex}
	.main-nav{display:none;position:absolute;top:71px;inset-inline:0;padding:15px 22px 22px;background:rgba(23,23,25,.97);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;margin:0}
	.menu-desktop-hamburger .main-nav{inset-inline:0;top:71px;border-radius:0;border-inline:0;border-top:0;min-width:0}
	.main-nav.open{display:flex}
	.main-nav>a{padding:12px 3px;border-bottom:1px solid rgba(255,255,255,.08)}
	.main-nav .nav-cta{text-align:center;margin-top:13px;border:1px solid rgba(239,228,238,.35);padding:12px}
	.header-actions{gap:6px;margin-inline-start:auto}
	.lang-toggle{height:34px;min-width:40px}
	.hero{min-height:690px;min-height:min(760px,93svh);padding:130px 26px 77px;align-items:flex-end}
	.hero:before,.page-hero:before{background-image:var(--hero-m,var(--hero))}
	.hero:after{background:linear-gradient(var(--hero-dir),rgba(17,17,18,.81),rgba(17,17,18,.22)),linear-gradient(0deg,rgba(17,17,18,.88),rgba(17,17,18,.14) 73%)}
	.hero h1{font-size:clamp(3.2rem,13vw,5rem)}
	.lang-ar .hero h1{font-size:calc(clamp(3.2rem,13vw,5rem) * var(--type-scale,.9))}
	.hero-sub{font-size:1.5rem}
	.hero-index{bottom:23px;inset-inline-end:24px}
	.trust-strip{padding:11px 11px;gap:0}
	.trust-strip>div{flex-direction:column;gap:4px;min-height:0;text-align:center;font-size:14px;line-height:1.3}
	.lang-ar .trust-strip>div{font-size:15px}
	.trust-strip .line-icon{width:24px;height:24px}
	.section{padding:72px 20px}
	.section-heading{margin-bottom:24px}
	.expertise-grid{gap:9px}
	.image-card{min-height:225px;padding:10px 6px;border-radius:9px}
	.image-card .icon-disc{width:47px;height:47px}
	.image-card .icon-disc .line-icon{width:24px;height:24px}
	.image-card h3{font-size:clamp(1.05rem,4.4vw,1.4rem);line-height:1.02;margin-top:9px}
	.lang-ar .image-card h3{line-height:1.3}
	.visualizer-section{margin:0 10px;padding:27px 16px;grid-template-columns:1fr;gap:24px;border-radius:12px}
	.visualizer-intro h2{font-size:2.85rem}
	.lang-ar .visualizer-intro h2{font-size:2.5rem}
	.visualizer-intro>p.viz-intro-text{margin-bottom:0}
	.viz-label{margin-top:20px}
	.swatches{margin-top:12px}
	.viz-stage{aspect-ratio:1.38}
	.viz-spaces{grid-auto-columns:minmax(170px,62%)}
	.viz-nav{display:none}
	.split-heading{align-items:start;flex-direction:column;gap:12px}
	.project-strip{grid-template-columns:1fr 1fr;gap:9px}
	.project-tile{height:165px}
	.project-tile:last-child{display:none}
	.project-tile span{font-size:15px;inset-inline-start:12px;bottom:11px}
	.closing-cta{margin:0 10px 32px;padding:26px 20px;align-items:flex-start;flex-direction:column;border-radius:10px}
	.closing-cta h2{font-size:2rem}
	.site-footer{padding:34px 20px 20px;grid-template-columns:1fr;justify-items:center}
	.footer-links{justify-content:center;flex-wrap:wrap;gap:12px 21px}
	.site-footer>p,.site-footer>small{grid-column:auto}
	.page-hero{min-height:500px;padding:140px 23px 65px;align-items:flex-end}
	.section-hero{min-height:460px;padding-top:120px}
	.page-hero .hero-title{font-size:clamp(3rem,12vw,4.6rem)}
	.lang-ar .page-hero .hero-title{font-size:calc(clamp(3rem,12vw,4.6rem) * var(--type-scale,.9))}
	.story-layout{grid-template-columns:1fr;gap:25px}
	.story-image{height:300px}
	.stats-band{padding:26px 12px}
	.stats-band strong{font-size:2.5rem}
	.stats-band span{font-size:15px}
	.stats-band small{font-size:10px}
	.commitment-grid{gap:9px}
	.commitment-card{padding:17px 12px}
	.commitment-card .icon-disc{width:45px;height:45px}
	.commitment-card .line-icon{width:24px;height:24px}
	.commitment-card h3{font-size:1.2rem;margin-top:13px}
	.commitment-card p{font-size:12px;line-height:1.55}
	.process-grid{gap:15px}
	.process-grid article{padding-inline-end:7px}
	.process-grid b{width:37px;height:37px;font-size:17px}
	.process-grid h3{font-size:1.3rem}
	.process-grid p{font-size:12px}
	.service-grid{grid-template-columns:1fr 1fr;gap:10px}
	.service-card img{height:155px}
	.service-card>div{padding:15px}
	.service-card .line-icon{width:25px;height:25px}
	.service-card h3{font-size:1.25rem}
	.service-card p{font-size:12px;line-height:1.55}
	.projects-hero,.services-hero,.contact-hero{min-height:510px}
	.section-hero.projects-hero,.section-hero.services-hero,.section-hero.contact-hero{min-height:460px}
	.project-grid{grid-template-columns:1fr}
	.project-card img{height:270px}
	.project-card>div{padding:18px}
	.contact-layout{grid-template-columns:1fr;padding-top:44px}
	.form-row{grid-template-columns:1fr}
	.contact-note{padding:19px}
	.process-grid.compact{gap:7px}
	.process-grid.compact article{gap:8px;padding:0;padding-inline-end:6px}
	.process-grid.compact h3{font-size:1.1rem}
	.process-grid.compact b{width:35px;height:35px;font-size:15px}
	.page-shell{padding-top:calc(var(--header-h) + 40px)}
}
@media(max-width:380px){
	.expertise-grid{grid-template-columns:1fr}
	.image-card{min-height:285px}
	.commitment-grid{grid-template-columns:1fr}
	.commitment-card{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center}
	.commitment-card .icon-disc{grid-row:span 2}
	.commitment-card h3{margin:0}
	.commitment-card p{grid-column:2}
	.service-grid{grid-template-columns:1fr}
	.service-card img{height:210px}
	.lang-toggle{min-width:36px;padding:0 7px}
}
@media(prefers-reduced-motion:reduce){
	*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
	.jot-anim-ready [data-anim]{opacity:1!important}
	html{scroll-behavior:auto}
}

/* Photo controls from the editor (zoom / focal point / brightness) */
.story-image,.service-card img,.project-card img,.project-tile img{object-position:var(--img-x,50%) var(--img-y,50%);object-fit:var(--img-objfit,cover)}
.service-card img,.project-card img{scale:var(--img-z,1);transform-origin:var(--img-x,50%) var(--img-y,50%)}
.project-tile{--tile-z:var(--img-z,1)}
.project-tile img{transform:scale(var(--tile-z));transform-origin:var(--img-x,50%) var(--img-y,50%)}
.project-tile:hover img{transform:scale(calc(var(--tile-z) * 1.04))}
.story-image{scale:var(--img-z,1);transform-origin:var(--img-x,50%) var(--img-y,50%);clip-path:inset(calc((1 - 1 / var(--img-z,1)) * 50%) round 10px)}

/* Header & footer arrangement options */
.hdr-logo-end{flex-direction:row-reverse}
.hdr-logo-end .main-nav{margin-inline-start:0;margin-inline-end:auto}
.hdr-logo-end .header-actions{margin-inline-start:0;margin-inline-end:clamp(14px,2vw,26px)}
.site-footer.ftr-center{grid-template-columns:1fr;justify-items:center;text-align:center}
.site-footer.ftr-center .footer-links{justify-content:center;flex-wrap:wrap}
.site-footer.ftr-reverse .footer-brand{order:2;justify-self:end}
.site-footer.ftr-reverse .footer-links{order:1;justify-content:flex-start}
.site-footer.ftr-reverse>p,.site-footer.ftr-reverse>small{order:3}
.jot-preview .site-header [data-jot],.jot-preview .site-footer [data-jot]{touch-action:manipulation}

/* Dark layer over photos: strength is adjustable per element (0 = none). */
.hero:after,.page-hero:after,.image-card:after{opacity:var(--ov-o,1)}

/* Elements added from the editor's "+ Add" panel */
.jot-x-slot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:28px;width:100%;flex-basis:100%}
.hero-copy>.jot-x-slot{margin-top:26px}
.jot-x-after{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(28px,4vw,56px) max(clamp(22px,7vw,108px),calc((100% - var(--content-max,1296px)) / 2))}
.jot-x-section{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.jot-x-after>.jot-x,.jot-x-section>.jot-x,.jot-x-slot>.jot-x{margin:0}
.jot-x-heading{max-width:900px}
.jot-x-h4{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.2}
.jot-x-text{max-width:760px;color:var(--muted);line-height:1.75;font-size:16px;white-space:pre-line}
.jot-x-button{align-self:flex-start}
.button-outline{background:transparent;color:var(--ink);border:1px solid rgba(242,236,229,.45)}
.button-outline:hover{border-color:var(--accent);color:#fff}
.jot-x-image{align-self:stretch;max-width:min(100%,900px);margin:0}
.jot-x-image img{display:block;width:100%;height:auto;border-radius:10px;object-fit:var(--img-objfit,cover);object-position:var(--img-x,50%) var(--img-y,50%)}
.jot-x-icon{display:inline-flex;color:var(--accent);width:48px;height:48px}
.jot-x-icon svg{width:100%;height:100%}
.jot-x-divider{align-self:stretch;border:0;border-top:1px solid var(--line);height:0;width:100%}
.jot-x-spacer{align-self:stretch;height:48px}
.jot-x-video,.jot-x-map{align-self:stretch;width:100%;max-width:1000px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111113;border:1px solid var(--line)}
.jot-x-map{aspect-ratio:auto;height:380px}
.jot-x-video iframe,.jot-x-video video,.jot-x-map iframe{display:block;width:100%;height:100%;border:0}
.jot-x-ph{display:grid;place-items:center;min-height:160px;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:10px;padding:20px;text-align:center}
.jot-x-image .jot-x-ph{aspect-ratio:16/9}
.jot-x-empty{color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:28px;width:100%;text-align:center;margin:0}
.jot-is-preview .jot-x-video iframe,.jot-is-preview .jot-x-map iframe,.jot-is-preview .jot-x-video video{pointer-events:none}

/* Same-looking type on every device: bundled fallbacks for Georgia (metric-compatible Gelasio) and Inter. */
@font-face{font-family:"JOT Gelasio";src:url("../fonts/gelasio-400.woff") format("woff");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"JOT Gelasio";src:url("../fonts/gelasio-700.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"JOT Inter";src:url("../fonts/inter.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}
/* Nothing may push the page wider than the screen. */
#jot-app{overflow-x:clip;max-width:100%}
h1,h2,h3,h4,p,a,span,li{overflow-wrap:break-word}
img,video,iframe,svg{max-width:100%}
@media(max-width:800px){.trust-strip,.expertise-grid,.stats-band,.commitment-grid,.process-grid,.service-grid,.project-grid{-webkit-hyphens:auto;hyphens:auto}}

/* Lets a photo section size itself from the section width (cqw). */
.jot-section{container-type:inline-size}

/* Auto-scrolling project slider (Home → Our projects). */
.project-strip.is-slider{display:block;overflow:hidden;container-type:inline-size;--sl-gap:14px;--sl-v:var(--sl-vd,3)}
.is-slider .slider-track{display:flex;gap:var(--sl-gap);width:max-content;animation:jot-marquee var(--sl-dur,30s) linear infinite;will-change:transform}
.is-slider .project-tile{flex:none;width:calc((100cqw - (var(--sl-v) - 1) * var(--sl-gap)) / var(--sl-v))}
.is-slider .project-tile:last-child{display:block}
.is-slider.pause-on-hover:hover .slider-track,.is-slider.pause-on-hover:focus-within .slider-track{animation-play-state:paused}
@keyframes jot-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--sl-gap) / 2))}}
[dir=rtl] .is-slider .slider-track{animation-name:jot-marquee-rtl}
@keyframes jot-marquee-rtl{from{transform:translateX(0)}to{transform:translateX(calc(50% + var(--sl-gap) / 2))}}
@media(max-width:800px){.project-strip.is-slider{--sl-gap:9px;--sl-v:var(--sl-vm,2)}}
@media(prefers-reduced-motion:reduce){.is-slider .slider-track{animation:none}.project-strip.is-slider{overflow-x:auto;scroll-snap-type:x mandatory}.is-slider .project-tile{scroll-snap-align:start}.is-slider .is-clone{display:none!important}}

/* Footer social media icons */
.footer-social{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.site-footer:not(.ftr-center) .footer-social{justify-content:flex-start}
.social-link{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:inline-grid;place-items:center;color:var(--ink);font-size:17px;line-height:1;transition:color .2s,border-color .2s,background-color .2s}
.social-link:hover,.social-link:focus-visible{color:#fff;border-color:var(--accent);background:rgba(193,154,199,.12)}
.social-link i{display:block}

/* Phone header "language | logo | menu": same physical places in English and Arabic, on every screen width. */
@media(max-width:800px){
	.site-header.hdr-m-split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;direction:ltr}
	.hdr-m-split .header-actions{display:contents}
	.hdr-m-split .lang-toggle{grid-column:1;grid-row:1;justify-self:start}
	.hdr-m-split .brand{grid-column:2;grid-row:1;justify-self:center}
	.hdr-m-split .menu-toggle{grid-column:3;grid-row:1;justify-self:end}
	.lang-ar .hdr-m-split .brand,.lang-ar .hdr-m-split .main-nav{direction:rtl}
}

/* Wall Visualizer: two-colour comparison */
.viz-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.viz-slot{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;text-align:start;transition:border-color .2s,background-color .2s}
.viz-slot:hover{border-color:rgba(255,255,255,.32)}
.viz-slot.is-active{border-color:var(--accent);background:rgba(193,154,199,.1);box-shadow:0 0 0 1px var(--accent) inset}
.viz-slot-dot{width:26px;height:26px;flex:none;border-radius:50%;background:var(--slot,#f4f2ed);border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.viz-slot-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.viz-slot-k{font-size:10.5px;letter-spacing:.06em;color:#a9a0aa;text-transform:uppercase}
.lang-ar .viz-slot-k{text-transform:none;letter-spacing:0;font-size:11.5px}
.viz-slot-name{font-size:13.5px;color:#f1ece5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz-compare-hint{font-size:11.5px;color:#9f97a1;margin:8px 0 0}
.viz-stage{touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.viz-stage .viz-canvas-b{clip-path:inset(0 0 0 50%)}
.viz-divider{position:absolute;z-index:5;top:0;bottom:0;left:50%;width:44px;margin-left:-22px;display:flex;justify-content:center;cursor:ew-resize;outline:0;opacity:0;transition:opacity .3s}
.viz-stage.is-painted .viz-divider{opacity:1}
.viz-divider-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:rgba(255,255,255,.92);box-shadow:0 0 6px rgba(0,0,0,.35)}
.viz-divider-knob{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;color:#2a2530;display:grid;place-items:center;box-shadow:0 3px 14px rgba(0,0,0,.35);transition:transform .15s}
.viz-divider-knob svg{width:20px;height:20px}
.viz-divider:focus-visible .viz-divider-knob{box-shadow:0 0 0 3px var(--accent),0 3px 14px rgba(0,0,0,.35)}
.viz-stage.is-dragging .viz-divider-knob{transform:scale(1.08)}
.viz-tag{position:absolute;z-index:4;top:10px;display:flex;align-items:center;gap:6px;max-width:44%;padding:4px 9px 4px 6px;border-radius:999px;background:rgba(20,18,21,.72);font-size:11.5px;color:#f1ece5;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
.viz-tag:before{content:"";width:12px;height:12px;flex:none;border-radius:50%;background:var(--slot,#f4f2ed);border:1px solid rgba(255,255,255,.45)}
.viz-tag-a{left:10px}
.viz-tag-b{right:10px}
.viz-stage.is-painted .viz-tag{opacity:1}
.viz-card-text{color:#c3bbc1;font-size:13px}
@media(max-width:800px){
	.viz-slot{padding:8px 9px;gap:8px}
	.viz-slot-dot{width:22px;height:22px}
	.viz-divider-knob{width:36px;height:36px;margin:-18px 0 0 -18px}
	.viz-tag{font-size:10.5px;top:8px}
	.viz-tag-a{left:8px}
	.viz-tag-b{right:8px}
}
/* Slot 1 is always the left side of the picture, slot 2 the right side, in both languages. */
.viz-compare{direction:ltr}
.lang-ar .viz-slot{direction:rtl}
/* Custom HEX colour */
.swatch-custom .swatch-fill{display:grid;place-items:center;background:conic-gradient(#e86a5b,#e9c45b,#7fc77a,#5bb7e9,#8a6be9,#e86ac1,#e86a5b);color:#fff}
.swatch-custom .swatch-fill svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.swatch-custom[aria-checked=true] .swatch-fill{box-shadow:0 0 0 3px #29252c,0 0 0 4px #e5d8e7}
.viz-custom{display:flex;align-items:center;gap:8px;margin:14px 0 0;flex-wrap:wrap}
.viz-custom[hidden]{display:none}
.viz-custom-pick{position:relative;width:42px;height:42px;flex:none;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.viz-custom-color{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border:0;padding:0;background:none;cursor:pointer}
.viz-custom-hexwrap{display:flex;align-items:center;height:42px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);direction:ltr;flex:1 1 120px;max-width:170px}
.viz-custom-hash{color:#9f97a1;font-size:14px;margin-right:2px}
.viz-custom-hex{width:100%;min-width:0;border:0;background:none;color:#f1ece5;font:500 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;outline:0}
.viz-custom-hexwrap:focus-within{border-color:var(--accent)}
.viz-custom-hex.is-invalid{color:#f08a7c}
.viz-custom-apply{height:42px;padding:0 16px;border-radius:10px;border:0;background:var(--button-1);color:#fff;font-weight:600;cursor:pointer}
.viz-custom-note{font-size:12px;color:#c3bbc1;margin:10px 0 0}
.viz-custom-note[hidden]{display:none}
.viz-custom-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* A block moved into the contact area ("How we work" above the contact notes) */
.contact-moved{grid-column:1/-1;min-width:0}
.contact-layout:has(.contact-moved) .contact-side{grid-column:2;grid-row:1}
.contact-layout:has(.contact-moved) .contact-form{grid-column:1;grid-row:1}
.contact-moved>.section{padding:30px 28px;margin:0;border:1px solid var(--line);border-radius:12px;max-width:none}
@media(max-width:800px){
	.contact-layout:has(.contact-moved) .contact-side,.contact-layout:has(.contact-moved) .contact-form{grid-column:auto;grid-row:auto}
	.contact-moved>.section{padding:24px 16px;margin-inline:-15.5px}
}
/* Contact form: photos of the space */
.form-photos{display:grid;gap:9px}
.form-photos-label{font-size:13px;color:#d4cbd5}
.form-photos-drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;border:1px dashed rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .2s,background-color .2s}
.form-photos-drop:hover,.form-photos-drop:focus-within{border-color:var(--accent);background:rgba(193,154,199,.07)}
.form-photos-drop.is-full{display:none}
.form-photos-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.form-photos-btn{display:inline-flex;align-items:center;gap:9px;color:#ece4ee;font-size:14px;pointer-events:none}
.form-photos-btn svg{width:22px;height:22px;color:var(--accent)}
.form-photos-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.form-photos-list:empty{display:none}
.form-photo{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#2a272c;border:1px solid var(--line)}
.form-photo img{width:100%;height:100%;object-fit:cover;display:block}
.form-photo-name{display:none;position:absolute;inset:auto 6px 6px;font-size:10.5px;color:#d4cbd5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-photo.no-preview .form-photo-name{display:block}
.form-photo.no-preview img{display:none}
.form-photo-remove{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(20,18,21,.8);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center}
.form-photos-hint{font-size:11.5px;color:#9f97a1;margin:0}

/* Phones: use the portrait hero photo's own proportions when one is set */
@media(max-width:800px){.hero,.page-hero{--hero-ratio-eff:var(--hero-ratio-m,var(--hero-ratio,.6667))}}
/* Phones: hide the WordPress toolbar on the public site so a logged-in owner sees exactly what visitors see. */
@media screen and (max-width:782px){#wpadminbar{display:none!important}html:root{margin-top:0!important;--wp-admin--admin-bar--height:0px!important}}