/* ================= FONTS ================= */
@font-face{
  font-family:'Manrope';
  src:url('../assets/fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ================= TOKENS ================= */
:root{
  --primary:#1D4ED8;
  --secondary:#0EA5E9;
  --accent:#0B2447;
  --white:#FFFFFF;
  --text:#0B1A2B;

  --nav-bg:#0b0f14;
  --radius:16px;
  --shadow-lg:0 20px 50px rgba(13,60,146,.20);
  --glow:0 0 18px rgba(14,165,233,.55), 0 0 36px rgba(29,78,216,.35);

  --dropdown-bg: rgba(15,22,35,.96);
  --dropdown-border: rgba(148,163,184,.28);
  --dropdown-text:#EAF2FF;

  --nav-h: 60px;

  --promo-bg:#0e1320f2;
  --promo-card:#0f172a;
  --promo-ring: rgba(99, 102, 241,.35);
}

/* ================= BASE ================= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--text); background:#fff;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.65;
}
body.no-scroll{ overflow:hidden }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(1160px,92%); margin-inline:auto }

/* Skip link (a11y) */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:10px 14px; z-index:100;
  background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,.12); outline:none;
}

/* ================= NAVBAR ================= */
.navbar{ position:sticky; top:0; z-index:60; background: var(--nav-bg); box-shadow: 0 1px 0 rgba(255,255,255,.06) }
.nav__wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; height: var(--nav-h) }

/* Brand */
.brand{ display:flex; align-items:center; gap:10px; color:#fff; position:relative; z-index:1; padding: 0 8px 0 12px; min-width:0 }
.brand__logo{ height: calc(var(--nav-h) - 18px); width:auto; filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(14,165,233,.5)) drop-shadow(0 6px 12px rgba(0,0,0,.25)) }
.brand__text{ display:flex; flex-direction:column; line-height:1; min-width:0 }
.brand__line{ font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:.3px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw }
.brand__line--strong{ background: linear-gradient(90deg, var(--secondary), var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:18px }
.brand__line--accent{ color: var(--secondary) }
.brand::before{
  content:""; position:absolute; left:-10px; top:50%; transform: translateY(-50%);
  width: calc(100% + 20px); height: calc(var(--nav-h) - 12px); border-radius:999px;
  background:
    radial-gradient(120px 60px at 20% 60%, rgba(255,255,255,.45), transparent 62%),
    radial-gradient(180px 80px at 70% 40%, rgba(173,216,255,.22), transparent 65%),
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(209,235,255,.06));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(14,165,233,.12);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  z-index:-1; opacity:.92;
}

/* Desktop nav */
.navlinks{ display:flex; align-items:center; gap:6px }
.navlink{
  color:#fff; font-weight:700; padding:10px 12px; border-radius:999px; position:relative; overflow:hidden; transition:.22s ease;
}
.navlink::after{
  content:""; position:absolute; left:50%; bottom:6px; width:0; height:2px; background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius:2px; transition:.25s ease; transform: translateX(-50%); box-shadow: 0 0 10px rgba(14,165,233,.6)
}
.navlink:hover{ text-shadow:0 0 12px rgba(14,165,233,.45) }
.navlink:hover::after, .navlink.active::after{ width:60% }

/* Dropdown */
.dropdown{ position:relative; z-index:61 }
.drop__trigger{ background:transparent; border:0; cursor:pointer; color:#fff; font-weight:700; padding:10px 12px; border-radius:999px; display:flex; align-items:center; gap:6px }
.chev{ transition: transform .2s ease }
.drop__menu{
  position:absolute; top: calc(100% + 12px); left:50%; transform: translate(-50%,-8px) scale(.98);
  min-width: 230px; padding:10px; background: var(--dropdown-bg); color: var(--dropdown-text);
  border:1px solid var(--dropdown-border); border-radius:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(14,165,233,.15);
  pointer-events:none; opacity:0; transition:.22s ease; animation: neonPulse 3s ease-in-out infinite alternate;
}
@keyframes neonPulse{
  from{ box-shadow:0 12px 40px rgba(0,0,0,.40),0 0 12px rgba(14,165,233,.35) }
  to  { box-shadow:0 16px 50px rgba(0,0,0,.55),0 0 18px rgba(29,78,216,.55) }
}
.drop__item{ display:block; padding:12px 14px; border-radius:10px; color:var(--dropdown-text); transition:transform .16s ease, background .16s ease; font-weight:700 }
.drop__item:hover{ background: rgba(255,255,255,.10); transform: translateX(2px) }
.dropdown:hover .drop__menu{ opacity:1; transform: translate(-50%,0) scale(1); pointer-events:auto }
.dropdown:hover .chev{ transform: rotate(180deg) }

/* Actions to the right of nav */
.nav__actions{ display:flex; align-items:center; gap:8px; margin-right:6px }
.ig-badge{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14) }
.ig-badge img{ width:100%; height:100%; object-fit:contain }

