/* Works product sites v3 (Nadia, 16 Oct 2026). One structure, three brands. Logo/marks unchanged.
   Glass is used ONCE per page: the hero product frame. Everything else is flat. */
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;font-synthesis:none}
a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
html[lang=ar]{direction:rtl}html[lang=ar] [data-l=en],html[lang=en] [data-l=ar]{display:none}
html[lang=ar] body{font-family:"Noto Sans Arabic",var(--body),"Segoe UI",Tahoma,sans-serif;line-height:1.8}
h1,h2,h3{font-family:var(--head);color:var(--hd);font-weight:var(--hw);letter-spacing:-.02em;line-height:1.05}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0;line-height:1.3;font-family:inherit;font-weight:700}
.mono{font-family:var(--mono)}
/* header */
.nav{display:flex;align-items:center;gap:20px;height:72px}
.nav .brand{min-height:44px;display:flex;align-items:center;gap:12px;font:var(--hw) 19px/1 var(--head);color:var(--hd)}
.nav .brand img{width:34px;height:34px}.nav .sp{flex:1}
.nav a.l{color:var(--mut);font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{min-height:44px;min-width:52px;border:0;background:transparent;color:var(--mut);font:inherit;font-size:14px;cursor:pointer}
html[lang=en] .lang [data-set=en],html[lang=ar] .lang [data-set=ar]{background:var(--hd);color:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--hd);font-size:16px;color:var(--hd);background:transparent;cursor:pointer;transition:transform 150ms,background 150ms}
.btn:hover{transform:translateY(-1px)}.btn.p{background:var(--ac);border-color:var(--ac);color:var(--on)}
.btn.wa::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.9}
/* hero */
.hero{padding:56px 0 72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;position:relative}
.hero h1{font-size:clamp(40px,5.6vw,72px)}.hero p.sub{margin-top:22px;font-size:20px;color:var(--mut);max-width:30ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.tint{position:absolute;inset:-40px 0 auto auto;width:min(60vw,820px);height:560px;background:radial-gradient(closest-side,var(--tint),transparent);z-index:-1;pointer-events:none}
html[lang=ar] .tint{inset:-40px auto auto 0}
/* the one glass surface */
.frame{border-radius:22px;padding:18px;background:var(--glass);border:1px solid var(--glassln);box-shadow:0 30px 70px -40px var(--sh);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
@supports not (backdrop-filter:blur(1px)){.frame{background:var(--panel)}}
.frame .bar{display:flex;gap:6px;margin-bottom:14px}.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.sample{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
/* sections */
section{padding:88px 0}section+section{border-top:1px solid var(--line)}
.statement{font:var(--hw) clamp(30px,4.4vw,54px)/1.12 var(--head);color:var(--hd);letter-spacing:-.02em;max-width:20ch}
html[lang=ar] .statement{font-family:inherit;line-height:1.35;letter-spacing:0}
.statement em{font-style:normal;color:var(--ac-t)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.trio .card h3{font-size:22px;margin:14px 0 6px}.trio .card p{color:var(--mut);font-size:16px;max-width:30ch}
.crop{height:140px;border-radius:10px;background:var(--wash);border:1px solid var(--line);padding:12px;display:grid;gap:8px;align-content:center}
.row{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--mut);align-items:center}.row b{color:var(--hd);font-weight:400}
.pill{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--acw);color:var(--ac-t);font-size:13px}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.nums div b{display:block;font:var(--hw) clamp(44px,6vw,80px)/1 var(--head);color:var(--hd);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nums div span{display:block;margin-top:8px;color:var(--mut);font-size:15px}.nums small{display:block;color:var(--mut);font-size:12px;margin-top:4px}
.offer{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.offer .card{padding:28px}.offer .card h3{font-size:26px}.offer .card p{color:var(--mut);margin-top:8px}
.contact{text-align:start}.contact .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
footer{border-top:1px solid var(--line);padding:36px 0 56px;color:var(--mut);font-size:14px}
footer .chain{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--hd)}footer .chain a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.chat{position:fixed;inset-inline-end:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:var(--ac);color:var(--on);display:grid;place-items:center;box-shadow:0 10px 30px -10px var(--sh);font-size:12px;z-index:9}
.mockflag{position:fixed;inset-inline-start:12px;bottom:12px;z-index:9;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A5A00;background:#F6ECD3;border:1px solid #8A5A00;border-radius:4px;padding:2px 8px}
/* motion: hero only */
@keyframes lit{0%,15%{opacity:.25}45%,100%{opacity:1}}@keyframes hop{0%,20%{transform:translateX(0)}55%,100%{transform:translateX(calc(100% + 10px))}}@keyframes fill{from{width:8%}to{width:100%}}
.lit{animation:lit 3.2s ease-out infinite alternate}.hop{animation:hop 4s cubic-bezier(.3,0,.2,1) infinite alternate}.fill i{animation:fill 4s ease-out infinite alternate}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:860px){.hero,.offer{grid-template-columns:minmax(0,1fr)}.trio,.nums{grid-template-columns:minmax(0,1fr)}section{padding:60px 0}.nav a.l{display:none}.hero{padding:28px 0 48px;gap:32px}.wrap{padding:0 20px}.nav .brand span{font-size:16px}}
.row b{white-space:nowrap}
/* CRM hero map */
.mapwrap{position:relative;height:400px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--wash)}
#map{position:absolute;inset:0}
.areacard{position:absolute;inset-inline-end:12px;top:12px;width:210px;transform:translateX(130%);opacity:0;transition:transform 420ms cubic-bezier(.2,0,0,1),opacity 300ms;box-shadow:0 14px 30px -18px var(--sh)}
html[lang=ar] .areacard{transform:translateX(-130%)}.areacard.show{transform:none;opacity:1}
.maphint{position:absolute;inset-inline-start:12px;bottom:10px;background:var(--panel);padding:2px 8px;border-radius:999px;border:1px solid var(--line);pointer-events:none}
.maplibregl-ctrl-attrib{font-size:10px}
/* ATS: the candidate travels on load, then the next action lands */
.pcol{flex:1;min-width:0}.pcol .slot{height:68px;border-radius:8px;background:var(--wash);border:1px dashed var(--line)}
.trav{position:absolute;top:22px;inset-inline-start:0;width:calc((100% - 20px)/3);padding:8px 10px;border-inline-start:3px solid var(--ac);box-shadow:0 10px 24px -14px var(--sh);animation:travel 9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes travel{0%,8%{transform:translateX(0)}28%,40%{transform:translateX(calc(100% + 10px))}60%,90%{transform:translateX(calc(200% + 20px))}100%{transform:translateX(0)}}
html[lang=ar] .trav{animation-name:travel-r}@keyframes travel-r{0%,8%{transform:translateX(0)}28%,40%{transform:translateX(calc(-100% - 10px))}60%,90%{transform:translateX(calc(-200% - 20px))}100%{transform:translateX(0)}}
.nextc{animation:nextin 9s ease infinite}@keyframes nextin{0%,50%{opacity:.35;transform:translateY(4px)}62%,90%{opacity:1;transform:none}100%{opacity:.35;transform:translateY(4px)}}
/* LMS: the bar fills, then the certificate is stamped */
.fillbar i{animation:fillup 8s cubic-bezier(.3,0,.2,1) infinite}@keyframes fillup{0%,4%{width:6%}45%,92%{width:100%}100%{width:6%}}
.cert{position:relative;border-style:dashed;animation:certin 8s ease infinite}@keyframes certin{0%,45%{border-color:var(--line);opacity:.55}56%,92%{border-style:solid;border-color:var(--ac);opacity:1}100%{opacity:.55}}
.stamp{position:absolute;inset-inline-end:14px;top:10px;border:2px solid var(--ac);color:var(--ac);border-radius:6px;padding:1px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-8deg);opacity:0;animation:stampin 8s ease infinite}
@keyframes stampin{0%,48%{opacity:0;transform:rotate(-8deg) scale(1.7)}56%{opacity:1;transform:rotate(-8deg) scale(.94)}60%,92%{opacity:1;transform:rotate(-8deg) scale(1)}100%{opacity:0}}
@media (max-width:860px){.mapwrap{height:320px}.areacard{width:170px}}
@media (max-width:860px){.areacard{top:auto;bottom:10px;width:156px;padding:10px 12px}.areacard #acname{font-size:17px!important}.maphint{display:none}}
html[lang=ar] .sample,html[lang=ar] .stamp,html[lang=ar] .label{letter-spacing:0;text-transform:none}
.nums{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.kick{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}html[lang=ar] .kick{letter-spacing:0;text-transform:none}.trio.duo{grid-template-columns:repeat(2,1fr)}@media(max-width:760px){.trio.duo{grid-template-columns:1fr}}

.tour{padding:22px}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.tab{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--txt);font:inherit;cursor:pointer}.tab[aria-selected=true]{background:var(--hd);color:var(--bg);border-color:var(--hd)}.tp .crop{max-width:520px}.tp[hidden]{display:none}
@media (max-width:860px){.nav a.l.signin{display:inline-flex}}

/* contact form (job 4cf8dceb D1): the shared enquiry client lives in enquiry.js */
.enq{display:grid;gap:12px;max-width:560px;margin:18px 0 8px}.enq label{display:grid;gap:6px;font-size:14px;color:var(--mut)}
.enq input,.enq textarea{font:inherit;font-size:16px;color:var(--hd);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px}
.enq input:focus,.enq textarea:focus{outline:2px solid var(--ac);outline-offset:1px}.enq button{justify-self:start;cursor:pointer}
.enq-fine{font-size:13px;color:var(--mut);margin:0}.enq-done{font-size:15px;color:var(--hd);margin:0}
/* small phones: the Arabic nav (longer words) overflowed the screen edge (job 4cf8dceb D6) */
@media (max-width:860px){.nav{gap:10px}.nav a.l.signin{white-space:nowrap;font-size:14px}.nav .brand{min-width:0}.nav .brand span{overflow-wrap:anywhere}}
/* the shared client parks its bot trap at left:-9999px, which scrolls the page in right-to-left Arabic; park it on the logical start side instead */
.enq input[data-hp]{left:auto!important;inset-inline-start:-9999px}
@media (max-width:860px){.nav .brand{gap:8px}.nav .brand img{width:28px;height:28px}.nav .brand span{font-size:15px}}