/*
 * SAEB — the site stylesheet.
 *
 * Everything is scoped under .saeb-site, body.saeb-body or a saeb- class:
 * the theme styles its own markup and nothing else, so plugin forms,
 * WooCommerce screens and page-builder output are left exactly as they are.
 *
 * Assembled from the approved static build by tools/css.py.
 */

/* ---------- reset and page frame ---------- */
.saeb-site,.saeb-site *,.saeb-site *::before,.saeb-site *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.saeb-body{margin:0;background:#000;color:#F2F1EC;font-family:Archivo,'IBM Plex Sans Arabic',system-ui,sans-serif;font-synthesis-weight:none;overflow-x:hidden;text-wrap:pretty}
.saeb-site a{color:inherit;text-decoration:none;transition:color .3s cubic-bezier(.16,1,.3,1)}
.saeb-site a:hover{color:var(--saeb-accent)}
.saeb-site ::selection{background:var(--saeb-accent);color:#000}
.saeb-site h1,.saeb-site h2,.saeb-site h3,.saeb-site h4,.saeb-site p,.saeb-site figure,.saeb-site blockquote{margin:0}
.saeb-site .saeb-btn{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
@keyframes saebMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes saebSpin{to{transform:rotate(360deg)}}
@keyframes saebPulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes saebConverge{0%{transform:scale(2.6) rotate(-24deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes saebScan{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(300%,0,0)}}
@media (prefers-reduced-motion:reduce){.saeb-site,.saeb-site *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.saeb-body::-webkit-scrollbar,body.saeb-body ::-webkit-scrollbar{width:9px;height:9px}
body.saeb-body::-webkit-scrollbar-track,body.saeb-body ::-webkit-scrollbar-track{background:#000}
body.saeb-body::-webkit-scrollbar-thumb,body.saeb-body ::-webkit-scrollbar-thumb{background:#2a2a2a}
body.saeb-body::-webkit-scrollbar-thumb:hover,body.saeb-body ::-webkit-scrollbar-thumb:hover{background:var(--saeb-accent)}

/* ---------- components carried over from the design ---------- */
/* --- language visibility, used by the ported Source & ship markup --- */
.saeb-site .saeb-en{display:inline}
.saeb-site .saeb-ar{display:none}
html.saeb-lang-ar .saeb-site .saeb-en{display:none}
html.saeb-lang-ar .saeb-site .saeb-ar{display:inline}
.saeb-site .saeb-en.saeb-block{display:block}
.saeb-site .saeb-ar.saeb-block{display:none}
html.saeb-lang-ar .saeb-site .saeb-en.saeb-block{display:none}
html.saeb-lang-ar .saeb-site .saeb-ar.saeb-block{display:block}

/* --- keep LTR contact strings from being re-ordered inside RTL text --- */
.saeb-site a[href^="tel:"],.saeb-site a[href^="mailto:"]{display:inline-block;direction:ltr;unicode-bidi:isolate}

/* --- 05 source & ship --- */
.saeb-ds-rail{position:absolute;top:5px;inset-inline:0;height:1px;background:rgba(242,241,236,.16)}
.saeb-ds-rail-fill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--saeb-accent);transition:width 1.9s cubic-bezier(.16,1,.3,1)}
.saeb-ds-node{position:relative;padding-top:26px;opacity:.42;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.saeb-ds-node[data-lit]{opacity:1}
.saeb-ds-dot{position:absolute;top:0;width:11px;height:11px;border-radius:50%;background:#151515;border:1px solid rgba(242,241,236,.28);transition:background .5s,border-color .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.saeb-ds-node[data-lit] .saeb-ds-dot{background:var(--saeb-accent);border-color:var(--saeb-accent);transform:scale(1.3)}
@media (max-width:700px){.saeb-ds-rail{display:none}.saeb-ds-node{padding-top:22px}}
.saeb-ds-bill{background:#F2F1EC;color:#000;border:1px solid rgba(242,241,236,.16);box-shadow:0 30px 70px -40px rgba(var(--saeb-accent-rgb),.5)}
.saeb-ds-bar{display:block;height:100%;width:0;background:var(--saeb-accent);transition:width .85s cubic-bezier(.16,1,.3,1)}
.saeb-ds-row{opacity:.34;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
.saeb-ds-row[data-lit]{opacity:1}
.saeb-ds-tick{width:9px;height:9px;margin-top:5px;border-radius:50%;border:1px solid rgba(0,0,0,.32);flex-shrink:0;transition:background .45s,border-color .45s}
.saeb-ds-row[data-lit] .saeb-ds-tick{background:var(--saeb-accent);border-color:var(--saeb-accent)}
.saeb-ds-meta{display:block;direction:ltr;text-align:left}
html.saeb-lang-ar .saeb-ds-meta{text-align:right}
.saeb-ds-live{width:7px;height:7px;border-radius:50%;background:var(--saeb-accent);animation:saebPulse 1.7s ease-in-out infinite}
.saeb-ds-perf{border-top:1px dashed rgba(0,0,0,.3)}
.saeb-ds-barcode{width:88px;height:26px;background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px,#000 4px 5px,transparent 5px 8px,#000 8px 11px,transparent 11px 13px)}

/* --- 04 portfolio gateway --- */
.saeb-pf-plate{background:#000;color:#F2F1EC;aspect-ratio:16/7;min-height:320px;transition:background .55s cubic-bezier(.16,1,.3,1),color .55s cubic-bezier(.16,1,.3,1)}
.saeb-pf-plate:hover{background:var(--saeb-accent);color:#000}
.saeb-pf-row{position:absolute;inset-inline-start:0;display:flex;width:max-content;white-space:nowrap;font-family:var(--saeb-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(38px,6.8vw,112px);color:transparent;-webkit-text-stroke:1px rgba(242,241,236,.2);pointer-events:none;will-change:transform;transition:-webkit-text-stroke-color .55s}
.saeb-pf-row-a{top:6%;animation:saebMarquee 38s linear infinite}
.saeb-pf-row-b{bottom:6%;animation:saebMarquee 54s linear infinite reverse;-webkit-text-stroke-color:rgba(242,241,236,.11)}
.saeb-pf-plate:hover .saeb-pf-row-a{-webkit-text-stroke-color:rgba(0,0,0,.34)}
.saeb-pf-plate:hover .saeb-pf-row-b{-webkit-text-stroke-color:rgba(0,0,0,.2)}
.saeb-pf-veil{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.1) 100%);pointer-events:none;transition:opacity .55s}
.saeb-pf-plate:hover .saeb-pf-veil{opacity:0}
.saeb-pf-scan{position:absolute;top:0;inset-inline-start:0;width:34%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--saeb-accent-rgb),.18),transparent);animation:saebScan 6.5s cubic-bezier(.16,1,.3,1) infinite;pointer-events:none;transition:opacity .4s}
.saeb-pf-plate:hover .saeb-pf-scan{opacity:0}
.saeb-pf-mark{display:block;color:var(--saeb-accent);transition:color .55s,transform 1.1s cubic-bezier(.16,1,.3,1)}
.saeb-pf-plate:hover .saeb-pf-mark{color:#000;transform:rotate(180deg)}
.saeb-pf-arrow{display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.saeb-pf-plate:hover .saeb-pf-arrow{transform:translate(.18em,-.18em)}
@media (max-width:680px){.saeb-pf-plate{aspect-ratio:4/5;min-height:0}.saeb-pf-row{font-size:clamp(30px,9vw,54px)}}

.saeb-site{min-height:100vh}
.saeb-noscript{display:block;padding:40px;font-family:Archivo,system-ui,sans-serif}

/* ---------- hover states lifted out of style-hover attributes ---------- */
.saeb-site .saeb-h1:hover{opacity:.55 !important;transform:translateX(16px) !important}
.saeb-site .saeb-h2:hover{border-color:#F2F1EC !important;background:rgba(242,241,236,.06) !important}
.saeb-site .saeb-h3:hover{color:#F2F1EC !important}
.saeb-site .saeb-h4:hover{background:var(--saeb-accent) !important;color:#000 !important;padding-inline-start:clamp(16px,2.6vw,40px) !important}
.saeb-site .saeb-h5:hover{background:#0d0d0d !important}
.saeb-site .saeb-h6:hover{background:var(--saeb-accent) !important;color:#000 !important}

/* --- the language switch, painted by state rather than by binding --- */
.saeb-site .saeb-langbtn-en{background:#F2F1EC;color:#000}
.saeb-site .saeb-langbtn-ar{background:transparent;color:rgba(242,241,236,.7)}
html.saeb-lang-ar .saeb-site .saeb-langbtn-en{background:transparent;color:rgba(242,241,236,.7)}
html.saeb-lang-ar .saeb-site .saeb-langbtn-ar{background:#F2F1EC;color:#000}

/* --- keyboard entry, ahead of the fixed header --- */
.saeb-skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--saeb-accent);color:#000;padding:12px 18px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.saeb-skip:focus{left:12px;top:12px}
.saeb-site :focus-visible{outline:2px solid var(--saeb-accent);outline-offset:3px}