@charset "UTF-8";
:root{--ink:#0d0e0d;--soft:#f5f6f3;--card:#fff;--lime:#b8d433;--green:#48b071;--grow:#48b071;--teal:#00b195;--gray:#666e69;--line:#e6e7e2;--font:'DM Sans',Arial,sans-serif;--display:'Anton','Impact','Arial Narrow',sans-serif;
  /* Arabic: Kufi, then the device font sized like Kufi while it loads (fonts.css) */
  --kufi:'Noto Kufi Arabic','Kufi Fallback','Kufi Fallback iOS','Kufi Fallback Android','DM Sans',Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
/* Brand arrow (the Groweve mark) used in place of ↗. It takes the colour of the text around it and scales with its font size. */
.gw-arrow{display:inline-block;flex:none;width:1.15em;height:.77em;vertical-align:-.04em;background:currentColor;-webkit-mask:url(assets/brand/symbol.svg) center/contain no-repeat;mask:url(assets/brand/symbol.svg) center/contain no-repeat;transition:transform .25s}
.btn-dark .gw-arrow,.btn-outline .gw-arrow,.top-contact .gw-arrow{font-size:18px}
.action-dot .gw-arrow{font-size:16px}
:is(.btn-dark,.btn-outline,.top-contact,.primary-btn,.profile-pop,.book-wa,.bc-submit,.e-hey,.dialog-primary,.side-link):hover .gw-arrow{transform:translate(2px,-2px)}
/* Highlighted text uses the brand lime; on lime surfaces it flips to dark so the selection stays visible. */
::selection{background:var(--lime);color:#0d0e0d;-webkit-text-fill-color:#0d0e0d}
:is(.primary-btn.lime,.btn-lime,.work-all,.team-cta,.dialog-primary,.mega-foot button,.panel-cta,.lc-back,.s-seo,.s-auto,.e-reply) ::selection{background:#0d0e0d;color:var(--lime);-webkit-text-fill-color:var(--lime)}
html{scroll-behavior:smooth;scroll-padding-top:40px;overflow-x:clip;cursor:url(assets/brand/cursor.svg) 24 1,auto}
a,button,select,label,[role=button],summary{cursor:url(assets/brand/cursor-hover.svg) 24 1,pointer}
input,textarea{cursor:text}
body{margin:0;background:#f7f7f5;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.dialog-open{overflow:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #158b50;outline-offset:4px}
button:disabled{opacity:.5;cursor:not-allowed}
.skip-link{position:absolute;top:-70px;left:20px;z-index:100;background:#121312;color:white;padding:12px 20px;border-radius:7px}.skip-link:focus{top:15px}
.content-width{width:min(100% - 88px,1440px);margin-inline:auto}
svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.fill{fill:currentColor;stroke:none}

/* ---------- 01 · Hero ---------- */
.hero{position:relative;background:#f7f7f5;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 45% 40% at 50% 42%,#ffffff 0,transparent 70%)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding-top:28px;position:relative;z-index:5}
.brand{display:inline-flex;align-items:center}.brand img{display:block;height:44px;width:auto}

.topbar-right{display:flex;align-items:center;gap:10px}
.top-lang{border:1px solid #d9ddd8;background:#fff;border-radius:50px;padding:13px 16px;font-size:12px;font-weight:800;letter-spacing:.04em;transition:background .2s,border-color .2s}
.top-lang:hover{border-color:#101310}
.top-contact{display:inline-flex;align-items:center;gap:14px;background:#0d0e0d;color:#fff;border-radius:60px;padding:15px 22px;padding-inline:26px 22px;font-weight:700;font-size:15px;transition:transform .2s,background .2s}
.top-contact svg{width:17px;height:17px;stroke-width:2.4}
.top-contact:hover{transform:translateY(-2px)}

.hero-stage{position:relative;flex:1;display:grid;place-items:center;padding:18px 0 30px}
.hero-content{position:relative;z-index:2;text-align:center;max-width:980px;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;max-width:100%;text-wrap:balance;line-height:1.45;background:#fff;border:1px solid #e6e8e4;box-shadow:0 6px 20px #10201510;padding:11px 18px;border-radius:100px;font-size:14px;font-weight:500;color:#262c28}
.eyebrow-sep{color:#8d958f}
@keyframes pulse{50%{box-shadow:0 0 0 7px #2fc87110}}
.hero-slogan{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.93;letter-spacing:-.005em;margin:26px 0 26px;font-size:clamp(64px,min(9.4vw,12vh),152px)}
.h-line{display:block;white-space:nowrap}
.h-green{background:linear-gradient(90deg,#00b195 0%,#48b071 40%,#a3c22b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Hero headline split into letters for the hover zoom (script.js). The gradient line gives each letter its own
   slice of the gradient (--lw line width, --lx letter offset) so the colour sweep stays continuous while letters move. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#heroSlogan .hl{display:inline-block;transform-origin:50% 100%;will-change:transform}
#heroSlogan.is-split .h-green{background:none}
#heroSlogan.is-split .h-green .hl{background:linear-gradient(90deg,#00b195 0%,#48b071 40%,#a3c22b 100%);background-size:var(--lw,100%) 100%;background-position:calc(var(--lx,0px) * -1) 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-description{font-size:clamp(15px,1.3vw,19px);line-height:1.55;color:#5d6560;margin:0 auto;max-width:560px;text-wrap:pretty}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.under-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:#7d857f}
.profile-chip{position:relative;display:inline-flex;align-items:center;gap:12px;padding:7px 14px 7px 7px;border:1.5px solid #48b071;border-radius:60px;background:linear-gradient(120deg,#effbe1,#dff3cf);color:#0d1f10;text-align:start;overflow:hidden;box-shadow:0 8px 22px #48b07126;transition:transform .25s,box-shadow .25s,background .3s}
.profile-chip::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-20deg);animation:chipShine 3.6s ease-in-out infinite}
@keyframes chipShine{0%,55%{left:-40%}100%{left:130%}}
.profile-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0d0e0d;color:var(--lime);flex:none}
.profile-ico svg{width:18px;height:18px;stroke-width:2}
.profile-text{display:flex;flex-direction:column;line-height:1.15}
.profile-text b{font-size:13px;font-weight:800}
.profile-text small{font-size:10px;font-weight:600;color:#5f7d63}
.profile-arrow{font-size:16px;font-weight:800;color:#1f9a5c;transition:transform .25s}
.profile-chip:hover{transform:translateY(-2px);box-shadow:0 14px 30px #48b07140;background:linear-gradient(120deg,#e6f8d4,#cfeeb6)}
.profile-chip:hover .profile-arrow{transform:translate(2px,-2px)}
.btn-dark,.btn-outline{display:inline-flex;align-items:center;gap:16px;border-radius:60px;padding:17px 30px;padding-inline:34px 30px;font-size:16px;font-weight:700;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn-dark svg,.btn-outline svg{width:17px;height:17px;stroke-width:2.4;transition:transform .25s}
.btn-dark{background:#0d0e0d;color:#fff;border:1.5px solid #0d0e0d}
.btn-outline{background:transparent;color:#0d0e0d;border:1.5px solid #0d0e0d}
.btn-dark:hover,.btn-outline:hover{transform:translateY(-3px);box-shadow:0 14px 30px #0b19111f}
/* Dark buttons turn lime with a soft lime glow on hover, like the "View all" button in Our Work. */
.btn-dark:hover,.top-contact:hover{background:var(--lime);border-color:var(--lime);color:#0d0e0d;transform:translateY(-2px) scale(1.04);box-shadow:0 0 44px #b8d43380}
.btn-dark.magnetic,.top-contact.magnetic{transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .25s,box-shadow .25s,background-color .25s,border-color .25s,color .25s!important}
.btn-dark:hover svg,.btn-outline:hover svg{transform:translate(2px,-2px)}
/* Button icons: a calendar for booking, a down arrow for jumping to the work below */
.btn-dark svg,.btn-outline svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;width:19px;height:19px;stroke-width:2.2}
.btn-dark:hover .ico-cal{transform:rotate(-8deg) scale(1.08)}
.btn-outline:hover .ico-down{transform:translateY(3px)}
.top-contact .ico-chat{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.top-contact:hover .ico-chat{transform:translateY(-2px) rotate(-6deg)}
/* "See Our Work" and "Company Profile": on hover, lime fills the button from the bottom up, like the service rows.
   clip-path (not overflow:hidden) so the Company Profile tooltip above the button isn't cut off. */
.btn-outline,.profile-pop{position:relative;isolation:isolate}
.btn-outline::before,.profile-pop::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--lime);clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
.btn-outline:hover::before,.btn-outline:focus-visible::before,.profile-pop:hover::before,.profile-pop:focus-visible::before{clip-path:inset(0 0 0 0)}
.btn-outline:hover{background:transparent;color:#0d0e0d}

/* Floating stickers */
.sticker{position:absolute;z-index:3;pointer-events:none;user-select:none;--rx:0px;--ry:0px;--dx:0px;--dy:0px}
.sticker-body{display:inline-flex;align-items:center;gap:14px;padding:18px 26px;border-radius:22px;font-weight:800;font-size:clamp(15px,1.4vw,20px);line-height:1.1;letter-spacing:-.01em;color:#0d0e0d;box-shadow:0 14px 34px #10201518,0 2px 0 #fff inset;transform:translate(calc(var(--rx) + var(--dx)),calc(var(--ry) + var(--dy))) rotate(var(--rot));transition:transform .4s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.8,.2,1),rotate .3s cubic-bezier(.3,1.6,.5,1),scale .3s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;pointer-events:auto;cursor:grab;touch-action:none}
/* Hover matches the "Let's grow" button: the sticker tips the other way and pops, while script.js pulls it toward the cursor. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){.sticker-body:hover{box-shadow:0 20px 40px #10201526,0 2px 0 #fff inset;rotate:calc(var(--rot) * -1.5);scale:1.08}}
.sticker.dragging .sticker-body{cursor:grabbing;transition:box-shadow .25s;scale:1.08;box-shadow:0 26px 50px #10201533,0 2px 0 #fff inset}
.sticker.boing .sticker-body{animation:boing .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes boing{0%{scale:1}25%{scale:1.18;rotate:-10deg}50%{scale:.94;rotate:8deg}75%{scale:1.05;rotate:-3deg}100%{scale:1;rotate:0deg}}
.sticker-body svg{width:30px;height:30px;stroke-width:3;flex:none}
.sticker-body b{font-weight:800}
.s-seo{top:14%;left:5%;--rot:-16deg;animation:bob 6s ease-in-out infinite}
.s-seo .sticker-body{background:linear-gradient(120deg,#dcec96,#c5dd52)}
.s-lead{top:19%;right:6%;--rot:12deg;animation:bob 7s ease-in-out -2s infinite}
.s-lead .sticker-body{background:#fff}
.s-web{bottom:24%;left:5.5%;--rot:-12deg;animation:bob 6.5s ease-in-out -1s infinite}
.s-web .sticker-body{background:#fff}
.s-auto{bottom:27%;right:5%;--rot:14deg;animation:bob 7.5s ease-in-out -3s infinite}
.s-auto .sticker-body{background:linear-gradient(120deg,#dcec96,#c5dd52)}
@keyframes bob{50%{translate:0 -10px}}
.spark{position:absolute;width:30px;height:30px}
.spark::before,.spark::after{content:"";position:absolute;width:3px;height:14px;border-radius:3px;background:currentColor}
.spark-a{top:-34px;left:46px;color:#151515}.spark-a::before{transform:rotate(-35deg);left:4px}.spark-a::after{transform:rotate(10deg);left:18px;top:-4px}
.spark-b{top:-22px;right:-30px;color:#48b071}.spark-b::before{transform:rotate(30deg)}.spark-b::after{transform:rotate(70deg);left:14px;top:10px}
.spark-c{top:-32px;left:-14px;color:#48b071}.spark-c::before{transform:rotate(-30deg);left:12px}.spark-c::after{transform:rotate(-70deg);top:14px}
.squiggle{position:absolute;top:-58px;left:56px;width:56px;height:46px;stroke:#151515;stroke-width:2.4}

/* ---------- 02 · Brands strip ---------- */
.brands{position:relative;z-index:2;padding:0 0 48px}
.brands-label{display:flex;align-items:center;gap:18px;max-width:820px}
.brands-label span{flex:1;height:1px;background:#dfe2dd}
.brands-label h2{margin:0;font-size:13px;font-weight:500;color:#8a918c;letter-spacing:.01em;white-space:nowrap}
.marquee{position:relative;direction:ltr;margin-top:28px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(40px,6vw,96px);width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.client-logo{border:0;background:none;padding:6px 4px;display:grid;place-items:center;flex:none;border-radius:10px}
.client-logo img{display:block;height:var(--h,40px);width:auto;filter:grayscale(1) contrast(.9);opacity:.5;mix-blend-mode:multiply;transition:filter .3s,opacity .3s,transform .3s}
.client-logo:is(:hover,:focus-visible,.active) img{filter:none;opacity:1;transform:scale(1.06)}
.client-logo.tjs{--h:58px}.client-logo.taylors{--h:38px}.client-logo.apu{--h:34px}.client-logo.sunway{--h:44px}.client-logo.jamra{--h:62px}.client-logo.darna{--h:50px}.client-logo.sanad{--h:60px}.client-logo.nadiva{--h:48px}

/* ---------- Bottom dock navigation ---------- */
.dock{position:fixed;left:50%;bottom:22px;z-index:40;transform:translate(-50%,140%);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility .3s}
.dock.visible{transform:translate(-50%,0);opacity:1;visibility:visible}
/* Liquid glass: a dark green tint over a blurred, saturated backdrop, with a light sheen and edge highlights. */
.dock-bar{display:flex;align-items:center;gap:4px;background:linear-gradient(135deg,#ffffff24,#ffffff08 45%,#ffffff12),#0c120e99;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid #ffffff2e;border-radius:100px;padding:8px;box-shadow:0 18px 50px #0b100b40,0 1px 0 #ffffff40 inset,0 -1px 0 #ffffff14 inset,0 0 0 .5px #00000026;color:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dock-bar{background:#0b0c0be6}}
.dock-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;margin-right:6px;flex:none}.dock-logo img{width:27px;height:auto;margin:2px 0 0 -1px}

.dock-links{display:flex;align-items:center;gap:2px}
.dock-link{display:inline-flex;align-items:center;gap:10px;border:0;background:none;color:#fff;padding:13px 20px;border-radius:100px;font-size:15px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}
.dock-link svg{width:22px;height:22px;stroke-width:1.7}
.dock-link:hover,.dock-link[aria-expanded=true],.dock-link.current{background:#ffffff1a;box-shadow:0 1px 0 #ffffff1f inset;color:var(--lime)}
.dock-lang{display:inline-grid;place-items:center;border:1px solid #ffffff2e;background:#ffffff14;color:#fff;border-radius:50px;height:46px;min-width:50px;padding:0 14px;font-size:12px;font-weight:800;letter-spacing:.06em;margin-left:6px;transition:background .2s,color .2s}
.dock-lang:hover{background:var(--lime);color:#0b0c0b;border-color:var(--lime)}
.dock-lang[lang=ar]{font:700 17px/1 'Kufi Label',var(--kufi);letter-spacing:0;padding-bottom:3px}
/* Language change: the default cross-fade is replaced by the circular reveal driven from script.js. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
/* Top-bar language switch: EN and ع side by side; a dark thumb slides under the active one. Always laid out left-to-right. */
.top-lang.lang-switch{position:relative;direction:ltr;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;width:92px;height:44px;padding:4px;font-size:12px;letter-spacing:.04em}
.ls-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:50px;background:#0d0e0d;box-shadow:0 4px 10px #0b19112b;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
html[lang=ar] .lang-switch .ls-thumb{transform:translateX(100%)}
.ls-opt{position:relative;z-index:1;text-align:center;font-weight:800;color:#7b847d;transition:color .3s}
.ls-opt[lang=ar]{font:700 15px/1 'Kufi Label',var(--kufi);padding-bottom:2px}
html[lang=en] .lang-switch .ls-opt[lang=en],html[lang=ar] .lang-switch .ls-opt[lang=ar]{color:var(--lime)}
.lang-switch:hover .ls-opt{color:#0d0e0d}html[lang=en] .lang-switch:hover .ls-opt[lang=en],html[lang=ar] .lang-switch:hover .ls-opt[lang=ar]{color:var(--lime)}
@media(max-width:650px){.top-lang.lang-switch{width:80px;height:40px;padding:3px;font-size:11px}.ls-thumb{top:3px;bottom:3px;left:3px;width:calc(50% - 3px)}}
.dock-menu{display:none}
.mega-menu{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);width:min(790px,calc(100vw - 36px));background:#fff;border:1px solid #edf0e9;border-radius:24px;color:#101410;padding:26px 30px 18px;box-shadow:0 25px 90px #0004;transform-origin:bottom center;animation:popUp .25s cubic-bezier(.2,.8,.2,1)}
@keyframes popUp{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.98)}}
.mega-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:15px;border-bottom:1px solid #eff0ec}
.mega-head span:first-child{font-size:10px;letter-spacing:.14em;color:#178950;font-weight:900}
.mega-head span:last-child{font-size:11px;color:#818b82}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 36px;padding:22px 0 20px}
.mega-group h3{font-size:11px;color:#148750;letter-spacing:.12em;margin:0 0 10px;font-weight:900}
.mega-group button{display:block;width:100%;border:0;background:none;text-align:start;padding:5px 0;font-size:13px;font-weight:700;color:#303730;line-height:1.5}
.mega-group button:hover{color:#118b4e;text-decoration:underline;text-underline-offset:3px}
.mega-foot{border-top:1px solid #eaece6;padding-top:15px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#838b82;font-size:11px}
.mega-foot button{background:var(--lime);color:#172019;border:0;padding:10px 16px;border-radius:50px;font-weight:900;font-size:11px}
.mobile-nav-panel{display:none}

/* ---------- Side tab (right edge) ---------- */
.side-tab{position:fixed;right:0;top:50%;z-index:45;translate:0 -50%}
.side-tab-btn{display:flex;flex-direction:column;align-items:center;gap:26px;width:46px;padding:16px 0 20px;border:0;border-radius:12px 0 0 12px;background:#0b0c0b;color:#fff;box-shadow:-8px 10px 30px #0b100b33;transition:width .3s cubic-bezier(.2,.8,.2,1),background .3s}
.side-tab-btn img{width:28px;height:auto;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.side-tab-btn span{writing-mode:vertical-rl;rotate:180deg;font-size:12px;font-weight:800;letter-spacing:.08em}
.side-tab-btn:hover,.side-tab-btn[aria-expanded=true]{width:52px}
.side-tab-btn:hover img,.side-tab-btn[aria-expanded=true] img{transform:rotate(-12deg) scale(1.12)}
.side-tab-btn[aria-expanded=true]{background:#151a16}
.side-pop{position:absolute;right:calc(100% + 12px);top:50%;translate:0 -50%;width:220px;background:#fff;border:1px solid #e6e8e3;border-radius:20px;padding:12px;box-shadow:0 24px 60px #0b19112e;animation:sidePop .3s cubic-bezier(.2,.8,.2,1)}
.side-pop[hidden]{display:none}
@keyframes sidePop{from{opacity:0;transform:translateX(10px) scale(.96)}}
.side-pop-head{display:block;padding:6px 10px 10px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#1f9a5c}
.side-link{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;font-size:14px;font-weight:700;color:#141714;cursor:pointer;transition:background .2s,color .2s}
.side-link svg{width:22px;height:22px;stroke-width:1.8;flex:none}
.side-link svg .dot{fill:currentColor}
.side-link i{margin-inline-start:auto;font-style:normal;color:#9aa19c;transition:transform .2s,color .2s}
.side-link:hover{background:#0b0c0b;color:#fff}
.side-link:hover i{color:var(--lime);transform:translate(2px,-2px)}
html[dir=rtl] .side-tab{right:auto;left:0}
html[dir=rtl] .side-tab-btn{border-radius:0 12px 12px 0}
html[dir=rtl] .side-pop{right:auto;left:calc(100% + 12px)}
@media(max-width:650px){.side-tab-btn{width:38px;gap:18px;padding:12px 0 14px}.side-tab-btn img{width:22px}.side-tab-btn span{font-size:10px}.side-tab-btn:hover,.side-tab-btn[aria-expanded=true]{width:40px}.side-pop{width:200px}}

/* ---------- Shared components used by sections 03–11 ---------- */
.section-counter{display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.13em;color:#738076}
.counter-line{width:35px;height:1px;background:#cfd9d0}
.primary-btn,.secondary-btn{border-radius:50px;display:inline-flex;gap:18px;align-items:center;justify-content:center;white-space:nowrap;min-height:53px;font-size:13px;font-weight:800;transition:transform .2s,box-shadow .2s}
.primary-btn{padding:7px;padding-inline-start:26px;background:#101310;color:white;border:1px solid #101310;box-shadow:0 10px 30px #0b19111a}
.secondary-btn{padding:16px 27px;background:#f9faf7;color:#111;border:1px solid #ced4ce}.secondary-btn span:last-child{color:#168755;font-size:19px}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px #0b191126}
.action-dot{display:grid;place-items:center;width:39px;height:39px;background:var(--lime);color:#111;font-size:23px;border-radius:50%;line-height:1}
.footer-logo img{display:block;height:46px;width:auto}

/* ---------- Dialog & toast ---------- */
.info-dialog{position:fixed;border:1px solid #d9e4da;border-radius:23px;padding:38px;width:min(440px,calc(100vw - 32px));box-shadow:0 30px 130px #06100a70;max-height:85vh;color:#111;margin:auto;background:#fff}
.info-dialog::backdrop{background:#07160fc7;backdrop-filter:blur(5px)}
.dialog-x{position:absolute;right:18px;top:14px;background:#f0f2ee;border:0;width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1}
.dialog-kicker{color:#14804b;font-size:10px;font-weight:900;letter-spacing:.14em}
.info-dialog h2{font-size:30px;letter-spacing:-.055em;margin:15px 0 10px}
.info-dialog p{font-size:14px;color:#677169;line-height:1.65}
.dialog-primary{border:0;border-radius:40px;color:#0b0e0a;background:var(--lime);padding:13px 22px;font-weight:900}
.dialog-actions{margin-top:24px}
.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,22px);opacity:0;pointer-events:none;background:#111;color:white;padding:14px 20px;border-radius:60px;font-size:12px;font-weight:700;box-shadow:0 10px 60px #0007;transition:.3s;z-index:80;text-align:center;width:max-content;max-width:calc(100vw - 36px)}
.toast.visible{transform:translate(-50%,0);opacity:1}

/* ---------- Arabic ---------- */
html[lang=ar] .hero-slogan{font-family:var(--kufi);font-weight:900;line-height:1.25;font-size:clamp(46px,7vw,112px)}
html[lang=ar] body{font-family:var(--kufi)}
html[dir=rtl] .dock-logo{margin-right:0;margin-left:6px}
html[dir=rtl] .dock-lang{margin-left:0;margin-right:6px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
 .sticker-body{padding:14px 20px;gap:10px}.sticker-body svg{width:24px;height:24px}
 .s-seo{left:1%;top:10%}.s-lead{right:1%;top:14%}.s-web{left:1%;bottom:20%}.s-auto{right:1%;bottom:22%}
 .dock-link{padding:12px 14px;font-size:14px}
}
@media(max-width:900px){
 .content-width{width:min(100% - 46px,1440px)}
 .top-lang{padding:11px 13px;font-size:11px}
 .hero-stage{padding:70px 0 60px}
 .sticker{transform:scale(.78)}.s-seo{transform-origin:left top}.s-lead{transform-origin:right top}.s-web{transform-origin:left bottom}.s-auto{transform-origin:right bottom}
 .s-seo{top:3%}.s-lead{top:4%}.s-web{bottom:6%}.s-auto{bottom:5%}
 .dock-links{display:none}
 .dock-menu{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:#fff;font-weight:700;font-size:15px;padding:12px 18px;border-radius:50px}
 .dock-chev{display:inline-flex;transition:transform .25s}.dock-chev svg{width:16px;height:16px;stroke-width:2.6}
 .dock-menu[aria-expanded=true] .dock-chev{transform:rotate(180deg)}
 .dock{width:min(380px,calc(100vw - 24px));bottom:14px}
 .dock-bar{justify-content:space-between}
 .mobile-nav-panel{display:flex;position:absolute;bottom:calc(100% + 12px);left:0;right:0;background:#0c100d;border:1px solid #2f3631;border-radius:24px;padding:10px;flex-direction:column;box-shadow:0 20px 60px #0008;animation:popUp2 .25s cubic-bezier(.2,.8,.2,1)}
 @keyframes popUp2{from{opacity:0;transform:translateY(10px)}}
 .mobile-nav-panel[hidden]{display:none}
 .mobile-nav-panel button,.mobile-nav-panel a{border:0;background:none;text-align:start;padding:14px 16px;color:#fff;font-size:15px;font-weight:700;border-bottom:1px solid #222a24}
 .mobile-nav-panel .panel-cta{background:var(--lime);color:#0b0c0b;border-radius:16px;border:0;margin-top:8px;text-align:center}
 .mobile-nav-panel .panel-wa{text-align:center;border:0;color:#9fe8b5;font-size:13px}
 .mega-menu{width:calc(100vw - 24px);padding:18px}
 .mega-head span:last-child{display:none}
 .mega-grid{max-height:52vh;overflow:auto;gap:16px}
 .mega-foot span{display:none}.mega-foot{justify-content:flex-end}
}
@media(max-width:650px){
 .topbar{padding-top:20px}
 .brand img{height:32px}
 .under-actions{font-size:12px;flex-direction:column;gap:10px}
 .top-contact{padding:12px 16px;padding-inline:19px 16px;font-size:13px;gap:10px}
 .hero-stage{padding:118px 0 112px}
 .hero-eyebrow{font-size:11px;padding:9px 13px;gap:7px}
 .hero-slogan{font-size:clamp(50px,15.5vw,80px);margin:22px 0}
 .hero-description{font-size:14.5px;max-width:360px}
 .hero-actions{flex-direction:column;align-items:center;gap:10px;margin-top:26px}
 .btn-dark,.btn-outline{width:100%;max-width:320px;justify-content:center;padding:16px 24px;font-size:15px}
 .sticker{transform:scale(.6)}
 .s-seo{top:14px;left:-2%}.s-lead{top:26px;right:-3%}.s-web{bottom:18px;left:-3%}.s-auto{bottom:12px;right:-2%}
 .squiggle,.spark-a{display:none}
 .brands{padding-bottom:34px}
 .brands-label h2{font-size:12px}
 .marquee{margin-top:20px}
 .marquee-track{gap:44px;animation-duration:24s}
 .client-logo.tjs{--h:46px}.client-logo.taylors{--h:28px}.client-logo.apu{--h:25px}.client-logo.sunway{--h:33px}.client-logo.jamra{--h:48px}.client-logo.darna{--h:38px}.client-logo.sanad{--h:46px}.client-logo.nadiva{--h:37px}
 html[lang=ar] .hero-slogan{font-size:clamp(38px,11vw,60px)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Hero: Company Profile pop button ---------- */
.under-actions{margin-top:18px}
.profile-pop{position:relative;display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border:1.5px solid #48b071;border-radius:40px;background:linear-gradient(120deg,#effbe1,#dff3cf);color:#0d1f10;font-size:13px;box-shadow:0 8px 20px #48b07126;transform:scale(0);animation:profilePop .7s cubic-bezier(.3,1.7,.5,1) 1.1s forwards;transition:box-shadow .25s}
.profile-pop b{font-weight:800}
.profile-pop .profile-ico{width:28px;height:28px}
.profile-pop .profile-ico svg{width:15px;height:15px}
.profile-pop:hover{box-shadow:0 14px 30px #48b07144}
@keyframes profilePop{0%{transform:scale(0) rotate(-8deg)}70%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.profile-tip{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 6px;white-space:nowrap;padding:6px 10px;border-radius:10px;background:#0d0e0d;color:var(--lime);font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s,translate .25s cubic-bezier(.3,1.6,.5,1)}
.profile-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#0d0e0d}
.profile-pop:hover .profile-tip,.profile-pop:focus-visible .profile-tip,.profile-pop.tip .profile-tip{opacity:1;translate:-50% 0}
@media(prefers-reduced-motion:reduce){.profile-pop{transform:none;animation:none}}