/* =====================================================================
   Father & Sons Manpower Supply — Shared stylesheet
   Loaded by every page. Page-specific tweaks live at the bottom.
   ===================================================================== */
:root{
  --blue:#01adef;
  --blue-light:#01adef;
  --blue-deep:#01adef;
  --red:#f6821f;
  --red-deep:#f6821f;
  --off-white:#FAF8F3;
  --paper:#F1ECE0;
  --ink:#14130F;
  --ink-soft:#5C584C;
  --line: rgba(20,19,15,0.12);
  --line-dark: rgba(255,255,255,0.12);
  --radius:30px;
  --radius-sm:18px;
  --gutter:22px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--off-white);
  color:var(--ink);
  font-family:'Archivo', sans-serif;
  overflow-x:hidden;
}
.mono{font-family:'Poppins', sans-serif;}
p{font-family:'Poppins', sans-serif; font-weight:300;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
::selection{background:var(--red);color:#fff;}
button{font-family:inherit; border:none; background:none; cursor:pointer;}

/* ---- RTL support (Urdu / Arabic) ---- */
[dir=rtl] body, [dir=rtl]{font-family:'Poppins','Archivo',sans-serif;}
[dir=rtl] .eyebrow::before{margin-left:0;}
[dir=rtl] .hero-stats{right:auto; left:44px; text-align:left;}
[dir=rtl] .scroll-cue{right:auto; left:44px;}
[dir=rtl] .it-media .tag-card{left:auto; right:-26px;}
[dir=rtl] .imgtext.reverse .it-media .tag-card{right:auto; left:-26px;}
[dir=rtl] .arrow{transform:scaleX(-1);}
[dir=rtl] .btn-solid .arrow, [dir=rtl] .hire-me .arrow{transform:scaleX(-1);}

.container{width:100%; max-width:1360px; margin:0 auto; padding:0 48px;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--off-white);}
::-webkit-scrollbar-thumb{background:var(--blue);}

/* ============ GRID BG UTILITY ============ */
.grid-bg{position:relative;}
.grid-bg::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(1,173,239,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,173,239,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 90%);
  pointer-events:none;
  z-index:0;
}
.grid-bg-dark::before{
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}
.grid-bg > .container{position:relative; z-index:1;}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; background:#01adef; background-image:linear-gradient(160deg, rgba(3,22,34,0.10), rgba(3,22,34,0.55)); z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; overflow:hidden;
}
#preloader::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 72%);
}
#preloader .pl-stage{position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center;}
#preloader .pl-ring1{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,0.14);}
#preloader .pl-ring1::before{content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color:var(--red); border-right-color:var(--red); animation:plspin 1.15s linear infinite;}
#preloader .pl-ring2{position:absolute; inset:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.10);}
#preloader .pl-ring2::before{content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-bottom-color:#fff; animation:plspin 1.6s linear infinite reverse;}
@keyframes plspin{to{transform:rotate(360deg);}}
#preloader .pl-mark{
  width:86px;height:86px; border-radius:50%; overflow:hidden; background:#fff;
  box-shadow:0 14px 40px rgba(3,22,34,0.35), 0 0 0 6px rgba(255,255,255,0.10);
  animation:plpulse 2.2s ease-in-out infinite;
}
@keyframes plpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
#preloader .pl-mark img{width:100%;height:100%;object-fit:cover;}
#preloader .pl-name{text-align:center;}
#preloader .pl-name .l1{font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; letter-spacing:0.01em; color:#fff;}
#preloader .pl-name .l1 b{color:var(--red); font-weight:800;}
#preloader .pl-name .l2{font-family:'Poppins', sans-serif; color:rgba(255,255,255,0.7); letter-spacing:0.3em; text-transform:uppercase; font-size:9.5px; margin-top:7px;}
#preloader .pl-bar-wrap{width:230px; height:3px; background:rgba(255,255,255,0.18); position:relative; overflow:hidden; border-radius:3px;}
#preloader .pl-bar{position:absolute; left:0;top:0;bottom:0; width:0%; background:linear-gradient(90deg, #fff, var(--red)); border-radius:3px;}
#preloader .pl-count{position:absolute; bottom:36px; right:44px; font-family:'Poppins', sans-serif; font-size:clamp(60px,9vw,110px); font-weight:700; color:rgba(255,255,255,0.10); line-height:1;}
#preloader .pl-count::after{content:'%'; font-size:0.4em; vertical-align:super; margin-left:2px;}
#preloader .pl-tag{position:absolute; bottom:44px; left:44px; font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.5);}
@media(max-width:560px){ #preloader .pl-count{bottom:24px; right:22px;} #preloader .pl-tag{left:22px; bottom:26px;} }

/* ============ PAGE TRANSITION OVERLAY (SPA) ============ */
#page-transition{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:var(--blue-deep); background-image:linear-gradient(160deg, rgba(3,22,34,0.12), rgba(3,22,34,0.6));
  display:flex; align-items:center; justify-content:center;
  transform:translateY(100%); opacity:0; will-change:transform;
  transition:transform .5s cubic-bezier(.76,0,.24,1);
}
#page-transition .pt-mark{
  width:74px;height:74px;border-radius:50%;overflow:hidden;background:#fff;opacity:0;
  box-shadow:0 14px 40px rgba(3,22,34,0.4), 0 0 0 6px rgba(255,255,255,0.1);
  transform:scale(.7); transition:opacity .32s ease, transform .32s ease;
}
#page-transition .pt-mark img{width:100%;height:100%;object-fit:cover;}
/* cover: curtain rises from the bottom and fully fills the viewport */
body.pt-cover #page-transition{transform:translateY(0); opacity:1;}
body.pt-cover #page-transition .pt-mark{opacity:1; transform:scale(1);}
/* reveal: no second slide — the curtain simply fades away, uncovering the
   already-swapped page (the earlier bottom→top cover is the only motion).
   It stays put at translateY(0) and only its opacity animates, so there is
   no top→bottom movement; the off-screen reset happens while invisible. */
body.pt-reveal #page-transition{transform:translateY(0); opacity:0; transition:opacity .45s ease;}
body.pt-reveal #page-transition .pt-mark{opacity:0; transition:opacity .25s ease;}

/* incoming <main> content fades/slides up as the curtain lifts */
main.pt-in{animation:ptIn .7s cubic-bezier(.2,.8,.2,1) both;}
@keyframes ptIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  #page-transition{display:none;}
  main.pt-in{animation:none;}
}

/* ============ TOPBAR ============ */
#topbar{
  background:var(--blue-deep);
  color:rgba(255,255,255,0.75);
  font-size:11.5px;
  padding:9px 0;
  position:relative;
  z-index:501;
}
#topbar .container{display:flex; justify-content:space-between; align-items:center;}
#topbar .tb-left{display:flex; align-items:center; gap:8px;}
#topbar .tb-left .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--red); flex-shrink:0;}
#topbar .tb-right{display:flex; gap:26px;}
#topbar .tb-right a:hover{color:#fff;}
@media(max-width:760px){ #topbar .tb-right .tb-contact{display:none;} #topbar .container{padding:0 16px; gap:14px;} #topbar .tb-left{min-width:0;} #topbar .tb-left .mono{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #topbar .tb-right{gap:0;} }

/* ============ LANGUAGE SWITCHER ============ */
.lang-switch{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:7px; color:rgba(255,255,255,0.85);
  font-family:'Poppins', sans-serif; font-size:11.5px; font-weight:500; letter-spacing:0.06em;
  padding:5px 10px; border:1px solid rgba(255,255,255,0.18); border-radius:999px; transition:.25s;
}
.lang-btn:hover{border-color:var(--red); color:#fff;}
.lang-btn svg{width:13px;height:13px; stroke:currentColor; fill:none; stroke-width:1.8;}
.lang-btn .chev{transition:transform .3s ease;}
.lang-switch.open .lang-btn .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px; background:#fff;
  border-radius:10px; box-shadow:0 18px 44px rgba(1,173,239,0.22); padding:6px; z-index:600;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.28s cubic-bezier(.2,.8,.2,1);
}
[dir=rtl] .lang-menu{right:auto; left:0;}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:start;
  padding:10px 12px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--ink); transition:.2s;
}
.lang-menu button .native{font-size:12px; color:var(--ink-soft);}
.lang-menu button:hover{background:var(--paper);}
.lang-menu button.active{background:var(--blue); color:#fff;}
.lang-menu button.active .native{color:rgba(255,255,255,0.7);}

/* ============ NAV ============ */
header{
  position:fixed; top:37px; left:0; right:0; z-index:500;
  padding:22px 0;
  transition:background .45s ease, padding .45s ease, box-shadow .45s ease, top .3s ease, transform .45s cubic-bezier(.5,0,.2,1);
}
header.solid{
  background:rgba(250,248,243,0.94); backdrop-filter:blur(10px);
  padding:14px 0; box-shadow:0 1px 0 var(--line);
}
header.hide-topbar{top:0;}
nav.container{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{width:44px;height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 2px rgba(1,173,239,0.18);}
.brand .mark img{width:100%;height:100%;object-fit:cover;}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-text .l1{font-weight:800; font-size:15px; color:var(--ink); transition:color .45s ease;}
.brand-text .l2{font-family:'Poppins', sans-serif; font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--red); margin-top:3px;}

.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:13px; font-weight:600; letter-spacing:0.03em; color:var(--ink); position:relative; padding:4px 0; transition:color .45s ease;}
.nav-links a::after{content:''; position:absolute; left:0;bottom:0; width:0%;height:2px; background:var(--red); transition:width .3s ease;}
.nav-links a:hover::after,
.nav-links a.current::after{width:100%;}
.nav-links a.current{color:var(--red);}

