/* ===========================
   NOTCH — Fonts & Base (patched)
   - Default font now: 'Power Grotesk Trial'
   - Removed mobile override that forced system fonts
   - Removed stray non-CSS text line
   - Commented out legacy NotchFont @font-face declarations
   =========================== */

/* اختر الخط الافتراضي */
/* Ensure the brand display font is available site-wide: alias NotchFont-1 -> Power Grotesk Trial files */
@font-face{
  font-family: 'NotchFont-1';
  src: url('fonts/english/PowerGroteskTrial-Regular.woff2') format('woff2'),
       url('fonts/english/PowerGroteskTrial-Regular.woff') format('woff'),
       url('fonts/english/PowerGroteskTrial-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root{ --font-primary: 'NotchFont-1';
  --font-arabic: 'Rubik', 'Tajawal', 'Cairo', 'Arabic Typesetting', 'Tahoma', 'Segoe UI', 'Arial', sans-serif;
  /* Accent color sampled from user attachment (dark green) */
  --notch-accent: #153F34; /* adjust if you prefer a slightly lighter/darker tone */
  --notch-accent-contrast: #ffffff;
  /* Glass effect variables (centralized) */
  --glass-saturate: 160%;
  --glass-blur-xl: 8px;
  --glass-blur-lg: 6px;
  --glass-blur-md: 4px;
  --glass-blur-sm: 3px;
  --glass-blur-xs: 2px;
  --glass-blur-xxs: 1px;
  /* Professional shadow system */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.12);
  --shadow-2xl: 0 24px 48px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.14);
  /* Smooth transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* تطبيق الخط */
body{
  font-family: var(--font-primary), system-ui, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 400; font-style: normal;
  letter-spacing: 1px; line-height: 1.6; color:#000; background:#fff;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  /* Enhanced scrolling */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Global logo cursor */
  cursor: url('/assets/logo/favicon-32x32.png') 16 16, auto;
}