/* Quick Contact (details/summary) */
.qc{ position:relative }
.qc[open] .qc__menu{ opacity:1; transform: translateY(0); pointer-events:auto }
.qc__btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; cursor:pointer;
}
.qc__btn svg{ width:20px; height:20px; fill:#fff }
.qc__menu{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width: 180px; background: var(--dropdown-bg); color: var(--dropdown-text);
  border:1px solid var(--dropdown-border); border-radius:12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(14,165,233,.12);
  padding:8px; opacity:0; transform: translateY(-6px); transition:.2s ease; pointer-events:none;
}
.qc__item{
  display:block; padding:10px 12px; border-radius:10px; font-weight:800; letter-spacing:.2px;
}
.qc__item:hover{ background:rgba(255,255,255,.08) }

/* Hamburger */
.hamburger{ width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); position:relative; cursor:pointer }
.hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:.25s ease }
.hamburger span:nth-child(1){ top:13px } .hamburger span:nth-child(2){ top:21px } .hamburger span:nth-child(3){ top:29px }
.hamburger.open span:nth-child(1){ transform: translateY(8px) rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg) }

/* Mobile panel */
.mobile__panel{
  position:fixed; inset:var(--nav-h) 0 0 0; height: calc(100vh - var(--nav-h));
  background: rgba(11,15,20,.98); color:#fff;
  transform: translateY(-8px); opacity:0; pointer-events:none; transition:.22s ease;
  border-top:1px solid rgba(255,255,255,.08); z-index:59; overflow-y:auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.mobile__panel.show{ transform:none; opacity:1; pointer-events:auto }
.mobile__list{ padding:16px 20px 30px; display:flex; flex-direction:column; gap:8px }
.m-link{ padding:12px 10px; border-radius:10px; font-weight:800 }
.m-link:hover{ background: rgba(255,255,255,.08) }
.m-acc{ padding:12px 10px; text-align:left; border:0; background:rgba(255,255,255,.06); color:#fff; border-radius:10px; font-weight:900; cursor:pointer }
.m-sub{ padding:6px 10px 14px; display:flex; flex-direction:column; gap:6px }
.m-sublink{ padding:10px; border-radius:8px; background:rgba(255,255,255,.04); font-weight:700 }
.m-sublink:hover{ background:rgba(255,255,255,.12) }
.m-social{ display:flex; gap:12px; padding-top:10px }
.m-social__icon{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06) }
.m-social__icon img{ width:22px; height:22px }

/* Responsive for navbar/hero */
@media (max-width: 980px){
  :root{ --nav-h: 56px }
  .navlinks{ display:none }
  .brand__line{ max-width: 46vw; font-size:15px }
  .brand__line--strong{ font-size:17px }
  .nav__actions{ gap:6px }
  .ig-badge, .qc__btn, .hamburger{ width:40px; height:40px }
}

/* ================= HERO ================= */
.heroSplit{
  position:relative; color:#0b1a2b;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(29,78,216,.10), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  overflow:hidden;
}
.heroSplit__grid{ display:grid; align-items:center; gap:40px; grid-template-columns: 1.2fr 1fr; min-height: 78vh; padding:64px 0 56px }
.hero__title{ font-family:'Manrope', sans-serif; font-size: clamp(32px, 4.7vw, 58px); margin:0 0 12px; background: linear-gradient(90deg, var(--accent), var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero__subtitle{ font-size: clamp(16px, 1.6vw, 20px); color:#334155; opacity:.95; margin:0 0 16px }
.rotator{ margin:12px 0 18px; font-weight:900; font-family:'Manrope',sans-serif; font-size: clamp(18px, 2.2vw, 26px); color:#0b1a2b }
.rotator strong{ color: var(--primary); position:relative; padding-right:8px }
.rotator strong::after{ content:""; position:absolute; right:0; top:8%; width:2px; height:84%; background: currentColor; opacity:.8; animation: blink .9s steps(2,end) infinite }
@keyframes blink{ 50%{ opacity:0 } }
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:999px; font-weight:800; transition:.25s ease; position:relative; overflow:hidden }
.btn:focus{ outline:none; box-shadow:0 0 0 6px rgba(29,78,216,.20) }
.btn-primary{ color:#0B2447; background: linear-gradient(90deg,#fff,#dff3ff,#fff); background-size:200% 100%; animation: sheen 6s ease-in-out infinite; box-shadow: var(--glow) }
@keyframes sheen{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
.btn-primary:hover{ transform: translateY(-1px) scale(1.02) }
.btn-ghost{ color:#0b1a2b; border:1px solid rgba(11,26,43,.18); background: rgba(255,255,255,.85) }
.btn-ghost:hover{ background: rgba(255,255,255,.98) }
.heroSplit__media{ display:grid; place-items:center }
.mediaBox{ width:100%; max-width: 640px; background: rgba(255,255,255,.12); border:1px solid rgba(14,165,233,.25); border-radius: 18px; box-shadow: var(--shadow-lg); backdrop-filter: blur(12px) saturate(135%); overflow:hidden }
.mediaBox__video{ width:100%; aspect-ratio: 16/9; max-height: 62vh; object-fit: cover; object-position: center; display:block; filter: saturate(110%) contrast(105%) }

/* Reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms) }
.reveal.show{ opacity:1; transform:none }

/* Sections */
.section{ padding:70px 0 }
.section h2{ font-family:'Manrope',sans-serif; font-size: clamp(24px, 3.2vw, 36px); margin:0 0 12px }

/* عنوان الخدمات */
.titleChip{
  display:inline-block; padding:10px 18px; border-radius:999px;
  background: linear-gradient(90deg,#e6f3ff,#ffffff 60%);
  border:1px solid rgba(29,78,216,.18);
  box-shadow: 0 6px 20px rgba(13,60,146,.15), 0 0 18px rgba(29,78,216,.25) inset;
  color:#0b1a2b;
}

/* =================== SERVICES ORBIT =================== */
.servicesOrbit{ background: linear-gradient(180deg,#f7fbff 0,#ffffff 100%) }
.sectionTitle{ font-family:'Manrope',sans-serif; font-weight:800; text-align:center; font-size: clamp(24px,3.4vw,34px); margin:0 0 26px; color:#0b1a2b }
.orbit2{ position:relative; width:min(90vw, 720px); aspect-ratio:1; margin:0 auto }
.centerDisc2{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: clamp(120px, 20vw, 170px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.35)),
    linear-gradient(135deg, rgba(14,165,233,.25), rgba(29,78,216,.25));
  border:1px solid rgba(14,165,233,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 22px rgba(14,165,233,.25);
  display:grid; place-items:center; text-align:center; z-index:1;
}
.centerDisc2 span{ font-family:'Manrope',sans-serif; font-weight:900; color:#0B2447; letter-spacing:.4px }
.spokes2{ pointer-events:none }
.spoke2{
  position:absolute; left:50%; top:50%; height:2px; transform-origin:left center;
  background: linear-gradient(90deg, rgba(14,165,233,.75), rgba(14,165,233,0));
  filter: drop-shadow(0 0 6px rgba(14,165,233,.35)); border-radius:2px; opacity:.8;
}
.orbItem{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); text-align:center; transition: transform .25s ease }
.card2{
  width: clamp(120px, 18vw, 160px);
  background:#fff; border:1px solid rgba(14,165,233,.18); border-radius:16px; overflow:hidden;
  box-shadow: 0 16px 40px rgba(13,60,146,.15); transition: transform .25s ease, box-shadow .25s ease;
}
.card2:hover{ transform: translateY(-4px); box-shadow: 0 22px 54px rgba(13,60,146,.22) }
.card2 img{ width:100%; height: 110px; object-fit:cover; background:#0b0f14 }
.card2 .caption{ font-weight:800; color:#0b1a2b; padding:8px 10px 6px; font-size:14px }
.btn-svc{
  display:inline-flex; align-items:center; justify-content:center;
  margin: 0 10px 12px; padding:8px 12px; border-radius:999px;
  background: var(--primary); color:#fff; font-weight:800; font-size:13px;
  border:1px solid transparent; transition:.2s ease; cursor:pointer;
}
.btn-svc:hover,.btn-svc:active,.btn-svc:focus{
  background:#fff; color: var(--primary); border-color: rgba(29,78,216,.25);
  box-shadow: 0 0 0 4px rgba(29,78,216,.14);
}

/* Stack mode mobile */
@media (max-width: 680px){
  .orbit2{ width:min(94vw, 560px); aspect-ratio:auto }
  .orbit2.stackMode{ display:block }
  .orbit2.stackMode .centerDisc2,
  .orbit2.stackMode .spokes2{ display:none !important }
  .orbit2.stackMode .orbItem{ position:static; transform:none!important; opacity:1!important; pointer-events:auto; display:block; margin:14px auto }
  .orbit2.stackMode .card2{ width: min(94vw, 520px) }
  .orbit2.stackMode .card2 img{ height: 180px }
}

/* =================== EXPERIENCE =================== */
.experienceBanner{
  position:relative; color:#fff; overflow:hidden; background:#000;
  background-size: cover; background-position:center; background-repeat:no-repeat;
  min-height:420px;
}
.experienceBanner__shade{ position:relative; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.62)); padding:70px 0 }
.exp__grid{ display:grid; grid-template-columns: 1fr }
.exp__text{ max-width:760px }
.exp__title{ font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(22px, 3.2vw, 36px); margin:0 0 14px; color:#e7d0b0 }
.exp__bullets{ list-style:none; padding:0; margin:8px 0 14px }
.exp__bullets li{ position:relative; padding-left:32px; margin:8px 0; font-weight:900; letter-spacing:.3px }
.exp__bullets li::before{
  content:"✓"; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; box-shadow: 0 0 14px rgba(255,255,255,.15)
}
.exp__lead{ color:#e9eef7; line-height:1.8; margin:6px 0 16px }
.exp__ctaRow{ display:flex; gap:10px; flex-wrap:wrap }
.exp__mini{ padding:8px 12px; font-size:13px }

/* =================== EXPERTISE =================== */
.expertise{ background: linear-gradient(180deg,#0e1320 0,#0b0f14 100%); color:#e9eef7 }
.expertise__grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center }
@media (max-width: 900px){ .expertise__grid{ grid-template-columns:1fr } .expertise__media{ order:-1 } }
.expertise__title{
  font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(26px,3.4vw,38px);
  margin:0 0 10px; background: linear-gradient(90deg,#e6f3ff,#a7c4ff); -webkit-background-clip:text; background-clip:text; color:transparent
}
.expertise__lead{ color:#cfe4ff; margin:0 0 10px; line-height:1.8 }
.expertise__p{ color:#dbe6f5; margin:0 0 10px }
.expertise__bullets{ list-style:none; padding:6px 0 0; margin:0 0 14px }
.expertise__bullets li{
  position:relative; padding-left:30px; margin:10px 0; font-weight:800; letter-spacing:.2px; color:#eaf2ff;
}
.expertise__bullets li::before{
  content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(148,163,184,.35); color:#9dd2ff; box-shadow: 0 0 12px rgba(14,165,233,.25)
}
.expertise__image{ width:100%; border-radius:16px; border:1px solid rgba(148,163,184,.22); box-shadow:0 24px 60px rgba(0,0,0,.35); object-fit:cover }
.expertise__badges{ display:flex; gap:18px; align-items:center; margin-top:8px }
.expertise__badge{ height:54px; width:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)) }

/* =================== STUDIO =================== */
.studio{ background: linear-gradient(180deg,#ffffff 0,#f7fbff 100%); color:#0b1a2b }
.studio__grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:center }
@media (max-width: 980px){ .studio__grid{ grid-template-columns:1fr } .studio__media{ margin-top:8px } }
.studio__title{ font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(26px,3.2vw,38px); margin:0 0 10px; color:#0B2447 }
.studio__lead{ color:#1e293b; margin:0 0 10px; line-height:1.8 }
.studio__p{ color:#334155; margin:0 0 10px }
.studio__bullets{ list-style:none; padding:6px 0 0; margin:0 0 18px }
.studio__bullets li{ position:relative; padding-left:28px; margin:10px 0; font-weight:800; color:#0b1a2b }
.studio__bullets li::before{
  content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:8px; display:grid; place-items:center;
  background:rgba(29,78,216,.08); border:1px solid rgba(29,78,216,.25); color:#1D4ED8; box-shadow: 0 0 10px rgba(29,78,216,.15)
}
.studio__ctaRow{ display:flex; gap:10px; flex-wrap:wrap }

/* Cards */
.studio__media{ display:grid; grid-template-columns:1fr; gap:18px; perspective:1000px }
.studioCard{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(148,163,184,.25);
  box-shadow: 0 20px 50px rgba(13,60,146,.15);
  transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease;
  animation: cardFloat 6s ease-in-out infinite;
}
.studioCard:nth-child(2){ animation-delay: .8s }
@keyframes cardFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}
.studioCard img{ width:100%; height: 320px; object-fit:cover; display:block; filter: saturate(108%) contrast(103%) }
.studioCard::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,36,71,0) 20%, rgba(11,36,71,.45) 100%) }
.studioCard figcaption{
  position:absolute; left:12px; bottom:12px; z-index:1;
  padding:8px 12px; border-radius:999px; font-weight:900; font-family:'Manrope',sans-serif;
  background: rgba(255,255,255,.92); color:#0b1a2b; border:1px solid rgba(148,163,184,.35);
  transform: translateY(8px); opacity:.98; transition: transform .25s ease, box-shadow .25s ease;
}
.studioCard:hover{ transform: rotateX(2deg) rotateY(-2deg) scale(1.01); box-shadow: 0 24px 64px rgba(13,60,146,.22) }
.studioCard:hover figcaption{ transform: translateY(0); box-shadow: 0 6px 20px rgba(0,0,0,.12) }
.tilt{ will-change: transform }

/* =================== VISION =================== */
.vision--light{ background: linear-gradient(180deg,#ffffff 0,#f9fbff 100%); color:#0b1a2b }
.vision__grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:38px; align-items:center }
.vision__title{ font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(26px,3.4vw,38px); color:#0B2447; margin:0 0 10px }
.vision__lead{ color:#1e293b; margin:0 0 10px; line-height:1.8 }
.vision__p{ color:#334155; margin:0 0 10px }
.vision__image{ width:100%; border-radius:16px; border:1px solid rgba(148,163,184,.25); box-shadow:0 24px 60px rgba(0,0,0,.12) }
@media (max-width: 900px){ .vision__grid{ grid-template-columns:1fr } .vision__media{ order:-1 } }

/* =================== PLEDGE =================== */
.pledgeStrip{ position:relative; overflow:hidden; color:#0b1a2b; background:#fff; background-size: cover; background-position:center; background-repeat:no-repeat }
.pledgeStrip::before{ content:""; position:absolute; inset:0; background: rgba(255,255,255,.5) }
.pledgeStrip__overlay{ position:relative; z-index:1; background: transparent; padding:56px 0 }
.pledge__headline{ text-align:center; font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(22px, 3.2vw, 34px); margin:0; line-height:1.35 }
.pledge__headline span{ color:#1D4ED8 }

/* =================== LAB ASSURE =================== */
.labAssure--gray{ background:#f3f5f9; color:#0b1a2b }
.lab__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:center }
.lab__title{ font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(22px,3vw,32px); margin:0 0 8px }
.lab__text p{ color:#334155; margin:0 0 10px }
.lab__image{ width:100%; border-radius:16px; border:1px solid rgba(148,163,184,.22); box-shadow:0 24px 60px rgba(0,0,0,.12) }
@media (max-width: 900px){ .lab__grid{ grid-template-columns:1fr } .lab__media{ order:-1 } }

/* =================== REVIEWS =================== */
.reviews{ background: linear-gradient(180deg,#0b0f14 0,#0e1320 100%); color:#eaf2ff }
.reviews__title{ text-align:center; margin:0 0 26px }
.reviews__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 900px){ .reviews__grid{ grid-template-columns:1fr } }

.review{
  display:grid; grid-template-columns: 64px 1fr; gap:14px;
  padding:18px; border-radius:16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(148,163,184,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.review:hover{ transform: translateY(-2px); background: rgba(255,255,255,.05); box-shadow: 0 22px 54px rgba(0,0,0,.32) }

/* New Google avatar token */
.review__avatar--g{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(148,163,184,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); overflow:hidden;
}
.review__avatar--g svg{ width:36px; height:36px; display:block }

.review__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px }
.review__name{ font-family:'Manrope',sans-serif; font-size:18px; margin:0; color:#e6f3ff }
.review__role{ font-size:13px; color:#9fb7d9; font-weight:700 }
.review__stars{ font-size:18px; letter-spacing:2px; color:#F59E0B; text-shadow:0 0 10px rgba(245,158,11,.25) }
.review__text{ margin:8px 0 0; color:#d7e4fd }

/* =================== VISIT / CONTACT =================== */
.visit{ background: linear-gradient(180deg,#0e1320 0,#0b0f14 100%); color:#e9eef7 }
.visit__wrap{ max-width:980px; margin-inline:auto }
.visit__title{
  text-align:center; font-family:'Manrope',sans-serif; font-weight:900;
  font-size: clamp(26px,3.4vw,42px);
  margin:0 0 14px; color:#e7d0b0;
}
.visit__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:12px;
  border-top:1px solid rgba(148,163,184,.18); padding-top:18px;
}
@media (max-width: 860px){ .visit__grid{ grid-template-columns:1fr; } }

.visit__block{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px; padding:18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.visit__blockTitle{
  font-family:'Manrope',sans-serif; letter-spacing:.3px; font-weight:900;
  color:#e6f3ff; margin:0 0 8px; text-align:center;
}
.visit__line{
  margin:8px 0 0; color:#d7e4fd; text-align:center; font-weight:700;
}
.visit__line a{ color:#cfe4ff; text-decoration:underline dotted rgba(207,228,255,.35) }
.visit__line a:hover{ color:#fff; text-decoration-color:#fff }

/* Manager card */
.visit__person{ display:flex; justify-content:center; margin-top:20px }
.visit__card{
  display:flex; gap:16px; align-items:center; padding:14px; width:100%;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.22); border-radius:16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.visit__avatar{
  width:120px; height:120px; object-fit:cover; border-radius:14px;
  border:1px solid rgba(148,163,184,.35); box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.visit__caption{ display:flex; flex-direction:column; gap:4px }
.visit__name{ font-family:'Manrope',sans-serif; font-weight:900; font-size:22px; color:#e6f3ff }
.visit__role{ color:#9fb7d9; font-weight:800 }
.visit__meta{ list-style:none; padding:6px 0 0; margin:0; display:flex; gap:18px; flex-wrap:wrap; color:#cfe4ff; font-weight:800 }
.visit__meta a{ color:#cfe4ff; text-decoration:underline dotted rgba(207,228,255,.35) }
@media (max-width: 640px){
  .visit__card{ flex-direction:column; text-align:center }
  .visit__meta{ justify-content:center }
}

/* Contact layout */
.contactLayout{
  margin-top:22px; display:grid; grid-template-columns: 1.05fr 1fr; gap:22px; align-items:start;
}
@media (max-width: 880px){
  .contactLayout{ grid-template-columns:1fr; }
}
.contactLeft p{ margin:0 0 10px; color:#dce8ff }
.contactChips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px }
.chip{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#eaf2ff; font-weight:800
}
.chip.active{
  background: rgba(29,78,216,.14); border-color: rgba(29,78,216,.35); box-shadow: 0 0 0 6px rgba(29,78,216,.10)
}

/* Map responsive box */
.mapWrap{
  position:relative; width:100%; border-radius:16px; overflow:hidden;
  border:1px solid rgba(148,163,184,.22); background:#0a0f18;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  aspect-ratio: 16/12;
}
.mapWrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
.mapCover{
  position:absolute; inset:0; display:grid; place-items:end start; padding:10px;
  background:linear-gradient(180deg, rgba(11,15,20,.25), rgba(11,15,20,0) 40%);
  color:#eaf2ff; font-weight:800; pointer-events:none;
}
@media (max-width:600px){
  .mapWrap{ aspect-ratio: 16/14 }
}

/* Contact form */
.contactForm{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.22); border-radius:16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  padding:16px;
}
.contactForm h3{ margin:0 0 8px; font-family:'Manrope',sans-serif; color:#e6f3ff }
.contactForm label{ display:block; font-weight:800; color:#cfe4ff; margin:10px 0 6px }
.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm input[type="file"],
.contactForm textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(148,163,184,.25);
  background:#0f1522; color:#eaf2ff; outline:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.contactForm textarea{ resize:vertical }
.contactForm small{ color:#9fb7d9 }
.agreeRow{ display:flex; align-items:center; gap:10px; margin:10px 0 }
.formStatus{ margin-top:10px; font-weight:800 }

/* ===== Page transition + ripple ===== */
.pageFade{ position:fixed; inset:0; pointer-events:none; z-index:80; background: radial-gradient(60% 50% at 50% 50%, rgba(14,165,233,.10), rgba(11,36,71,.18)); opacity:0; transition: opacity .35s ease }
.pageFade.in{ opacity:1 }
.ripple-anim{ position:absolute; width:10px; height:10px; background:rgba(255,255,255,.5); border-radius:50%; transform:translate(-50%,-50%) scale(0); animation:ripple .6s ease-out; pointer-events:none; mix-blend-mode:screen }
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(20); opacity:0 } }

/* ================= FOOTER ================= */
.siteFooter{ background:#060a12; color:#cfe4ff; border-top:1px solid rgba(148,163,184,.18); padding:24px 0 }
.foot__grid{ display:grid; grid-template-columns:1.2fr .7fr .9fr; gap:20px; align-items:start }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr; text-align:center } }
.foot__logo{ width:54px; height:auto; filter: drop-shadow(0 2px 10px rgba(255,255,255,.2)) }
.foot__title{ font-family:'Manrope',sans-serif; font-weight:900; margin-top:6px }
.foot__copy{ margin-top:6px; opacity:.9 }
.foot__links{ display:flex; flex-direction:column; gap:6px; font-weight:800 }
.foot__links a{ color:#d7e4fd }
.foot__meta{ font-weight:800 }

/* ============== PROMO (once per visit) ============== */
.promoModal[hidden]{ display:none !important }
.promoModal{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
}
.promoBackdrop{
  position:absolute; inset:0; background:var(--promo-bg); backdrop-filter: blur(2px);
}
.promoCard{
  position:relative; z-index:1; width:min(520px, 92vw); border-radius:18px;
  background: radial-gradient(120% 120% at 20% 0%, #0b1530, var(--promo-card));
  border:1px solid rgba(148,163,184,.28);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 8px var(--promo-ring) inset;
  color:#eaf2ff; overflow:hidden;
}
.promoClose{
  position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:10px; border:0; cursor:pointer; font-size:20px; font-weight:900;
  background: rgba(255,255,255,.06); color:#fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}
.promoBody{ padding:20px 18px 10px; text-align:center }
.promoBody h3{ margin:0 0 8px; font-family:'Manrope',sans-serif; font-weight:900; font-size: clamp(20px,3.4vw,28px) }
.promoBody h3 span{ color:#38bdf8 }
.promoBody p{ margin:0 0 8px; color:#cfe4ff }
.promoBody small{ color:#9fb7d9 }
.promoActions{ padding:0 18px 18px; display:flex; justify-content:center }

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce){
  .btn, .navlink, .drop__menu, .reveal, .studioCard{ transition-duration:0s !important; animation: none !important }
}
/* ===== [ADD] HERO: موبايل—صف واحد والفيديو تحت النص ===== */
@media (max-width: 980px){
  .heroSplit__grid{
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
    padding: 48px 0 40px;
  }
  .heroSplit__content{ order: 1; }
  .heroSplit__media{ order: 2; }
  .mediaBox__video{ max-height: 48vh; }
}

/* ===== [ADD] DESKTOP: إخفاء زر الهامبرغر على الشاشات الكبيرة ===== */
@media (min-width: 981px){
  .hamburger{ display: none; }
}