.nav-cta{display:flex; align-items:center; gap:16px;}

/* ---- PRO BUTTONS ---- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:700; letter-spacing:0.03em;
  padding:14px 26px; border-radius:3px; overflow:hidden; isolation:isolate;
  white-space:nowrap; border:1px solid transparent;
}
.btn-solid{background:var(--red); color:#fff; border-color:var(--red);}
.btn-solid::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ink); transform:translateX(-101%); transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.btn-solid:hover::before{transform:translateX(0);}
.btn-solid .arrow{transition:transform .4s cubic-bezier(.65,0,.35,1);}
.btn-solid:hover .arrow{transform:translateX(4px);}

.btn-outline{background:transparent; border:1px solid var(--ink); color:var(--ink);}
.btn-outline::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:currentColor; opacity:0.08; transform:scale(0); border-radius:50%;
  transition:transform .5s ease;
}
.btn-outline:hover::before{transform:scale(2.2);}

.btn-dark{background:transparent; border:1px solid rgba(255,255,255,0.25); color:#fff;}
.btn-dark::before{content:''; position:absolute; inset:0; z-index:-1; background:var(--red); transform:translateY(101%); transition:transform .4s cubic-bezier(.65,0,.35,1);}
.btn-dark:hover::before{transform:translateY(0);}
.btn-dark:hover{border-color:var(--red);}

.btn svg{width:14px;height:14px; flex-shrink:0;}

/* ---- MOBILE MENU TOGGLE ---- */
.burger{display:none; width:32px;height:22px; position:relative; cursor:pointer; z-index:1100; flex-shrink:0;}
.burger span{position:absolute;left:0;right:0;height:2px; background:var(--ink); transition:.35s cubic-bezier(.65,0,.35,1);}
body.menu-open .burger span{background:#fff;}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:10px;}
.burger span:nth-child(3){top:20px;}
body.menu-open .burger span:nth-child(1){top:10px; transform:rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){top:10px; transform:rotate(-45deg);}

#mobile-menu{
  position:fixed; inset:0; z-index:1050;
  background:#01adef; background-image:linear-gradient(160deg, rgba(3,22,34,0.08), rgba(3,22,34,0.42));
  display:flex; flex-direction:column; justify-content:center;
  padding:0 32px;
  transform:translateY(-100%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
body.menu-open #mobile-menu{transform:translateY(0);}
#mobile-menu a{
  display:block; font-size:32px; font-weight:800; color:#fff; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
  opacity:0; transform:translateY(20px);
}
body.menu-open #mobile-menu a{animation:mmIn .6s cubic-bezier(.2,.8,.2,1) forwards;}
body.menu-open #mobile-menu a:nth-child(1){animation-delay:.15s;}
body.menu-open #mobile-menu a:nth-child(2){animation-delay:.22s;}
body.menu-open #mobile-menu a:nth-child(3){animation-delay:.29s;}
body.menu-open #mobile-menu a:nth-child(4){animation-delay:.36s;}
body.menu-open #mobile-menu a:nth-child(5){animation-delay:.43s;}
body.menu-open #mobile-menu a:nth-child(6){animation-delay:.5s;}
@keyframes mmIn{to{opacity:1; transform:translateY(0);}}
#mobile-menu .mm-foot{margin-top:30px; color:rgba(255,255,255,0.5); font-size:12px;}
.mm-close{position:absolute; top:28px; right:28px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .35s ease, background .35s ease, border-color .35s ease; z-index:2;}
.mm-close svg{width:20px; height:20px;}
.mm-close:hover{background:var(--red); border-color:var(--red); transform:rotate(90deg);}

/* ---- PILL CTA ---- */
.btn-pill{
  position:relative; display:inline-flex; align-items:center; gap:16px;
  font-size:13px; font-weight:700; letter-spacing:0.02em;
  padding:8px 8px 8px 28px; border-radius:999px; background:var(--ink); color:#fff;
  overflow:hidden; isolation:isolate; white-space:nowrap; border:none;
}
.btn-pill::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--red); transform:translateX(-101%); transition:transform .5s cubic-bezier(.65,0,.35,1);
}
[dir=rtl] .btn-pill::before{transform:translateX(101%);}
.btn-pill:hover::before{transform:translateX(0);}
.btn-pill .pill-ic{
  width:44px;height:44px; border-radius:50%; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.btn-pill .pill-ic svg{width:18px;height:18px; stroke:var(--ink); fill:none; stroke-width:2.2; transition:stroke .4s ease;}
[dir=rtl] .btn-pill .pill-ic svg{transform:scaleX(-1);}
.btn-pill:hover .pill-ic{transform:rotate(-45deg);}
.btn-pill.on-dark{background:#fff; color:var(--ink);}
.btn-pill.on-dark::before{background:var(--red);}
.btn-pill.on-dark:hover{color:#fff;}
.btn-pill.on-dark .pill-ic{background:var(--red);}
.btn-pill.on-dark .pill-ic svg{stroke:#fff;}

/* ============ HERO ============ */
#hero{
  position:relative; height:calc(100vh - 37px); min-height:620px; width:100%;
  padding:96px 22px 22px; box-sizing:border-box;
}
.hero-shell{
  position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; background:var(--blue-deep);
  box-shadow:0 40px 90px rgba(1,173,239,0.28);
}
#hero .bg-img{position:absolute; inset:0; width:100%;height:100%; object-fit:cover; transform:scale(1.15);}
#hero .bg-overlay{position:absolute;inset:0; background:linear-gradient(180deg, rgba(3,22,34,0.42) 0%, rgba(1,173,239,0.28) 35%, rgba(3,22,34,0.90) 100%);}
#hero .bg-grain{position:absolute;inset:0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, transparent 1px, transparent 2px); pointer-events:none; mix-blend-mode:overlay;}
.hero-shell::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,12,18,0) 30%,
    rgba(8,12,18,0.28) 58%,
    rgba(8,12,18,0.62) 82%,
    rgba(8,12,18,0.85) 100%);
}
.paragraphs{
    margin-top: 20px;
    font-size: 16.5px;
    line-height: 1.7;
    color:var(--muted);
    max-width: 56ch;
}
.hero-inner{position:relative; z-index:5; padding:0 54px 64px; width:100%;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:9px; margin-bottom:26px; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(6px);}
.hero-eyebrow .dot{width:7px;height:7px; border-radius:50%; background:var(--red);}
.hero-eyebrow span{font-family:'Poppins', sans-serif; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#fff; opacity:0.92;}
.hero-title{font-size:clamp(38px, 6.2vw, 92px); font-weight:800; line-height:0.98; color:#fff; letter-spacing:-0.02em; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35);}
.hero-title .line{overflow:hidden; display:block;}
.hero-title .line span{display:block;}
.hero-title .hl{display:inline; color:var(--red); font-style:normal;}
.hero-title em{font-style:normal; color:var(--red);}

.hero-bottom{display:flex; justify-content:space-between; align-items:flex-end; margin-top:44px; gap:40px; flex-wrap:wrap;}
.hero-sub{font-size:17px; line-height:1.75; letter-spacing:0.01em; color:rgba(255,255,255,0.82); max-width:440px; text-shadow:0 1px 12px rgba(0,0,0,0.45);}
.hero-actions{display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap; align-items:center;}
.hero-actions .btn-solid{box-shadow:0 14px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);}
.hire-me{display:inline-flex; align-items:center; gap:7px; font-family:'Poppins',sans-serif; font-weight:300; font-size:13.5px; letter-spacing:0.01em; color:rgba(255,255,255,0.7); border-bottom:1px solid rgba(255,255,255,0.25); padding-bottom:2px; transition:color .3s ease, border-color .3s ease;}
.hire-me:hover{color:#fff; border-color:var(--red);}
.hire-me .arrow{transition:transform .35s ease;}
.hire-me:hover .arrow{transform:translateX(4px);}
.hire-me svg{width:13px;height:13px;}

.scroll-cue{position:absolute; right:44px; bottom:32px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px;}
.scroll-cue .track{width:1px;height:52px; background:rgba(255,255,255,0.25); position:relative; overflow:hidden;}
.scroll-cue .track::after{content:''; position:absolute; left:0;top:-100%; width:100%;height:100%; background:var(--red); animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{top:-100%;}50%{top:0%;}100%{top:100%;}}
.scroll-cue span{font-family:'Poppins', sans-serif; font-size:10px; letter-spacing:0.2em; color:rgba(255,255,255,0.5); writing-mode:vertical-rl; text-transform:uppercase;}
@media(max-width:1280px){ .scroll-cue{display:none;} }

.hero-stats{position:absolute; top:44px; right:44px; z-index:5; display:flex; flex-direction:column; gap:14px; text-align:right; align-items:flex-end;}
.hero-stats .stat{
  opacity:0; position:relative; padding:14px 20px 14px 22px; border-radius:14px;
  background:rgba(3,22,34,0.34); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.18); box-shadow:0 10px 30px rgba(3,22,34,0.28);
  min-width:186px;
}
.hero-stats .stat::before{content:''; position:absolute; top:14px; bottom:14px; right:0; width:3px; border-radius:3px; background:var(--red);}
[dir=rtl] .hero-stats{left:44px; right:auto; align-items:flex-start; text-align:left;}
[dir=rtl] .hero-stats .stat::before{right:auto; left:0;}
.hero-stats .num{font-size:30px; font-weight:800; color:#fff; font-family:'Poppins', sans-serif; line-height:1;}
.hero-stats .lbl{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-top:5px;}
@media(max-width:1280px){ .hero-stats{display:none;}  .hire-me {  margin-left: 10px; }}

@media(min-width:761px) and (max-width:1440px){
  .hero-shell{justify-content:center;}
  .hero-inner{padding:120px 48px 80px;}
  .hero-eyebrow{margin-bottom:20px;}
  .hero-title{font-size:clamp(46px, 5vw, 68px); line-height:1.02; max-width:18ch;}
  .hero-bottom{margin-top:34px; gap:32px; align-items:center;}
  .hero-sub{font-size:16px; line-height:1.65; max-width:400px;}
}
@media(max-width:760px){
  /* full-bleed hero on mobile — no side padding, no rounded card, full viewport height */
  #hero{padding:0; height:100vh; height:100svh; min-height:560px;}
  .hero-shell{border-radius:0; justify-content:flex-end; height:100%; min-height:0; box-shadow:none;}
  /* clear the fixed header at the top, breathe at the bottom */
  .hero-inner{padding:120px 22px 40px;}
  .hero-eyebrow{margin-bottom:16px;}
  .hero-eyebrow span{font-size:10px; letter-spacing:0.2em;}
  .hero-title{font-size:clamp(32px,8.5vw,44px); line-height:1.05; max-width:18ch;}
  .hero-bottom{flex-direction:column; align-items:flex-start; margin-top:22px; gap:22px;}
  .hero-sub{font-size:14.5px; line-height:1.6; max-width:100%;}
  .hero-actions{width:100%; gap:16px;}
  .hero-actions .btn-pill{width:100%; justify-content:space-between;}

  /* over the hero the header is transparent — lift the brand + burger to white
     so they read against the dark image; they revert to ink once it turns solid */
  #site-header:not(.solid) .brand-text .l1{color:#fff;}
  #site-header:not(.solid) .burger span{background:#fff;}
  /* soft shadow fade behind the transparent header so it stays highlighted */
  #site-header:not(.solid)::before{
    content:''; position:absolute; inset:0; bottom:auto; height:180%; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(3,22,34,0.55) 0%, rgba(3,22,34,0.28) 45%, rgba(3,22,34,0) 100%);
  }
  #site-header:not(.solid) .brand-text .l1{text-shadow:0 2px 12px rgba(0,0,0,0.5);}
  #site-header:not(.solid) .brand .mark{box-shadow:0 6px 20px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.25);}
  #site-header:not(.solid) .burger span{box-shadow:0 1px 6px rgba(0,0,0,0.5);}
}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{
  position:relative; margin:calc(37px + 96px) 22px 0; border-radius:var(--radius); overflow:hidden;
  min-height:420px; display:flex; align-items:flex-end;
  background:var(--blue-deep); box-shadow:0 40px 90px rgba(1,173,239,0.22);
}
.page-hero .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08);}
.page-hero .ph-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,22,34,0.35) 0%, rgba(1,173,239,0.24) 40%, rgba(3,22,34,0.88) 100%);}
.page-hero .ph-inner{position:relative; z-index:3; padding:64px 54px; width:100%;}
.page-hero .eyebrow{color:#fff; opacity:1; background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); backdrop-filter:blur(6px);}
.page-hero .eyebrow::before{background:var(--red);}
.page-hero h1{font-size:clamp(34px,5vw,66px); font-weight:800; color:#fff; letter-spacing:-0.02em; line-height:1.02; max-width:20ch; text-shadow:0 2px 24px rgba(0,0,0,0.4);}
.page-hero h1 .hl{color:var(--red);}
.page-hero .ph-sub{margin-top:20px; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,0.85); max-width:56ch;}
.page-hero .crumb{display:flex; align-items:center; gap:8px; margin-bottom:20px; font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.7);}
.page-hero .crumb a:hover{color:#fff;}
.page-hero .crumb .sep{color:var(--red);}
@media(max-width:760px){
  /* full-bleed page hero on mobile — edge-to-edge, clears the fixed header */
  .page-hero{margin:0; border-radius:0; min-height:auto; box-shadow:none;}
  .page-hero .ph-inner{padding:130px 22px 40px;}
  .page-hero h1{font-size:clamp(28px,7.5vw,40px); line-height:1.08;}
  .page-hero .ph-sub{font-size:14.5px; margin-top:16px;}
  .page-hero .crumb{margin-bottom:16px; font-size:10px;}
}

/* ============ DOWNLOADS ============ */
#downloads{padding:120px 0 150px;}
#downloads .section-head{text-align:center; max-width:640px; margin:0 auto;}
#downloads .section-head .eyebrow{justify-content:center;}
#downloads .section-title{margin-top:10px;}
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px;}
.dl-card{
  position:relative; display:flex; flex-direction:column; gap:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:34px 30px 30px; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.dl-card::before{content:''; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--blue);}
