:root{
  --brand-1:#1d3431; --brand-2:#02534e; --brand-3:#47a899; --brand-4:#8bc3b9;
  --color-bg:oklch(98.5% 0.006 90); --color-surface:oklch(96.5% 0.010 90);
  --color-ink:oklch(17% 0.025 178); --color-muted:oklch(42% 0.030 178);
  --color-subtle:oklch(62% 0.025 178);
  --gradient-brand:linear-gradient(135deg,#1d3431 0%,#02534e 40%,#47a899 80%,#8bc3b9 100%);
  --teal-10:oklch(32% 0.078 178 / .10); --teal-20:oklch(32% 0.078 178 / .20);
  --ease:cubic-bezier(0.32,0.72,0,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:auto;}
/* ── Lenis: native smooth-scroll must stay OFF while Lenis drives ── */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
/* GSAP owns motion on these — CSS must never also transition them */
.gsap-driven,.scroll-reveal,.journey-step,.stage-image,.stage-media{transition:none !important;}
/* fixed scroll-progress bar (transform-based, GPU-safe) */
.scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:200;background:var(--gradient-brand);transform:scaleX(0);transform-origin:left;will-change:transform;pointer-events:none;}
[dir="rtl"] .scroll-progress{transform-origin:right;}
/* overflow-x:clip (not hidden) so it never creates a scroll container that would break position:sticky */
body{font-family:'Tajawal',sans-serif;background:var(--color-bg);color:var(--color-ink);line-height:1.6;overflow-x:clip;}
main{overflow-x:clip;display:block;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
address{font-style:normal;}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:4px;}
.skip-link{position:fixed;inset-block-start:0;inset-inline-start:50%;transform:translate(-50%,-130%);z-index:100;background:var(--brand-2);color:#fff;padding:.65rem 1.2rem;border-radius:0 0 8px 8px;font-weight:500;transition:transform .25s var(--ease);}
.skip-link:focus-visible{transform:translate(-50%,0);outline-offset:-2px;}
.wcard:focus-visible,.g-item:focus-visible,.fcard:focus-visible{outline:2px solid var(--brand-2);outline-offset:4px;}
.display{font-family:'Tajawal',sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;}
[dir="rtl"] .display{letter-spacing:0;line-height:1.15;}
/* ── canonical section header scale (one system sitewide) ── */
.eyebrow,.section-eyebrow{font-weight:500;font-size:clamp(.8rem,1vw,.95rem);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-3);}
.wrap{width:min(1320px,92vw);margin-inline:auto;}
.site-img{filter:contrast(1.03) saturate(.96);}
.sec-h2,.section-title{font-weight:800;font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:1.1;letter-spacing:-.01em;color:var(--color-ink);}
[dir="rtl"] .sec-h2,[dir="rtl"] .section-title{letter-spacing:0;line-height:1.3;}
.grain{position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.025;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* cursor */
.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;will-change:transform;}
.cursor-ring{width:40px;height:40px;border:1px solid var(--brand-3);margin:-20px 0 0 -20px;mix-blend-mode:difference;}
.cursor-dot{width:7px;height:7px;background:var(--brand-3);margin:-3.5px 0 0 -3.5px;mix-blend-mode:difference;}
@media (hover:none){.cursor-ring,.cursor-dot{display:none;}}
/* nav */
/* ===== HEADER ===== full-width, adaptive, scroll-choreographed */
.nav-shell{position:fixed;inset-block-start:0;inset-inline:0;z-index:90;pointer-events:none;
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .55s var(--ease),background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);}
/* brand-gradient hairline that draws in once the bar solidifies */
.nav-shell::after{content:'';position:absolute;inset-inline:0;inset-block-end:-1px;height:2px;background:var(--gradient-brand);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);}
[dir="rtl"] .nav-shell::after{transform-origin:right;}
.nav-shell.scrolled{background:oklch(98.5% 0.006 90 / .80);border-bottom-color:var(--teal-10);
  backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);
  box-shadow:0 14px 50px oklch(32% 0.078 178 / .09);}