/* Arabic font + spacing normalization */
html[lang="ar"] body,
body.arabic-font{
  font-family: var(--font-arabic) !important;
  letter-spacing: normal;
}
html[lang="ar"] body *,
body.arabic-font *{
  font-family: inherit !important;
  letter-spacing: normal !important;
  font-feature-settings: "liga" 1, "calt" 1, "rlig" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic typography fix for headings/titles in all pages */
html[lang="ar"] .title,
html[lang="ar"] .strap,
html[lang="ar"] .hero h1,
html[lang="ar"] .hero p,
html[lang="ar"] [data-i18n],
body.arabic-font .title,
body.arabic-font .strap,
body.arabic-font .hero h1,
body.arabic-font .hero p,
body.arabic-font [data-i18n]{
  letter-spacing: 0 !important;
  font-feature-settings: "liga" 1, "calt" 1, "rlig" 1 !important;
  font-variant-ligatures: normal !important;
  -webkit-font-feature-settings: "liga" 1, "calt" 1 !important;
  text-rendering: optimizeLegibility;
}

/* Keep intro typography consistent even in Arabic mode */
body.arabic-font .loading-screen,
body.arabic-font .loading-screen * ,
body.arabic-font .loading-name,
body.arabic-font .loading-subtle,
body.arabic-font .loading-texts{
  font-family: 'NotchFont-1', var(--font-primary, 'Power Grotesk Trial'), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  direction: ltr;
}
body.arabic-font .loading-name{ letter-spacing: 5px !important; }
body.arabic-font .loading-subtle{
  letter-spacing: 4px !important;
  white-space: nowrap;
  transform: scaleX(1.17);
  transform-origin: center;
  animation-name: subRiseArabic;
}

/* Professional cursor effects */
/* Inherit cursor globally so body/html logo cursor applies everywhere */
*{ cursor: inherit; }
html, body{ cursor: url('/assets/logo/favicon-32x32.png') 16 16, auto; }
a, button, [role="button"], input[type="submit"], input[type="button"], .clickable{
  cursor: url('/assets/logo/favicon-32x32.png') 16 16, pointer;
  transition: var(--transition-fast);
}
a:hover, button:hover, [role="button"]:hover{
  cursor: url('/assets/logo/favicon-32x32.png') 16 16, pointer;
}
input, textarea, select, label, .content-section, .section, .wrap, .container, .menu-strip, .overlay-menu{
  cursor: url('/assets/logo/favicon-32x32.png') 16 16, auto;
}

/* ===== Site-wide selection defaults (targeted) ===== */
/* Avoid preventing user selection site-wide — keep selection available for text/content.
   Instead, disable selection only on non-text UI elements (images, badges, buttons, overlays)
   This improves usability across mobile, tablet and desktop and fixes issues where users
   couldn't copy text or select anchors on iOS/Android/Safari/Firefox. */
:where(img, picture, video, canvas, .menu-button, .menu-rect, .badge, .badge *, .global-fixed-logo, .menu-stage, .overlay-menu, .menu-close, .strip-launch, .menu-link){
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Prevent dragging of images (webkit browsers) */
img{ -webkit-user-drag: none; }

/* Keep normal text selection enabled in the main content areas (forms, articles, containers) */
:where(main, .main-content, .content-section, .section, .wrap, .container){
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Safe exceptions where selection/copy should remain possible */
:where(input, textarea, select,
       pre, code, kbd, samp,
       [contenteditable="true"],
       .allow-select, [data-selectable]){
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* عائلات بديلة جاهزة */
.font-primary{ font-family: var(--font-primary), system-ui, sans-serif !important; }
.font-alt-2{ font-family: 'NotchFont-2', system-ui, sans-serif !important; }
.font-alt-3{ font-family: 'NotchFont-3', system-ui, sans-serif !important; }
.font-alt-4{ font-family: 'NotchFont-4', system-ui, sans-serif !important; }
.font-alt-5{ font-family: 'NotchFont-5', system-ui, sans-serif !important; }
.font-alt-6{ font-family: 'NotchFont-6', system-ui, sans-serif !important; }
.font-alt-7{ font-family: 'NotchFont-7', system-ui, sans-serif !important; }
.font-alt-8{ font-family: 'NotchFont-8', system-ui, sans-serif !important; }
.font-alt-9{ font-family: 'NotchFont-9', system-ui, sans-serif !important; }
.font-alt-10{ font-family: 'NotchFont-10', system-ui, sans-serif !important; }
.font-alt-11{ font-family: 'NotchFont-11', system-ui, sans-serif !important; }
.font-alt-12{ font-family: 'NotchFont-12', system-ui, sans-serif !important; }
.font-alt-13{ font-family: 'NotchFont-13', system-ui, sans-serif !important; }

/* =============================================
   Legacy local OTF faces (disabled — using WOFF2 from fonts/english/stylesheet.css)
   Uncomment only if you really need these.
============================================= */
/*
@font-face{ font-family:'NotchFont-1';  src:url('fonts/english/67d79b79-d825-48d3-b20f-4314bf949dd2.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-2';  src:url('fonts/english/2ecbe723-6f56-4cde-a403-59b56bb51629.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-3';  src:url('fonts/english/0629e9f7-ba20-4a02-b8b2-205ebc05fc50.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-4';  src:url('fonts/english/88945dba-a3c6-40d3-9035-e8456e537594.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-5';  src:url('fonts/english/888e2d25-b33e-41a5-875e-b65ae9707d3a.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-6';  src:url('fonts/english/07bc496e-f3ea-4adf-8a5c-2069d094828d.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-7';  src:url('fonts/english/eng37c21e0d-de19-4972-83d0-42db181f2885.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-8';  src:url('fonts/english/7e6a2633-41e7-45b0-a27e-d8725a9a2031.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-9';  src:url('fonts/english/a6111f3a-766c-4b82-8501-82300c5e5f29.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-10'; src:url('fonts/english/62e6e68e-34ff-4549-b199-aa49d2c4e3a3.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-11'; src:url('fonts/english/4cee76c0-3048-4988-9b9f-855c686a2064.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-12'; src:url('fonts/english/5e9e8113-f3e2-412c-aadf-0fcaca336fe9.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'NotchFont-13'; src:url('fonts/english/3d61c4d7-0577-4c9f-8e46-a5c3fb92351f.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
*/

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%; margin:0; padding:0}
html {
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}
/* Skip link (improves accessibility for keyboard & screen readers) */
.skip-link{ position:absolute; top:-80px; left:12px; background:#000; color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; letter-spacing:.08em; text-decoration:none; z-index:13000; box-shadow:0 6px 18px rgba(0,0,0,.32); transition: top .25s ease, background .25s ease; }
.skip-link:focus-visible{ top:12px; outline:3px solid #fff; background:#153F34; }

/* Unified focus-visible style (replaces removed outlines) */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{ outline:2px solid var(--notch-accent, #153F34); outline-offset:2px; border-radius:4px; }
/* Avoid double focus when element already uses shadow ring */
.btn:focus-visible{ outline:none; }
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable}

/* Menu open state - prevent scroll shift */
body.menu-open{
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable;
}

@media (max-width:768px){
  /* On mobile, ensure scrollbar gutter is preserved */
  body.menu-open{
    scrollbar-gutter: stable !important;
  }
}

/* ===========================
   Intro (أبطأ وأسلَس)
   =========================== */
.brand-img{display:block;height:auto}
.brand-img--loading{
  width:280px;
  height:280px;
  will-change: opacity, transform, filter;
  /* sync with text animations: start at .25s and run for 1.6s (matches JS intro duration) */
  animation: logoRise 2.2s .3s both cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-img--fixed{width:140px;height:140px}

/* ===== VIDEO INTRO (Full-screen autoplay sequence) ===== */
.video-intro{
  position: fixed;
  inset: 0;
  z-index: 15000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s 0.8s;
}
.video-intro.hidden{
  opacity: 0;
  visibility: hidden;
}
.intro-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video slides within slider */
.slide.video-slide{
  position: absolute;
  inset: 0;
}
.slide-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-slide .slide-overlay{
  display: none;
}

.loading-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;
  transition:opacity .9s ease, visibility .9s ease; /* ⇦ أبطأ */
  background: #000000;
  margin: 0;
  padding: 0;
}
.loading-screen.hidden{
  opacity:0;
  visibility: hidden;
  pointer-events:none;
}

@media (max-width:768px){
  /* Ensure scrollbar is always present on mobile to prevent layout shift */
  html{
    overflow-y: scroll;
  }
  .loading-screen{
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
}
.loading-logo--row{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0px;transform:translateX(-120px);
  animation: gentleFloat 6s 2.8s infinite ease-in-out;
}
.loading-texts{display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;margin-left:-24px;}
.loading-name{
  font-size:96px;font-weight:600;letter-spacing:5px;color:#fff;opacity:0;filter:blur(6px);transform:translateY(10px);
  /* synchronized with logo: same duration and delay */
  animation: trackingIn 2.2s .3s both cubic-bezier(0.16, 1, 0.3, 1);
  line-height:1;
  margin-bottom:4px;
}
.loading-subtle{
  /* slightly more compact so the intro line doesn't span as wide visually */
  font-size:16px; font-weight:400; letter-spacing:4px; color:#d9d9d9; opacity:0; transform:translateY(6px);
  /* start slightly after headline but still complete with it */
  animation: subRise 2.2s .45s both cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;
  line-height:1;
  margin-top:8px;
}
/* Intro: prefer the original site display face for the loading/intro text so it matches the brand mark */
.loading-name,
.loading-subtle,
.loading-texts{
  /* Use Notch's display font when available, otherwise fall back to the site primary font */
  font-family: 'NotchFont-1', var(--font-primary, 'Power Grotesk Trial'), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Ensure the loading/logo shows white by applying invert filter */
.brand-img--loading,
.loading-logo img,
.loading-logo .brand-img--loading{
  /* force white logo via invert */
  filter: invert(1) !important;
}

/* When the logo is displayed on a dark backdrop (loading screen etc.)
   use an inverted animation so it appears white while still animating. */
.loading-screen .brand-img--loading{
  animation: logoRiseInvert 1.6s .25s both ease-out;
}
.loading-subtle::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.2));transform:scaleX(0);transform-origin:left;
  /* underline grows near the end of the synced sequence (timed to finish with logo/text) */
  animation: underline 1.4s 1.2s both cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes logoRise{
  0%{
    opacity:0;
    filter: blur(8px) brightness(.4) saturate(.5) contrast(.9);
    transform: translateY(24px) scale(.94);
  }
  50%{
    opacity:.7;
    filter: blur(3px) brightness(.85) saturate(.9) contrast(1);
    transform: translateY(6px) scale(.995);
  }
  100%{
    opacity:1;
    filter: blur(0) brightness(1) saturate(1) contrast(1);
    transform: translateY(0) scale(1);
  }
}

/* Inverted variant for dark background without rotation */
@keyframes logoRiseInvert{
  0%{
    opacity:0;
    filter: blur(8px) brightness(.4) saturate(.5) contrast(.9) invert(1);
    transform: translateY(24px) scale(.94);
  }
  50%{
    opacity:.7;
    filter: blur(3px) brightness(.9) saturate(1) contrast(1) invert(1);
    transform: translateY(6px) scale(.995);
  }
  100%{
    opacity:1;
    filter: blur(0) brightness(1) saturate(1) contrast(1) invert(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes trackingIn{
  0%{opacity:0;letter-spacing:-8px;filter:blur(8px);transform:translateY(12px);}
  60%{opacity:0.8;letter-spacing:3px;filter:blur(1px);transform:translateY(2px);}
  100%{opacity:1;letter-spacing:5px;filter:blur(0);transform:translateY(0);}
}
@keyframes underline{
  0%{transform:scaleX(0);opacity:0;}
  50%{opacity:0.6;}
  100%{transform:scaleX(1);opacity:1;}
}
@keyframes subRise{
  0%{
    opacity:0;
    transform:translateY(12px);
    filter:blur(6px);
    letter-spacing:1px;
  }
  60%{
    opacity:0.6;
    transform:translateY(3px);
    filter:blur(1.5px);
    letter-spacing:6px;
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
    letter-spacing:7px;
  }
}

@keyframes subRiseArabic{
  0%{
    opacity:0;
    transform:translateY(12px) scaleX(1.17);
    filter:blur(6px);
    letter-spacing:4px;
  }
  60%{
    opacity:0.6;
    transform:translateY(3px) scaleX(1.17);
    filter:blur(1.5px);
    letter-spacing:4px;
  }
  100%{
    opacity:1;
    transform:translateY(0) scaleX(1.17);
    filter:blur(0);
    letter-spacing:4px;
  }
}

/* Gentle floating animation for the entire intro composition */
@keyframes gentleFloat{
  0%, 100%{
    transform:translateX(-120px) translateY(0px);
  }
  50%{
    transform:translateX(-120px) translateY(-8px);
  }
}

/* Responsive: Intro/Loading adjustments */
@media (max-width:768px){
  .brand-img--loading{ width:180px; height:180px; }
  .loading-texts{ margin-left:-15px; }
  .loading-name{ font-size:63px; letter-spacing:4px; margin-bottom:3px; }
  /* reduce subtle line size on tablet so it reads shorter */
  .loading-subtle{ font-size:12px; letter-spacing:4px; }
  .loading-logo--row{ gap:0px; }
}
@media (max-width:520px){
  .brand-img--loading{ width:100px; height:100px; }
  .loading-logo--row{ 
    flex-direction: column; 
    gap: 16px; 
    transform: translateX(0) !important; 
  }
  .loading-texts{ 
    margin-left: 0; 
    align-items: center;
  }
  .loading-name{ 
    font-size: 42px; 
    letter-spacing: 4px; 
    margin-bottom: 8px;
    filter: none !important;
    animation: gentleFadeIn 2.5s 0.5s both ease-out;
  }
  .loading-subtle{ 
    font-size: 10px; 
    letter-spacing: 3px;
    animation: gentleFadeIn 2.8s 0.8s both ease-out;
  }
}

/* أنيميشن ناعم وبطيء للجوال */
@keyframes gentleFadeIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.main-content{opacity:0;transition:opacity .8s ease; display: flex; flex-direction: column;} /* ⇦ أبطأ */
.main-content.visible{opacity:1}

@media (max-width:768px){
  .main-content{
    transition: opacity 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ===== Fixed Logo (موحد + فوق شاشة التحميل) ===== */
.fixed-logo{
  position:fixed; top:28px; left:28px;
  z-index:12000; display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#000; pointer-events:auto;
}
.fixed-logo img{ width:140px; height:140px; display:block; }
.fixed-logo .brand-img--fixed{ filter:brightness(0) invert(1) !important; } /* أبيض على الخلفيات الداكنة */
.fixed-logo--on-dark img{ filter: brightness(0) invert(1); }

/* Hide the global fixed logo during intro only */
body.intro-active .global-fixed-logo{ opacity:0 !important; pointer-events:none !important; }

/* ===========================
   Header Buttons
   =========================== */
.menu-button{
  position:fixed; top:40px; right:40px; z-index:1000;
  width:58px; height:58px; 
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color:#fff; cursor:pointer; border-radius:16px;
  box-shadow:0 8px 24px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition: background .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s cubic-bezier(.22,.61,.36,1);
}
.menu-button svg{
  display:block; pointer-events:none;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.menu-button:hover{
  background:linear-gradient(180deg, rgba(21,63,52,.92), rgba(21,63,52,.78)); 
  border-color:rgba(255,255,255,.28); 
  box-shadow:0 10px 30px -4px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.14) inset;
  transform:translateY(-2px);
}
.menu-button:hover svg{
  transform:rotate(90deg);
}
.menu-button:active{
  transform:translateY(0); 
  box-shadow:0 6px 18px -6px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.menu-button:focus-visible{
  outline:none; 
  box-shadow:0 0 0 4px rgba(255,255,255,.28), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.menu-button.active svg{
  transform:rotate(90deg);
}
@media (prefers-reduced-motion: reduce){
  .menu-button, .menu-button svg{ transition:none; }
}

.menu-rect{
  position:fixed; top:106px; right:40px; z-index:1000;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:54px; padding:0 16px; border-radius:9999px; text-decoration:none;
  color:#fff; cursor:pointer; letter-spacing:.16em; font-size:12px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.38);
  background: transparent;              /* خلفية شفافة */
  -webkit-backdrop-filter: none;        /* لا بلور */
  backdrop-filter: none;                /* لا بلور */
  box-shadow: none;                     /* بدون ظل أساسي */
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease;
}
.menu-rect .mr-icon{ display:inline-flex; align-items:center; justify-content:center; color:#fff; opacity:.95; }
.menu-rect .mr-label{ display:inline-block; white-space:nowrap; }
.menu-rect:hover{
  border-color: rgba(255,255,255,.55);
  transform: translateY(-2px);
  /* وهج حلقي خفيف بدل تعبئة الخلفية */
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.menu-rect:active{ transform: translateY(0); box-shadow: 0 0 0 3px rgba(255,255,255,.10); }
.menu-rect:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce){ .menu-rect{ transition: none; } }

/* HOME: زر المستطيل بالوسط أسفل العناوين */
body[data-section="home"] .menu-rect{
  position: fixed !important;
  left: 50% !important; transform: translateX(-50%) !important;
  right: auto !important; top: auto !important;
  bottom: 20vh !important; padding: 0 18px; height: 56px;
  z-index: 1200 !important;
}

/* Responsive header - Enhanced for mobile */
@media (max-width:768px){
  .fixed-logo{top:28px;left:20px}
  /* نزّل زر الهامبرجر قليلًا عن أعلى الشاشة لتحسين التباعد */
  .menu-button{top:60px; right:16px; width:54px; height:54px}
  /* نزل زر الستريب قليلًا على الشاشات الصغيرة ليكون أبعد عن العنوان */
  .menu-rect{top:116px; right:16px}
  /* no background square in the new design */
  /* رفع/خفض زر المينيو ستريب ليكون أقل ارتفاعًا فوق العناوين بفرق طفيف */
  body[data-section="home"] .menu-rect{ bottom: calc(8vh + 180px) !important; }
}

/* Extra small phone optimization (320-375px) */
@media (max-width:480px){
  .fixed-logo{top:20px;left:12px}
  .fixed-logo img{ width:110px; height:110px; }
  .menu-button{top:56px; right:12px; width:52px; height:52px; font-size:18px;}
  .menu-rect{top:112px; right:12px; padding:0 12px; height:50px; font-size:11px;}
  body[data-section="home"] .menu-rect{ bottom: calc(6vh + 160px) !important; }
}

/* ===== iPad and Tablet Adjustments (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px){
  /* رفع زر المينيو ستريب على الآيباد ليكون فوق العناوين */
  /* على الآيباد: اخفض زر الستريب قليلاً لاقتران أفضل مع الهيرو */
  body[data-section="home"] .menu-rect{ 
    bottom: calc(18vh + 120px) !important; 
  }
}

/* رفع زر المينيو ستريب على الآيباد الأفقي (landscape) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape){
  body[data-section="home"] .menu-rect{ 
    bottom: calc(20vh + 180px) !important; 
  }
}

/* ==================================================================
   Tablet (iPad) override: prefer a three-column overlay layout on tablets
   so the third column (subsubmenu) appears on the right rather than
   stacking under the middle column. Keep compact menu controls but use
   desktop-like column placement for clarity on larger touch screens.
   ================================================================== */
@media (min-width: 769px) and (max-width: 1024px){
  .menu-button{
    top:46px; right:28px; width:56px; height:56px;
  }

  body[data-section="home"] .menu-rect{
    position: fixed !important;
    left: 50% !important; transform: translateX(-50%) !important;
    right: auto !important; top: auto !important;
    bottom: 20vh !important; padding: 0 18px; height: 56px;
    z-index: 1200 !important;
  }

  /* Stronger grid-based layout with explicit gap so columns never touch */
  :root {
    --overlay-col-gap: 6vw;
    --overlay-col-width: min(520px,34vw);
    /* middle column size and step between columns used for sliding */
    --overlay-mid-width: clamp(420px, 40vw, 760px);
    --overlay-step: calc(var(--overlay-col-width) + var(--overlay-col-gap));
    --overlay-stage-width: calc(var(--overlay-col-width) + var(--overlay-mid-width) + var(--overlay-col-width) + (var(--overlay-col-gap) * 2));
  }

  /* Grid sized to content so we can translate the whole stage to center each column in turn */
  .menu-stage{
    display: grid;
    grid-template-columns: var(--overlay-col-width) var(--overlay-mid-width) var(--overlay-col-width);
    gap: var(--overlay-col-gap);
    align-items: center;
    justify-items: center;
    overflow: visible;
    padding: 6vh 4vw;
    /* position the stage as a content-sized block inside the fixed overlay */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--overlay-stage-width);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    /* initial transform: move the stage so the first (left) column is centered in the viewport */
    transform: translateX(calc((100vw - var(--overlay-col-width)) / 2));
  }

  /* Slide one step to center the middle column (submenu) */
  .overlay-menu.sub-open .menu-stage{
    transform: translateX(calc((100vw - var(--overlay-col-width)) / 2 - var(--overlay-step)));
  }

  /* Slide two steps to center the right column (subsubmenu) */
  .overlay-menu.child-open .menu-stage{
    transform: translateX(calc((100vw - var(--overlay-col-width)) / 2 - calc(var(--overlay-step) * 2)));
  }

  /* Put the three columns into the grid flow so they sit apart */
  .menu-stage > .root-list,
  .menu-stage > .submenu,
  .menu-stage > .subsubmenu{
    position: static !important;
    width: 100%;
    max-width: var(--overlay-col-width);
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
  }

  .menu-stage > .root-list{ grid-column: 1; text-align: left; opacity: 1; pointer-events: auto; }
  .menu-stage > .submenu{ grid-column: 2; }
  .menu-stage > .subsubmenu{ grid-column: 3; }

  /* Show/hide columns via the overlay classes (JS toggles these) */
  .overlay-menu.sub-open .root-list{ opacity: 1; pointer-events: auto; }
  .overlay-menu.sub-open .submenu{ opacity: 1; pointer-events: auto; }
  .overlay-menu.child-open .subsubmenu{ opacity: 1; pointer-events: auto; }

  /* Back button still available on touch devices (tablet) */
  .mobile-menu-back{ display:flex !important; }

  /* Text sizing tweaks for tablet */
  .root-list a{ font-size: clamp(22px, 3.2vw, 34px); letter-spacing: clamp(3px,1.0vw,8px); line-height:1.3; }
  .overlay-menu .thumb span{ font-size: clamp(18px, 2.8vw, 28px); letter-spacing: clamp(2px,0.9vw,6px); }
  .subsubmenu .child span{ font-size: clamp(16px, 2.6vw, 24px); letter-spacing: clamp(2px,0.9vw,5px); }
}

/* ===========================
   Overlay Menu
   =========================== */
.overlay-menu{
  position:fixed;inset:0;z-index:1050;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  backdrop-filter: blur(var(--glass-blur-lg));
  opacity:0;visibility:hidden;transition:all .35s ease;
}
.overlay-menu.active{opacity:1;visibility:visible}
.menu-close{position:absolute;top:34px;right:40px;font-size:40px;cursor:pointer;color:#fff;width:56px;height:56px;border:none;background:transparent;line-height:1}
.menu-stage{position:absolute;inset:0}
@media (min-width:1025px){
  .menu-stage{position:absolute;inset:0}
}
.root-list{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;transition:transform .75s cubic-bezier(0.22, 0.61, 0.36, 1), left .75s cubic-bezier(0.22, 0.61, 0.36, 1)}
/* خط عمودي واحد على يمين العمود الأول */
.root-list::after{content:'';position:absolute;right:-5.5vw;top:50%;transform:translateY(-50%);width:1px;height:0;background:rgba(255,255,255,0.2);transition:height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s}
.overlay-menu.sub-open .root-list::after{height:60vh}
.root-list ul{list-style:none}
.root-list li{margin:10px 0}
.root-list a{font-size:34px;font-weight:200;letter-spacing:8px;color:#fff;text-decoration:none;position:relative;display:inline-block;padding:12px 0}

/* Mobile navigation menu font sizing */
@media (max-width:768px){
  .root-list a { font-size: clamp(24px, 5vw, 34px); letter-spacing: clamp(4px, 1vw, 8px); }
  .overlay-menu .thumb span { font-size: clamp(20px, 4.5vw, 28px); letter-spacing: clamp(3px, 0.8vw, 6px); }
  .subsubmenu .child span { font-size: clamp(18px, 4vw, 24px); letter-spacing: clamp(2px, 0.7vw, 5px); }
}
@media (max-width:640px){
  .root-list a { font-size: clamp(22px, 5vw, 28px); letter-spacing: clamp(3px, 0.9vw, 6px); }
  .overlay-menu .thumb span { font-size: clamp(18px, 4vw, 24px); letter-spacing: clamp(2px, 0.7vw, 5px); }
  .subsubmenu .child span { font-size: clamp(16px, 3.5vw, 20px); letter-spacing: clamp(1.5px, 0.6vw, 4px); }
}
@media (max-width:480px){
  .root-list a { font-size: clamp(20px, 5vw, 26px); letter-spacing: clamp(2px, 0.8vw, 5px); }
  .overlay-menu .thumb span { font-size: clamp(16px, 4vw, 22px); letter-spacing: clamp(1.5px, 0.6vw, 4px); }
  .subsubmenu .child span { font-size: clamp(14px, 3.5vw, 18px); letter-spacing: clamp(1px, 0.5vw, 3px); }
}
/* خط فاصل بين عناصر القائمة الرئيسية */
.root-list li:not(:last-child) a::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:rgba(255,255,255,0.15)}
.root-list a.has-sub::before{content:"›";margin-right:8px;opacity:.85}
/* توزيع جديد: الفرع الأول يتحرك لليسار تدريجياً */
.overlay-menu.sub-open .root-list{ transform:translate(-50%,-50%); left:22vw; }
.overlay-menu.child-open .root-list{ transform:translate(-50%,-50%); left:14vw; }

/* Sub columns */
.submenu{
  position:absolute;top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(500px,48vw);color:#fff; opacity:0;pointer-events:none;
  transition:opacity .6s cubic-bezier(0.22, 0.61, 0.36, 1), transform .6s cubic-bezier(0.22, 0.61, 0.36, 1), left .6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.overlay-menu.sub-open .submenu{opacity:1;pointer-events:auto}
/* العمود الثاني يصير في منتصف الشاشة لما يفتح الفرع الثالث */
.overlay-menu.child-open .submenu{ left:50%; transform:translate(-50%,-50%); }

.submenu-group{display:none;flex-direction:column;gap:0;margin:0 0 18px}
.submenu-group.active{display:flex;animation:fadeInUp .45s cubic-bezier(0.22, 0.61, 0.36, 1) both}
.submenu-group::before{
  content:attr(data-group); text-transform:uppercase;
  font-size:12px;letter-spacing:4px;opacity:.9;
  padding-bottom:10px;margin-bottom:8px;display:block;border-bottom:1px solid rgba(255,255,255,.35);
}
.overlay-menu .thumb{position:relative;display:block;text-decoration:none;color:#fff;background:transparent;border:none;padding:14px 0;transition:transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);border-bottom:1px solid rgba(255,255,255,0.1);cursor:pointer;}
.overlay-menu .thumb:last-child{border-bottom:none}
/* علامة سهم للعناصر اللي عندها فروع */
.overlay-menu .thumb[data-child]::before{content:"›";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:42px;opacity:.75;transition:opacity .3s cubic-bezier(0.22, 0.61, 0.36, 1)}
.overlay-menu .thumb[data-child]{padding-right:52px;}
.overlay-menu .thumb[data-child]::before{right:12px;}
.overlay-menu .thumb[data-child]:hover::before{opacity:1}
.overlay-menu .thumb span{display:block;background:transparent;padding:0;font-size:34px;font-weight:200;letter-spacing:8px;line-height:1.2;pointer-events:none;}
.overlay-menu .thumb,
.overlay-menu .thumb span,
.subsubmenu .child span{
  text-align:left;
  direction:ltr;
}
.overlay-menu .thumb:hover{ transform:translateX(6px); }

.subsubmenu{
  position:absolute; top:50%; right:8vw; transform:translateY(-50%) translateX(16px);
  width:min(420px,38vw); color:#fff; opacity:0; pointer-events:none;
  transition:opacity .6s cubic-bezier(0.22, 0.61, 0.36, 1), transform .6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* خط عمودي واحد على يسار العمود الثالث */
.subsubmenu::before{content:'';position:absolute;left:-5vw;top:50%;transform:translateY(-50%);width:1px;height:0;background:rgba(255,255,255,0.2);transition:height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s}
.subsubmenu.open::before{height:60vh}
.subsubmenu.open{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
.submenu-children-group{ display:none; flex-direction:column; gap:0; }
.submenu-children-group.active{ display:flex; animation:fadeInUp .45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.submenu-children-group::before{
  content:attr(data-child-title); text-transform:uppercase;
  font-size:12px; letter-spacing:4px; opacity:.9;
  padding-bottom:10px; margin-bottom:8px; display:block; border-bottom:1px solid rgba(255,255,255,.35);
}
.subsubmenu .child{ display:block; text-decoration:none; color:#fff; background:transparent; border:none; padding:14px 0; transition:transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);border-bottom:1px solid rgba(255,255,255,0.1); cursor:pointer; }
.subsubmenu .child:last-child{border-bottom:none}
.subsubmenu .child span{ display:block; font-size:34px; font-weight:200; letter-spacing:8px; line-height:1.2; pointer-events:none; }
.subsubmenu .child:hover{ transform:translateX(6px); }

/* ===========================
   Sections
   =========================== */
.content-sections{position:relative;width:100%;height:100svh; margin:0; padding:0;}
.content-section{
  position:absolute;top:0;left:0;width:100%;height:100%;min-height:100svh;
  opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s ease;
  display:flex;align-items:center;justify-content:center;overflow-y:scroll;scrollbar-gutter:stable;background:#fff;
  margin:0; padding:0;
}
.content-section.active{opacity:1;visibility:visible}
.section-content{width:100%;max-width:1200px;padding:100px 50px 50px;text-align:center}

@media (max-width:768px){
  .content-sections{
    margin: 0 !important;
    padding: 0 !important;
  }
  .content-section{
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
  }
}

/* Mobile padding optimization */
@media (max-width:768px){
  .section-content{padding:80px 32px 40px}
}
@media (max-width:640px){
  .section-content{padding:60px 20px 30px}
}
@media (max-width:480px){
  .section-content{padding:50px 16px 24px}
}
.section-content--full{padding:0;max-width:none}

/* HOME slider */
#home.content-section{overflow:hidden; margin:0; padding:0;}
#home .section-content{padding:0; margin:0;}
.slider{position:relative;width:100%;height:100svh;overflow:hidden;background:#000; margin:0; padding:0;}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease; margin:0; padding:0;}
.slide.is-active{opacity:1;visibility:visible}
/* Desktop: show full hero image (no Ken Burns) */
.slide-img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center 40%;
  animation: kenburns 8s infinite ease-in-out;
}
.slide.is-active .slide-img{
  transform: none;
}
.slide-overlay{position:absolute;left:50%;bottom:10vh;transform:translateX(-50%);width:min(1000px,92vw);color:#fff;text-align:center;text-shadow:0 6px 24px rgba(0,0,0,.55)}
.slide-title{font-size:42px;font-weight:100;letter-spacing:10px;margin:0 0 8px}
.slide-desc{font-size:18px;letter-spacing:2px;margin:0}
.slider-progress{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;width:min(1000px,92vw);height:4px;background:rgba(255,255,255,.35);border-radius:99px;overflow:hidden; z-index:90;}
.slider-progress__fill{position:absolute;left:0;top:0;height:100%;width:0;background:#fff;transform-origin:left center;}

/* Kenburns zoom animation for desktop */
@keyframes kenburns {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (max-width:768px){
  .slider-progress{
    height: 3px;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.25);
  }
}
/* Slider dots navigation */
.slider-dots {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100;
  flex-wrap: wrap;
  justify-content: center;
}

.slider-dots button {
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dots button:hover {
  background: rgba(255, 255, 255, 0.6);
}

.slider-dots button.is-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .slider-dots {
    bottom: 30px;
    gap: 6px;
  }
  
  .slider-dots button {
    width: 6px;
    height: 6px;
  }
}

@keyframes slideDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== Mobile full-height fix for home slider ===== */
@media (max-width:768px){
  /* Use dynamic viewport units to avoid white gaps when the browser chrome is visible */
  /* Prefer svh (small viewport) which is more stable for mobile UI chrome — fallback to dvh if needed */
  #home.content-section{
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  #home .section-content,
  #home .slider,
  #home .slide{
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
  .slider{ height:100svh; min-height:100svh; margin:0 !important; padding:0 !important; }
  .content-sections{ height:100dvh; margin:0 !important; padding:0 !important; }
  .content-section{ min-height:100dvh; margin:0 !important; padding:0 !important; }
  #home .section-content { margin:0 !important; padding:0 !important; }

  @supports (height: 100dvh) {
    #home.content-section,
    #home .section-content,
    #home .slider,
    #home .slide {
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }
  
  /* Mobile video optimization */
  .slide-video{
    object-fit: cover;
    object-position: center top;
    height: 100%;
    min-height: 100%;
    width: 100vw;
  }
  
  .slide-img{ 
    height:100%; min-height:100%; width:100%; object-fit:cover;
    object-position: center top;
    animation:none !important;
    transform: scale(1.08) translateY(4px);
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    will-change: transform;
  }
  
  .slide.is-active .slide-img{
    transform: scale(1) translateY(0) !important;
  }
  
  .slide:hover .slide-img{
    transform: scale(1.08) translateY(4px) !important;
    filter: none !important;
  }
  /* أنزل النص قليلًا لتحسين التوازن مع الارتفاع الكامل */
  .slide-overlay{ 
  bottom:14vh; width:min(860px,92vw);
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}
.slide:hover .slide-overlay{
    transform: translateX(-50%) translateY(-8px);
}
  .slide-title{ 
  font-size:34px; letter-spacing:8px;
  transition: letter-spacing var(--transition-smooth), color var(--transition-fast);
}
.slide:hover .slide-title{
  letter-spacing: 12px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.slide-title a{
  display: inline-block;
  transition: transform var(--transition-smooth);
  transform: translate(0, 0) !important;
  -webkit-tap-highlight-color: transparent;
}
.slide-title a:hover{
  transform: scale(1.02);
}
  .slide-desc{ font-size:16px; letter-spacing:1.5px; }
  .slider-progress{ bottom:20px; }
}
@media (max-width:768px){
  /* تعطيل التأثيرات على الجوال لتجنب text shift */
  html, body {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
  }
  
  /* منع التفاعل مع صور hero فقط على الجوال */
  #home .slide-img,
  #home .slide-img img {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: none !important;
  }
  
  /* على الجوال: التفاعل فقط عبر رابط العنوان */
  #home .slide-overlay,
  #home .slide-title,
  #home .slide-desc {
    pointer-events: none !important;
    touch-action: none !important;
  }

  #home .slide-title a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    will-change: auto !important;
    contain: layout !important;
  }
  
  .slide:hover .slide-title{
    letter-spacing: 8px !important;
    text-shadow: 0 6px 24px rgba(0,0,0,.55) !important;
  }
  
  .slide-title, .slide-title a{
    transition: none !important;
    transform: translate(0, 0) !important;
  }
  
  .slide-title a:hover,
  .slide-title a:focus,
  .slide-title a:active{
    transform: translate(0, 0) !important;
    scale: 1 !important;
  }
  
  /* منع الـ overlay تتحرك */
  .slide-overlay{
    transform: translateX(-50%) !important;
    transition: none !important;
  }
  
  .slide-overlay:hover{
    transform: translateX(-50%) !important;
  }
}
@media (max-width:520px){
  .slide-overlay{ bottom:18vh; }
  .slide-title{ font-size:30px; letter-spacing:6px; }
  .slide-desc{ font-size:15px; }
  
  /* Disable hover states on mobile since they don't apply */
  .slide:hover .slide-img{
    transform: scale(1.05) !important;
    filter: brightness(1) contrast(1) !important;
  }
  .slide:hover .slide-overlay{
    transform: translateX(-50%) !important;
  }
  .slide:hover .slide-title{
    letter-spacing: 6px !important;
    text-shadow: 0 6px 24px rgba(0,0,0,.55) !important;
  }
  .slide:hover .slide-title a{
    transform: scale(1) !important;
  }
}

@media (hover: none), (pointer: coarse){
  .slide:hover .slide-overlay,
  .slide:active .slide-overlay{
    transform: translateX(-50%) !important;
  }

  .slide:hover .slide-title,
  .slide:active .slide-title{
    letter-spacing: inherit !important;
    text-shadow: 0 6px 24px rgba(0,0,0,.55) !important;
  }

  .slide-title a:hover,
  .slide-title a:focus,
  .slide-title a:active{
    transform: none !important;
  }
}

/* ===========================
   ABOUT (clean)
   =========================== */
.section-content--about{ max-width:1100px; text-align:left; padding:0 }
#about{position:relative}
.about-hero{
  width:100vw;height:52vh;position:relative;left:50%;transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;text-align:center;color:#fff;
  margin:0 0 24px;
  background:url('scene5.jpg') center/cover no-repeat;
}
.about-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.about-hero__title{ line-height:1; margin:0 0 6px; position:relative; z-index:2 }
.about-hero__title .line{ display:block; }
.about-hero__title .line:nth-child(1){ font-size:56px; letter-spacing:10px; font-weight:200; }
.about-hero__title .line:nth-child(2){ font-size:64px; letter-spacing:12px; font-weight:600; }
.about-hero__strap{ font-size:16px; letter-spacing:2px; color:#fff; position:relative; z-index:2; margin-bottom:24px }

.about-block{ opacity:0; transform:translateY(12px); }
.about-block.revealed{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
.h2{ font-size:28px; letter-spacing:4px; font-weight:300; margin:22px 0 12px; }
.lead{ font-size:16px; color:#444; margin:6px 0 16px; }
.about-twocol{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.img-wrap{ 
  border-radius:18px; 
  overflow:hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}
.img-wrap:hover{
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
.img-wrap img{ 
  width:100%; height:auto; display:block; 
  transform:scale(1.04); 
  transition:transform var(--transition-slow), filter var(--transition-smooth);
}
.img-wrap:hover img{
  transform: scale(1);
  filter: brightness(1.05) contrast(1.03);
}
.about-block.revealed .img-wrap img{ transform:scale(1); }
.about-wideimg{ margin:12px 0 6px; border-radius:18px; overflow:hidden; }
.about-wideimg img{ width:100%; height:auto; display:block; transform:scale(1.04); transition:transform .6s ease; }
.about-block.revealed .about-wideimg img{ transform:scale(1); }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value{ 
  border:1px solid #eee; 
  border-radius:14px; 
  padding:16px 18px; 
  background:#fafafa;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.value::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--notch-accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-smooth);
}
.value:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--notch-accent);
  background: #fff;
}
.value:hover::before{
  transform: scaleX(1);
}
.value h3{ margin:0 0 6px; font-size:16px; letter-spacing:2px }
.value p{ margin:0; font-size:14px; color:#555 }
#about .peek, #about .peek--half, #about .peek--fullbleed{ display:none !important; }
#about .section-content{ padding-bottom:0 !important; }
#about .section-content > *:last-child, #about .about-block:last-of-type{ margin-bottom:0 !important; }

/* ===========================
   CONTACT (clean)
   =========================== */
#contact{position:relative}
.section-content--contact{ max-width:1100px; text-align:left; padding:0 }
#contact.content-section{ align-items: flex-start !important; }
#contact .section-content{ padding-top: 0 !important; margin-top: 0 !important; }
#contact .section-content > *:first-child{ margin-top: 0 !important; }

.contact-hero{
  width:100vw;height:52vh;position:relative;left:50%;transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;text-align:center;color:#fff;
  margin:0 0 24px;
  background:url('scene7.png') center/cover no-repeat;
}
.contact-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.contact-strap{ color:#fff !important; letter-spacing:2px; position:relative; z-index:2; margin-bottom:24px }

.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; margin-top:20px; margin-bottom:0 !important; }
.contact-intro{ margin:0 0 14px; color:#333; line-height:1.7; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 16px; }
.btn{
  display:inline-block; padding:12px 20px; border-radius:12px;
  font-size:13px; letter-spacing:1.5px; text-decoration:none;
  color:var(--notch-accent-contrast); background:var(--notch-accent);
  border:1px solid rgba(0,0,0,0.12);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  min-height: 44px; /* Ensure touch target minimum */
  display: inline-flex;
  align-items: center;
}

/* Mobile button sizing */
@media (max-width:768px){
  .btn{ padding: 14px 24px; font-size: 13px; }
}
@media (max-width:640px){
  .btn{ padding: 13px 22px; font-size: 12px; min-height: 44px; }
}
.btn::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transform: translate(-50%, -50%);
  transition: width var(--transition-smooth), height var(--transition-smooth);
}
.btn:hover::before{
  width: 300px;
  height: 300px;
}
.btn:hover{ 
  filter:brightness(.92); 
  transform:translateY(-2px);
  box-shadow: var(--shadow-xl);
  letter-spacing: 2px;
}
.btn--wa{ border-color:#25D366; color:#0f5132; }
.btn--wa:hover{ background:#25D366; color:#fff; border-color:#25D366; }

.contact-left .contact-block{
  /* صندوق التواصل — نمط كاربون فاير (مظهر ألياف الكربون) */
  background-color: #0b0b0b;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%);
  background-size: 8px 8px, 8px 8px;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:14px;
  padding:16px 18px; color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 20px rgba(0,0,0,0.3), var(--shadow-lg);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  backdrop-filter: blur(10px);
}
.contact-left .contact-block:hover{
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.4), var(--shadow-xl);
}
.contact-left .contact-block + .contact-block{ margin-top:12px; }

/* Generic contact-block panel (same carbon-fiber look used across the site) */
.contact-block{
  background-color: #0b0b0b;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%);
  background-size: 8px 8px, 8px 8px;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:14px;
  padding:16px 18px; color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 20px rgba(0,0,0,0.3);
}
.contact-block + .contact-block{ margin-top:12px; }

/* Make sure content inside contact-block remains readable */
.contact-block img{ filter:brightness(.92) contrast(1.02); display:block; max-width:100%; }
.contact-block .card__title, .contact-block h2, .contact-block h3{ color: #fff; }
.contact-block .card__text, .contact-block p, .contact-block .lead{ color: rgba(255,255,255,0.92); }

/* Reusable carbon-fiber panel — apply by adding the `carbon` class to any block/card */
.carbon{
  background-color: #0b0b0b !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%);
  background-size: 8px 8px, 8px 8px;
  border:1px solid rgba(255,255,255,0.04) !important;
  border-radius:14px !important;
  padding:16px 18px !important;
  color:#fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* Ensure images and inner text remain legible inside carbon panels */
.carbon img{ filter:brightness(.92) contrast(1.02); }
.carbon .card__title, .carbon h2, .carbon h3{ color: #fff !important; }
.carbon .card__text, .carbon p, .carbon .lead{ color: rgba(255,255,255,0.92) !important; }

.contact-form{
  display:grid; grid-template-columns:1fr; gap:12px; background:#fff;
}
.contact-form input, .contact-form textarea{
  padding:14px 0; border:none; border-bottom:1px solid #ddd; background:transparent;
  font-family:inherit; font-size:14px; outline:none; transition:border-color .3s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ border-bottom-color:#000; }
.contact-form .agree{ display:block; font-size:12px; color:#444; margin:14px 0; }
.contact-form button{
  align-self:flex-start; padding:15px 40px; background:var(--notch-accent);
  color:var(--notch-accent-contrast); border:1px solid rgba(0,0,0,0.12);
  font-size:12px; letter-spacing:2px; cursor:pointer; transition:all .3s ease; margin-top:4px;
}
.contact-form button:hover{ filter:brightness(.92); color:var(--notch-accent-contrast); }

/* ===========================
   Peek fullbleed
   =========================== */
.peek--fullbleed{
  width:100vw; height:52vh; margin:40px 0 0;
  position:relative; left:50%; transform:translateX(-50%);
  border-radius:0; overflow:hidden; cursor:pointer; user-select:none;
}
.peek--fullbleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .45s ease}
.peek--fullbleed:hover img{transform:scale(1.06)}
.peek__veil{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15))}
.peek__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.5);letter-spacing:2px}
.peek__label strong{display:block;font-size:34px;margin-bottom:6px;font-weight:600;letter-spacing:8px}
.peek__label em{display:block;font-size:12px;opacity:.85}

/* ===========================
   Next Badge System
   =========================== */
.section-next{ margin:36px auto 8px; max-width:1100px; padding:0 24px; }
.next-badge{
  -webkit-tap-highlight-color: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:18px 22px; border-radius:9999px;
  background:var(--notch-accent); color:var(--notch-accent-contrast); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  letter-spacing:3px; font-size:clamp(14px,1.4vw,18px); font-weight:500;
  cursor:pointer; user-select:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .2s ease;
}
.next-badge:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.22) }
.next-badge:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.18) }
.next-badge .arrow{ font-size:1.1em; opacity:.9 }
#home .next-badge{ display:none !important; }

#veil{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
  z-index: 2500; pointer-events: none;
}
#veil.show{ opacity:1; visibility:visible; pointer-events:auto; }

.badge-floater{
  position: fixed; left:50%; top: calc(100vh - 96px); transform: translateX(-50%);
  width: min(1100px, 92vw); height: 58px; border-radius: 9999px;
  background:var(--notch-accent); color:var(--notch-accent-contrast); display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.25); z-index:2600; overflow:hidden;
  transition: top .62s cubic-bezier(.2,.8,.2,1), width .62s cubic-bezier(.2,.8,.2,1), height .62s cubic-bezier(.2,.8,.2,1), border-radius .62s cubic-bezier(.2,.8,.2,1), transform .62s cubic-bezier(.2,.8,.2,1), box-shadow .62s cubic-bezier(.2,.8,.2,1);
}
.badge-floater .label{ letter-spacing:6px; font-size:clamp(14px,1.3vw,17px); font-weight:600; padding:0 18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge-floater.expand{ top:0; width:100vw; height:100vh; border-radius:0; box-shadow:0 0 0 rgba(0,0,0,0); }

/* ===========================
   Utilities
   =========================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.highlight-anchor{ animation: targetFlash .9s ease; }
@keyframes targetFlash{ 0%{box-shadow:0 0 0 0 rgba(0,0,0,0)} 50%{box-shadow:0 0 0 6px rgba(0,0,0,.06)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} }

/* Scrollbars */
::-webkit-scrollbar{width:2px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#000;border-radius:1px}
::-webkit-scrollbar-thumb:hover{background:#333}

/* صور: تقليل السحب/النسخ */
img, picture, video, canvas{
  -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none;
}

/* Responsive tweaks */
@media (max-width:1200px){ .badge-card{flex-basis:620px;height:360px} }
@media (max-width:980px){
  .about-twocol{ grid-template-columns:1fr; gap:24px; }
  .about-hero__title .line:nth-child(1){ font-size:44px; letter-spacing:8px; }
  .about-hero__title .line:nth-child(2){ font-size:54px; letter-spacing:10px; }
  .values-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:768px){
  .root-list a{font-size:26px}
  .peek--fullbleed{height:46vh}
  .overlay-menu .thumb span,
  .subsubmenu .child span{font-size:26px;letter-spacing:6px}
}
@media (max-width:520px){
  .root-list a{font-size:22px}
  .brand-img--fixed{width:90px;height:90px}
  .overlay-menu .thumb span,
  .subsubmenu .child span{font-size:22px;letter-spacing:5px}
}

/* أثناء إعادة الإنترو نخفي أدوات الهيدر (ما عدا اللوقو) */
body.intro-replay .menu-button,
body.intro-replay .menu-rect{
  visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* تأكيد ظهور اللوقو أثناء الإنترو (إصلاح الخطأ المطبعي) */
body.intro-replay .fixed-logo{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;   /* ← تمت إضافة !important */
}

/* تكديس الأزرار أعلى اليمين خارج الهوم */
body:not([data-section="home"]) .menu-button{
  position:fixed; top:40px; right:40px; z-index:3000;
}
body:not([data-section="home"]) .menu-rect{
  position:fixed; top:106px; right:40px; left:auto; bottom:auto;
  transform:none; z-index:3000;
}

/* ===== Page Wipe (للخروج من الهامبرجر إلى الصفحات المستقلة) ===== */
.page-wipe{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 4000;
  transform: translateY(100%);
  transition: transform .82s cubic-bezier(.2,.8,.2,1); /* ⇦ أطول قليلًا */
  pointer-events: none;
  will-change: transform;
}
.page-wipe.show{ transform: translateY(0); }
.page-wipe.h{ transform: translateY(100%); }

@media (prefers-reduced-motion: reduce){
  .page-wipe{ transition: none; }
}
/* ===========================
   Mobile Responsiveness Patch
   =========================== */

/* 1) وحدات الارتفاع الحديثة للمتصفحات المتحركة
   fallback: some browsers don't support dvh yet — provide vh fallback first */
.content-sections,
.content-section,
.slider,
#home.content-section {
  /* Fallback for browsers that don't support dynamic viewport units */
  height: 100vh;
  min-height: 100vh;
  /* Prefer modern dynamic viewport units when available */
  height: 100dvh;          /* بدل 100vh/100svh */
  min-height: 100dvh;
}

/* 2) مسافة آمنة أعلى الصفحة عشان أزرار الهيدر ما تغطي المحتوى */
@media (max-width: 900px){
  .section-content { 
    padding-top: max(84px, env(safe-area-inset-top) + 64px) !important;
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
  }
}

/* 3) تخفيف تأثيرات ثقيلة على الجوال */
@media (max-width: 768px){
  .overlay-menu{ 
    background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)); /* كان 6px */
  backdrop-filter: blur(var(--glass-blur-sm)); /* كان 6px */
  }
  .menu-rect::after{
  -webkit-backdrop-filter: blur(var(--glass-blur-xxs));
  backdrop-filter: blur(var(--glass-blur-xxs));
  }
  .slide-img{ animation: none; }    /* إيقاف KenBurns على الجوال لتقليل الحمل */
}

/* إخفاء زر الستريب عندما يظهر أوفرلاي الهامبرجر */
body.overlay-open #stripButton,
body.overlay-open .menu-rect{ display: none !important; }

/* 4) نصوص الـOverlay و الـletter-spacing */
@media (max-width: 768px){
  .root-list a,
  .overlay-menu .thumb span,
  .subsubmenu .child span{
    font-size: clamp(18px, 5.3vw, 24px);
    letter-spacing: clamp(2px, 0.9vw, 6px);
    line-height: 1.25;
    word-break: break-word;
    white-space: normal;
  }
  .loading-name{
    font-size: clamp(28px, 9vw, 48px);
    letter-spacing: clamp(2px, 2.2vw, 10px);
  }
  .loading-subtle{
    font-size: clamp(12px, 3.4vw, 16px);
    letter-spacing: clamp(2px, 1.2vw, 6px);
  }
}

/* 5) عناصر بعرض 100vw + تحريك نصف العرض: امنع overflow دقيق */
.about-hero,
.contact-hero,
.peek--fullbleed {
  width: 100%;
  left: 50%; transform: translateX(-50%); /* يبقى نفس المنطق */
  max-width: 100vw;
  overflow: hidden;
}
.slide-overlay,
.slider-progress{
  max-width: 92vw;
}

/* 6) أزرار الهيدر على الجوال: مساحة لمس مناسبة وتثبيت بدون تغطية */
@media (max-width: 768px){
  /* توحيد التعديل: نخفض الزر أكثر (64px) على الجوال - اجعلها !important لتفادي استبدال لاحق */
  .menu-button{ top: 64px !important; right: 18px; width: 56px; height: 56px; }
  /* نزل زر الستريب قليلًا على الشاشات الصغيرة ليكون أبعد عن العنوان */
  .menu-rect{ top: 116px; right: 28px; }
  /* رفع/خفض زر المينيو ستريب ليكون أقل ارتفاعًا فوق العناوين بفرق طفيف */
  body[data-section="home"] .menu-rect{ bottom: calc(8vh + 180px) !important; }
  
  /* ===== Mobile Overlay Menu - Slide Navigation ===== */
  
  /* Menu stage - enable overflow hidden for slide effect */
  .menu-stage {
    overflow: hidden;
  }
  
  /* Root list - starts centered, slides completely out to left */
  .root-list {
    width: 90vw;
    max-width: 400px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  }
  
  /* When submenu opens, root slides completely off screen to the left */
  .overlay-menu.sub-open .root-list {
    transform: translate(calc(-100% - 100vw), -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  /* When child menu opens, root stays hidden far left */
  .overlay-menu.child-open .root-list {
    transform: translate(calc(-100% - 100vw), -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  /* Submenu - starts off-screen to the right */
  .submenu {
    position: absolute;
    top: 50%;
    left: 100%;
    right: auto;
    width: 90vw;
    max-width: 400px;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  }
  
  /* When submenu is open, it slides in to center */
  .overlay-menu.sub-open .submenu {
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
  }
  
  /* When child menu opens, submenu slides completely off to the left */
  .overlay-menu.child-open .submenu {
    left: auto;
    right: auto;
    transform: translate(calc(-100% - 100vw), -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  /* Subsubmenu - starts off-screen to the right */
  .subsubmenu {
    position: absolute;
    top: 50%;
    left: 100%;
    right: auto;
    width: 90vw;
    max-width: 400px;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  }
  
  /* When child menu is open, subsubmenu slides in to center */
  .overlay-menu.child-open .subsubmenu {
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Mobile back button styling */
  .mobile-menu-back {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    text-transform: uppercase;
  }
  
  .mobile-menu-back:hover,
  .mobile-menu-back:active {
    color: #fff;
    transform: translateX(-4px);
  }
  
  .mobile-menu-back::before {
    content: "←";
    font-size: 22px;
    font-weight: 700;
  }
  
  /* Adjust text sizes for mobile */
  .root-list a {
    font-size: clamp(22px, 5.8vw, 30px);
    letter-spacing: clamp(3px, 1.2vw, 7px);
    line-height: 1.4;
  }
  
  .overlay-menu .thumb span {
    font-size: clamp(19px, 5.2vw, 26px);
    letter-spacing: clamp(2px, 1vw, 6px);
    line-height: 1.3;
  }
  
  .subsubmenu .child span {
    font-size: clamp(17px, 4.8vw, 23px);
    letter-spacing: clamp(2px, 0.9vw, 5px);
    line-height: 1.3;
  }
  
  /* Group headers - smaller on mobile */
  .submenu-group::before,
  .submenu-children-group::before {
    font-size: 10px;
    letter-spacing: 2.5px;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  
  /* Tighter spacing on mobile */
  .submenu-group {
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .submenu-children-group {
    gap: 8px;
  }
  
  .overlay-menu .thumb {
    padding: 6px 0;
  }
}

/* 7) الـHOME badge العائم — تخفيف الارتفاع على الجوال */
@media (max-width: 768px){
  .badge-floater{
    top: calc(100dvh - 78px);
    height: 52px;
  }
  .badge-floater .label{
    letter-spacing: clamp(2px, 1.1vw, 6px);
    font-size: clamp(12px, 3.2vw, 16px);
  }
}

/* 8) نصوص السلايدر */
.slide-title{
  font-size: clamp(22px, 5.8vw, 42px);
  letter-spacing: clamp(3px, 1.5vw, 10px);
}
.slide-desc{
  font-size: clamp(13px, 3.6vw, 18px);
}

/* 9) about و contact — شبكة أبسط مبكّرًا */
@media (max-width: 1024px){
  .about-twocol{ grid-template-columns: 1fr; gap: 20px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 768px){
  .about-hero{ height: 46dvh; }
  .contact-hero{ height: 46dvh; }
  .about-hero__title .line:nth-child(1){ font-size: clamp(28px, 7vw, 44px); letter-spacing: clamp(4px, 1.4vw, 8px); }
  .about-hero__title .line:nth-child(2){ font-size: clamp(32px, 8vw, 54px); letter-spacing: clamp(6px, 1.8vw, 10px); }
}

/* 10) حقول النموذج — مساحة لمس أوضح */
@media (max-width: 768px){
  .contact-form input, 
  .contact-form textarea{
    padding: 16px 0;
    font-size: 15px;
  }
  .contact-form button{
    padding: 14px 28px;
    letter-spacing: 1.5px;
  }
}

/* 11) إصلاح احتمالية “الشاشة البيضاء” عند لوحات المفاتيح/التمرير */
.content-section{
  overflow-y: scroll;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  contain: content;  /* يقلل تغييرات التخطيط الكاملة */
}
#contact.content-section{
  align-items: flex-start !important;
}

/* 12) تحسينات عامة للنصوص */
.h2{ font-size: clamp(20px, 4.6vw, 28px); letter-spacing: clamp(2px, 1vw, 4px); }
.lead{ font-size: clamp(14px, 3.8vw, 16px); }

/* ==================================================
   Ensure all visible content uses the brand font
   This forces common content elements to use the
   site primary font (Power Grotesk via --font-primary)
   ================================================== */
/* Apply brand font to common content elements but do NOT override
   elements that explicitly opt-in to alternate font classes (font-alt-*)
   or specific loading/display classes. This keeps intentional variants intact. */
:where(body, p, h1, h2, h3, h4, h5, h6,
       a, li, dt, dd, blockquote, ul, ol,
       label, button, input, textarea, select, summary, small)
:not([class*="font-alt-"]):not(.loading-name):not(.loading-subtle){
  font-family: var(--font-primary), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* 13) peek fullbleed على الجوال */
@media (max-width: 768px){
  .peek--fullbleed{ height: 42dvh; margin-top: 28px; }
  .peek__label strong{ font-size: clamp(18px, 5.5vw, 24px); letter-spacing: clamp(3px, 1.2vw, 8px); }
  .peek__label em{ font-size: clamp(10px, 3vw, 12px); }
}

/* 14) الشريط العلوي/السفلي للهواتف ذات notch */
@supports(padding:max(0px)){
  body{
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* 15) (REMOVED) تحسين تحميل الخطوط على الجوال الذي كان يلغي الخط
   كان هناك بلوك:
   @media (max-width: 768px){
     body{ font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; }
   }
   تم حذفه حتى لا يُلغى Power Grotesk على الهواتف.
*/
/* === FULL-BADGE IMAGES (Sections & Cards) — direct load + fs-contentHost === */
/* نحدّد النطاق داخل الmain / .container / .wrap لتجنّب تأثيره على Overlay Menu */
main .section .card { overflow: hidden; }

/* صور داخل الكروت */
main .section .card img,
.container .section .card img,
.wrap .section .card img,
#fs-contentHost .section .card img,
/* الصور المعلّمة كthumb داخل الكتل */
main .thumb,
.container .thumb,
.wrap .thumb,
#fs-contentHost .thumb{
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 320px !important;        /* عدّلها إذا حبيت (360/300/240) */
  object-fit: cover !important;     /* تغطية كاملة للصندوق */
  object-position: center !important;
  border-radius: 12px !important;
  background: none !important;
  inset: auto !important;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* زووم خفيف على الهوفر */
main .section .card:hover img,
main .section .card:hover .thumb,
.container .section .card:hover img,
.container .section .card:hover .thumb,
.wrap .section .card:hover img,
.wrap .section .card:hover .thumb,
#fs-contentHost .section .card:hover img,
#fs-contentHost .section .card:hover .thumb{
  transform: scale(1.03);
}

/* ريسبونسف لارتفاع الصور */
@media (max-width: 900px){
  main .section .card img,
  .container .section .card img,
  .wrap .section .card img,
  #fs-contentHost .section .card img,
  main .thumb, .container .thumb, .wrap .thumb, #fs-contentHost .thumb{
    height: 300px !important;
  }
}
@media (max-width: 640px){
  main .section .card img,
  .container .section .card img,
  .wrap .section .card img,
  #fs-contentHost .section .card img,
  main .thumb, .container .thumb, .wrap .thumb, #fs-contentHost .thumb{
    height: 240px !important;
  }
}
@media (prefers-reduced-motion: reduce){
  main .section .card:hover img,
  main .section .card:hover .thumb,
  .container .section .card:hover img,
  .container .section .card:hover .thumb,
  .wrap .section .card:hover img,
  .wrap .section .card:hover .thumb,
  #fs-contentHost .section .card:hover img,
  #fs-contentHost .section .card:hover .thumb{
    transform: none !important;
  }
  /* Respect reduced motion for the intro/logo animations */
  .brand-img--loading, .loading-name, .loading-subtle { animation: none !important; filter: none !important; }
}

/* ===========================
   Global Footer (site-wide)
   =========================== */
/* Provide a sensible default container if a page doesn't define .wrap */
.site-footer .wrap{ width: min(1100px, 92vw); margin: 0 auto; }
.site-footer{ background: transparent; padding: 24px 0 36px; color: #333; border-top: 1px solid var(--line, #eaeaea); }
.site-footer .footer-inner{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.site-footer .footer-copy{ font-size:14px; opacity:.9; }
.site-footer .social-icons{ display:flex; gap:12px; align-items:center; }
.site-footer .social-icons a{ color: var(--notch-accent, #153F34); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.site-footer svg{ display:block; width:20px; height:20px; color: var(--notch-accent, #153F34); }
@media (max-width:640px){ .site-footer .footer-copy{ font-size:13px } }

/* ===========================
   Button Contrast & Focus (global)
   =========================== */
/* Keep text white on brand buttons during hover/focus */
.btn:not(.btn--light):is(:hover, :focus){
  color: var(--notch-accent-contrast, #ffffff) !important;
}

/* Accessible focus ring */
.btn:not(.btn--light):focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

/* Ensure primary action variants also keep white text */
.actions .primary:is(:hover, :focus){
  color: var(--notch-accent-contrast, #ffffff) !important;
}

/* ===== Mobile & Tablet Responsive Enhancements ===== */
@media (max-width: 640px){
  /* زيادة مساحة اللمس للأزرار على الجوالات الصغيرة */
  .menu-button, .menu-rect{
    min-width: 44px;
    min-height: 44px;
  }
  
  /* تأكد من وضوح النصوص على الجوال */
  body{
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }
  
  /* رفع زر المينيو أكثر على الشاشات الصغيرة جداً */
  body[data-section="home"] .menu-rect{ 
    bottom: calc(12vh + 180px) !important; 
  }
}

@media (min-width: 641px) and (max-width: 768px){
  /* آيفون برو ماكس والأجهزة المتوسطة */
  body[data-section="home"] .menu-rect{ 
    bottom: calc(12vh + 150px) !important; 
  }
}

/* ===== No white gap at top on mobile ===== */
@media (max-width:768px){
  html { 
    margin: 0 !important; 
    padding: 0 !important;
    height: 100%;
  }
  body{ 
    margin: 0 !important; 
    padding: 0 !important;
  }
  
  .main-content{
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #home.content-section,
  .content-section{
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .slider{
    margin: 0;
    padding: 0;
  }
  
  .loading-screen {
    margin: 0 !important;
    padding: 0 !important;
    inset: 0 !important;
  }
  
  /* Prevent scroll bar shifts */
  body {
    overflow-y: scroll;
  }
}

/* =================================================================
  Premium Effects
  NOTE: `premium-effects.css` is loaded directly by pages that need it
  (for example `index.html` includes a <link>); importing it here
  caused a browser warning because @import must be at the top of a
  stylesheet. The import has been removed to avoid that warning.
================================================================= */