.dl-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px rgba(1,173,239,0.18); border-color:transparent;}
.dl-ic{
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(1,173,239,0.1); color:var(--blue);
}
.dl-ic svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.dl-type{font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--red);}
.dl-card h3{font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; margin-top:8px; line-height:1.15;}
.dl-card p{font-size:14px; line-height:1.65; color:var(--ink-soft); margin-top:10px;}
.dl-meta{display:flex; align-items:center; gap:10px; margin-top:auto; font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);}
.dl-meta .sep{width:4px; height:4px; border-radius:50%; background:var(--line); }
.dl-btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px 14px 22px; border-radius:999px; background:var(--ink); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:500; font-size:13px;
  transition:background .35s ease;
}
.dl-btn:hover{background:var(--blue);}
.dl-btn .dl-btn-ic{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.dl-btn .dl-btn-ic svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
@media(max-width:900px){ .dl-grid{grid-template-columns:1fr; gap:20px; max-width:520px; margin-left:auto; margin-right:auto;} }
@media(max-width:760px){ #downloads{padding:70px 0 100px;} .dl-grid{margin-top:40px;} }

/* ============ VIDEO SECTION ============ */
#video-section{position:relative; padding:150px 0 160px; background:var(--off-white); overflow:hidden;}
.video-head{text-align:center; max-width:640px; margin:0 auto 60px;}
.video-head .eyebrow{justify-content:center;}
.video-head .eyebrow::before{display:none;}
.video-head p{margin-top:18px; font-size:15.5px; line-height:1.75; letter-spacing:0.01em; color:var(--ink-soft); max-width:58ch; margin-left:auto; margin-right:auto;}
.video-frame{
  position:relative; width:min(920px, 84vw); aspect-ratio:16/9; margin:0 auto;
  border-radius:26px; overflow:hidden; box-shadow:0 40px 90px rgba(1,173,239,0.25);
}
.video-frame video{width:100%;height:100%; object-fit:cover;}
.video-frame .video-poster{width:100%;height:100%; object-fit:cover;}
.video-frame iframe{position:absolute; inset:0; width:100%;height:100%; border:0;}
.video-frame .frame-overlay{position:absolute;inset:0; background:linear-gradient(180deg, rgba(1,173,239,0.05) 0%, rgba(10,16,22,0.55) 100%); pointer-events:none;}
.video-caption{position:absolute; left:32px; bottom:28px; z-index:6; color:#fff;}
.video-caption .kicker{display:inline-flex; align-items:center; gap:8px; font-family:'Poppins', sans-serif; font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.26); backdrop-filter:blur(6px); padding:6px 13px; border-radius:999px; margin-bottom:12px;}
.video-caption h3{font-size:clamp(18px, 2.2vw, 26px); font-weight:800;}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px;height:76px; border-radius:50%; background:rgba(255,255,255,0.16);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center; z-index:6; cursor:pointer;
  transition:transform .35s ease, background .35s ease;
}
.video-play:hover{transform:translate(-50%,-50%) scale(1.08); background:var(--red); border-color:var(--red);}
.video-play svg{width:22px;height:22px; fill:#fff; margin-left:3px;}
@media(max-width:760px){ .video-frame{width:92vw; border-radius:16px;} #video-section{padding:100px 0;} }

/* ============ SECTION GENERIC ============ */
section{position:relative; padding:150px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Poppins', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(1, 172, 239, 0.651); border:1px solid rgb(1, 172, 239);
  padding:7px 15px; border-radius:999px; margin-bottom:22px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--red);}
/* eyebrow chip on dark/blue sections — white glass so the card reads over the background */
#industries .eyebrow, #compare .eyebrow, #contact .eyebrow, #cta .eyebrow, #engagement .eyebrow{
  background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.26); backdrop-filter:blur(6px);
}
h2.section-title{font-size:clamp(32px, 4.2vw, 58px); font-weight:800; letter-spacing:-0.02em; line-height:1.06; color:var(--ink);}