.nav-shell.scrolled::after{transform:scaleX(1);}
.nav-shell.hidden{transform:translateY(-105%);}
.nav{pointer-events:auto;width:min(1320px,92vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding-block:1.55rem;transition:padding-block .45s var(--ease);}
.nav-shell.scrolled .nav{padding-block:.85rem;}
.nav-logo img{height:46px;width:auto;transition:height .45s var(--ease),filter .45s var(--ease);}
.nav-shell.scrolled .nav-logo img{height:40px;}
.nav-links{display:flex;gap:2.4rem;}
.nav-links a{font-size:1rem;font-weight:500;letter-spacing:.01em;color:var(--color-muted);position:relative;transition:color .35s var(--ease);}
.nav-links a::after{content:'';position:absolute;inset-inline:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease);}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--color-ink);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:.9rem;}
.lang-chip{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:500;letter-spacing:.05em;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--teal-20);color:var(--brand-2);transition:background .3s,color .3s,border-color .3s;}
.lang-chip:hover{background:var(--brand-2);color:#fff;border-color:var(--brand-2);}
.nav-cta{background:var(--brand-2);color:#fff;font-weight:500;font-size:.95rem;padding:.7rem 1.4rem;border-radius:999px;box-shadow:0 6px 20px oklch(32% 0.078 178 / .18);transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);}
.nav-cta:hover{background:var(--brand-3);box-shadow:0 10px 28px oklch(32% 0.078 178 / .26);}
/* ── Adaptive colors over a dark hero (homepage) while at the top ── */
.nav-shell[data-hero="dark"]:not(.scrolled){background:linear-gradient(to bottom,oklch(18% 0.03 178 / .42),oklch(18% 0.03 178 / 0));}
.nav-shell[data-hero="dark"]:not(.scrolled) .nav-links a{color:oklch(98% 0 0 / .82);}
.nav-shell[data-hero="dark"]:not(.scrolled) .nav-links a:hover,
.nav-shell[data-hero="dark"]:not(.scrolled) .nav-links a[aria-current="page"]{color:#fff;}
.nav-shell[data-hero="dark"]:not(.scrolled) .nav-logo img{filter:brightness(0) invert(1);}
.nav-shell[data-hero="dark"]:not(.scrolled) .lang-chip{color:#fff;border-color:oklch(100% 0 0 / .45);}
.nav-shell[data-hero="dark"]:not(.scrolled) .lang-chip:hover{background:#fff;color:var(--brand-1);border-color:#fff;}
.nav-shell[data-hero="dark"]:not(.scrolled) .burger span{background:#fff;}
.burger{display:none;width:28px;height:18px;position:relative;}
.burger span{position:absolute;inset-inline:0;height:2px;background:var(--color-ink);transition:transform .4s var(--ease),top .3s,bottom .3s;}
.burger span:nth-child(1){top:1px;} .burger span:nth-child(2){bottom:1px;}
.burger.open span:nth-child(1){top:8px;transform:rotate(45deg);} .burger.open span:nth-child(2){bottom:8px;transform:rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:85;background:oklch(28% 0.06 178 / .98);backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;clip-path:circle(0% at 90% 5%);transition:clip-path .7s var(--ease);pointer-events:none;}
[dir="rtl"] .mobile-menu{clip-path:circle(0% at 10% 5%);}
.mobile-menu.open{clip-path:circle(150% at 90% 5%);pointer-events:auto;}
[dir="rtl"] .mobile-menu.open{clip-path:circle(150% at 10% 5%);}
.mobile-menu a{font-family:'Tajawal',sans-serif;font-weight:700;font-size:2rem;color:#fff;}
.mobile-menu .mm-cta{font-size:1.05rem;margin-top:1rem;}
/* bezel */
.bezel-outer{background:oklch(96.5% 0.010 90 / .7);border:1px solid oklch(77% 0.055 178 / .25);padding:6px;border-radius:1.75rem;box-shadow:0 4px 50px oklch(32% 0.078 178 / .07);}
.bezel-inner{background:var(--color-bg);border-radius:calc(1.75rem - 6px);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .9);overflow:hidden;}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;font-size:.98rem;padding:.9rem 1.7rem;border-radius:999px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);}
.btn-fill{background:var(--brand-2);color:#fff;}
.btn-fill:hover{background:var(--brand-3);transform:translateY(-2px);}
.btn-ghost{border:1px solid oklch(100% 0 0 / .45);color:#fff;}
.btn-ghost:hover{background:oklch(100% 0 0 / .12);}
.btn-line{border:1px solid var(--teal-20);color:var(--brand-2);}
.btn-line:hover{background:var(--brand-2);color:#fff;border-color:var(--brand-2);}
.center-btn{margin-top:clamp(2rem,4vw,3rem);}
/* footer */
footer{background:var(--brand-1);color:#fff;padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;margin-top:clamp(4rem,8vw,7rem);}
.footer-top{height:1px;background:var(--gradient-brand);margin-bottom:clamp(2.5rem,5vw,4rem);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;}
.footer-brand img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.95;}
.footer-brand p{font-weight:300;color:oklch(77% 0.055 178 / .7);margin-top:1.2rem;max-width:36ch;line-height:1.9;}
.footer-col h4{font-weight:500;margin-bottom:1rem;font-size:.95rem;}
.footer-col a,.footer-col address a{display:block;color:var(--brand-4);font-weight:300;margin-bottom:.7rem;font-size:.9rem;transition:color .3s var(--ease);}
.footer-col a:hover{color:#fff;}
.social-links{display:flex;gap:.9rem;margin-top:1.6rem;flex-wrap:wrap;}
.social-links a{width:44px;height:44px;border-radius:50%;border:1px solid oklch(77% 0.055 178 / .25);display:grid;place-items:center;color:var(--brand-3);font-size:1.3rem;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s;}
.social-links a:hover{background:var(--brand-3);color:var(--brand-1);border-color:var(--brand-3);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid oklch(77% 0.055 178 / .12);font-weight:300;font-size:.82rem;color:oklch(77% 0.055 178 / .6);}
/* back to top */
.to-top{position:fixed;inset-block-end:1.5rem;inset-inline-end:1.5rem;width:48px;height:48px;border-radius:50%;background:var(--brand-2);color:#fff;display:grid;place-items:center;font-size:1.2rem;z-index:80;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--brand-3);}
/* language visibility */
.en-text{display:none;}
[lang="en"] .ar-text{display:none;}
[lang="en"] .en-text{display:revert;}
/* sections */
.sec{padding-block:clamp(4.5rem,10vw,8rem);}
.sec-eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem;}
.sec-eyebrow::before{content:'';flex:0 0 42px;width:42px;height:1px;background:var(--brand-3);}
.hairline{height:1px;background:var(--gradient-brand);transform:scaleX(0);transform-origin:left;}
[dir="rtl"] .hairline{transform-origin:right;}
.page-hero{padding-top:clamp(9rem,16vh,12rem);padding-bottom:clamp(1.5rem,4vw,3rem);}
.page-hero h1{font-size:clamp(2.75rem,6vw,6rem);color:var(--color-ink);margin-top:1rem;}
.page-lead{font-weight:300;font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--color-muted);max-width:56ch;margin-top:1.6rem;line-height:1.85;}
.about-statement{font-weight:500;color:var(--color-ink);max-width:48ch;}
/* ===== HERO SLIDER ===== */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-slider{position:absolute;inset:0;z-index:-3;will-change:transform;}
.hero-inner{will-change:transform,opacity;}
/* cursor-following glow for dark sections (GPU-cheap, soft-light) */
.glow-wrap{position:relative;isolation:isolate;overflow:hidden;}
.cursor-glow{position:absolute;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;mix-blend-mode:soft-light;background:radial-gradient(circle,var(--brand-3) 0%,transparent 62%);will-change:transform,opacity;transition:opacity .5s var(--ease);}
.glow-wrap:hover .cursor-glow{opacity:.55;}
.glow-wrap>*:not(.cursor-glow){position:relative;z-index:1;}
/* card inner-content depth parallax (GSAP-driven on transform) */
.fc-overlay .fc-inner,.wc-meta{will-change:transform;}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);will-change:opacity;}
.hero-slider .slide.is-active{opacity:1;}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);}
.hero-slider .slide.is-active img{animation:kenburns 8s var(--ease) forwards;}
@keyframes kenburns{from{transform:scale(1.02);}to{transform:scale(1.1);}}
.slide-cap{position:absolute;inset-block-end:7.5rem;inset-inline-end:max(4vw,2rem);color:#fff;font-weight:500;font-size:.85rem;letter-spacing:.06em;opacity:.85;text-shadow:0 1px 12px rgba(0,0,0,.4);}
.hero-tint{position:absolute;inset:0;z-index:-2;background:var(--gradient-brand);mix-blend-mode:multiply;opacity:.10;}
.hero-fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(17% 0.025 178 / .28) 0%,transparent 32%,oklch(17% 0.025 178 / .62) 100%);}
.hero-inner{width:min(1320px,92vw);margin-inline:auto;padding-block:clamp(7rem,16vh,11rem) clamp(5.5rem,11vh,8rem);color:#fff;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem;border-radius:999px;border:1px solid oklch(100% 0 0 / .3);background:oklch(100% 0 0 / .08);backdrop-filter:blur(8px);font-weight:500;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;}
.hero h1{font-family:'Tajawal',sans-serif;font-weight:900;line-height:1.02;letter-spacing:-.02em;font-size:clamp(3.5rem,7vw,7.5rem);margin:1.6rem 0 1.2rem;max-width:16ch;text-wrap:balance;}
[dir="rtl"] .hero h1{line-height:1.12;letter-spacing:0;}
.hero-sub{font-weight:300;font-size:clamp(1.05rem,2.1vw,1.4rem);max-width:46ch;color:oklch(100% 0 0 / .9);line-height:1.8;}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem;}
.hero-ctrl{position:absolute;inset-block-end:1.8rem;inset-inline-end:max(4vw,2rem);display:flex;align-items:center;gap:.8rem;z-index:3;}
.harrow{width:46px;height:46px;border-radius:50%;border:1px solid oklch(100% 0 0 / .4);color:#fff;display:grid;place-items:center;font-size:1.15rem;transition:background .3s,border-color .3s;}
.harrow:hover{background:oklch(100% 0 0 / .15);}
[dir="rtl"] .harrow i{transform:scaleX(-1);}
.hdots{display:flex;gap:.5rem;}
.hdot{width:8px;height:8px;border-radius:50%;background:oklch(100% 0 0 / .4);transition:width .4s var(--ease),background .4s;}
.hdot.is-active{width:24px;border-radius:999px;background:var(--brand-4);}
.scroll-ind{position:absolute;inset-block-end:1.6rem;inset-inline-start:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#fff;z-index:2;}
.scroll-ind .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.8s var(--ease) infinite;}
@keyframes pulse{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(7px);}}
/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;}
.about-quote{font-family:'Tajawal',sans-serif;font-weight:700;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.25;letter-spacing:-.01em;color:var(--color-ink);}
.about-quote .accent{color:var(--brand-2);}
.about-body p{font-weight:300;color:var(--color-muted);font-size:1.08rem;line-height:1.95;max-width:54ch;margin-bottom:1rem;}
.traits{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.8rem 0;}
.trait{display:inline-flex;align-items:center;font-weight:500;font-size:.9rem;padding:.5rem 1.1rem;border-radius:999px;background:oklch(77% 0.055 178 / .14);color:var(--brand-2);border:1px solid var(--teal-20);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);}
.trait:hover{transform:translateY(-2px);background:oklch(77% 0.055 178 / .22);box-shadow:0 8px 24px oklch(32% 0.078 178 / .16);}
.about-cover .bezel-inner img{width:100%;height:auto;}
.about-cols{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start;}
/* ===== SERVICES BENTO ===== */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);gap:1.4rem;grid-auto-flow:dense;margin-top:clamp(2.5rem,5vw,3.5rem);}
.svc{position:relative;overflow:hidden;border-radius:1.5rem;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.7rem;color:#fff;isolation:isolate;transform-style:preserve-3d;}
.svc.tall{grid-row:span 2;}
.svc.wide{grid-column:span 2;}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease);}
.svc::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(29% 0.05 178 / .12),oklch(20% 0.05 178 / .8));}
.svc:hover img{transform:scale(1.06);}
.svc .svc-ico{font-size:1.8rem;color:var(--brand-4);margin-bottom:auto;}
.svc h3{font-weight:700;font-size:1.3rem;}
.svc p{font-weight:300;font-size:.92rem;color:oklch(100% 0 0 / .85);margin-top:.4rem;line-height:1.7;max-width:34ch;}
/* services page rows */
.svc-rows{display:flex;flex-direction:column;gap:clamp(3rem,7vw,6rem);}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.svc-row.rev .svc-row-media{order:2;}
.svc-row-media .bezel-inner img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.svc-num{font-weight:800;font-size:1rem;color:var(--brand-3);letter-spacing:.1em;}
.svc-row-ico{display:block;font-size:2.2rem;color:var(--brand-2);margin:.6rem 0 1rem;}
.svc-row-text h2{font-weight:800;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--color-ink);}
.svc-row-text p{font-weight:300;color:var(--color-muted);font-size:1.08rem;line-height:1.9;margin-top:.8rem;max-width:46ch;}
/* ===== FEATURED ===== */
.feat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:clamp(2.5rem,5vw,3.5rem);}
.fcard{display:block;border-radius:1.25rem;overflow:hidden;position:relative;aspect-ratio:4/5;}
.fcard img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.fcard:hover img{transform:scale(1.06);}
.fcard .fc-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,oklch(18% 0.04 178 / .82));display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;color:#fff;}
.fcard h3{font-weight:700;font-size:1.15rem;}
.fcard span{font-weight:300;font-size:.82rem;color:oklch(100% 0 0 / .8);margin-top:.2rem;}
/* ===== WORK GRID ===== */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem);}
.filters button{font-weight:500;font-size:.88rem;padding:.55rem 1.2rem;border-radius:999px;border:1px solid var(--teal-20);color:var(--color-muted);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);}
.filters button.active{background:var(--brand-2);color:#fff;border-color:var(--brand-2);}
.filters button:not(.active):hover{border-color:var(--brand-3);color:var(--brand-2);}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.wcard{position:relative;overflow:hidden;border-radius:1.25rem;aspect-ratio:4/5;display:block;width:100%;text-align:start;}
.wcard.hide{display:none;}
.wcard img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.wcard:hover img{transform:scale(1.06);}
.wc-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,oklch(18% 0.04 178 / .85));display:flex;flex-direction:column;justify-content:space-between;padding:1.3rem;color:#fff;}
.wc-code{font-weight:600;font-size:.78rem;letter-spacing:.1em;opacity:.85;align-self:flex-start;border:1px solid oklch(100% 0 0 / .4);padding:.25rem .6rem;border-radius:999px;}
.wc-meta{display:flex;flex-direction:column;gap:.2rem;}
.wc-title{font-weight:700;font-size:1.12rem;}
.wc-space{font-weight:300;font-size:.82rem;color:oklch(100% 0 0 / .8);}
/* ===== PROJECT MODAL ===== */
.pmodal{position:fixed;inset:0;z-index:150;display:none;}
.pmodal.open{display:block;}
.pmodal-scrim{position:absolute;inset:0;background:oklch(22% 0.05 178 / .55);backdrop-filter:blur(6px);}
.pmodal-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(820px,100%);background:var(--color-bg);overflow-y:auto;box-shadow:-20px 0 80px oklch(20% 0.05 178 / .25);transform:translateX(100%);transition:transform .6s var(--ease);}
[dir="rtl"] .pmodal-panel{inset-inline-end:auto;inset-inline-start:0;transform:translateX(-100%);box-shadow:20px 0 80px oklch(20% 0.05 178 / .25);}
.pmodal.open .pmodal-panel{transform:translateX(0);}
.pmodal-close{position:sticky;top:1rem;inset-inline-start:1rem;float:inline-start;width:46px;height:46px;border-radius:50%;background:var(--color-surface);border:1px solid var(--teal-20);color:var(--brand-2);display:grid;place-items:center;font-size:1.2rem;z-index:5;margin:1rem;}
.pmodal-content{padding:clamp(1.5rem,4vw,3.5rem);}
.pd .eyebrow{margin-bottom:.6rem;}
.pd-title{font-size:clamp(2rem,5vw,3.4rem);color:var(--color-ink);margin-bottom:1.6rem;}
.pd-body{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.d-row{margin-bottom:1.1rem;}
.d-k{display:block;font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-3);}
.d-v{display:block;font-weight:300;color:var(--color-ink);margin-top:.2rem;}
.pd-desc h3{font-size:clamp(1.4rem,3vw,2rem);color:var(--color-ink);margin-bottom:.8rem;}
.pd-desc p{font-weight:300;color:var(--color-muted);line-height:1.9;font-size:1.04rem;}
.pd-desc .material{margin-top:1.2rem;color:var(--color-subtle);}
.pd-gallery{columns:2;column-gap:1.2rem;margin-top:clamp(2rem,4vw,3rem);}
.pd-gallery .g-item{break-inside:avoid;margin-bottom:1.2rem;border-radius:.9rem;overflow:hidden;display:block;width:100%;}
.pd-gallery .g-item img{width:100%;height:auto;transition:transform .8s var(--ease);}
.pd-gallery .g-item:hover img{transform:scale(1.04);}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:oklch(22% 0.055 178 / .92);backdrop-filter:blur(6px);display:none;place-items:center;padding:4vw;}
.lightbox.open{display:grid;}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:.6rem;}
.lightbox .lb-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem;width:48px;height:48px;border-radius:50%;background:oklch(98.5% 0.006 90 / .15);color:#fff;display:grid;place-items:center;font-size:1.4rem;}
/* ===== JOURNEY / CUSTOMER JOURNEY (11-stage pinned experience) ===== */
.journey{position:relative;margin-top:clamp(2.5rem,5vw,3.5rem);}
/* sticky scroll track: native, Lenis-proof. JS sets .journey-scroll height. */
.journey-scroll{position:relative;}
.journey-stick{position:sticky;inset-block-start:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.4rem,3.5vh,2.6rem);padding-block:clamp(2rem,6vh,4.5rem);}
.journey-progress{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);}
.jp-count{font-family:'Tajawal',sans-serif;font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1;display:inline-flex;align-items:baseline;gap:.25rem;direction:ltr;unicode-bidi:isolate;}
.jp-now{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.jp-sep{color:var(--teal-30,var(--brand-4));font-weight:300;margin-inline:.1rem;}
.jp-total{color:var(--color-muted);font-weight:300;font-size:.7em;}
.jp-stage{font-family:'Tajawal',sans-serif;font-weight:500;font-size:clamp(.95rem,2.2vw,1.15rem);color:var(--brand-3);white-space:nowrap;}
.jp-bar{position:relative;flex:1;height:2px;background:var(--teal-10);border-radius:2px;overflow:hidden;}
/* progress fill is now transform-based (scaleX), not width — GPU-safe */
.jp-fill{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--gradient-brand);border-radius:2px;transform:scaleX(.09);transform-origin:left;}
[dir="rtl"] .jp-fill{transform-origin:right;}
/* pinned two-column stage stage: text | image, plus a tick rail */
.journey-pin{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;min-height:clamp(26rem,64vh,40rem);}
.journey-text-col{position:relative;min-height:clamp(20rem,42vh,26rem);}
.journey-step{position:absolute;inset-block-start:0;inset-inline:0;max-width:54ch;will-change:opacity,transform;}
.journey-step .js-num{font-family:'Tajawal',sans-serif;font-weight:800;font-size:clamp(2.6rem,6vw,4.2rem);line-height:.9;display:block;direction:ltr;unicode-bidi:isolate;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.journey-step h3{font-weight:700;font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--color-ink);margin-top:.5rem;}
.journey-step .js-sub{font-weight:500;color:var(--brand-3);margin-top:.4rem;font-size:clamp(1rem,2.2vw,1.15rem);}
.journey-step .js-body{font-weight:300;color:var(--color-muted);line-height:1.9;margin-top:.9rem;font-size:1.05rem;}
/* image column: stacked stage media, GSAP crossfades these */
.journey-media-col{position:relative;}
.journey-media{position:relative;aspect-ratio:4/3;border-radius:1.25rem;overflow:hidden;}
.stage-media{position:absolute;inset:0;opacity:0;will-change:opacity,transform;}
.stage-media img{width:100%;height:100%;object-fit:cover;}
/* tick rail along the inline-end edge */
.journey-rail{position:absolute;inset-block:0;inset-inline-end:-1.4rem;display:flex;flex-direction:column;justify-content:center;gap:.55rem;}
.journey-rail .tick{width:7px;height:7px;border-radius:50%;background:var(--teal-20);transition:background .35s var(--ease),transform .35s var(--ease);}
.journey-rail .tick.is-active{background:var(--brand-2);transform:scale(1.55);}
.journey-rail .tick.is-done{background:var(--brand-3);}
/* Stacked variant (mobile / reduced motion): each stage = its own card */
.journey-stacked .journey-scroll{height:auto !important;}
.journey-stacked .journey-stick{position:static;min-height:0;display:block;padding-block:0;gap:0;}
.journey-stacked .journey-progress{margin-bottom:clamp(1.5rem,4vw,2.5rem);}
.journey-stacked .journey-pin{display:block;min-height:0;}
.journey-stacked .journey-text-col{position:static;min-height:0;}
.journey-stacked .journey-media-col{display:none;}
.journey-stacked .journey-rail{display:none;}
.journey-stacked .journey-step{position:static !important;opacity:1 !important;transform:none !important;max-width:none;padding-block:clamp(1.6rem,5vw,2.4rem);border-top:1px solid var(--teal-10);}
.journey-stacked .journey-step:first-child{border-top:0;}
.stage-card-media{display:none;}
.journey-stacked .stage-card-media{display:block;margin-top:1.2rem;aspect-ratio:4/3;border-radius:1rem;overflow:hidden;}
.journey-stacked .stage-card-media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:860px){.journey-pin{grid-template-columns:1fr;}}
/* ===== FAQ (native <details>, accessible, SEO-friendly) ===== */
.faq{max-width:980px;margin-inline:auto;margin-top:clamp(1.5rem,4vw,2.5rem);}
.faq-item{border-top:1px solid var(--teal-10);}
.faq-item:last-child{border-bottom:1px solid var(--teal-10);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.5rem;padding:clamp(1.1rem,2.5vw,1.6rem) 0;font-weight:500;font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--color-ink);transition:color .3s var(--ease);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--brand-2);}
.faq-q{flex:1;}
.faq-ico{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--teal-20);display:grid;place-items:center;color:var(--brand-2);font-size:1rem;transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s;}
.faq-item[open] .faq-ico{transform:rotate(135deg);background:var(--brand-2);color:#fff;border-color:var(--brand-2);}
.faq-a{padding:0 0 clamp(1.2rem,3vw,1.8rem);max-width:74ch;color:var(--color-muted);font-weight:300;line-height:1.95;font-size:1.05rem;}
.faq-item[open] .faq-a{animation:faqIn .45s var(--ease);}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
/* ===== Value pillars (Why Atria) ===== */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1rem,2.2vw,1.5rem);margin-top:clamp(2rem,4vw,3rem);}
.pillar{padding:clamp(1.6rem,3vw,2.2rem);border:1px solid var(--teal-10);border-radius:1.25rem;background:var(--color-surface);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);}
.pillar:hover{transform:translateY(-5px);box-shadow:0 20px 55px oklch(32% 0.078 178 / .10);border-color:var(--teal-20);}
.pillar-ico{font-size:2rem;color:var(--brand-3);}
.pillar h3{font-weight:700;font-size:clamp(1.1rem,2.4vw,1.3rem);color:var(--color-ink);margin-top:.85rem;}
.pillar p{font-weight:300;color:var(--color-muted);margin-top:.55rem;line-height:1.85;font-size:1rem;}
.seo-note{margin-top:clamp(2rem,4vw,3rem);}
/* ===== CTA BAND ===== */
.cta-band{background:var(--brand-1);color:#fff;border-radius:clamp(1.5rem,3vw,2.5rem);padding:clamp(2.5rem,6vw,5rem);text-align:center;}
.cta-band h2{font-weight:800;font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;}
.cta-band p{font-weight:300;color:var(--brand-4);margin:1rem auto 2rem;max-width:46ch;line-height:1.8;}
.cta-band .btn{margin-inline:auto;}
/* ===== CONTACT ===== */
.contact{background:var(--brand-1);color:#fff;border-radius:clamp(1.5rem,3vw,2.5rem);padding:clamp(2.5rem,6vw,5rem);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;}
.contact h2{font-weight:800;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1;}
.contact .lead{font-weight:300;color:var(--brand-4);margin-top:1.2rem;line-height:1.9;max-width:42ch;}
.contact-info{margin-top:2.2rem;display:flex;flex-direction:column;gap:1rem;}
.contact-info a{display:flex;align-items:center;gap:.75rem;color:oklch(100% 0 0 / .9);font-weight:300;transition:color .3s var(--ease);font-family:'Tajawal',sans-serif;}
.contact-info a:hover{color:var(--brand-3);}
.contact-info i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1.2rem;color:var(--brand-3);}
/* English phone / email must stay LTR-stable inside RTL pages */
.ltr-num{direction:ltr;unicode-bidi:isolate;text-align:start;}
.contact-social{margin-top:2rem;}
.cform{display:flex;flex-direction:column;gap:1.4rem;}
.field{position:relative;}
.field input,.field textarea,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid oklch(100% 0 0 / .25);color:#fff;font-family:inherit;font-size:1rem;font-weight:300;padding:.75rem 0;transition:border-color .3s var(--ease);}
.field textarea{resize:vertical;min-height:90px;}
.field select option{color:#111;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand-3);box-shadow:0 1px 0 var(--brand-3);}
.field label{position:absolute;inset-block-start:.75rem;inset-inline-start:0;color:oklch(100% 0 0 / .55);font-weight:300;pointer-events:none;transition:transform .3s var(--ease),font-size .3s var(--ease),color .3s var(--ease);transform-origin:inline-start;}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field.filled label{transform:translateY(-1.5rem) scale(.78);color:var(--brand-3);}
.cform .btn-fill{align-self:flex-start;margin-top:.5rem;}
.form-msg{color:var(--brand-4);font-weight:300;}
.form-err{color:#ffc7c2;font-weight:400;font-size:.92rem;min-height:1.2rem;margin-top:.2rem;}
/* reveal default state */
[data-reveal]{will-change:transform,opacity;}
/* responsive */
@media (max-width:860px){
  .nav-links,.nav .lang-chip{display:none;}
  .burger{display:block;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .about-grid,.contact-grid,.about-cols{grid-template-columns:1fr;}
  .bento,.feat-grid,.wgrid{grid-template-columns:1fr;}
  .svc.tall,.svc.wide{grid-row:auto;grid-column:auto;}
  .svc-row{grid-template-columns:1fr;}
  .svc-row.rev .svc-row-media{order:0;}
  .pd-body{grid-template-columns:1fr;}
  .pd-gallery{columns:1;}
  .slide-cap{display:none;}
}
@media (min-width:561px) and (max-width:960px){.wgrid,.feat-grid,.bento{grid-template-columns:repeat(2,1fr);}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto;}
  .cursor-ring,.cursor-dot,.cursor-glow,.scroll-progress{display:none;}
  .hero-slider .slide.is-active img{animation:none;transform:none;}
  .journey-step{opacity:1;}
}

/* ===================================================================
   WhatsApp contact layer — direct chat, free-consultation messaging
   =================================================================== */

/* WhatsApp button variant (sits on the existing .btn base) */
.btn-wa{background:#25d366;color:#06251b;font-weight:700;}
.btn-wa:hover{background:#1fb457;color:#fff;transform:translateY(-2px);}
.btn-wa i{font-size:1.25rem;}

/* "Free" badge used inside light sections (advantages / perks) */
.free-tag{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.72rem;
  letter-spacing:.04em;padding:.34rem .72rem;border-radius:999px;
  background:oklch(77% 0.055 178 / .16);color:var(--brand-2);border:1px solid var(--teal-20);margin-bottom:.95rem;}
.free-tag i{font-size:.95rem;}
.perk-note{margin-top:clamp(1.8rem,3.5vw,2.6rem);font-weight:300;color:var(--color-muted);
  line-height:1.9;max-width:62ch;font-size:1.02rem;}
.perk-note strong{color:var(--brand-2);font-weight:600;}

/* Contact-info channel cards (replace the old form) on the dark .contact panel */
.contact-cta{display:flex;flex-direction:column;gap:1.15rem;}
.free-banner{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  font-weight:700;font-size:.85rem;letter-spacing:.02em;padding:.55rem 1.1rem;border-radius:999px;
  background:linear-gradient(135deg,rgba(37,211,102,.22),rgba(72,168,154,.16));
  color:#dbfff0;border:1px solid rgba(139,195,185,.4);}
.free-banner i{color:#25d366;font-size:1.15rem;}
.contact-cta h3{font-weight:800;font-size:clamp(1.45rem,3.4vw,2.05rem);color:#fff;line-height:1.22;}
.contact-cta>p{font-weight:300;color:var(--brand-4);line-height:1.9;max-width:46ch;}
.channel-list{display:grid;gap:.8rem;margin-top:.3rem;}
.channel{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border-radius:1rem;
  border:1px solid rgba(203,239,235,.14);background:linear-gradient(180deg,rgba(203,239,235,.06),rgba(203,239,235,.02));
  color:#fff;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.channel:hover{transform:translateY(-2px);border-color:rgba(139,195,185,.42);
  background:linear-gradient(180deg,rgba(72,168,154,.16),rgba(203,239,235,.03));}
.channel-ico{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:.75rem;display:grid;place-items:center;
  font-size:1.4rem;color:#fff;background:rgba(72,168,154,.2);}
.channel-ico.is-wa{background:rgba(37,211,102,.18);padding:6px;}
.channel-ico.is-wa img{width:100%;height:100%;object-fit:contain;}
.channel-txt{display:flex;flex-direction:column;min-width:0;}
.channel-lbl{font-size:.78rem;color:var(--brand-4);font-weight:400;}
.channel-val{font-weight:500;font-size:1rem;color:#fff;direction:ltr;text-align:start;}
[dir="rtl"] .channel-val.is-ar{direction:rtl;}

/* Floating WhatsApp button — every page */
.wa-fab{position:fixed;inset-block-end:1.5rem;inset-inline-start:1.5rem;z-index:81;
  width:60px;height:60px;display:grid;place-items:center;border-radius:50%;
  box-shadow:0 12px 30px rgba(7,94,84,.34),0 3px 10px rgba(0,0,0,.2);transition:transform .35s var(--ease);}
.wa-fab img{width:100%;height:100%;display:block;border-radius:50%;}
.wa-fab:hover{transform:translateY(-3px) scale(1.05);}
.wa-fab::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25d366;opacity:.5;
  z-index:-1;animation:waPulse 2.6s var(--ease) infinite;}
.wa-fab__tip{position:absolute;inset-inline-start:calc(100% + 14px);white-space:nowrap;
  background:var(--brand-1);color:#fff;font-size:.82rem;font-weight:600;padding:.5rem .9rem;border-radius:999px;
  opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:0 10px 24px rgba(0,0,0,.22);}
[dir="rtl"] .wa-fab__tip{transform:translateX(6px);}
.wa-fab:hover .wa-fab__tip,.wa-fab:focus-visible .wa-fab__tip{opacity:1;transform:none;}
@keyframes waPulse{0%{transform:scale(1);opacity:.5;}70%{transform:scale(1.7);opacity:0;}100%{transform:scale(1.7);opacity:0;}}
@media (max-width:600px){
  .wa-fab{width:54px;height:54px;inset-block-end:1.1rem;inset-inline-start:1.1rem;}
  .wa-fab__tip{display:none;}
}