/* ELSEIDY — canonical design tokens. Native CSS, Elementor class mapping in handoff. */
@font-face{font-family:Plex;src:url(ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF}
@font-face{font-family:Plex;src:url(ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF}
:root{--ink:#102d43;--muted:#526575;--paper:#fff;--soft:#f1f5f7;--line:#d6e0e5;--blue:#0668b2;--blue-hover:#04558f;--navy:#092b44;--surface:#e5eff5;--on-dark:#fff;--dark-muted:#c2d2de;--radius:6px;--wrap:1240px;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
:root[data-theme=dark]{--ink:#edf5f9;--muted:#bacbd6;--paper:#0a2131;--soft:#112c3f;--line:#355062;--surface:#193b52;--blue:#6cbff8;--blue-hover:#9ad4ff;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Plex,Arial,sans-serif;font-size:16px;line-height:1.8}html{scroll-padding-top:100px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}svg{display:inline-block}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:700;text-wrap:balance}h1{font-size:clamp(38px,4.5vw,64px);line-height:1.3}h2{font-size:clamp(28px,3vw,42px);line-height:1.45}h3{font-size:23px;line-height:1.5}p{color:var(--muted)}p+p{margin-top:16px}h2+p,h3+p{margin-top:16px}ul{padding-inline-start:22px}::selection{background:#b6daf3;color:#092b44}[hidden]{display:none!important}.wrap{width:min(var(--wrap),calc(100% - 96px));margin-inline:auto}.section{padding-block:96px}.soft{background:var(--soft)}.icon{width:32px;height:32px;flex:none;vertical-align:middle}.eyebrow{font-size:13px;font-weight:700;line-height:1.6;color:var(--blue);margin-bottom:20px}.muted{color:var(--muted)}.lead{font-size:18px;max-width:55ch}.skip{position:fixed;inset-block-start:-100px;inset-inline-start:16px;background:var(--paper);padding:14px;z-index:100}.skip:focus{inset-block-start:12px}.site-header{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}.nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{flex-shrink:0}.brand img{width:128px;height:55px;object-fit:contain}.navlinks{display:flex;gap:28px;align-items:center;margin-inline-start:auto}.navlinks a{font-size:14px;white-space:nowrap;position:relative;padding-block:10px}.navlinks a::after{content:'';position:absolute;inset-inline:0;bottom:2px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .22s var(--ease)}.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1)}.navtools{display:flex;align-items:center;gap:10px}.lang,.mode,.menu{display:grid;place-items:center;min-width:44px;height:44px;padding:4px 8px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:4px;font-size:14px}.mode{font-size:20px}.menu{display:none}.navtools>.btn{font-size:13px;min-height:44px;padding:10px 16px}.navtools>.btn .icon{width:18px;height:18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:13px 24px;border:1px solid transparent;border-radius:4px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;line-height:1.5;transition:background .2s,transform .2s,box-shadow .2s}.btn .icon{width:22px;height:22px}.btn:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 8px 18px #06325017}.btn:active{transform:translateY(0)}.btn.alt{background:transparent;color:var(--ink);border-color:var(--line)}.btn.alt:hover{background:var(--surface)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.hero{padding-top:36px;background:var(--soft)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.hero-copy{padding-block:36px 48px}.hero h1{margin-bottom:24px}.hero h1 span{color:var(--blue)}.hero-visual{height:560px;min-width:0}.image-frame{position:relative;overflow:hidden;height:100%;border-radius:var(--radius);background:var(--surface);isolation:isolate}.image-frame img{width:100%;height:calc(100% + 64px);max-width:none;object-fit:cover;position:absolute;top:-32px;transform:translate3d(0,var(--parallax-y,0px),0) scale(var(--photo-scale,1.04));will-change:auto}.hero-visual img{object-position:54% 50%}.hero-foot{display:flex;gap:48px;align-items:center;border-top:1px solid var(--line);padding-block:23px;margin-top:36px;color:var(--muted);font-size:14px}.hero-foot span+span{border-inline-start:1px solid var(--line);padding-inline-start:48px}.section-head{margin-bottom:36px;max-width:760px}.section-head p.muted{margin-top:12px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.filter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 20px;min-height:44px;border-radius:4px;font-size:14px;transition:background .2s,color .2s}.filter.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.service{padding:32px;position:relative;min-width:0;background:var(--soft);border-radius:var(--radius);display:flex;flex-direction:column;gap:32px;transition:background .22s,box-shadow .22s;isolation:isolate}.service:nth-child(1),.service:nth-child(2){grid-column:span 1}.service:nth-child(1){background:var(--navy);color:#fff}.service:nth-child(1) p{color:var(--dark-muted)}.service:nth-child(1) .badge{color:#80c8fa}.service p{font-size:15px;margin-top:12px}.service :is(h2,h3){font-size:22px;line-height:1.5}.badge{color:var(--blue)}.badge .icon{width:42px;height:42px}.service-arrow{position:absolute;inset-inline-end:28px;top:28px;font-size:23px;color:var(--blue);transition:transform .22s}.service:first-child .service-arrow{color:#80c8fa}.service:hover{box-shadow:0 14px 32px #08244512;background:var(--surface)}.service:first-child:hover{background:#103b59}.service:hover .service-arrow{transform:translateY(-4px)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-visual{height:510px}.about-grid .checklist{list-style:none;padding:0;margin:24px 0;color:var(--muted)}.checklist li{padding-block:8px}.checklist li:before{content:'✓';color:var(--blue);margin-inline-end:12px}.textlink{display:inline-block;margin-top:24px;color:var(--blue);font-weight:700;border-bottom:1px solid currentColor;padding-bottom:5px}.about-panel{padding:40px;background:var(--surface)}.year{font-size:72px;line-height:1.2}.process-section{background:var(--navy);color:var(--on-dark);padding-block:100px}.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.process-intro{position:sticky;top:150px}.process-section .eyebrow{color:#80c8fa}.process-description{color:var(--dark-muted);margin-top:24px;max-width:42ch}.process-progress{height:2px;background:#ffffff25;margin-top:40px;overflow:hidden}.process-progress span{display:block;width:100%;height:100%;background:#80c8fa;transform:scaleX(var(--progress,.33));transform-origin:left;transition:transform .5s var(--ease)}[dir=rtl] .process-progress span{transform-origin:right}.steps{display:grid;gap:24px}.step{padding:44px 36px;min-height:260px;border:1px solid #ffffff24;border-radius:6px;background:#0d314b;transition:background .5s,border-color .5s}.step.is-active{background:#164b70;border-color:#6db7e4}.step .num{font-size:15px;color:#80c8fa;display:block;margin-bottom:25px}.step h3{font-size:28px}.step p{color:var(--dark-muted);max-width:45ch}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}.video{min-width:0}.video-image{height:320px;position:relative;overflow:hidden;border-radius:6px;background:var(--surface)}.video-image img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .6s var(--ease)}.video:hover img{transform:scale(1.04)}.video :is(h2,h3){font-size:21px;margin-top:22px}.video small{display:block;color:var(--muted);margin-top:10px;font-size:13px}.play{position:absolute;inset-inline-end:20px;bottom:20px;border-radius:50%;color:#fff;background:#0a2c45;width:50px;height:50px;display:grid;place-items:center;transition:background .2s,transform .2s}.play .icon{width:30px;height:30px}.video:hover .play{transform:scale(1.08);background:#0668b2}.single-video{display:block;max-width:750px}.single-video .video{display:grid;grid-template-columns:220px 1fr;column-gap:28px;align-items:end}.single-video .video-image{height:240px;grid-row:span 2}.single-video :is(h2,h3){margin-top:0}.single-video small{align-self:start}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-layout details{border-bottom:1px solid var(--line);padding:24px 0}.faq-layout details:first-child{padding-top:8px}.faq-layout summary{cursor:pointer;font-size:18px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:20px;min-height:44px;align-items:center}.faq-layout summary::-webkit-details-marker{display:none}.faq-layout summary:after{content:'+';font-size:26px;font-weight:400;color:var(--blue)}.faq-layout details[open] summary:after{content:'−'}.faq-layout details p{margin-top:16px;max-width:65ch}.cta{background:var(--navy);color:#fff;padding:56px 60px;border-radius:6px;display:flex;gap:40px;align-items:center;justify-content:space-between}.cta p{color:var(--dark-muted)}.cta h2{font-size:36px}.cta .btn{flex-shrink:0;background:#fff;color:#092b44}.footer{padding:70px 0 24px;background:#071e30;color:#fff}.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:72px}.footer .logo{width:150px;height:62px;object-fit:contain;margin-bottom:22px}.footer p,.footer a{color:#c4d1db;font-size:14px}.footer :is(h2,h3){font-size:17px;margin-bottom:24px}.footer-links{display:grid;gap:12px}.footer a:hover{color:#fff}.socials{display:flex;gap:12px;margin-top:24px}.socials a{width:44px;height:44px;border:1px solid #ffffff33;border-radius:4px;display:grid;place-items:center}.socials .icon{width:21px;height:21px}.bottom{border-top:1px solid #ffffff25;margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;gap:24px;color:#bacbd7;font-size:12px}.page-hero{background:var(--soft);padding-block:56px 64px;position:relative}.page-hero>.wrap{position:relative}.page-hero h1{max-width:900px;font-size:clamp(34px,4.2vw,56px);line-height:1.4}.page-hero p{max-width:65ch;font-size:18px;margin-top:20px}.crumbs{font-size:13px;color:var(--muted);margin-bottom:26px}.crumbs a{text-decoration:underline;text-underline-offset:4px}.service-hero{background:var(--navy);color:#fff}.service-hero p,.service-hero .crumbs{color:var(--dark-muted)}.service-hero h1,.service-hero p{max-width:75%;position:relative;z-index:1}.service-hero-art{position:absolute;inset-inline-end:30px;top:20%;color:#78bcea;opacity:.4}.service-hero-art svg{width:150px;height:150px}.detail-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:64px;align-items:start}.detail-grid h2{font-size:28px}.detail-grid article>p{margin-top:16px;max-width:70ch}.items{list-style:none;padding:0;margin:32px 0 48px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.items li{background:var(--soft);padding:22px;font-size:16px;border-inline-start:3px solid var(--blue)}.aside{position:sticky;top:116px;padding:32px;background:var(--soft);border-radius:6px}.aside>svg{width:44px;height:44px;color:var(--blue);margin-bottom:24px}.aside h3{font-size:26px}.aside .btn{margin-top:24px;width:100%;padding-inline:14px;font-size:14px}.notice{font-size:14px;color:var(--muted);border-inline-start:2px solid var(--line);padding-inline-start:20px;margin-block:32px}.preview{font-size:13px;margin-top:20px}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.related-grid a{padding:24px;border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.related-grid a:hover{background:var(--soft)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact-card{padding:36px;background:var(--soft);border-radius:6px}.contact-card>.icon{color:var(--blue);margin-bottom:24px}.contact-card h2{font-size:24px}.contact-card a{display:inline-block;min-height:44px;padding-block:5px}.legal{max-width:800px}.legal h2{font-size:26px;margin-top:40px}.error-main{padding-block:100px}.error-main .wrap{max-width:850px}.error-main p{margin-top:24px}.error-main .actions{margin-top:32px}.menu-lines,.menu-lines:before,.menu-lines:after{display:block;width:19px;height:2px;background:currentColor;position:relative}.menu-lines:before,.menu-lines:after{content:'';position:absolute}.menu-lines:before{top:-6px}.menu-lines:after{top:6px}
.process-layout>*{min-width:0}.step{overflow-wrap:anywhere}
/* Motion never controls whether content is available. IntersectionObserver starts finite animations only. */
@keyframes rise{from{opacity:.35;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes intro{from{transform:translateY(18px)}to{transform:translateY(0)}}.motion-enabled [data-reveal].seen:not(.finished){animation:rise .7s var(--ease) var(--delay,0ms) both}.motion-enabled .hero-copy>*{animation:intro .75s var(--ease) both}.motion-enabled .hero-copy>.lead{animation-delay:80ms}.motion-enabled .hero-copy>.actions{animation-delay:160ms}
[data-theme=dark] .brand img{content:url(logo-white.webp)}[data-theme=dark] .btn:not(.alt):not(.white){color:#092b44}[data-theme=dark] .service:first-child{background:#123e5b}[data-theme=dark] .service:first-child:hover{background:#194c6b}
@media(min-width:1100px){.services-grid .service:nth-last-child(-n+2){grid-column:auto}.services-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.service{padding:28px;min-height:265px}.service :is(h2,h3){font-size:21px}.service .service-arrow{inset-inline-end:22px}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.nav{gap:16px}.navlinks{gap:18px}.navtools>.btn{display:none}.hero-grid{gap:36px}.hero-visual{height:500px}.about-grid,.faq-layout{gap:40px}.process-layout{gap:56px}.detail-grid{gap:32px}.footer-grid{gap:36px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.section{padding-block:64px}.nav{height:76px}.brand img{width:112px;height:48px}.navtools{gap:8px}.menu{display:grid}.navlinks{display:none;position:absolute;top:76px;inset-inline:0;background:var(--paper);border-bottom:1px solid var(--line);padding:20px;box-shadow:0 10px 24px #102d4310;margin:0}.navlinks.open{display:grid;gap:4px}.navlinks a{padding:12px 8px;font-size:16px}.hero{padding-top:0}.hero-grid{grid-template-columns:1fr;gap:0}.hero-copy{padding-block:40px 32px}.hero h1{font-size:clamp(36px,7vw,48px);line-height:1.4}.hero .lead{font-size:16px}.hero-visual{height:340px}.hero .eyebrow{font-size:12px;margin-bottom:20px}.hero-foot{gap:12px;flex-wrap:wrap;margin-top:24px;padding-block:20px;font-size:12px}.hero-foot span+span{padding-inline-start:12px}.actions{gap:10px;margin-top:24px}.btn{padding:13px 18px;font-size:14px}.services-grid{grid-template-columns:1fr 1fr;gap:14px}.service{padding:24px;gap:24px}.service :is(h2,h3){font-size:20px}.service p{font-size:14px}.service-arrow{inset-inline-end:20px;top:20px}.badge .icon{width:34px;height:34px}.about-grid{grid-template-columns:1fr;gap:36px}.about-visual{height:340px}.process-layout{grid-template-columns:1fr;gap:36px}.process-intro{position:static}.process-intro h2{max-width:16ch}.process-progress{margin-top:24px}.step{min-height:220px;padding:32px}.step h3{font-size:25px}.video-grid{grid-template-columns:1fr;gap:36px}.video-image{height:360px}.video :is(h2,h3){margin-top:16px}.faq-layout{grid-template-columns:1fr;gap:28px}.cta{padding:36px 28px;display:block}.cta h2{font-size:29px}.cta .btn{margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr;gap:36px}.footer-grid>div:first-child{grid-column:1/-1}.bottom{flex-direction:column;gap:12px;margin-top:36px}.page-hero{padding-block:36px 44px}.page-hero p{font-size:16px}.page-hero h1{font-size:34px}.service-hero-art{display:none}.service-hero h1,.service-hero p{max-width:100%}.detail-grid{grid-template-columns:1fr;gap:32px}.aside{position:static}.items{gap:12px}.items li{padding:18px;font-size:15px}.related-grid{grid-template-columns:1fr;gap:12px}.single-video .video{grid-template-columns:150px 1fr;gap:18px}.single-video .video-image{height:190px}.single-video :is(h2,h3){font-size:19px}.contact-card{padding:26px}.contact-grid{gap:16px}.legal h2{font-size:25px}.error-main{padding-block:64px}}
@media(max-width:420px){.wrap{width:calc(100% - 32px)}.navtools{gap:6px}.brand img{width:100px}.lang,.mode,.menu{min-width:42px}.hero-visual{height:280px}.hero h1{font-size:35px}.hero-foot span{flex-basis:100%}.hero-foot span+span{border:0;padding:0}.services-grid,.items,.contact-grid{grid-template-columns:1fr}.service{min-height:210px}.video-image{height:310px}.single-video .video{display:block}.single-video .video-image{height:280px}.single-video :is(h2,h3){margin-top:18px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.filter{padding:9px 14px}.service-arrow{font-size:24px}.actions>.btn{flex:1 1 auto}.page-hero h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.image-frame img{transform:none!important}.process-progress span{transition:none}}

/* ==========================================================================
   CLIENT REVIEW LAYER - 6 Sep 2026
   Benchmark: creativezone.ae. Additive only: nothing above this line was
   rewritten, and rules here win by source order, not by specificity wars.

   Brief, in the client's words:
     - the hero must not be locked inside a box
     - the header goes navy, the logo goes white
     - drop the extra icons (the card arrows, then the badge glyphs)
     - sections should move on their own, and the reader should be able to drag
     - add testimonials that scroll by themselves
     - the office photographs lead the "about" story
     - blue and white only. No gold.
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */
:root{
  --dir:1;                     /* +1 in LTR, -1 in RTL; flips lateral motion  */
  --header-h:84px;
  --header-h-stuck:66px;
  /* Measured white-on-ground contrast at the headline was 13.07:1 - roughly
     three times what AA asks for, which meant the photograph was paying for
     bandwidth and delivering nothing. Lifted until the skyline reads, with
     contrast still checked at every step. */
  --scrim-1:#06223aab;         /* over the focal third of a banner           */
  --scrim-mid:#06223a8c;       /* the crossfade in the middle                */
  --scrim-2:#06223a1f;         /* over the far edge, where type never lands  */
}
html[dir=rtl]{--dir:-1}

/* --- 2. the header sits on the banner, it does not sit above it -----------
   Every page now opens on a dark photographic band, so the header is fixed and
   transparent on all of them and turns navy once the reader leaves the banner.
   Elementor: Theme Builder header, "Sticky" + transparent background, with a
   background colour bound to the sticky state. */
.site-header{
  position:fixed;top:0;inset-inline:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .34s var(--ease),border-color .34s var(--ease),
             backdrop-filter .34s var(--ease);
}
.site-header .nav{height:var(--header-h);transition:height .34s var(--ease)}
.site-header.is-stuck{
  background:linear-gradient(96deg,#06223af2 0%,#0b3a63f2 100%);
  border-bottom-color:#ffffff1f;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.site-header.is-stuck .nav{height:var(--header-h-stuck)}
.site-header .brand img{width:150px;height:auto;transition:width .34s var(--ease)}
.site-header.is-stuck .brand img{width:124px}

/* white type on the banner, in both header states */
.site-header .navlinks a,
.site-header .lang,
.site-header .mode,
.site-header .menu{color:#fff;border-color:#ffffff4d}
.site-header .navlinks a:hover{color:#9fd0f5}
.site-header .lang:hover,.site-header .mode:hover,.site-header .menu:hover{
  background:#ffffff1f;border-color:#ffffff8a;
}
.site-header .menu-lines,
.site-header .menu-lines::before,
.site-header .menu-lines::after{background:#fff}
.site-header .btn{background:#fff;color:#092b44;border-color:#fff}
.site-header .btn:hover{background:#dceaf7;color:#06223a}
.navlinks.open{background:#06223af7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* reading progress along the header's bottom edge - the only always-on motion
   in the top bar, and it earns its place by saying where you are */
.header-progress{
  position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:100%;
  background:linear-gradient(90deg,#4aa3e0,#9fd0f5);
  transform:scaleX(var(--p,0));transform-origin:left center;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
}
html[dir=rtl] .header-progress{transform-origin:right center}
.site-header.is-stuck .header-progress{opacity:1}

/* --- 3. full-bleed photographic bands ------------------------------------
   .band-media is the section's background, not a column in its grid. It is
   absolutely positioned and oversized so the parallax translate never exposes
   an edge. Elementor: Container background image + Background Overlay. */
.hero-full,.service-hero,.error-main{
  position:relative;isolation:isolate;overflow:hidden;
  background:#06223a;color:#fff;
}
.band-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.band-media img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center 46%;
  transform:translate3d(0,var(--parallax-y,0px),0) scale(var(--photo-scale,1.06));
}
.band-scrim{position:absolute;inset:0;display:block}
html[dir=ltr] .band-scrim{background:linear-gradient(90deg,var(--scrim-1) 0%,var(--scrim-mid) 52%,var(--scrim-2) 100%)}
html[dir=rtl] .band-scrim{background:linear-gradient(270deg,var(--scrim-1) 0%,var(--scrim-mid) 52%,var(--scrim-2) 100%)}
/* a second, vertical pass keeps the header legible over a bright sky */
.band-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,#06223aa3 0%,#06223a00 30%,#06223a00 74%,#06223a9c 100%);
}
/* The night skylines are dark and calm to begin with. The client's own office
   photographs are bright, and busy across the whole frame - signage, logos,
   small text - so there is no quiet corner for a headline to sit in. The answer
   is not a slightly heavier gradient but a genuinely dark band: the photograph
   becomes texture and place, and the type is unambiguously on top of it. */
.band-media.is-bright .band-scrim{--scrim-1:#06223af0;--scrim-mid:#06223ad4;--scrim-2:#06223a8f}
.band-media.is-bright::after{
  background:linear-gradient(180deg,#06223acc 0%,#06223a63 34%,#06223a63 70%,#06223ac9 100%);
}
.band-media.is-bright img{filter:saturate(.86)}

/* The parallax translate is a fixed 28px, but the overhang it needs comes from
   the scale, which is a percentage of the band's height. On a 400px inner-page
   banner 1.06 only buys 12px, so the translate outruns it and a navy strip can
   appear at the top edge. Short bands get a larger scale and a capped travel. */
.service-hero .band-media img,.error-main .band-media img{
  transform:translate3d(0,clamp(-20px,var(--parallax-y,0px),20px),0)
            scale(max(var(--photo-scale,1.06),1.12));
}

.hero-full>*:not(.band-media),
.service-hero>*:not(.band-media),
.error-main>*:not(.band-media){position:relative;z-index:1}

.hero-full{
  /* a column, not a row: the copy and the strip below it are stacked bands,
     and treating them as row siblings squeezed both on a phone */
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(88vh,820px);
  padding-block:calc(var(--header-h) + 66px) 0;
}
.hero-full .hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
.hero-full .hero-copy{padding-block:0;max-width:760px}
.hero-full h1{color:#fff;font-size:clamp(40px,4.6vw,68px);line-height:1.32}
.hero-full h1 span{color:#9fd0f5}
.hero-full .eyebrow{color:#9fd0f5}
.hero-full .lead{color:#d5e4f0;max-width:56ch}
.hero-full .btn.alt{background:transparent;color:#fff;border-color:#ffffff66}
.hero-full .btn.alt:hover{background:#ffffff1a;border-color:#fff}
.hero-full .hero-foot{
  border-top-color:#ffffff2e;color:#c8dced;
  margin-top:auto;padding-top:26px;
}
.hero-full .hero-foot span+span{border-inline-start-color:#ffffff2e}

.service-hero{padding-block:calc(var(--header-h) + 62px) 74px}
.service-hero .crumbs,.service-hero .crumbs a{color:#bcd3e6}
.service-hero h1{color:#fff}
.service-hero p{color:#d5e4f0;max-width:62ch}

.error-main{padding-block:calc(var(--header-h) + 90px) 110px;text-align:center}
.error-main .eyebrow{color:#9fd0f5;justify-content:center}
.error-main .actions{justify-content:center}

/* --- 4. the services rail -------------------------------------------------
   Eight cards were a static 3-column grid. They are now one row that advances
   itself and that the reader can also drag, with the reading direction doing
   the work. Elementor: Loop Carousel, autoplay + infinite loop. */
.rail{position:relative}
.services-rail{
  display:flex;gap:20px;
  grid-template-columns:none;              /* it is no longer a grid          */
  overflow-x:auto;overflow-y:hidden;
  /* no scroll-snap: the rail advances a pixel at a time, and mandatory
     snapping would fight every one of those increments back to a card edge */
  scroll-snap-type:none;
  padding-block:4px 10px;
  /* --sbw is published by the script; without it 50vw counts the scrollbar
     and the rail hands the document a few pixels of sideways scroll */
  margin-inline:calc(50% - 50vw + var(--sbw,0px)/2);   /* bleed to the edges */
  padding-inline:max(48px,calc(50vw - var(--sbw,0px)/2 - var(--wrap)/2));
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.services-rail::-webkit-scrollbar{display:none}
.services-rail.is-dragging{cursor:grabbing;scroll-behavior:auto}
.services-rail.is-dragging .service{pointer-events:none}
.services-rail:focus-visible{outline:3px solid #4aa3e0;outline-offset:4px}
.services-rail>.service{flex:0 0 clamp(260px,25vw,330px)}
.services-rail>.service[hidden]{display:none}

.rail-nav{display:flex;align-items:center;gap:16px;margin-top:28px}
.rail-btn{
  width:48px;height:48px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);font-size:26px;line-height:1;
  display:grid;place-items:center;
  transition:background .2s,border-color .2s,color .2s,opacity .2s;
}
.rail-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.rail-btn[disabled]{opacity:.3;pointer-events:none}
.rail-track{flex:1 1 auto;height:2px;background:var(--line);position:relative;overflow:hidden}
.rail-thumb{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:100%;background:var(--blue);
  transform:scaleX(var(--rail-p,.3));transform-origin:left center;
  transition:transform .18s linear;
}
html[dir=rtl] .rail-thumb{transform-origin:right center}

/* --- 5. testimonials, moving on their own --------------------------------
   Auto-advancing rail. It is a real scroll container, not a CSS transform, so
   the reader can grab it mid-flight; the JS simply stops advancing while they
   hold it. Pauses on hover and on focus, and does not auto-advance at all
   under prefers-reduced-motion. Elementor: Testimonial Carousel with autoplay. */
.testimonials .section-head{margin-bottom:40px}
.marquee{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;padding-block:6px 10px;
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);
  mask-image:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);
}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-dragging{cursor:grabbing}
.marquee:focus-visible{outline:3px solid #4aa3e0;outline-offset:4px}
.marquee-track{display:flex;gap:24px;width:max-content;padding-inline:max(48px,calc(50vw - var(--sbw,0px)/2 - var(--wrap)/2))}
.quote{
  flex:0 0 clamp(280px,26vw,380px);
  margin:0;padding:34px 32px 28px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;gap:22px;
  transition:border-color .25s,box-shadow .25s;
}
.quote:hover{border-color:#9dc2e2;box-shadow:0 14px 32px #08244514}
.quote blockquote{margin:0;font-size:17px;line-height:1.9;color:var(--ink)}
.quote blockquote::before{
  content:'\201D';display:block;
  font:700 46px/.6 Georgia,serif;color:var(--blue);opacity:.42;margin-bottom:16px;
}
html[dir=ltr] .quote blockquote::before{content:'\201C'}
.quote figcaption{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.quote figcaption strong{display:block;font-size:15px;color:var(--navy)}
.quote figcaption span{font-size:13px;color:var(--muted)}
[data-theme=dark] .quote{background:#0f2c42;border-color:#24455f}
[data-theme=dark] .quote blockquote{color:#dce8f2}
[data-theme=dark] .quote figcaption{border-top-color:#24455f}
[data-theme=dark] .quote figcaption strong{color:#fff}

/* --- 6. lateral entrances ------------------------------------------------
   The existing reveal fades and rises. These add a sideways arrival for the
   elements that sit beside something, so scrolling has a direction as well as
   a rhythm. --dir keeps it correct in Arabic. */
html.motion-enabled [data-reveal][data-slide=start]:not(.seen){
  opacity:0;transform:translate3d(calc(var(--dir) * -56px),0,0);
}
html.motion-enabled [data-reveal][data-slide=end]:not(.seen){
  opacity:0;transform:translate3d(calc(var(--dir) * 56px),0,0);
}
html.motion-enabled [data-reveal][data-slide]{
  transition:opacity .8s var(--ease) var(--delay,0ms),
             transform .9s var(--ease) var(--delay,0ms);
}
html.motion-enabled [data-reveal][data-slide].seen{opacity:1;transform:none}

/* --- 6b. the reveal values -----------------------------------------------
   Redefining the keyframe overrides the earlier one wholesale, which is the
   cleanest way to change a value without touching the rule that uses it.
   `opacity:.35` meant the fade only ever covered 65% of its range: the element
   was already a third visible when it "arrived", so it read as a flicker
   rather than an entrance. And a 0.7s quintic-out over 28px spends most of its
   time decelerating across the last few pixels - it reads as hesitation.
   Elementor: Entrance Animation "Fade In Up", Duration: Fast. */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.motion-enabled [data-reveal].seen:not(.finished){animation-duration:.55s}

/* the heading leads its own block, then the kicker, then the body */
.section-head [data-reveal]{--delay:0ms}

/* --- 7. the card index replaces the badge icon ---------------------------
   The glyphs read as phone-app icons, and `justify-content:space-between` on a
   280px card pushed a 42px icon and its title to opposite ends of a void. The
   numeral sits with the title, and the card sizes to its content.
   Elementor: a Heading widget above the title. No icon library needed. */
.services-grid .service{gap:10px;justify-content:flex-start;min-height:0}
.service-index{
  display:block;
  /* 15px numerals sat exactly where the icon had been and read as a leftover
     caption. At display size and low opacity they become a page furniture
     device instead - the editorial idiom this was reaching for. */
  font-size:64px;font-weight:700;line-height:.86;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--blue);opacity:.17;
  border:0;padding:0;margin-bottom:-6px;
}
.services-grid .service:nth-child(1) .service-index{color:#9fd0f5;opacity:.34}
.service h3{margin-top:0}
/* clones exist only to give the loop something to scroll into */
.service.is-clone{opacity:1}

/* --- 8. the office slideshow ---------------------------------------------
   Three photographs of one office stacked in the frame the parallax already
   drives, so the cross-fade costs one opacity transition and nothing else.
   Elementor: Slides, or Image Carousel with Effect: Fade + Autoplay. */
.slideshow{position:relative}
.slideshow .shot{opacity:0;transition:opacity .9s var(--ease);z-index:0}
.slideshow .shot.is-current{opacity:1;z-index:1}
.shot-dots{
  position:absolute;z-index:2;bottom:6px;inset-inline-end:12px;
  display:flex;gap:4px;
}
.shot-dot{
  width:44px;height:44px;padding:0;border:0;background:none;
  display:grid;place-items:center;cursor:pointer;   /* 44px target, 3px mark */
}
.shot-dot::before{
  content:'';display:block;width:26px;height:3px;border-radius:2px;
  background:#ffffff6b;transition:background .3s var(--ease);
}
.shot-dot:hover::before{background:#ffffffb0}
.shot-dot.is-current::before{background:#fff}
.shot-dot:focus-visible{outline:3px solid #9fd0f5;outline-offset:-6px}

/* --- 9. responsive -------------------------------------------------------- */
@media(max-width:1100px){
  .hero-full{min-height:auto;padding-block:calc(var(--header-h) + 48px) 0}
  .hero-full .hero-foot{margin-top:56px}
  .services-rail>.service{flex-basis:clamp(250px,42vw,300px)}
}
@media(max-width:760px){
  :root{--header-h:72px;--header-h-stuck:60px}
  .site-header .brand img{width:120px}
  .site-header.is-stuck .brand img{width:106px}
  .hero-full{padding-block:calc(var(--header-h) + 40px) 0}
  .hero-full .lead{font-size:16px}
  .hero-full .hero-foot{margin-top:34px}
  .service-hero{padding-block:calc(var(--header-h) + 38px) 46px}
  .error-main{padding-block:calc(var(--header-h) + 52px) 70px}
  /* one column of reading: a sideways entrance has nothing to slide past, and
     the outbound direction would widen the document */
  html.motion-enabled [data-reveal][data-slide=start]:not(.seen),
  html.motion-enabled [data-reveal][data-slide=end]:not(.seen){
    transform:translate3d(0,28px,0);
  }
  /* one column: the copy sits over the whole picture, so the scrim has to be
     vertical rather than swept to one side */
  html[dir=ltr] .band-scrim,html[dir=rtl] .band-scrim{
    background:linear-gradient(180deg,#06223ad6 0%,#06223aba 50%,#06223ae0 100%);
  }
  .hero-full h1{font-size:clamp(30px,7.6vw,42px)}
  .services-rail,.marquee-track{padding-inline:24px}
  .services-rail>.service{flex-basis:78vw}
  .quote{flex-basis:80vw;padding:28px 24px 24px}
  .rail-nav{margin-top:22px}
  .band-media img{object-position:center 50%}
}

/* --- 10. reduced motion --------------------------------------------------
   Everything this layer adds is decoration. None of it survives the query;
   the rails stay usable as ordinary scrollers and the slideshow holds on its
   first frame, with the dots still available to anyone who wants the rest. */
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header .nav,.site-header .brand img{transition:none}
  .header-progress{display:none}
  .band-media img{transform:none!important}
  .services-rail,.marquee{scroll-behavior:auto}
  .slideshow .shot{transition:none}
  html [data-reveal][data-slide]{opacity:1!important;transform:none!important;transition:none!important}
}

/* --- 11. audit round two: rhythm and targets ----------------------------- */
/* two consecutive tinted sections read as one long slab with no edge */
.section.soft + .section.soft{border-top:1px solid var(--line)}
/* one section rhythm, not 96px and 100px */
.process-section{padding-block:96px}
/* footer links measured 25px tall on a phone; 44px is the floor */
.footer-links a{display:block;padding-block:10px}
.footer-links{gap:0}
/* standalone calls to action, so the 44px floor applies to them too. Links
   that sit inside running prose are left alone: WCAG's target-size rule
   exempts inline text links, and padding them would break the paragraph. */
.textlink{display:inline-flex;align-items:center;min-height:44px}

/* --- 12. call button in the header --------------------------------------
   The theme toggle gave up its slot to the phone number: on a services site
   the number is the highest-value control in the header, and creativezone.ae
   carries theirs on every page. Number visible on the desktop, icon alone on a
   phone where the tap opens the dialler anyway.
   Elementor: Header template > Icon Box widget, link `tel:`. */
.site-header .callbtn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:8px 15px;
  border:1px solid #ffffff4d;border-radius:4px;
  color:#fff;font-size:14px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  transition:background .2s,border-color .2s;
}
.site-header .callbtn:hover{background:#ffffff1f;border-color:#ffffff8a}
.site-header .callbtn .icon{width:19px;height:19px;flex:0 0 auto}
@media(max-width:1100px){
  /* the digits go, the target stays 44px, and the tap still dials */
  .site-header .callbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .site-header .callbtn{padding:8px;min-width:44px;justify-content:center}
}

/* the header is fixed, so an in-page jump has to clear it */
html{scroll-padding-top:calc(var(--header-h) + 20px)}

/* a rail that scrolls sideways must never widen the document itself */
html{overflow-x:clip}

/* ==========================================================================
   13. مجموعة شركات الصعيدي — marquee, 9 Sep 2026
   The client's decision, taken after seeing the stepped version: the band moves
   on its own and repeats, with no arrows and no progress bar. It is therefore
   the same continuous rail as the services band in §5 — no snapping, no ends —
   and the three cards are rendered twice so the loop has something to run into.
   The approved design above this block is untouched.
   ========================================================================== */

/* --- 13.1 the card ------------------------------------------------------- */
.group-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:36px 28px 30px;
  /* light card on purpose: Tawtheeq's mark is a navy-and-red seal on white and
     disappears on a dark ground, while the other two are gold and read on both */
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.group-card:hover{
  border-color:#9dc2e2;box-shadow:0 16px 34px #08244514;transform:translateY(-3px);
}

/* The mark box is the authority; the per-logo caps are inherited data, not
   competing rules. Previously the three optical caps were written as
   `.group-card:nth-child(n) .group-mark img` — specificity (0,3,1) — which beat
   the mobile `.group-mark img` at (0,2,1) from inside its media query, because
   a media query adds no specificity. A 96x64 box was handed a 150x70 wordmark
   and the logo sat on the company name. Custom properties cannot lose that
   fight, and min(100%, …) lets the box win unconditionally. */
.group-card{--mark-w:190px;--mark-h:96px}
/* nth-child(3n+…), not nth-child(1..3): the run repeats, so the fourth card is
   Loft Line again and must inherit Loft Line's cap, not the default one. */
.group-card:nth-child(3n+1){--mark-w:150px;--mark-h:72px} /* wide wordmark */
.group-card:nth-child(3n+2){--mark-h:96px}               /* tall monogram */
.group-card:nth-child(3n+3){--mark-h:92px}               /* round seal    */
.group-mark{
  display:grid;place-items:center;
  width:100%;height:96px;overflow:hidden;margin-bottom:4px;
}
.group-mark img{
  /* A definite box plus object-fit, NOT auto size plus max-height. With
     `height:auto; max-height:96px` the grid centres the item on the size it
     would have had *before* max-height applies: Rowad's 557x600 mark is first
     laid out at 190x205, centred on 205, and only then clipped to 96 - so it
     landed 54px below its box, on top of the company name. (205-96)/2 = 54.35,
     which is exactly the offset measured. Giving the element the cap as its
     real width/height makes the size definite, so centring is correct, and
     object-fit does the letterboxing that max-height was being asked to do. */
  width:var(--mark-w);height:var(--mark-h);
  max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
}
.group-card strong{font-size:16px;color:var(--ink);line-height:1.6}
.group-field{font-size:13px;color:var(--muted)}

/* --- 13.2 the rail -------------------------------------------------------
   Same full-bleed geometry as .services-rail. --sbw is published by gutter()
   in the script; without it 50vw counts the scrollbar and the rail hands the
   document ~15px of sideways scroll at 1440. */
.group-rail{
  display:flex;gap:20px;
  overflow-x:auto;overflow-y:hidden;
  /* No scroll-snap: this rail creeps forward a pixel at a time, and mandatory
     snapping would drag every one of those increments back to a card edge. */
  scroll-snap-type:none;
  padding-block:4px 10px;
  margin-inline:calc(50% - 50vw + var(--sbw,0px)/2);
  padding-inline:max(48px,calc(50vw - var(--sbw,0px)/2 - var(--wrap)/2));
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.group-rail::-webkit-scrollbar{display:none}
.group-rail:focus-visible{outline:3px solid #4aa3e0;outline-offset:4px}
.group-rail.is-dragging{
  cursor:grabbing;scroll-behavior:auto;
}
.group-rail.is-dragging .group-card{pointer-events:none}
/* The upper bound is not only taste. The wrap distance is one run of three
   cards; the rail must have at least that much scrolling range to reach it, and
   range - period = 2*padding + 3*card + 2*gap - viewport. Wider cards buy more
   headroom, narrower ones spend it - at 420px a 1920 desktop had only 60px in
   hand, which a scrollbar would have eaten. 460px leaves 180px. */
.group-rail>.group-card{
  flex:0 0 clamp(268px,36vw,460px);
}

/* --- 13.3 the company's own mark, on its banner ---------------------------
   It used to sit in the sidebar — below the fold on desktop and at y=1173 on a
   phone, so the reader passed the entire body before learning whose page this
   was. On the banner it answers that question before the headline does. */
.company-hero-mark{
  display:block;width:auto;height:auto;
  max-width:230px;max-height:104px;object-fit:contain;
  margin-bottom:22px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.service-hero .crumbs{margin-bottom:20px}

/* the sidebar is purely the action card */
.company-aside .notice{margin:0 0 20px;text-align:start}
.company-aside .btn{width:100%;margin-bottom:10px}
.company-aside .btn:last-of-type{margin-bottom:0}
.mini-contact{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}

/* --- 13.4 the facts strip ------------------------------------------------
   Three facts per company, every one stated in that company's own brochure. */
.company-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line);
}
.company-facts>div{padding-inline-end:22px}
.company-facts>div+div{padding-inline-start:22px;border-inline-start:1px solid var(--line)}
.company-facts dt{font-size:12px;letter-spacing:.06em;color:var(--blue);margin-bottom:6px}
.company-facts dd{margin:0;font-size:14px;line-height:1.75;color:var(--ink)}

/* --- 13.5 responsive ------------------------------------------------------ */
@media(max-width:1100px){
  .group-rail{gap:16px}
  .group-card{padding:30px 20px 26px}
}
@media(max-width:760px){
  .group-rail{
    gap:14px;
    padding-inline:24px;
  }
  .group-rail>.group-card{flex:0 0 calc(100vw - 110px)}
  .company-hero-mark{max-width:180px;max-height:80px;margin-bottom:18px}
  /* three columns of Arabic at 390px leaves two words a line */
  .company-facts{grid-template-columns:1fr;gap:0;margin-top:26px;padding-top:20px}
  .company-facts>div{padding:0 0 14px}
  .company-facts>div+div{padding:14px 0 0;border-inline-start:0;border-top:1px solid var(--line)}
}

/* --- 13.6 reduced motion --------------------------------------------------
   Snapping is a landing position, not an animation, so it stays: with
   scroll-behavior auto it produces no movement of its own. What goes is the
   autoplay (refused in the script) and the smooth interpolation. */
@media(prefers-reduced-motion:reduce){
  .group-rail{scroll-behavior:auto}
  /* the drift is refused in the script; what is left is a plain scroller */
}