/* ============ FLOATING MARGINED SECTION CARDS ============ */
.section-card{
  margin:var(--gutter);
  border-radius:var(--radius);
  overflow:hidden;
}
.section-card + .section-card{margin-top:0;}
@media(max-width:760px){
  :root{--gutter:8px;}
  .section-card{border-radius:var(--radius-sm);}
}

.it-media img{border-radius:var(--radius-sm) !important;}
.it-media .tag-card{border-radius:14px;}
.why-card, .industry-card{border-radius:0;}
.contact-cards .cc{border-radius:14px;}
.footer-brand .license{border-radius:8px;}

/* ---- IMAGE-TEXT LAYOUT ---- */
.imgtext{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
.imgtext.reverse{grid-template-columns:1fr 1fr;}
.imgtext.reverse .it-media{order:2;}
.imgtext.reverse .it-copy{order:1;}
.it-media{position:relative;}
.it-media img{width:100%; height:580px; object-fit:cover; border-radius:8px;}
.it-media .tag-card{
  position:absolute; bottom:-26px; left:-26px; background:var(--ink); color:#fff;
  padding:22px 26px; border-radius:6px; max-width:230px; box-shadow:0 20px 50px rgba(0,0,0,0.25);
}
.it-media .tag-card .num{font-family:'Poppins', sans-serif; font-size:26px; font-weight:700; color:var(--red);}
.it-media .tag-card .lbl{font-size:12px; color:rgba(255,255,255,0.7); margin-top:6px; line-height:1.4;}
.imgtext.reverse .it-media .tag-card{left:auto; right:-26px;}
@media(max-width:900px){
  .imgtext, .imgtext.reverse{grid-template-columns:1fr; gap:56px;}
  .imgtext.reverse .it-media, .imgtext.reverse .it-copy{order:initial;}
  .it-media .tag-card{position:static; margin-top:20px; max-width:none;}
}

/* ---- IMAGE PARALLAX ---- */
.it-frame{position:relative; height: 480px; overflow:hidden; border-radius:var(--radius-sm);}
.it-frame img{position:absolute;  left:0; width:100%; height:100%; object-fit:cover; will-change:transform;;}
.video-frame .video-poster{position:absolute; top:-9%; left:0; width:100%; height:118%; will-change:transform;}
#hero .bg-img{will-change:transform;}
@media(max-width:900px){ .it-frame{height:420px;} }
@media(max-width:560px){ .it-frame{height:340px;} }
@media(prefers-reduced-motion:reduce){
  .it-frame img, .video-frame .video-poster{position:static; height:100%; top:0;}
  .it-frame{height:auto;}
}

.it-copy p.lead{font-size:18px; line-height:1.8; letter-spacing:0.01em; color:var(--ink-soft); margin-top:22px; max-width:52ch;}
.about-founder{margin-top:36px; padding-top:28px; border-top:1px solid var(--line); display:flex; align-items:center; gap:16px;}
.about-founder .initials{width:50px;height:50px; border-radius:50%; background:var(--blue); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-family:'Poppins', sans-serif; flex-shrink:0;}
.about-founder .name{font-weight:700; font-size:14px;}
.about-founder .role{font-size:12px; color:var(--ink-soft); margin-top:2px;}

.check-list{margin-top:28px; display:flex; flex-direction:column; gap:18px;}
.check-list .ci{display:flex; gap:14px; align-items:flex-start;}
.check-list .ci .ic{
  width:26px;height:26px; border-radius:50%; background:rgba(246,130,31,0.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.check-list .ci .ic svg{width:12px;height:12px; fill:none; stroke:var(--red); stroke-width:3;}
.check-list .ci h5{font-size:15.5px; font-weight:700; margin-bottom:3px;}
.check-list .ci p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; letter-spacing:0.01em; max-width:44ch;}

/* ---- WHY CHOOSE US CARDS ---- */
#why{background:var(--paper);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:70px; border-radius:var(--radius-sm); overflow:hidden;}
.why-card{background:var(--paper); padding:40px 30px; transition:background .35s ease;}
.why-card:hover{background:#fff;}
.why-card .ic-wrap{width:48px;height:48px; border-radius:12px; background:var(--red); box-shadow:0 8px 20px rgba(246,130,31,0.3); display:flex; align-items:center; justify-content:center; margin-bottom:26px;}
.why-card .ic-wrap svg{width:22px;height:22px; stroke:#fff; fill:none; stroke-width:1.8;}
.why-card h4{font-size:17px; font-weight:700; margin-bottom:10px;}
.why-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.7; letter-spacing:0.01em;}
@media(max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ---- INDUSTRIES ---- */
#industries{background:#01adef; background-image:linear-gradient(158deg, rgba(3,22,34,0.05) 0%, rgba(3,22,34,0.34) 100%);}
#industries .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:70px; flex-wrap:wrap; gap:24px;}
#industries .eyebrow{color:#fff;}
#industries .eyebrow::before{background:var(--red);}
#industries h2.section-title{color:#fff; text-shadow:0 2px 20px rgba(3,22,34,0.30); max-width:600px;}
#industries .section-head p{max-width:600px; color:rgba(255,255,255,0.82); font-size:15.5px; line-height:1.7; letter-spacing:0.01em;}

.industry-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-sm); overflow:hidden;}
.industry-card{background:#01adef; background-image:linear-gradient(rgba(3,22,34,0.06), rgba(3,22,34,0.22)); padding:38px 34px; position:relative; overflow:hidden; min-height:190px; display:flex; flex-direction:column; justify-content:space-between;}
.industry-card::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--red), rgba(246,130,31,0.82)); opacity:0; transition:opacity .4s ease; z-index:0;}
.industry-card:hover::before{opacity:1;}
.industry-card .idx, .industry-card h4{position:relative; z-index:1;}
.industry-card .ind-ic{position:absolute; top:34px; right:30px; z-index:1; width:30px; height:30px; opacity:0.85; transition:opacity .4s ease, transform .4s ease;}
.industry-card .ind-ic svg{width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.industry-card:hover .ind-ic{opacity:1; transform:scale(1.08);}
[dir=rtl] .industry-card .ind-ic{right:auto; left:30px;}
.industry-card .idx{font-family:'Poppins', sans-serif; font-size:11px; color:rgba(255,255,255,0.55);}
.industry-card h4{font-size:19px; font-weight:700; color:#fff; margin-top:26px; letter-spacing:-0.01em; text-shadow:0 1px 10px rgba(3,22,34,0.25);}
.industry-card .bar{position:absolute; left:0;bottom:0; width:100%;height:3px; background:#fff; z-index:2; transform:scaleX(0); transform-origin:left; transition:transform .4s ease;}
.industry-card:hover .bar{transform:scaleX(1);}
@media(max-width:900px){ .industry-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .industry-grid{grid-template-columns:1fr;} }

/* ---- STATS BAND ---- */
#stats{padding:100px 0; background:var(--off-white); border-bottom:1px solid var(--line); border-top:1px solid var(--line);}
.stats-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.stats-row .item{padding-right:20px;}
.stats-row .item:not(:last-child){border-right:1px solid var(--line);}
.stats-row .num{font-family:'Poppins', sans-serif; font-size:clamp(34px,4vw,54px); font-weight:700; color:var(--blue); line-height:1;}
.stats-row .num .plus{color:var(--red);}
.stats-row .lbl{margin-top:14px; font-size:13px; color:var(--ink-soft); letter-spacing:0.02em;}
@media(max-width:900px){ .stats-row{grid-template-columns:repeat(2,1fr);} .stats-row .item:nth-child(2){border-right:none;} }
@media(max-width:560px){ .stats-row{grid-template-columns:1fr;} .stats-row .item{border-right:none !important; border-bottom:1px solid var(--line); padding-bottom:20px;} }

/* ---- MID-PAGE CTA STRIP ---- */
.cta-strip{
  background:var(--ink); border-radius:var(--radius); padding:52px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-strip h3{color:#fff; font-size:clamp(20px,2.4vw,30px); font-weight:800; max-width:26ch;}
.cta-strip .cta-actions{display:flex; gap:14px; flex-wrap:wrap;}
@media(max-width:700px){ .cta-strip{padding:40px 28px;} }

/* ---- PROCESS ---- */
#process .proc-list{margin-top:70px; border-top:1px solid var(--line);}
.proc-item{display:grid; grid-template-columns:100px 1fr 1.2fr; gap:40px; padding:38px 0; border-bottom:1px solid var(--line); align-items:center;}
.proc-item .pn{font-family:'Poppins', sans-serif; font-size:14px; color:var(--red);}
.proc-item h4{font-size:22px; font-weight:700;}
.proc-item p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; letter-spacing:0.01em; max-width:52ch;}
@media(max-width:900px){ .proc-item{grid-template-columns:60px 1fr; row-gap:10px;} .proc-item p{grid-column:2/3;} }

/* ---- COMPARISON ---- */
#compare{background:#01adef; background-image:linear-gradient(158deg, rgba(3,22,34,0.06) 0%, rgba(3,22,34,0.40) 100%); overflow:hidden; position:relative;}
#compare::before{content:''; position:absolute; top:-22%; left:-6%; width:660px; height:660px; background:radial-gradient(circle, rgba(246,130,31,0.22) 0%, transparent 70%); pointer-events:none;}
#compare .container{position:relative; z-index:2;}
#compare .section-head{text-align:center; max-width:720px; margin:0 auto 64px;}
#compare .eyebrow{justify-content:center; color:#fff;}
#compare .eyebrow::before{display:none;}
#compare h2.section-title{color:#fff; text-shadow:0 2px 20px rgba(3,22,34,0.30);}
#compare .section-head p{margin-top:22px; color:rgba(255,255,255,0.80); font-size:16px; line-height:1.7; letter-spacing:0.01em;}

.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:1060px; margin:0 auto;}
.compare-col{
  background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius); padding:40px 38px; backdrop-filter:blur(4px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.compare-col:hover{transform:translateY(-6px);}
.compare-col.ours{
  background:linear-gradient(160deg, var(--red) 0%, #d96a12 100%);
  border-color:rgba(255,255,255,0.35); box-shadow:0 30px 70px rgba(246,130,31,0.35);
}
.compare-col .col-tag{font-family:'Poppins', sans-serif; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.60);}
.compare-col.ours .col-tag{color:#fff;}
.compare-col h3{font-size:clamp(20px,2.4vw,25px); font-weight:800; color:#fff; margin-top:8px; letter-spacing:-0.01em;}
.compare-list{margin-top:26px; display:flex; flex-direction:column; list-style:none;}
.compare-list li{
  display:flex; gap:14px; align-items:flex-start; padding:17px 0;
  border-top:1px solid rgba(255,255,255,0.10);
  font-family:'Poppins', sans-serif; font-weight:300; font-size:14.5px; line-height:1.55;
  color:rgba(255,255,255,0.86);
}
.compare-list li:first-child{border-top:none;}
.compare-list .ci-ic{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.compare-list .ci-ic svg{width:12px; height:12px; fill:none; stroke-width:2.6;}
.compare-list .x .ci-ic{background:rgba(255,107,90,0.14);}
.compare-list .x .ci-ic svg{stroke:#ff6b5a;}
.compare-list .ok .ci-ic{background:rgba(246,130,31,0.18);}
.compare-list .ok .ci-ic svg{stroke:var(--red);}
.compare-col.ours .compare-list li{color:#fff; border-top-color:rgba(255,255,255,0.22);}
.compare-col.ours .compare-list .ok .ci-ic{background:rgba(255,255,255,0.22);}
.compare-col.ours .compare-list .ok .ci-ic svg{stroke:#fff;}
[dir=rtl] .compare-col{text-align:right;}
@media(max-width:860px){ .compare-grid{grid-template-columns:1fr; gap:18px;} .compare-col{padding:34px 28px;} }

/* ---- CLIENTS SLIDER ---- */
#clients{background:var(--off-white); overflow:hidden; padding-top:0;}
#clients .section-head{text-align:center; max-width:600px; margin:0 auto 60px;}
#clients .eyebrow{justify-content:center;} #clients .eyebrow::before{display:none;}
#clients .section-head p{margin-top:18px; font-size:15.5px; line-height:1.75; letter-spacing:0.01em; color:var(--ink-soft); max-width:58ch; margin-left:auto; margin-right:auto;}
.marquee-wrap{position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.marquee{display:flex; width:max-content;}
.marquee-track{display:flex; align-items:center; gap:0; width:max-content; animation:marquee 40s linear infinite; will-change:transform;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.client-card{
  flex-shrink:0; width:250px; height:172px; margin:0 10px; background:#fff; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; padding:30px 34px;
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(1,173,239,0.06);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.client-card:hover{transform:translateY(-8px); box-shadow:0 22px 50px rgba(1,173,239,0.16); border-color:rgba(246,130,31,0.45);}
.client-card img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter: opacity(0.7); transition:filter .4s ease;}
.client-card:hover img{filter:grayscale(0) opacity(1);}
@media(max-width:760px){ .client-card{width:190px; height:132px; margin:0 12px; padding:22px 24px;} }

/* ---- FINAL CTA / CONTACT ---- */
#contact{background:#01adef; background-image:linear-gradient(158deg, rgba(3,22,34,0.06) 0%, rgba(3,22,34,0.36) 100%); overflow:hidden; position:relative;}
#contact::before{content:''; position:absolute; top:-25%; right:-5%; width:760px; height:760px; background:radial-gradient(circle, rgba(246,130,31,0.32) 0%, transparent 70%); pointer-events:none;}
#contact .container{position:relative; z-index:2;}
.contact-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:70px; align-items:center;}
#contact .eyebrow{color:#fff;}
#contact .eyebrow::before{background:var(--red);}
#contact h2.section-title{color:#fff; max-width:16ch; margin-top:8px; text-shadow:0 2px 20px rgba(3,22,34,0.30);}
#contact .contact-lead{font-size:16.5px; line-height:1.75; letter-spacing:0.01em; color:rgba(255,255,255,0.88); max-width:46ch; margin-top:24px;}
#contact .cta-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:38px;}
#contact .cta-note{margin-top:30px; color:rgba(255,255,255,0.6); font-size:12px; letter-spacing:0.04em;}
.contact-cards{display:flex; flex-direction:column; gap:16px;}
.contact-cards .cc{display:flex; gap:16px; align-items:flex-start; padding:22px 24px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:14px; transition:background .35s ease, border-color .35s ease;}
.contact-cards .cc:hover{background:rgba(255,255,255,0.16); border-color:var(--red);}
.contact-cards .cc .ic{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-cards .cc .ic svg{width:18px; height:18px; stroke:var(--red); fill:none; stroke-width:1.9;}
.contact-cards .cc .k{font-family:'Poppins', sans-serif; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.7);}
.contact-cards .cc .v{font-size:15px; color:#fff; margin-top:5px; font-weight:500;}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:48px;} }

#cta{background:#01adef; background-image:linear-gradient(158deg, rgba(3,22,34,0.06) 0%, rgba(3,22,34,0.34) 100%); text-align:center; padding:150px 0; overflow:hidden; position:relative;}
#cta::before{content:''; position:absolute; top:-30%;left:50%; transform:translateX(-50%); width:900px;height:900px; background:radial-gradient(circle, rgba(246,130,31,0.30) 0%, transparent 70%);}
#cta .eyebrow{justify-content:center; color:#fff;}
#cta .eyebrow::before{display:none;}
#cta h2{font-size:clamp(32px,5.2vw,70px); font-weight:800; color:#fff; letter-spacing:-0.02em; max-width:16ch; margin:0 auto 40px; position:relative; z-index:2; text-shadow:0 2px 20px rgba(3,22,34,0.30);}
#cta .cta-actions{display:flex; justify-content:center; gap:16px; position:relative; z-index:2; flex-wrap:wrap;}
#cta .cta-note{margin-top:26px; color:rgba(255,255,255,0.65); font-size:12.5px; position:relative; z-index:2;}

/* ---- MEDIA CENTER ---- */
#media{background:var(--off-white); padding-top: 0;}
#media .section-head{text-align:center; max-width:640px; margin:0 auto 60px;}
#media .eyebrow{justify-content:center;} #media .eyebrow::before{display:none;}
.media-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px;}
.media-item{position:relative; overflow:hidden; border-radius:var(--radius-sm); cursor:pointer; background:var(--paper);}
.media-item img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.media-item::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(3,22,34,0.72) 100%); opacity:0; transition:opacity .4s ease;}
.media-item:hover img{transform:scale(1.08);}
.media-item:hover::after{opacity:1;}
.media-item .cap{position:absolute; left:18px; bottom:16px; right:18px; z-index:2; color:#fff; opacity:0; transform:translateY(12px); transition:.45s cubic-bezier(.2,.8,.2,1);}
.media-item:hover .cap{opacity:1; transform:translateY(0);}
.media-item .cap .t{font-size:15px; font-weight:700;}
.media-item .cap .s{font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-top:4px;}
.media-item .zoom-hint{position:absolute; top:14px; right:14px; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:rgba(3,22,34,0.55); backdrop-filter:blur(6px); color:#fff; font-family:'Poppins',sans-serif; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; opacity:0; transform:translateY(-6px); transition:.4s;}
.media-item .zoom-hint svg{width:12px;height:12px; stroke:var(--red); fill:none; stroke-width:2.2;}
.media-item:hover .zoom-hint{opacity:1; transform:translateY(0);}
.media-item.tall{grid-row:span 2;}
.media-item.wide{grid-column:span 2;}
@media(max-width:900px){ .media-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px;} .media-item.wide{grid-column:span 2;} .media-item.tall{grid-row:span 1;} .media-item .zoom-hint{opacity:1; transform:none;} }
@media(max-width:560px){ .media-grid{grid-template-columns:1fr; grid-auto-rows:200px;} .media-item.wide{grid-column:span 1;} }

/* ---- MEDIA LIGHTBOX ---- */
#lightbox{position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(3,22,34,0.82); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.35s ease;}
#lightbox.open{opacity:1; visibility:visible;}
.lb-panel{position:relative; width:min(960px,94vw); max-height:88vh; background:#fff; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transform:scale(.94); transition:transform .4s cubic-bezier(.2,.85,.25,1); box-shadow:0 40px 100px rgba(0,0,0,0.5);}
#lightbox.open .lb-panel{transform:scale(1);}
.lb-img{width:100%; max-height:64vh; object-fit:cover; background:var(--paper); display:block;}
.lb-body{padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.lb-body .lb-text .lb-cat{font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--red);}
.lb-body .lb-text h4{font-size:19px; font-weight:800; color:var(--ink); margin-top:5px;}
.lb-body .lb-text .lb-large{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:0.06em; color:var(--ink-soft);}
.lb-body .lb-text .lb-large svg{width:13px;height:13px; stroke:var(--red); fill:none; stroke-width:2;}
.lb-more{display:inline-flex; align-items:center; gap:12px; font-size:12.5px; font-weight:700; letter-spacing:0.02em; padding:8px 8px 8px 22px; border-radius:999px; background:var(--red); color:#fff; box-shadow:0 8px 22px rgba(246,130,31,0.4); transition:.35s;}
.lb-more:hover{background:var(--ink); box-shadow:0 8px 22px rgba(0,0,0,0.3);}
.lb-more .pill-ic{width:34px;height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;}
.lb-more .pill-ic svg{width:15px;height:15px; stroke:var(--red); fill:none; stroke-width:2.4;}
.lb-close{position:absolute; top:14px; right:14px; z-index:4; width:44px;height:44px; border-radius:50%; background:rgba(3,22,34,0.55); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; transition:.3s;}
.lb-close svg{width:20px;height:20px;}
.lb-close:hover{background:var(--red); transform:rotate(90deg);}
@media(max-width:560px){ .lb-img{max-height:48vh;} .lb-body{flex-direction:column; align-items:flex-start;} }

/* ---- LOCATION ---- */
#location{background:var(--paper);}
.loc-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 70px rgba(1,173,239,0.12); border:1px solid var(--line);}
.loc-info{background:#fff; padding:56px 50px; display:flex; flex-direction:column; justify-content:center;}
.loc-info .eyebrow{margin-bottom:18px; max-width:fit-content;}
.loc-info h2{font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); margin-bottom:14px;}
.loc-info p{font-size:15px; color:var(--ink-soft); line-height:1.75; max-width:42ch;}
.loc-list{margin-top:30px; display:flex; flex-direction:column; gap:20px;}
.loc-list .li{display:flex; gap:15px; align-items:flex-start;}
.loc-list .li .ic{width:42px;height:42px; border-radius:12px; background:rgba(246,130,31,0.14); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.loc-list .li .ic svg{width:19px;height:19px; stroke:var(--red); fill:none; stroke-width:1.9;}
.loc-list .li .k{font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);}
.loc-list .li .v{font-size:14.5px; color:var(--ink); font-weight:600; margin-top:4px; line-height:1.5;}
.loc-list .li .v a:hover{color:var(--red);}
.loc-map{position:relative; min-height:440px; background:var(--paper);}
.loc-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(0.15);}
@media(max-width:860px){ .loc-grid{grid-template-columns:1fr;} .loc-map{min-height:340px;} .loc-info{padding:44px 30px;} }

/* ============ FLOATING GO-TO-TOP BUTTON ============ */
#to-top-float{
  position:fixed;
  left:18px;
  bottom:22px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(1,173,239,0.12);
  border:1px solid rgba(0,0,0,0.06);
  z-index:10010;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
#to-top-float.visible{opacity:1; transform:translateY(0); pointer-events:auto;}
#to-top-float svg{width:20px; height:20px; fill:currentColor;}
[dir=rtl] #to-top-float{left:auto; right:18px;}


/* ============ NEW: HISTORY TIMELINE ============ */
.timeline{margin-top:70px; position:relative;}
.timeline::before{content:''; position:absolute; left:120px; top:8px; bottom:8px; width:2px; background:var(--line);}
.tl-item{display:grid; grid-template-columns:120px 1fr; gap:44px; padding:0 0 54px; position:relative;}
.tl-item:last-child{padding-bottom:0;}
.tl-year{font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:var(--blue); text-align:right; padding-right:6px;}
.tl-body{position:relative; padding-left:34px;}
.tl-body::before{content:''; position:absolute; left:-6px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(246,130,31,0.16); z-index:1;}
.tl-body h4{font-size:19px; font-weight:700; margin-bottom:8px;}
.tl-body p{font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:52ch;}
@media(max-width:640px){
  .timeline::before{left:8px;}
  .tl-item{grid-template-columns:1fr; gap:6px;}
  .tl-year{text-align:left; padding-left:34px;}
  .tl-body{padding-left:34px;}
  .tl-body::before{left:2px;}
}

/* ============ NEW: TEAM GRID ============ */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:66px;}
.team-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;}
.team-card:hover{transform:translateY(-8px); box-shadow:0 24px 54px rgba(1,173,239,0.14);}
.team-photo{height:280px; position:relative; overflow:hidden; background:var(--paper);}
.team-photo img{width:100%; height:100%; object-fit:contain; transition:transform .6s ease;}
.team-card:hover .team-photo img{transform:scale(1.06);}
.team-photo .avatar-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:44px; color:#fff; background:linear-gradient(150deg,var(--blue),#0189bd);}
.team-info{padding:24px 26px 28px;}
.team-info .t-name{font-size:18px; font-weight:800;}
.team-info .t-role{font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-top:6px;}
.team-info .t-bio{font-size:14px; color:var(--ink-soft); line-height:1.65; margin-top:14px;}
@media(max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .team-grid{grid-template-columns:1fr;} }

/* ============ NEW: SERVICE CARDS ============ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:66px;}
.service-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:38px 34px; overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.service-card:hover{transform:translateY(-8px); box-shadow:0 26px 60px rgba(1,173,239,0.14); border-color:rgba(246,130,31,0.4);}
.service-card .sc-ic{width:56px; height:56px; border-radius:14px; background:linear-gradient(150deg,var(--red),#d96a12); box-shadow:0 10px 26px rgba(246,130,31,0.3); display:flex; align-items:center; justify-content:center; margin-bottom:26px;}
.service-card .sc-ic svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.8;}
.service-card .sc-idx{position:absolute; top:24px; right:28px; font-family:'Poppins',sans-serif; font-size:12px; color:var(--line);}
.service-card h4{font-size:20px; font-weight:800; margin-bottom:12px;}
.service-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.7;}
.service-card .sc-list{margin-top:18px; display:flex; flex-direction:column; gap:9px;}
.service-card .sc-list span{display:flex; gap:9px; align-items:center; font-family:'Poppins',sans-serif; font-weight:300; font-size:13.5px; color:var(--ink-soft);}
.service-card .sc-list span::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0;}
@media(max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .services-grid{grid-template-columns:1fr;} }

/* ============ NEW: CONTACT FORM ============ */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:44px 42px; box-shadow:0 30px 70px rgba(1,173,239,0.10);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{margin-bottom:20px;}
.field label{display:block; font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--off-white);
  font-family:'Poppins',sans-serif; font-weight:300; font-size:14.5px; color:var(--ink); transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(246,130,31,0.12);}
.field textarea{resize:vertical; min-height:130px;}
.form-submit{margin-top:6px;}
.form-note{margin-top:18px; font-size:12.5px; color:var(--ink-soft); font-family:'Poppins',sans-serif; font-weight:300;}
@media(max-width:640px){ .form-row{grid-template-columns:1fr;} .form-card{padding:34px 26px;} }

/* ============ NEW: JOB-SEEKER / APPLICATION ============ */
.field label .req{color:var(--red); font-weight:700;}
.field label .lbl-hint{text-transform:none; letter-spacing:0.01em; color:var(--ink-soft); opacity:0.75; font-weight:400; margin-left:6px;}

/* CV file upload */
.file-drop{
  display:flex; align-items:center; gap:16px; width:100%; cursor:pointer;
  padding:20px 22px; border:1.5px dashed var(--line); border-radius:12px; background:var(--off-white);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.file-drop:hover{border-color:var(--red); background:rgba(246,130,31,0.04);}
.file-drop.dragover{border-color:var(--red); background:rgba(246,130,31,0.08); box-shadow:0 0 0 3px rgba(246,130,31,0.12);}
.file-drop.has-file{border-style:solid; border-color:rgba(246,130,31,0.5); background:rgba(246,130,31,0.05);}
.file-drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0);}
.file-drop .fd-ic{width:44px; height:44px; flex-shrink:0; border-radius:11px; background:rgba(246,130,31,0.12); display:flex; align-items:center; justify-content:center;}
.file-drop .fd-ic svg{width:22px; height:22px; stroke:var(--red);}
.file-drop.has-file .fd-ic{background:var(--red);}
.file-drop.has-file .fd-ic svg{stroke:#fff;}
.file-drop .fd-text{display:flex; flex-direction:column; min-width:0;}
.file-drop .fd-title{font-family:'Poppins',sans-serif; font-weight:500; font-size:14px; color:var(--ink);}
.file-drop .fd-sub{font-family:'Poppins',sans-serif; font-weight:300; font-size:12.5px; color:var(--ink-soft); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* honeypot — hidden from real users, bots fill it in */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* submit status message */
.form-status{margin-top:16px; font-family:'Poppins',sans-serif; font-weight:400; font-size:14px; line-height:1.6; border-radius:10px; display:none;}
.form-status.show{display:block; padding:14px 16px;}
.form-status.success{background:rgba(34,160,90,0.1); border:1px solid rgba(34,160,90,0.35); color:#1c7a45;}
.form-status.error{background:rgba(214,60,40,0.08); border:1px solid rgba(214,60,40,0.32); color:#b23a25;}
.form-status.loading{background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);}
.btn-pill.is-loading{opacity:0.7; pointer-events:none;}

/* info column on the application page */
.apply-info{background:var(--blue); border-radius:var(--radius); padding:34px 32px; color:#fff;}
.apply-info h3{font-size:20px; font-weight:800; margin-bottom:22px;}
.ai-list{display:flex; flex-direction:column; gap:20px;}
.ai-item{display:flex; gap:15px; align-items:flex-start;}
.ai-item .ic{width:42px; height:42px; flex-shrink:0; border-radius:11px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center;}
.ai-item .ic svg{width:20px; height:20px; stroke:var(--red); fill:none; stroke-width:1.9;}
.ai-item .t{font-size:15px; font-weight:600;}
.ai-item .d{font-family:'Poppins',sans-serif; font-weight:300; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.72); margin-top:4px;}
[dir=rtl] .hp-field{left:auto; right:-9999px;}

/* ============ FOOTER ============ */
.footer-bottom .socials{display:flex; gap:10px; align-items:center;}
.footer-bottom .socials a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(1,173,239,0.28); transition:.3s;}
.footer-bottom .socials a svg{width:19px; height:19px; fill:currentColor;}
.footer-bottom .socials a:hover{background:var(--red); box-shadow:0 8px 22px rgba(246,130,31,0.45); transform:translateY(-4px);}
.footer-bottom .socials a.wa{background:var(--red); box-shadow:0 6px 16px rgba(246,130,31,0.32);}
.footer-bottom .socials a.wa:hover{background:var(--blue); box-shadow:0 8px 22px rgba(1,173,239,0.45);}

footer{background:var(--off-white); padding:80px 0 30px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; padding-bottom:70px; border-bottom:1px solid var(--line);}
.footer-brand .brand{margin-bottom:20px;}
.footer-brand .brand-text .l1{color:var(--ink);}
.footer-brand p{font-size:14.5px; color:var(--ink-soft); line-height:1.75; letter-spacing:0.01em; max-width:290px;}
.footer-brand .license{margin-top:18px; font-size:11.5px; color:var(--ink-soft); font-family:'Poppins', sans-serif; padding:10px 14px; background:var(--paper); border-radius:4px; display:inline-block;}
.footer-col h5{font-family:'Poppins', sans-serif; font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px;}
.footer-col a, .footer-col p{display:block; font-size:14px; color:var(--ink); margin-bottom:12px;}
.footer-col a:hover{color:var(--red);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; gap:14px;}
.footer-bottom .socials-label{font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-right:4px;}
@media(max-width:1100px){ .footer-top{grid-template-columns:1fr 1fr;} }
@media(max-width:760px){ .footer-top{grid-template-columns:1fr;} }

/* ============ NEW: ABOUT — EDITORIAL STORY ============ */
#story-editorial{background:var(--off-white);}
.story-wrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:80px; align-items:start;}
.story-aside{position:sticky; top:130px;}
.story-aside .kicker{display:inline-flex; align-items:center; gap:9px; font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); background:rgba(246,130,31,0.1); border:1px solid rgba(246,130,31,0.24); padding:7px 15px; border-radius:999px; margin-bottom:18px;}
.story-aside .kicker::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--red);}
.story-aside h2{font-size:clamp(30px,3.6vw,50px); font-weight:800; letter-spacing:-0.02em; line-height:1.05; }
.story-aside .est{margin-top:26px; display:inline-flex; align-items:baseline; gap:10px;}
.story-aside .est .n{font-family:'Poppins',sans-serif; font-size:52px; font-weight:700; color:var(--blue); line-height:1;}
.story-aside .est .t{font-size:12.5px; color:var(--ink-soft); max-width:16ch; line-height:1.5;}
.story-body p{font-size:17px; line-height:1.85; color:var(--ink-soft); margin-bottom:22px; max-width:60ch;}
.story-body p .drop{float:left; font-family:'Archivo',sans-serif; font-weight:800; font-size:66px; line-height:0.78; color:var(--red); padding:6px 14px 0 0;}
.story-quote{margin:40px 0; padding:32px 36px; background:var(--paper); border-left:4px solid var(--red); border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.story-quote p{font-family:'Archivo',sans-serif; font-weight:600; font-size:22px; line-height:1.45; color:var(--ink); margin:0;}
.story-sign{margin-top:34px; display:flex; align-items:center; gap:16px; padding-top:26px; border-top:1px solid var(--line);}
.story-sign .sig{font-family:'Archivo',sans-serif; font-weight:800; font-size:26px; color:var(--ink); font-style:italic;}
.story-sign .who{font-size:13px; color:var(--ink-soft);}
.story-sign .who b{color:var(--ink); font-weight:700; display:block; font-size:14.5px;}
[dir=rtl] .story-body p .drop{float:right; padding:6px 0 0 14px;}
[dir=rtl] .story-quote{border-left:none; border-right:4px solid var(--red); border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
@media(max-width:900px){
  .story-wrap{grid-template-columns:1fr; gap:40px;}
  .story-aside{position:static;}
}

/* metric strip */
.metric-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:70px;}
.metric{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:30px 26px; text-align:center;}
.metric .m-n{font-family:'Poppins',sans-serif; font-size:34px; font-weight:700; color:var(--blue);}
.metric .m-n .plus{color:var(--red);}
.metric .m-l{font-size:12.5px; color:var(--ink-soft); margin-top:8px; letter-spacing:0.02em;}
@media(max-width:760px){ .metric-strip{grid-template-columns:1fr 1fr; gap:14px;} }

/* ============ NEW: SERVICES — INDUSTRY CLUSTERS ============ */
.cluster-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:66px;}
.cluster{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:38px 36px; transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);}
.cluster:hover{transform:translateY(-6px); box-shadow:0 26px 60px rgba(1,173,239,0.12);}
.cluster .c-head{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.cluster .c-ic{width:52px; height:52px; border-radius:14px; background:linear-gradient(150deg,var(--blue),#0189bd); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 10px 24px rgba(1,173,239,0.28);}
.cluster .c-ic svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8;}
.cluster h4{font-size:19px; font-weight:800;}
.cluster .c-sub{font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-top:3px;}
.cluster .tags{display:flex; flex-wrap:wrap; gap:9px;}
.cluster .tags span{font-family:'Poppins',sans-serif; font-weight:300; font-size:13px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:.3s;}
.cluster:hover .tags span{border-color:rgba(246,130,31,0.4);}
@media(max-width:760px){ .cluster-grid{grid-template-columns:1fr;} }

/* ============ NEW: SERVICES — ENGAGEMENT MODELS ============ */
#engagement{background:#01adef; background-image:linear-gradient(158deg, rgba(3,22,34,0.05) 0%, rgba(3,22,34,0.34) 100%);}
#engagement .eyebrow{color:#fff;} #engagement .eyebrow::before{background:var(--red);}
#engagement h2.section-title{color:#fff; text-shadow:0 2px 20px rgba(3,22,34,0.30);}
#engagement .e-lead{color:rgba(255,255,255,0.82); margin-top:16px; max-width:52ch; line-height:1.7;}
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:60px;}
.model{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius); padding:36px 32px; backdrop-filter:blur(4px); transition:.4s;}
.model:hover{transform:translateY(-6px); background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3);}
.model.feature{background:linear-gradient(160deg,var(--red) 0%,#d96a12 100%); border-color:rgba(255,255,255,0.35); box-shadow:0 30px 70px rgba(246,130,31,0.3);}
.model .m-tag{font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.6);}
.model.feature .m-tag{color:#fff;}
.model h4{font-size:22px; font-weight:800; color:#fff; margin-top:8px;}
.model p{font-size:14px; color:rgba(255,255,255,0.82); line-height:1.65; margin-top:12px;}
.model.feature p{color:#fff;}
.model ul{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:12px;}
.model li{display:flex; gap:11px; align-items:flex-start; font-family:'Poppins',sans-serif; font-weight:300; font-size:13.5px; color:rgba(255,255,255,0.9);}
.model li svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.4; flex-shrink:0; margin-top:2px;}
@media(max-width:900px){ .model-grid{grid-template-columns:1fr;} }

/* ============ NEW: FAQ ACCORDION ============ */
.faq-list{margin-top:56px; max-width:840px;}
.faq{border-bottom:1px solid var(--line);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; text-align:start; cursor:pointer;}
.faq-q h4{font-size:18px; font-weight:700; color:var(--ink);}
.faq-q .fic{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.35s;}
.faq-q .fic svg{width:16px; height:16px; stroke:var(--red); fill:none; stroke-width:2.4; transition:transform .35s ease;}
.faq.open .faq-q .fic{background:var(--red); border-color:var(--red);}
.faq.open .faq-q .fic svg{stroke:#fff; transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{font-size:15px; color:var(--ink-soft); line-height:1.75; padding:0 0 26px; max-width:64ch;}

/* ============ REVEAL UTILS ============ */
.reveal-up{opacity:0; transform:translateY(40px);}

/* ============ RESPONSIVE GLOBAL ============ */
@media(max-width:1100px){ section{padding:120px 0;} }
@media(max-width:1200px){
  .nav-links{display:none;}
  .nav-cta .btn-outline{display:none;}
  .burger{display:block;}
}
@media(max-width:760px){
  .container{padding:0 24px;}
  /* hide the header "Request Manpower" CTA on mobile (kept on larger screens) */
  .nav-cta .btn-pill{display:none;}
  /* scale down the pill CTAs so they don't feel oversized on phones */
  .btn-pill{font-size:12.5px; gap:12px; padding:6px 6px 6px 22px;}
  .btn-pill .pill-ic{width:38px; height:38px;}
  .btn-pill .pill-ic svg{width:16px; height:16px;}
  .btn{font-size:12px; padding:13px 22px;}
  section{padding:90px 0;}
}

/* ============ WHATSAPP FLOATING BUTTON ============ */
#wa-float{
  position:fixed; right:26px; bottom:26px; z-index:9500;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  box-shadow:0 12px 30px rgba(3,22,34,0.28), 0 4px 10px rgba(3,22,34,0.18);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  animation:waIn .5s cubic-bezier(.2,.8,.2,1) both;
}
#wa-float svg{width:40px; height:40px;}
#wa-float .wa-bubble{fill:#25D366;}
#wa-float .wa-phone{fill:#fff;}
#wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:#25D366; z-index:-1; animation:waPulse 2.4s ease-out infinite;
}
#wa-float:hover{transform:scale(1.08); box-shadow:0 16px 40px rgba(3,22,34,0.34), 0 6px 14px rgba(3,22,34,0.22);}
@keyframes waIn{from{opacity:0; transform:scale(0) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);}}
@keyframes waPulse{0%{transform:scale(1); opacity:0.5;} 70%{transform:scale(1.6); opacity:0;} 100%{opacity:0;}}
[dir=rtl] #wa-float{right:auto; left:26px;}
@media(max-width:760px){
  #wa-float{right:18px; bottom:18px; width:54px; height:54px;}
  #wa-float svg{width:34px; height:34px;}
}
@media(prefers-reduced-motion:reduce){
  #wa-float, #wa-float::before{animation:none;}
  #wa-float::before{display:none;}
}