@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('/fonts/font-1.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'ABC Favorit Arabic';
    src: url('/fonts/font-2.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'ABC Favorit Arabic';
    src: url('/fonts/font-3.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @media(max-width:900px){
    .nav-wrap{padding:22px 20px;}
    .logo svg{height:44px;}
    header.scrolled .logo svg{height:38px;}
    .nav-dropdown-top{ display:flex;align-items:center;justify-content:space-between; max-width:100%;margin:0; padding:62px 100px 14px; }
    .nav-dropdown-bottom-inner{padding:20px 20px;}
  }
  @media(max-width:480px){
    .container{padding:0 20px;}
    .nav-wrap{padding:18px 16px;}
    .nav-dropdown-top{padding:18px 16px 14px;}
    .nav-dropdown-body{ flex:1;display:grid;grid-template-columns:1fr 1.3fr;gap:0; max-width:100%;margin:0;width:100%; padding:60px 100px 40px;align-items:stretch; border:1px solid var(--border); }
    .nav-dropdown-bottom-inner{padding:16px 16px;}
  }

/* ================= MOBILE REDESIGN (comprehensive) ================= */
@media(max-width:768px){
  /* clip لا hidden: كلاهما يمنع التمرير الأفقي، لكنّ hidden يجعل
     العنصر حاوية تمرير — فيُبطل position:sticky في كل سليل. وهي
     السبب في أنّ مسرح «قصتنا» كان يمرّ ولا يثبت على الجوال بينما
     يثبت على سطح المكتب حيث لا تُطبَّق هذه القاعدة. */
  html,body{overflow-x:clip;width:100%;}
  .container{width:100%;padding:0 20px;box-sizing:border-box;}

  /* Universal: force every *-grid layout to a single column on mobile */
  [class$="-grid"], [class*="-grid "], [class*=" grid"]{
    grid-template-columns:1fr !important;
  }

  /* Known flex "row" layouts that should stack vertically */
  .report-actions, .detail-actions{
    flex-direction:column;align-items:stretch;
  }
  .report-actions a, .detail-actions a{
    width:100%;text-align:center;justify-content:center;
  }
  .cf-row{grid-template-columns:1fr !important;}
  .board-grid{justify-content:center;}
  .board-card{width:100% !important;max-width:340px;margin:0 auto;}

  /* Typography: scale everything down and guarantee wrapping */
  h1{font-size:30px !important;line-height:1.35 !important;}
  h2{font-size:22px !important;line-height:1.4 !important;}
  h3{font-size:18px !important;line-height:1.5 !important;}
  .hero h1,.hero .en-sub{font-size:28px !important;}
  .about-text h2{font-size:22px !important;}
  .section-head h2{font-size:20px !important;}
  .mc-hero h1{font-size:28px !important;}
  p, li, a, span, div{word-break:break-word;overflow-wrap:break-word;}

  /* Sector label banner */
  .sector-label{font-size:17px !important;padding:14px 14px 22px !important;white-space:normal;}

  /* Stats */
  .stats-grid{grid-template-columns:1fr !important;gap:36px;}
  .stat-card .stat-inner{max-width:100%;}
  .stat-card .lbl-top,.stat-card .lbl{text-align:center !important;}
  .stat-card .num{font-size:40px !important;}

  /* Services */
  .services-grid{flex-direction:column !important;height:auto !important;}
  .service-card{flex:none !important;height:auto !important;min-height:180px;padding:10px 0;overflow:visible !important;}
  .service-card-inner{height:auto !important;}
  .service-card h3{white-space:normal !important;max-height:none !important;overflow:visible !important;}
  .service-card ul{max-height:none !important;opacity:1 !important;margin-top:10px;}

  /* Team photo full-bleed reveal text */
  .team-photo-text{width:92% !important;}
  .team-photo-text h2{font-size:24px !important;}
  .team-photo-text .tp-sub span{font-size:12.5px !important;}

  /* Partners / logos */
  .partners-grid{grid-template-columns:repeat(2,1fr) !important;}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:28px;}
  .footer-bottom-row{flex-direction:column;text-align:center;gap:14px;}
  .footer-brand{flex-direction:column;text-align:center;}

  /* Forms */
  .register-card{padding:30px 22px;}
  .contact-form-card{padding:26px 20px;}

  /* Nav dropdown */
  .nav-dropdown-links ul li a{font-size:20px !important;}
  .nav-news-grid{grid-template-columns:1fr !important;}

  /* Floating buttons stay usable */
  .float-actions{right:16px;bottom:16px;}
  .side-cta{left:16px !important;font-size:12px;padding:10px 16px;}

  /* Maps / media */
  .contact-map-wrap,.sync-map{width:100%;}
  iframe{max-width:100%;}
}

@media(max-width:480px){
  .container{padding:0 16px;}
  h1{font-size:26px !important;}
  h2{font-size:20px !important;}
  .hero h1,.hero .en-sub{font-size:24px !important;}
  .stat-card .num{font-size:34px !important;}
  .footer-grid{grid-template-columns:1fr !important;}
  .partners-grid{grid-template-columns:repeat(2,1fr) !important;}
  .team-photo-text h2{font-size:20px !important;}
}
/* ================= END MOBILE REDESIGN ================= */




  :root{
    --bg-darker:#0d1620;
    --bg-dark:#132230;
    --bg-card:#1b2e3d;
    --bg-card2:#203547;
    --gold:#c9a876;
    --gold-light:#e0c99a;
    --text-light:#f4f2ec;
    --text-muted:#93a3b0;
    --border:rgba(255,255,255,0.08);
    --teal:#7fa89a;
    --mint:#bee5e1;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  @media(hover:hover) and (pointer:fine){
    *{cursor:none;}
  }
  .cursor-dot, .cursor-ring{
    position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
    border-radius:50%;transform:translate(-50%,-50%);
  }
  .cursor-dot{
    width:10.5px;height:10.5px;background:#a8ddff;
  }
  .cursor-ring{
    width:51px;height:51px;border:1.5px solid #a8ddff;
    transition:width .2s ease, height .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease;
  }
  .cursor-ring.hovering{
    width:78px;height:78px;background:rgba(168,221,255,.15);border-color:#ffffff;
  }
  @media(hover:none), (pointer:coarse){
    .cursor-dot,.cursor-ring{display:none;}
  }
  html{scroll-behavior:smooth;}
  body{
    font-family:'ABC Favorit Arabic', sans-serif;
    background:var(--bg-dark);
    color:var(--text-light);
    line-height:1.7;
    overflow-x:clip;   /* clip لا hidden — hidden يجعل body حاوية تمرير فيُبطل sticky */
  }
  a{text-decoration:none;color:inherit;}
  h1,h2,h3{font-family:'ABC Favorit Arabic', sans-serif;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .container{max-width:1200px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    display:flex;align-items:center;gap:10px;
    color:var(--gold);font-size:14px;letter-spacing:.5px;margin-bottom:14px;
    font-weight:500;font-family:'ABC Favorit Arabic', sans-serif;
  }

  /* Header */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:transparent;
    backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  }
  header.scrolled{
    background:transparent;
    backdrop-filter:none;
    border-bottom:1px solid transparent;
  }
  .nav-wrap{
    display:flex;align-items:center;justify-content:space-between;
    padding:62px 100px 14px;max-width:100%;margin:0;
  }
  .logo{
    display:flex;align-items:center;
  }
  .logo svg{height:69px;width:auto;display:block;transition:height .35s ease;}
  header.scrolled .logo svg{height:44px;}
  .nav-actions{display:flex;align-items:center;gap:18px;}
  .icon-btn{
    width:38px;height:38px;border-radius:0;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-muted);
    cursor:pointer;transition:.2s;
  }
  .icon-btn:hover{border-color:var(--gold);color:var(--gold);}
  .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    width:44px;height:38px;background:none;border:1px solid var(--border);cursor:pointer;
    transition:border-color .2s;padding:0;
  }
  .menu-toggle:hover{border-color:var(--gold);}
  .menu-toggle span{
    display:block;width:20px;height:2px;background:var(--text-light);transition:.3s;
  }
  .menu-toggle:hover span{background:var(--gold);}
  .nav-dropdown{
    position:fixed;inset:0;width:100%;height:100vh;
    background:var(--bg-darker);z-index:150;
    transform:translateY(-100%);transition:transform .5s cubic-bezier(.65,0,.35,1);
    overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  }
  .nav-dropdown::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:url('/images/image-11.svg');
    background-repeat:no-repeat;background-size:75vw auto;background-position:left 78%;
    opacity:.18;
  }
  .nav-dropdown::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:url('/images/image-12.svg');
    background-repeat:no-repeat;background-size:75vw auto;background-position:left 78%;
    opacity:.6;
    -webkit-mask-image:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.95) 50%, transparent 75%);
    mask-image:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.95) 50%, transparent 75%);
    -webkit-mask-size:280% 280%;mask-size:280% 280%;
    -webkit-mask-position:-40% -40%;mask-position:-40% -40%;
    animation:patternGlow 9s linear infinite;
  }
  @keyframes patternGlow{
    0%{-webkit-mask-position:-60% -60%;mask-position:-60% -60%;}
    100%{-webkit-mask-position:160% 160%;mask-position:160% 160%;}
  }
  .nav-dropdown-top,.nav-dropdown-body,.nav-dropdown-bottom{position:relative;z-index:1;}
  .nav-dropdown.open{transform:translateY(0);}
  .nav-dropdown-top{
    display:flex;align-items:center;justify-content:space-between;
    max-width:100%;margin:0;
    padding:62px 100px 14px;
  }
  .nav-dropdown-top .logo svg{height:38px;width:auto;}
  .nav-dropdown-close{
    display:flex;align-items:center;gap:12px;background:none;border:none;
    color:var(--text-light);font-size:14px;cursor:pointer;transition:.2s;
  }
  .nav-dropdown-close:hover{color:var(--gold);}
  .nav-dropdown-close .close-bar{width:26px;height:1px;background:currentColor;display:inline-block;}
  .nav-dropdown-body{
    flex:1;display:grid;grid-template-columns:1fr 1.3fr;gap:0;
    max-width:100%;margin:0;width:100%;
    padding:60px 100px 40px;align-items:stretch;
    border:1px solid var(--border);
  }
  .nav-dropdown-links{order:1;padding-left:40px;border-left:1px solid var(--border);}
  .nav-dropdown-news{order:2;padding-right:40px;}
  .nav-dropdown-news .eyebrow{margin-bottom:26px;font-size:16px;}
  .nav-news-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;max-width:100%;margin-right:0;margin-left:auto;}
  .nav-dropdown-news{display:flex;flex-direction:column;height:100%;}
  .nav-news-card{ border:1px solid var(--border); opacity:0;transform:translateY(30px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
  .nav-dropdown.open .nav-news-card{opacity:1;transform:translateY(0);}
  .nav-dropdown.open .nav-news-card:nth-child(1){transition-delay:.15s;}
  .nav-dropdown.open .nav-news-card:nth-child(2){transition-delay:.28s;}
  .nav-dropdown.open .nav-news-card:nth-child(3){transition-delay:.41s;}
  .nav-news-card .nav-news-img{height:170px;background-size:cover;background-position:center;}
  .nav-news-card p{padding:16px;font-size:14.5px;line-height:1.7;color:var(--text-light);font-weight:500;}
  .nav-dropdown-links ul{display:flex;flex-direction:column;gap:20px;text-align:right;}
  .nav-dropdown-links ul li a{
    font-size:26px;font-weight:300;color:var(--text-light);transition:color .2s, font-weight .2s;
    font-family:'ABC Favorit Arabic', sans-serif;
  }
  .nav-dropdown-links ul li a:hover{color:var(--gold);font-weight:700;}
  .nav-dropdown-bottom{
    border-top:1px solid var(--border);
  }
  .nav-dropdown-bottom-inner{
    max-width:100%;margin:0;width:100%;
    padding:24px 100px;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  }
  .nav-dropdown-bottom .socials{display:flex;gap:12px;}
  .nav-dropdown-bottom .legal-links{display:flex;gap:28px;font-size:13px;color:var(--text-muted);flex-wrap:wrap;}
  .nav-dropdown-bottom .legal-links a{transition:.2s;}
  .nav-dropdown-bottom .legal-links a:hover{color:var(--gold);}
  .nav-dropdown-copy{font-size:13px;color:var(--text-muted);}

  /* Hero */
  .hero-pin-wrap{position:relative;}
  .hero{
    position:sticky;top:0;height:100vh;display:flex;align-items:flex-end;
    overflow:hidden;
    padding-bottom:90px;
    background:var(--bg-darker);
    z-index:1;
  }
  .hero-video{
    position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
  }
  /* منقول من الصفحة الرئيسية بعد إصلاحه هناك — كانت هذه الصفحة على
     النسخة القديمة، فظهر الفيلم شريطاً في وسط البنر وفوقه وتحته 336px
     سواد على شاشة 390px.
     Vimeo يرسم الفيلم بنسبة 16:9 داخل أيّ إطارٍ يُعطى له، فالإطار الذي
     يأخذ شكل البنر (390×892) يُدرج الفيلم في وسطه بشريطين أسودين.
     يُقاس الإطار على ارتفاع البنر ويتبع العرضُ النسبةَ فيفيض جانباً
     ويُقصّ في .hero-video. و max-width:none ضرورة: قاعدة iframe العامة
     في هذا الملف (max-width:100%) كانت تردّ الإطار إلى 390px فيعود
     الفيلم إلى شريطه. */
  .hero-video iframe{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    height:100%; width:auto;
    aspect-ratio:16/9;
    min-width:100%;
    max-width:none;
    pointer-events:none;
    border:0;
  }
  /* المحرّكات القديمة بلا aspect-ratio تبقى على السلوك السابق */
  @supports not (aspect-ratio:16/9){
    .hero-video iframe{ width:100vw; height:56.25vw; min-height:100%; min-width:177.77vh; }
  }
  .hero-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(13,22,32,.15) 0%, rgba(13,22,32,.3) 55%, rgba(13,22,32,.6) 100%);
  }
  .hero-content{position:absolute;z-index:2;right:0;left:0;top:50%;transform:translateY(-50%);transition:opacity .1s linear;}
  #heroTagline{opacity:1;}
  #heroTagline h1, #heroTagline .en-sub,
  #heroSecondary .hero-secondary-p{
    overflow:hidden;
  }
  #heroTagline h1 span, #heroTagline .en-sub span{
    display:inline-block;
    animation:heroLineUp .8s cubic-bezier(.22,.61,.36,1) both;
  }
  #heroSecondary .hero-secondary-p span{
    display:inline-block;
    transform:translateY(100%);
    opacity:0;
  }
  #heroSecondary.reveal .hero-secondary-p span{
    animation:heroLineUp .8s cubic-bezier(.22,.61,.36,1) both;
  }
  #heroTagline h1 span{animation-delay:1.3s;}
  #heroTagline .en-sub span{animation-delay:1.5s;}
  #heroSecondary.reveal .hero-secondary-p span{animation-delay:.15s;}
  @keyframes heroLineUp{
    from{transform:translateY(100%);opacity:0;}
    to{transform:translateY(0);opacity:1;}
  }
  #heroSecondary .hero-secondary-p{
    font-family:'ABC Favorit Arabic', sans-serif;
    font-size:21.6px;font-weight:400;color:var(--text-light);line-height:1.85;
    max-width:820px;white-space:normal;margin-top:0;
  }
  .hero h1{
    font-size:57px;font-weight:700;line-height:1.25;margin-bottom:6px;color:var(--text-light);
    white-space:nowrap;
  }
  .hero .en-sub{
    font-family:'ABC Favorit Arabic', sans-serif;font-weight:300;font-size:57px;color:var(--text-light);
    letter-spacing:.5px;white-space:nowrap;
  }
  .hero-pin-spacer{height:90vh;}
  .side-cta{
    position:fixed;left:0;top:78%;transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl;white-space:nowrap;
    background:var(--mint);color:var(--bg-darker);
    padding:26px 12px;font-weight:700;font-size:14px;letter-spacing:1px;
    border-radius:0;cursor:pointer;z-index:90;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }

  /* About */
  .about-reveal{padding:120px 0 96px;background:var(--bg-dark);}
  .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;max-width:1150px;margin:0 auto;}
  .geo-collage{width:100%;max-width:650px;aspect-ratio:1/1;margin:0 auto;}
  .about-reveal .container{max-width:100%;padding:0 4vw;}
  .geo-collage svg{width:100%;height:100%;display:block;}
  .geo-blade{opacity:0;transform:translateX(70px);transition:transform .35s ease;}
  .geo-collage.in-view .geo-blade{
    animation:slideInBlade .8s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .geo-collage.in-view .geo-blade:nth-of-type(1){animation-delay:.45s;}
  .geo-collage.in-view .geo-blade:nth-of-type(2){animation-delay:.3s;}
  .geo-collage.in-view .geo-blade:nth-of-type(3){animation-delay:.15s;}
  .geo-collage.in-view .geo-blade:nth-of-type(4){animation-delay:0s;}
  .geo-collage.in-view .geo-blade:nth-of-type(5){animation-delay:.55s;}
  .geo-blade-img{
    transform-origin:center;transform-box:fill-box;
    transform:scale(1);
  }
  .geo-collage.in-view .geo-blade-img{
    animation:geoImgZoom 12s ease-in-out infinite alternate;
  }
  @keyframes geoImgZoom{
    from{transform:scale(1);}
    to{transform:scale(1.15);}
  }
  @keyframes slideInBlade{
    from{opacity:0;transform:translateX(70px);}
    to{opacity:1;transform:translateX(0);}
  }
  .about-text h2{font-size:34px;font-weight:700;margin-bottom:22px;color:var(--mint);}
  .about-text p{color:var(--text-muted);font-size:16px;max-width:520px;}

  /* Section heading pattern */
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:16px;
  }
  .section-head h2{font-size:30px;font-weight:700;color:var(--mint);}
  .view-all{
    display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;
    border:1px solid var(--border);padding:10px 18px;transition:.2s;
  }
  .view-all:hover{border-color:var(--gold);color:var(--gold);}

  /* Stats */
  .stats{padding:24px 0 104px;}
  .stats-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  .stat-card{
    background:transparent;border:none;border-radius:0;
    padding:36px 24px;text-align:center;
  }
  .stat-card .stat-inner{display:inline-block;}
  .stat-card .lbl-top{color:var(--text-muted);font-size:15px;margin-bottom:2px;text-align:right;}
  .stat-card .num{font-family:'Thmanyah Serif Display','ABC Favorit Arabic', sans-serif;font-size:64px;font-weight:400;font-style:normal;color:var(--gold);text-align:center;line-height:1;}
  .stat-card .lbl{color:var(--text-muted);font-size:14px;margin-top:2px;text-align:left;}

  /* Services */
  .services{padding:24px 0 104px;background:var(--bg-darker);}
  .services-grid{display:flex;gap:20px;height:420px;}
  .services-grid .service-card{
    position:relative;flex-grow:1;flex-shrink:1;flex-basis:0;overflow:hidden;cursor:pointer;
    background-size:cover;background-position:center;
    border:1px solid var(--border);border-radius:0;
    transition:flex-grow 1.6s cubic-bezier(.19,1,.22,1), opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:flex-grow;
  }
  .service-card::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg, rgba(13,22,32,.55) 0%, rgba(13,22,32,.97) 100%);
    transition:background .4s ease;
  }
  .service-card:hover{flex-grow:2.1;}
  .services-grid:hover .service-card:not(:hover){flex-grow:.75;}
  .services-grid:hover .service-card:not(:hover) h3,
  .services-grid:hover .service-card:not(:hover) p{
    opacity:0;max-height:0;margin:0;pointer-events:none;
  }
  .services-grid:hover .service-card:not(:hover) .ic{margin-bottom:0;}
  .service-card-inner{
    position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:32px 26px;text-align:center;
  }
  .service-card .ic{
    width:58px;height:58px;border:1px solid var(--gold);background:rgba(201,168,118,.12);color:var(--gold);
    display:flex;align-items:center;justify-content:center;margin-bottom:66px;flex-shrink:0;
  }
  .service-card .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
  .service-card h3{font-size:22px;font-weight:700;color:#fff;line-height:1.5;overflow:hidden;max-height:80px;transition:opacity .5s ease, max-height .5s ease, margin .5s ease;}
  .service-card ul{
    color:var(--text-muted);font-size:15.6px;line-height:1.6;text-align:right;
    max-height:0;opacity:0;overflow:hidden;list-style:none;padding:0;
    transition:max-height 1.2s cubic-bezier(.65,0,.35,1), opacity 1s ease .2s, margin-top 1.2s cubic-bezier(.65,0,.35,1);
  }
  .service-card ul li{position:relative;padding-right:14px;margin-bottom:6px;}
  .service-card ul li::before{content:"";position:absolute;right:0;top:7px;width:4px;height:4px;background:var(--gold);}
  .service-card:hover ul{max-height:340px;opacity:1;margin-top:14px;}

  /* Sectors */
  .sectors{padding:104px 0;}
  .sectors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .sector-card{
    border:1px solid var(--border);overflow:hidden;
    display:flex;flex-direction:column;background:var(--bg-card);
  }
  .sector-photo{
    height:280px;background-size:cover;background-position:center;position:relative;
  }
  .sector-label{
    position:absolute;top:0;right:0;left:0;z-index:2;
    background:linear-gradient(180deg, rgba(13,22,32,.85) 0%, rgba(13,22,32,.55) 70%, transparent 100%);
    color:#fff;font-size:26px;font-weight:700;letter-spacing:.5px;
    padding:22px 24px 40px;text-align:center;
  }
  .sector-info{
    background:var(--bg-darker);padding:26px 22px;
    display:flex;align-items:center;gap:20px;flex:1;
  }
  .sector-logo{flex:0 0 auto;}
  .sector-logo svg{height:58px;width:auto;display:block;}
  .sector-info p{font-size:12.5px;line-height:1.85;color:var(--text-muted);margin:0;}

  /* Projects */
  .projects{padding:24px 0 112px;background:var(--bg-darker);}
  .filter-tab{
    display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);
    border-radius:0;padding:10px 18px;font-size:14px;color:var(--text-muted);margin-bottom:36px;
  }
  .projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .project-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:0;overflow:hidden;
  }
  .project-img{
    height:220px;background-size:cover;background-position:center;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .project-img::before{
    content:"";position:absolute;inset:0;background:rgba(13,22,32,.5);
  }
  .badge-row{
    position:absolute;top:16px;right:16px;left:16px;z-index:2;
    display:flex;gap:8px;
  }
  .badge-status, .badge-type{
    padding:6px 26.4px;font-size:12px;font-weight:700;border-radius:0;
  }
  .badge-type{background:rgba(13,22,32,.75);color:var(--text-light);border:1px solid var(--border);}
  .badge-status.status-ongoing{background:#3d6b53;color:#c9f0d8;}
  .badge-status.status-soon{background:#7a5a2a;color:#f3dcaa;}
  .project-mark{position:relative;z-index:2;text-align:center;color:#fff;}
  .project-mark .mark-icon{font-size:26px;line-height:1;margin-bottom:8px;color:var(--gold-light);}
  .project-mark .mark-ar{font-size:22px;font-weight:700;margin-bottom:2px;}
  .project-mark .mark-en{
    font-family:'ABC Favorit Arabic', sans-serif;font-size:12px;letter-spacing:2px;
    color:#d8dee3;text-transform:uppercase;
  }
  .project-body{padding:22px;}
  .project-body h3{font-size:19px;font-weight:700;margin-bottom:6px;}
  .project-loc{color:var(--text-muted);font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:6px;}
  .project-divider{border-top:1px solid var(--border);margin-bottom:16px;}
  .btn-outline{
    display:inline-block;width:100%;text-align:center;border:1px solid var(--border);border-radius:0;
    padding:12px;font-size:14px;transition:.2s;
  }
  .btn-outline:hover{border-color:var(--gold);color:var(--gold);}

  /* News */
  .news{padding:104px 0 112px;background:var(--bg-dark);}
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .news-card{
    background:var(--bg-card);border:1px solid var(--border);overflow:hidden;
    display:flex;flex-direction:column;transition:.25s;
  }
  .news-card:hover{border-color:var(--gold);transform:translateY(-6px);}
  .news-img{height:260px;background-size:cover;background-position:center;}
  .news-body{padding:24px;}
  .news-date{color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.5px;margin-bottom:10px;}
  .news-body h3{font-size:17px;font-weight:700;line-height:1.5;margin-bottom:10px;}
  .news-body p{color:var(--text-muted);font-size:13.5px;line-height:1.75;margin-bottom:16px;}
  .news-link{color:var(--gold);font-size:13.5px;font-weight:600;transition:.2s;}
  .news-link:hover{color:var(--gold-light);}

  /* Partners */
  .partners{padding:88px 0 104px;}
  .partners-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  }
  .partner-chip{
    background:var(--bg-card);border:1px solid var(--border);border-radius:0;
    height:76px;display:flex;align-items:center;justify-content:center;
    color:var(--text-muted);font-size:12px;text-align:center;padding:8px;
  }
  .partner-logo{
    background:var(--bg-card);border:1px solid var(--border);
    height:84px;display:flex;align-items:center;justify-content:center;
    padding:14px;transition:transform .2s, box-shadow .2s, border-color .2s;
  }
  .partner-logo:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.25);border-color:var(--gold);}
  .partner-logo svg, .partner-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

  /* Map / CTA */
  .map-section{
    height:340px;position:relative;
    background:linear-gradient(180deg, rgba(13,22,32,.4), rgba(13,22,32,.85)),
      url('https://images.unsplash.com/photo-1580746738099-1def1a8e93c3?q=80&w=1400&auto=format&fit=crop') center/cover;
    display:flex;align-items:center;justify-content:center;
  }
  .map-pin{
    width:50px;height:50px;border-radius:0;background:var(--gold);
    display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--bg-darker);
    box-shadow:0 0 0 10px rgba(201,168,118,.15);
  }

  /* Footer */
  footer{background:var(--bg-darker);border-top:1px solid var(--border);}
  .footer-top{padding:72px 0 48px;}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:40px;}
  .footer-col h4{font-size:15px;font-weight:700;color:var(--text-light);margin-bottom:22px;}
  .footer-col ul{display:flex;flex-direction:column;gap:13px;}
  .footer-col ul li a{font-size:14px;color:var(--text-muted);transition:.2s;}
  .footer-col ul li a:hover{color:var(--gold);}
  .newsletter-field{position:relative;margin-top:8px;max-width:320px;}
  .newsletter-field input{
    width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);
    padding:10px 34px 10px 0;color:var(--text-light);font-family:inherit;font-size:14px;
  }
  .newsletter-field input::placeholder{color:var(--text-muted);}
  .newsletter-field input:focus{outline:none;border-color:var(--gold);}
  .newsletter-field button{
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--gold);font-size:18px;cursor:pointer;padding:4px;
  }
  .footer-contact-mini{margin-top:22px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted);}
  .footer-divider{border-top:1px solid var(--border);}
  .footer-bottom-row{
    padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
  }
  .footer-brand{display:flex;align-items:center;gap:18px;}
  .footer-brand svg{height:26px;width:auto;display:block;}
  .footer-brand span{font-size:13px;color:var(--text-muted);}
  .socials{display:flex;gap:12px;}
  .socials a{
    width:36px;height:36px;border-radius:0;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--text-muted);
    transition:.2s;
  }
  .socials a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .socials a:hover{border-color:var(--gold);color:var(--gold);}

  /* Registration modal-ish inline form band (register interest) */
  .register-band{
    padding:112px 0;position:relative;
    background:linear-gradient(90deg, rgba(13,22,32,.97) 0%, rgba(13,22,32,.55) 55%, rgba(13,22,32,.15) 100%),
      url('/images/image-3.jpg') center/cover;
  }
  .register-card{
    max-width:420px;background:rgba(20,33,45,.85);backdrop-filter:blur(6px);
    border:1px solid var(--border);border-radius:0;padding:38px;
  }
  .register-card h3{font-size:24px;font-weight:700;margin-bottom:24px;}

  /* Divider band above partners */
  .divider-band{
    height:75vh;position:relative;
    background-image: url('/images/image-3.jpg');
    background-size:cover;background-position:center;background-attachment:fixed;
  }
  .divider-band::after{
    content:"";position:absolute;inset:0;background:rgba(13,22,32,.45);
  }
  @media(max-width:900px){
    .divider-band{background-attachment:scroll;height:50vh;}
  }
  .team-photo-reveal{
    position:relative;z-index:3;
    margin-top:-18.75vh;
    display:flex;justify-content:center;
    padding-bottom:70px;
  }
  .team-photo-inner{
    width:50%;
    max-width:1200px;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
    border:1px solid var(--border);
    overflow:hidden;
    will-change:width;
  }
  .team-photo-inner img{width:100%;display:block;}
  @media(max-width:900px){
    .team-photo-reveal{margin-top:-10vh;padding-bottom:40px;}
  }
  .field{
    width:100%;padding:13px 16px;margin-bottom:14px;border-radius:0;
    border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-light);font-family:inherit;font-size:14px;
  }
  .field::placeholder{color:var(--text-muted);}
  .submit-btn{
    width:100%;padding:13px;border:none;border-radius:0;background:var(--gold);color:var(--bg-darker);
    font-weight:700;font-size:15px;cursor:pointer;transition:.2s;font-family:inherit;
  }
  .submit-btn:hover{background:var(--gold-light);}

  @media(max-width:900px){
    .services-grid,.sectors-grid,.projects-grid,.news-grid{grid-template-columns:1fr;}
    .services-grid{flex-direction:column;height:auto;}
    .service-card{flex:none !important;height:auto;min-height:220px;padding:8px 0;overflow:visible !important;}
    .service-card-inner{height:auto !important;}
    .service-card:hover{flex-grow:0 !important;}
    .service-card .ic{margin-bottom:20px;}
    .service-card h3{white-space:normal;max-height:none;overflow:visible;}
    .service-card ul{max-height:none;opacity:1;margin-top:10px;}
    .stats-grid{grid-template-columns:1fr;}
    .stat-card .lbl-top{text-align:center;}
    .stat-card .lbl{text-align:center;}
    .partners-grid{grid-template-columns:repeat(3,1fr);}
    .sector-label{font-size:19px;padding:16px 16px 26px;}
    .hero h1{font-size:36px;}
    .hero .en-sub{font-size:36px;}
    .section-head h2{font-size:24px;}
    .about-text h2{font-size:26px;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-bottom-row{flex-direction:column;text-align:center;}
    .nav-dropdown-body{grid-template-columns:1fr;padding:40px 24px;}
    .nav-dropdown-links{padding-left:0;border-left:none;padding-bottom:30px;border-bottom:1px solid var(--border);}
    .nav-dropdown-news{height:auto;padding-right:0;padding-top:30px;}
    .nav-news-grid{grid-template-columns:1fr;}
    .nav-news-card .nav-news-img{height:150px;}
    .nav-dropdown-links ul li a{font-size:22px;}
    .nav-news-grid{max-width:100%;}
    .nav-dropdown-bottom-inner{padding:20px 24px;flex-direction:column;align-items:flex-start;}
  }

  /* Site-wide scroll reveal — same feel as the hero slogan line-up */
  .reveal-mask{overflow:hidden;display:block;}
  .reveal-mask > *{
    display:inline-block;transform:translateY(115%);opacity:0;
  }
  .reveal-mask.in-view > *{
    animation:heroLineUp .8s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .stat-card .lbl-top .reveal-mask.in-view > *{animation-delay:0s;}
  .stat-card .num .reveal-mask.in-view > *{animation-delay:.3s;}
  .stat-card .lbl .reveal-mask.in-view > *{animation-delay:.45s;}
  .reveal-item{
    opacity:0;transform:translateY(36px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal-item.in-view{opacity:1;transform:translateY(0);}



  /* About Hero */
  .ab-hero{position:relative;min-height:60vh;overflow:hidden;}
  .ab-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
  .ab-hero-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(13,22,32,.25) 0%, rgba(13,22,32,.55) 55%, rgba(13,22,32,.92) 100%);
  }
  .ab-hero-content{position:absolute;z-index:2;right:0;left:0;top:50%;transform:translateY(-50%);}
  .ab-hero-content .container{max-width:1200px;}
  .ab-hero h1{font-size:44px;font-weight:700;color:#bee3e0;margin-bottom:6px;}

  /* Overview / History */
  .ab-overview{padding:70px 0 110px;background:var(--bg-dark);}
  .ab-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .ab-overview-text p{color:var(--text-muted);font-size:15.5px;line-height:1.9;margin-bottom:16px;}
  .ab-overview-img{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;border:1px solid var(--border);}

  /* Leadership messages */
  .ab-leader{padding:70px 0;background:var(--bg-darker);}
  .ab-leader:nth-child(even){background:var(--bg-dark);}
  .ab-leader-grid{display:grid;grid-template-columns:0.8fr 1.6fr;gap:50px;align-items:center;}
  .ab-leader-photo{
    width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--bg-dark);
    background-size:contain;background-position:bottom center;background-repeat:no-repeat;
    transform:translateX(90px);opacity:0;
    transition:transform 1s cubic-bezier(.22,.61,.36,1), opacity 1s cubic-bezier(.22,.61,.36,1);
  }
  .ab-leader-photo.in-view{transform:translateX(0);opacity:1;}
  .ab-leader-photo img{width:100%;height:100%;object-fit:contain;object-position:bottom center;}
  .ab-leader-text{
    opacity:0;transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1) .6s, transform .8s cubic-bezier(.22,.61,.36,1) .6s;
  }
  .ab-leader-text.in-view{opacity:1;transform:translateY(0);}
  .ab-leader-quote{color:var(--gold);font-size:40px;font-family:Georgia,serif;line-height:.6;margin-bottom:10px;display:block;}
  .ab-leader-text p{color:var(--text-muted);font-size:15px;line-height:1.9;margin-bottom:22px;}
  .ab-leader-name{font-size:18px;font-weight:700;color:var(--text-light);margin-bottom:4px;}
  .ab-leader-title{font-size:13.5px;color:var(--gold);}

  /* Advantages */
  .ab-perks{padding:70px 0 110px;background:var(--bg-dark);}
  .ab-perks-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
  .ab-perk-card{background:var(--bg-card);border:1px solid var(--border);padding:32px 20px;text-align:center;transition:.25s;}
  .ab-perk-card:hover{border-color:var(--gold);transform:translateY(-5px);}
  .ab-perk-card .ic{
    width:54px;height:54px;border:1px solid var(--gold);background:rgba(201,168,118,.12);color:var(--gold);
    display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  }
  .ab-perk-card .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
  .ab-perk-card p{color:var(--text-muted);font-size:13.5px;line-height:1.8;}

  /* Vision / Mission / Values */
  .ab-vmv{padding:70px 0 110px;background:var(--bg-darker);}
  .ab-vmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .ab-vmv-card{background:var(--bg-card);border:1px solid var(--border);padding:38px 30px;}
  .ab-vmv-card .ic{
    width:56px;height:56px;border:1px solid var(--gold);background:rgba(201,168,118,.12);color:var(--gold);
    display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  }
  .ab-vmv-card .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
  .ab-vmv-card h3{font-size:19px;font-weight:700;margin-bottom:12px;color:var(--mint);}
  .ab-vmv-card p{color:var(--text-muted);font-size:14px;line-height:1.8;}

  /* Achievement image dividers */
  .ab-divider{
    height:60vh;position:relative;background-size:cover;background-position:center;background-attachment:fixed;
  }
  .ab-divider::after{content:"";position:absolute;inset:0;background:rgba(13,22,32,.5);}
  .ab-divider-content{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;}
  .ab-divider-content h3{font-size:28px;font-weight:700;color:#fff;}
  .ab-divider-content span{display:block;color:var(--gold-light);font-size:14px;margin-top:10px;}

  @media(max-width:900px){
    .ab-hero h1{font-size:32px;}
    .ab-overview-grid{grid-template-columns:1fr;gap:30px;}
    .ab-leader-grid{grid-template-columns:1fr;gap:30px;text-align:center;}
    .ab-leader-photo{max-width:260px;margin:0 auto;}
    .ab-perks-grid{grid-template-columns:1fr 1fr;}
    .ab-vmv-grid{grid-template-columns:1fr;}
    .ab-divider{background-attachment:scroll;height:40vh;}
    .ab-divider-content h3{font-size:20px;}
  }


.st0{fill:#fff;}

.st0{fill:#fff;}

.cls-1{fill:#fff;}

.cls-1{fill:#fff;}

.cls-1{fill:#fff;}

.st0{fill:#fff;}


  .soon-toast{
    position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--bg-card);border:1px solid var(--gold);color:var(--text-light);
    padding:14px 24px;font-size:14px;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;
    pointer-events:none;white-space:nowrap;
  }
  .soon-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* nav dropdown — unified across the site */
.nav-dropdown-links ul li a{font-size:20px !important;}
.nav-dropdown.open .nav-news-card{opacity:1;transform:none;}
.nav-dropdown.open .nav-news-card:nth-child(2){transition-delay:.08s}
.nav-dropdown.open .nav-news-card:nth-child(3){transition-delay:.16s}
@media(max-width:900px){
  .nav-dropdown-top{padding:40px 24px 12px;}
  .nav-dropdown-body{grid-template-columns:1fr;padding:24px;border:0;}
  .nav-dropdown-links,.nav-dropdown-news{padding:0 !important;border:0 !important;}
  .nav-dropdown-links{margin-bottom:28px}
  .nav-dropdown-links ul li a{font-size:17px !important;}
}

/* ==================================================================
   من نحن — إعادة التصميم
   الأسس نفسها المستخدمة في بقية الصفحات: نفس متغيّرات الألوان،
   نفس إيقاع الحشو الرأسي، ونفس .container و.reveal-item.
   ================================================================== */

/* ---------- الهيرو: عنوان عربي فوق مقابله الإنجليزي، في المنتصف ---------- */
.ab-hero{ min-height:82vh; }
.ab-hero-mid{ text-align:center; }
.ab-hero h1{
  font-size:clamp(34px, 4.4vw, 60px);
  font-weight:700; color:var(--text-light);
  margin:0 0 6px; letter-spacing:.5px;
}
.ab-hero-en{
  font-family:'Thmanyah Serif Display', Georgia, serif;
  font-size:clamp(22px, 2.9vw, 40px);
  color:rgba(244,242,236,.86); letter-spacing:1px; direction:ltr;
}

/* ---------- موتيف الشرائح المائلة، يتكرّر عند الصور ---------- */
.ab-slats{
  position:absolute; inset-block:8%; inset-inline-start:-14px;
  display:flex; gap:7px; pointer-events:none; z-index:2;
}
.ab-slats i{
  width:9px; background:var(--bg-darker);
  transform:skewX(-9deg); opacity:.9;
}
.ab-slats i:nth-child(2){ opacity:.7 }
.ab-slats i:nth-child(3){ opacity:.5 }
.ab-slats i:nth-child(4){ opacity:.3 }

/* ---------- كلمة القيادة ---------- */
.ab-leader{ padding:104px 0; background:var(--bg-dark); }
/* the bands alternate by their order on the page, not by which side the
   portrait sits on — those are two separate decisions */
.ab-leader + .ab-leader{ background:var(--bg-darker); }
.ab-leader-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);
  gap:66px; align-items:start;
}
/* One message mirrors the other. The swap names the grid cell rather than
   reordering the items: `order` alone would drop the portrait into the wide
   text track and blow it up half again as large, which is exactly what it
   did. Source order stays put either way, so a screen reader still reads
   the heading before the portrait's caption. */
.ab-leader.is-flipped .ab-leader-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr); }
/* the row is named as well as the column: naming only the column sends the
   second item to row 2, because auto-placement never walks backwards to
   fill the cell it has already passed — which stacked the two halves */
.ab-leader.is-flipped .ab-leader-figure{ grid-column:2; grid-row:1 }
.ab-leader.is-flipped .ab-leader-text{ grid-column:1; grid-row:1 }

.ab-leader-figure{ margin:0; text-align:center; }
.ab-leader-photo{
  position:relative; width:100%; aspect-ratio:1/1.08;
  background-size:contain; background-position:bottom center; background-repeat:no-repeat;
  background-color:transparent;
  /* the old markup put the reveal on the photo itself, which left it at
     opacity:0 waiting for an .in-view that now lands on the <figure> around
     it — the figure carries the reveal, the photo just shows */
  opacity:1; transform:none;
}
.ab-leader-figure figcaption{ margin-top:18px; display:block; }
.ab-leader-name{
  display:block; font-size:19px; font-weight:700;
  color:var(--text-light); margin-bottom:5px;
}
.ab-leader-title{ display:block; font-size:13px; color:var(--gold); }

.ab-leader-text h2{
  font-size:clamp(24px, 2.4vw, 34px); font-weight:700;
  color:var(--text-light); margin-bottom:26px;
}
.ab-leader-text p{
  color:var(--text-muted); font-size:15px; line-height:2.05; margin-bottom:20px;
}
.ab-leader-text p:last-child{ margin-bottom:0 }

/* ---------- الأرقام ---------- */
/* unit then caption, both centred under the figure they describe; the base
   sheet pushes one to each edge, which read as two unrelated lines */
.stats .stat-card .lbl{ color:var(--gold); text-align:center; }
.stats .stat-card .lbl-top{ margin-top:6px; text-align:center; }

/* ---------- الرؤية والرسالة والقيم ---------- */
.ab-vmv{ padding:104px 0; background:var(--bg-dark); }
.ab-vmv-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:70px; align-items:center;
}
/* text on the reading side, imagery opposite it — named by cell so the
   markup can keep the art first without dictating which side it lands on */
.ab-vmv-copy{ grid-column:1; grid-row:1 }
.ab-vmv-art{ grid-column:2; grid-row:1 }
/* the collage the homepage uses, so the two pages speak one visual language.
   The blades and their clip paths come with it; this cell only has to give it
   room — its own max-width would otherwise hold it to the homepage's measure. */
.ab-vmv-art{ display:block; }
.ab-vmv-art .geo-collage{ width:100%; max-width:none; margin:0; }

.ab-vmv-block{ margin-bottom:38px }
.ab-vmv-block:last-child{ margin-bottom:0 }
.ab-vmv-block h3{
  font-size:24px; font-weight:700; color:var(--gold); margin-bottom:12px;
}
.ab-vmv-block p{ color:var(--text-muted); font-size:15px; line-height:2.05; }

.ab-values{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:34px;
}
.ab-values li{
  position:relative; padding-inline-start:16px; margin-bottom:11px;
  color:var(--text-muted); font-size:15px; break-inside:avoid;
}
.ab-values li::before{
  content:''; position:absolute; inset-inline-start:0; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}

/* ---------- الإنجازات: الشريط الفاتح الوحيد في الموقع ---------- */
/* ---------- قصتنا: نصّ التعريف فوق صورة الهيرو ---------- */
/* The hero used to carry the slogan alone. The story sits on the same plate,
   so the heading is set left-aligned-to-the-reading-edge rather than centred —
   three paragraphs centred would fight the eye on every line. */
.ab-hero-mid:has(.ab-story){ text-align:start; }
.ab-story{
  max-width:1000px;
  margin-top:26px;
  margin-inline-start:auto;
}
.ab-story p{
  color:rgba(244,242,236,.9);
  font-size:16px;
  line-height:2;
  margin:0 0 18px;
  /* the plate behind the hero image is busy; a shadow keeps the text readable
     wherever the photograph happens to be bright */
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.ab-story p:last-child{ margin-bottom:0 }


.ab-wins{ padding:104px 0 84px; background:var(--text-light); }
/* .section-head is a flex row elsewhere on the site, which shrink-wraps the
   heading and leaves text-align with nothing to centre — the block has to be
   full width first */
.ab-wins .section-head{ display:block; text-align:center; }
.ab-wins .section-head h2{
  font-size:clamp(26px, 2.6vw, 36px); font-weight:700;
  color:var(--bg-darker); text-align:center; margin-bottom:20px;
}
.ab-wins-lead{
  max-width:880px; margin:0 auto 52px; text-align:center;
  color:#4a5b68; font-size:15px; line-height:2.05;
}

/* the strip borrows the homepage projects slider wholesale — full-bleed,
   snapping, hidden scrollbar and drag-to-scroll — so the two behave alike */
.ab-wins-strip{
  display:flex; gap:14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  width:100vw; margin-inline-start:calc(50% - 50vw);
  padding-inline:max(24px, calc(50vw - 700px));
  padding-block:2px 8px;
  cursor:grab;
}
.ab-wins-strip::-webkit-scrollbar{ display:none }
.ab-wins-strip.is-dragging{
  cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none;
}
.ab-win{
  /* a third larger than before — 230/210 grew to 299/273, and the caps with
     them, so the strip keeps its proportions at every width */
  flex:0 0 clamp(299px, 28.6vw, 416px);
  height:clamp(273px, 26vw, 377px);
  margin:0; scroll-snap-align:start;
  background-size:cover; background-position:center;
  background-color:#dcd8ce;
}
.ab-wins-dots{
  display:flex; justify-content:center; gap:9px; margin-top:30px;
}
.ab-wins-dots button{
  width:26px; height:3px; padding:0; border:none; cursor:pointer;
  background:rgba(19,34,48,.18); transition:background .25s;
}
.ab-wins-dots button.is-on{ background:var(--gold) }

/* ---------- نموذج التسجيل ---------- */
.register-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:60px; align-items:center;
}
.register-text .eyebrow{
  color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:14px;
}
.register-text h2{
  font-size:clamp(26px, 2.6vw, 38px); font-weight:700;
  color:var(--text-light); margin-bottom:18px;
}
.register-text p{ color:var(--text-muted); font-size:15px; line-height:2.05; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.terms-row{ display:flex; align-items:flex-start; gap:9px; margin-bottom:18px; }
.terms-row label{ font-size:12.5px; color:var(--text-muted); line-height:1.7; }
.terms-row a{ color:var(--gold) }
.register-card{ position:relative }

/* ---------- المقاسات الصغيرة ---------- */
@media(max-width:900px){
  .ab-hero{ min-height:66vh }
  .ab-leader{ padding:70px 0 }
  .ab-leader-grid{ grid-template-columns:1fr; gap:34px }
  .ab-leader.is-flipped .ab-leader-figure,
  .ab-leader.is-flipped .ab-leader-text{ order:0 }
  .ab-leader-photo{ max-width:320px; margin-inline:auto }
  .ab-vmv{ padding:70px 0 }
  .ab-vmv-split{ grid-template-columns:1fr; gap:38px }
  .ab-vmv-art{ height:300px }
  .ab-values{ columns:1 }
  .ab-wins{ padding:70px 0 60px }
  .ab-wins-lead{ margin-bottom:36px }
  .register-grid{ grid-template-columns:1fr; gap:34px }
  .field-row{ grid-template-columns:1fr }
}
/* ---------- الترويسة فوق الشريط الفاتح ----------
   شريط الإنجازات هو السطح الفاتح الوحيد في الموقع، والترويسة شفافة دائماً
   بشعار أبيض — فتكاد تختفي فوقه. تستعير حبراً داكناً ما دامت فوقه فقط. */
header.on-light .logo svg .st0,
header.on-light .logo svg path{ fill:var(--bg-darker); }
header.on-light .icon-btn{ color:var(--bg-darker); border-color:rgba(19,34,48,.22); }
header.on-light .icon-btn:hover{ color:var(--gold); border-color:var(--gold); }
header.on-light .menu-toggle{ border-color:rgba(19,34,48,.22); }
header.on-light .menu-toggle span{ background:var(--bg-darker); }

/* الالتقاط يحاذي بداية البطاقة ببداية الشريط فيبتلع الحشوة —
   scroll-padding يُبقيها */
.ab-wins-strip{ scroll-padding-inline-start:max(24px, calc(50vw - 700px)); }
/* ===== العربية خط متّصل: لا تباعد بين حروفها =====
   letter-spacing يفصل الحروف عن بعضها، فتُقرأ الكلمة العربية أشلاءً بدل كلمة
   واحدة — وأسوأ ما يكون في الأحجام الصغيرة، ولذلك بدا تبويب «سجل اهتمامك»
   الجانبي مقطّعاً. يُلغى أينما جرى نصّ عربي، ويبقى حيث النصّ لاتيني. */
html[dir="rtl"] body *:not([dir="ltr"]):not([lang="en"]):not(.mark-en):not(.ab-hero-en):not(.admin-login-brand-en){
  letter-spacing:normal;
}
/* ===== الترويسة على الجوال — مطابقة للصفحة الرئيسية =====
   كتلة الجوال في هذا الملف مكتوبة في أعلاه، وقاعدة سطح المكتب (69px) تأتي
   بعدها بنفس الترجيح فتغلبها بحكم الترتيب وحده — فبقي الشعار بحجمه الكامل
   على الجوال، ودفع زرّ القائمة خارج الشاشة. تُعاد هنا في آخر الملف لتفوز،
   بنفس القيم التي تستعملها الصفحة الرئيسية. */
@media(max-width:900px){
  .nav-wrap{ padding:22px 20px; }
  .logo svg{ height:44px; }
  header.scrolled .logo svg{ height:38px; }
  .nav-dropdown-top{ padding:22px 20px 14px; }
}
@media(max-width:480px){
  .container{ padding:0 20px; }
  .nav-wrap{ padding:18px 16px; }
}
/* ===== نسبة صور الأخبار موحّدة: 16:9 =====
   كانت الارتفاعات ثابتة ومختلفة من موضع لآخر — 260 و220 و190 و170 و130
   بكسل — فيتغيّر مقدار القصّ مع عرض البطاقة، وتظهر الصورة منقوصة الأطراف
   وبنِسب متباينة بين الصفحة الرئيسية والمركز الإعلامي وقائمة التنقل.
   النسبة الآن واحدة والارتفاع يتبع العرض، فتُعرض الصورة كما صُمّمت.
   الترجيح هنا يطابق القواعد الأصلية (مثل .nav-news-card .nav-news-img)
   وإلا لغلبته وبقيت بارتفاعها القديم. */
.news-img,
.mc-card-img,
.nav-news-img,
.nav-news-card .nav-news-img,
.rel-img,
.article-related-card .rel-img{
  height:auto;
  aspect-ratio:16 / 9;
  background-size:cover;
  background-position:center;
}
/* صورة الخبر فوق نصّه تتبع النسبة نفسها */
.article-figure img{
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:cover;
}
/* ===== أيقونات التواصل الرسمية =====
   الأيقونات الجديدة مصمتة (fill) بينما القاعدة العامة ترسم الأيقونات
   بالخطوط (stroke) — وتركها على القاعدة العامة يجعلها تختفي، لأن مسارات
   مصمتة بلا تعبئة لا تُرى. */
.socials a svg.brand-icon{
  fill:currentColor;
  stroke:none;
  width:16px; height:16px;
}
/* رسالة نتيجة الاشتراك في النشرة */
.newsletter-note{ font-size:12px; margin-top:8px; min-height:1em; color:var(--text-muted); }
.newsletter-note.ok{ color:#8fd3a8 }
.newsletter-note.bad{ color:#e0a09a }

/* ===== شريط الأرقام — منقول حرفياً من الصفحة الرئيسية ===== */
.stats-band .stats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  position:relative;
}
/* the gold rule that draws itself across the band */
.stats-rule{
  position:relative;
  height:1px;
  background:rgba(255,255,255,.07);
  /* number and caption sit right on the rule */
  margin-block:0 0;
  /* break out of .container so the rule spans the full viewport */
  width:100vw;
  margin-inline-start:calc(50% - 50vw);
}
.stats-rule i{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:0;
  background:var(--gold, #c9a227);
  transition:width 1.05s cubic-bezier(.22,.61,.36,1);
}
.stats-band.drawn .stats-rule i{width:100%;}

.stat-card{text-align:center;padding-inline:18px;}

.stat-num{
  font-size:clamp(44px, 6.2vw, 82px);
  /* the italic face carries generous internal leading; pull it in so the
     visible glyphs — not the invisible line box — define the spacing */
  line-height:.66;
  font-weight:400;
  font-style:italic;
  color:#fff;
  letter-spacing:.5px;
  opacity:0;
  transition:opacity .5s ease;
  font-variant-numeric:tabular-nums;
  direction:ltr;
  unicode-bidi:isolate;
}
.stats-band.counting .stat-num{opacity:1;}

.stat-labels{
  margin-top:0;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.stats-band.labelled .stat-labels{opacity:1;transform:none;}
.stat-card:nth-child(2) .stat-labels{transition-delay:.10s}
.stat-card:nth-child(3) .stat-labels{transition-delay:.20s}

.stat-unit{
  display:block;font-size:14.5px;color:var(--text-light,#fff);
  opacity:.92;margin-bottom:2px;line-height:1.15;
}
.stat-title{
  display:block;font-size:14.5px;color:var(--text-muted);line-height:1.2;
}


/* ===== تبديل ألوان الأقسام — منقول من الصفحة الرئيسية ===== */

/* ═══════════════════════════════════════════════════════════════
   Section colour morphing
   Four variables carry the whole palette; scrolling interpolates
   them so text, borders and card surfaces follow the background
   instead of each section being restyled by hand.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --morph-bg:#0d1620;
  --morph-fg:#f4f2ec;
  --morph-muted:#93a3b0;
  --morph-line:rgba(255,255,255,.08);
  --morph-card:rgba(255,255,255,.04);
}

body.morph{
  background:var(--morph-bg) !important;
  transition:background-color .10s linear;
}

/* every band inherits the morph background instead of its own */
body.morph .about-reveal,
body.morph .stats,
body.morph .stats-band,
body.morph .services,
body.morph .sectors,
body.morph .projects,
body.morph .partners,
body.morph .news,
body.morph .team-photo-wrap,
body.morph .divider-band{
  background:transparent !important;
  transition:color .18s linear;
}

/* text follows the background */
body.morph .about-reveal, body.morph .about-reveal p,
body.morph .services, body.morph .sectors,
body.morph .stats-band, body.morph .news, body.morph .partners{
  color:var(--morph-fg);
}
body.morph h2, body.morph h3, body.morph h4,
body.morph .stat-num, body.morph .service-card h3,
body.morph .sector-card h3, body.morph .news-card h3{
  color:var(--morph-fg) !important;
}
body.morph p,
body.morph .stat-title, body.morph .project-loc,
body.morph .news-card p, body.morph .service-card p,
body.morph .sector-card p, body.morph .lbl, body.morph .lbl-top{
  color:var(--morph-muted) !important;
}
body.morph .stat-unit{color:var(--morph-fg) !important}

/* borders and card surfaces */
body.morph .service-card,
body.morph .sector-card,
body.morph .news-card,
body.morph .stats-rule,
body.morph .proj-tab{
  border-color:var(--morph-line) !important;
}
body.morph .service-card,
body.morph .sector-card{
  background-color:var(--morph-card) !important;
}
body.morph .stats-rule{background:var(--morph-line) !important}

/* the service cards carry photographs — keep them legible on light */
body.morph.is-light .service-card{
  background-color:rgba(18,32,44,.05) !important;
}
/* The sector cards keep the dark plate on every background. Their photograph
   is laid over that plate at low opacity, so at 5% there is nothing for it to
   sit on and the card loses its navy entirely. This selector is as specific
   as the light-mode rule above, and comes after it, so it wins. */
body.morph.is-light .sector-card{
  background-color:#0d1620 !important;
}
body.morph.is-light .service-card .project-overlay,


/* filter tabs invert with the page */
body.morph .proj-tab{color:var(--morph-muted) !important}
body.morph .proj-tab:hover{color:var(--morph-fg) !important}
body.morph .proj-tab.active{
  color:#0d1620 !important;
  background:var(--gold,#c9a876) !important;
  border-color:var(--gold,#c9a876) !important;
}

/* the project strip keeps its dark cards even over the light band —
   the photographs and their captions are built for a dark surface */
body.morph .project-card{
  background-color:#1b2e3d !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.morph .project-card h3,
body.morph .project-card h4,
body.morph .project-card .mark-ar,
body.morph .project-card .mark-en{color:#f4f2ec !important}
body.morph .project-card .project-loc,
body.morph .project-card p{color:rgba(244,242,236,.75) !important}
body.morph.is-light .projects .view-all{color:#12202c !important}
body.morph.is-light .proj-progress{background:rgba(18,32,44,.12) !important}

/* partner logos need a light plate once the page turns dark again */
body.morph .partners img{transition:filter .25s linear}
body.morph:not(.is-light) .partners img{filter:brightness(0) invert(1) opacity(.62)}
body.morph:not(.is-light) .partners img:hover{filter:brightness(0) invert(1) opacity(1)}

@media (prefers-reduced-motion:reduce){
  body.morph{transition:none}
}


/* ═══ morph refinements ═══ */

/* 1 ▸ header inverts over the light stretch */
body.morph header,
body.morph .nav-wrap{transition:color .25s linear}
body.morph.is-light .logo svg .st0,
body.morph.is-light .logo svg path{fill:#12202c !important;transition:fill .25s linear}
body.morph .logo svg .st0,
body.morph .logo svg path{transition:fill .25s linear}

body.morph.is-light .icon-btn,
body.morph.is-light .menu-toggle{
  color:#12202c !important;
  border-color:rgba(18,32,44,.22) !important;
}
body.morph.is-light .icon-btn svg,
body.morph.is-light .menu-toggle svg{stroke:#12202c !important}
body.morph.is-light .menu-toggle span,
body.morph.is-light .menu-toggle i{background:#12202c !important}
body.morph .icon-btn,
body.morph .menu-toggle{transition:color .25s linear, border-color .25s linear}
body.morph .icon-btn svg,
body.morph .menu-toggle svg{transition:stroke .25s linear}

/* 2 ▸ service cards keep white text over their photographs */
body.morph .service-card h3,
body.morph .service-card p,
body.morph .service-card li,
body.morph .service-card .lbl{color:#f4f2ec !important}
body.morph.is-light .service-card{
  background-color:#1b2e3d !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* 3 ▸ the drifting pattern behind the section — not the card photos */
body.morph .sectors::before{
  opacity:.05 !important;
  mix-blend-mode:normal !important;
  transition:opacity .25s linear;
}
/* over the light band the pattern must darken instead of lighten */
body.morph.is-light .sectors::before{filter:invert(1) brightness(.35)}
/* sector cards keep their dark plate and white copy on any background */
body.morph .sector-card{
  background-color:#0d1620 !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.morph .sector-info{background:none !important}
body.morph .sector-card h3,
body.morph .sector-card .sector-label{color:#f4f2ec !important}
body.morph .sector-card p,
body.morph .sector-info p{color:rgba(244,242,236,.78) !important}

/* 4 ▸ the listing photo sits on the page, not on its own dark plate */
body.morph .team-photo-wrap,
body.morph .team-photo-reveal{background:transparent !important}


/* the bands this page has, told to take the morphing ground like the rest */
body.morph .ab-hero,
body.morph .ab-leader,
body.morph .ab-vmv,
body.morph .ab-wins,
body.morph .ab-story{ background-color:transparent !important; }
body.morph .ab-leader-text h2,
body.morph .ab-vmv-block h3,
body.morph .ab-leader-text p,
body.morph .ab-vmv-block p,
body.morph .ab-story p,
/* the value card keeps its gold rule and heading whatever the ground does */
/* the value cards keep their gold edge through every ground the page morphs
   to — it is the one line that marks them as cards, and handing it to the
   neutral rule turned them into faint grey boxes on the light bands */
/* the leader name sits under the photograph on the ground itself */
body.morph .ab-leader-figure figcaption .ab-leader-name{ color:var(--morph-fg) !important; }
body.morph .ab-leader-figure figcaption .ab-leader-title{ color:var(--morph-muted) !important; }


/* ===== نموذج تسجيل الاهتمام — منقول حرفياً من الصفحة الرئيسية =====
   The markup was already identical; the styling had drifted apart — the grid
   was one column here against two there, the heading a different size and
   colour, the name row stacked. These rules come last so they settle it. */
@media(max-width:768px){
  .cf-row{grid-template-columns:1fr !important;}
  /* Forms */
  .register-card{padding:30px 22px;}
  .register-grid{grid-template-columns:1fr !important;gap:36px !important;}
  .field-row{grid-template-columns:1fr !important;}
}
.register-band{padding:112px 0;position:relative;
    background:linear-gradient(90deg, rgba(13,22,32,.97) 0%, rgba(13,22,32,.55) 55%, rgba(13,22,32,.15) 100%),
      url('/images/image-3.jpg') center/cover;}
.register-card{background:rgba(20,33,45,.85);backdrop-filter:blur(6px);
    border:1px solid var(--border);border-radius:0;padding:38px;}
.register-card h3{font-size:24px;font-weight:700;margin-bottom:24px;}
.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.register-text .eyebrow{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:14px;}
.register-text h2{font-size:32px;font-weight:700;color:var(--mint);margin-bottom:18px;}
.register-text p{color:var(--text-muted);font-size:15px;line-height:1.9;max-width:440px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){
  .register-card{padding:32px 22px;}
}


/* لونا البطاقة ثابتان مهما تبدّلت أرضية الصفحة.
   قاعدة `body.morph h3` العامة تُسلّم كلّ عنوان إلى لون النصّ المتبدّل،
   فتمحو الذهبي هنا — وهذان السطران يستثنيان بطاقات القيم وحدها. */




:root{
  --stack-scale:0.065;
  --stack-dim:0.4;
}

/* ===== قيمتنا — مسرح مثبَّت والبطاقات تتراكم داخله =====
 *
 * The section is six screens tall and its stage is pinned at the top, so the
 * heading, the drawing and the pile all hold together while the page scrolls
 * through it. The cards are moved by transform, not by sticky: a per-card
 * sticky is released the moment its own container runs out, and a 56vh card is
 * always let go long before a two-line heading — which is why the pile used to
 * ride up over the title. One pinned stage has one release.
 */
.ab-pillars{
  position:relative;
  /* the ground is the page's, so entering and leaving this band is the same
     gradual change the homepage makes everywhere else — painting it white here
     put a hard edge at both ends of the section */
  background:transparent;
  /* five screens to stack in, and one more for the pause at the end */
  height:calc((var(--ab-count, 5) + 1) * 100vh);
}
.ab-pillars-stage{
  position:sticky; top:0;
  height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.ab-pillars-art{
  position:absolute; inset:0;
  background-image:url('/images/ab-skyline.png');
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:min(62%, 900px) auto;
  opacity:.5;
  pointer-events:none;
}
.ab-pillars-inner{ position:relative; z-index:1; width:100%; }
.ab-pillars-side{ margin-inline-end:auto; width:min(28vw, 430px); }
.ab-pillars-side .section-head{ margin-bottom:26px; }
.ab-pillars-side .section-head h2{ font-size:34px; font-weight:700; color:var(--morph-fg, #12202c); }
.ab-pillars-side .section-head h2::after{
  content:""; display:block; width:96px; height:1px;
  background:var(--gold); margin-top:16px;
}

/* the well: a card tall plus the fan, and it hides whatever is still below */
.ab-pillars-deck{
  position:relative;
  height:calc(56vh + 80px);
  overflow:hidden;
}
.ab-pillar{
  position:absolute; inset-block-start:0; inset-inline:0;
  height:56vh; min-height:420px;
  border:1px solid var(--gold, #c9a876);
  background:#ffffff;
  padding:38px 34px 34px;
  display:flex; flex-direction:column;
  transform-origin:50% 0;
  will-change:transform;
  isolation:isolate;
}
.ab-pillar::after{
  content:"";
  position:absolute; inset:0;
  background:#fbfaf7;
  opacity:calc(var(--p, 0) * var(--stack-dim));
  pointer-events:none;
  z-index:1;
}
.ab-pillar > *{ position:relative; z-index:2; }

.ab-pillar-no{
  font-size:40px; font-weight:400; font-style:italic;
  color:#12202c;
  line-height:1; margin-bottom:26px;
  align-self:flex-start;
}
.ab-pillar h3{
  font-size:clamp(31.2px, 2.88vw, 40.8px);
  font-weight:400; line-height:1.45;
  color:var(--gold, #c9a876);
  margin:0;
}
.ab-pillar p{
  margin:auto 0 0;
  padding-top:28px;
  font-size:14.5px; line-height:1.95;
  color:#6b7280;
}

/* the section takes the page's morphing ground like every other band; only the
   card carries a palette of its own */
body.morph .ab-pillars,
body.morph .ab-pillars-stage{ background-color:transparent !important; }
/* the heading follows the ground it sits on, exactly as on the homepage */
body.morph .ab-pillars-side .section-head h2{ color:var(--morph-fg) !important; }
body.morph .ab-pillar{ background:#ffffff !important; border-color:var(--gold, #c9a876) !important; }
body.morph .ab-pillar-no{ color:#12202c !important; }
body.morph .ab-pillar h3{ color:var(--gold, #c9a876) !important; }
body.morph .ab-pillar p{ color:#6b7280 !important; }

@media(max-width:860px){
  /* no pinning on a phone: it would hold the scroll for five screens with no
     way past. The cards become a plain list. */
  .ab-pillars{ height:auto; padding-block:70px; }
  .ab-pillars-stage{ position:static; height:auto; display:block; overflow:visible; }
  .ab-pillars-art{
    position:absolute; inset:auto 0 0 0; height:38%;
    background-position:center bottom; background-size:contain; opacity:.18;
  }
  .ab-pillars-side{ width:100%; }
  .ab-pillars-side .section-head h2{ font-size:26px; }
  .ab-pillars-deck{ height:auto; overflow:visible; display:grid; gap:18px; }
  .ab-pillar{
    position:static; height:auto; min-height:0;
    transform:none !important;
    padding:26px 22px;
  }
  .ab-pillar::after{ opacity:0 !important; }
  .ab-pillar h3{ font-size:21px; }
  .ab-pillar-no{ font-size:30px; margin-bottom:14px; }
  .ab-pillar p{ padding-top:16px; }
}

@media(prefers-reduced-motion:reduce){
  .ab-pillar{ transform:none !important; }
  .ab-pillar::after{ opacity:0 !important; }
}

/* ==================================================================
   نسخة الجوال — تصحيحات
   الأقسام أدناه كُتبت لسطح المكتب وبقيت خلاياها مسمّاة بالاسم، فلم
   تنهر الشبكات على الشاشة الضيّقة. القواعد هنا في آخر الملف عمداً:
   لا تزيد الترجيح، بل تغلب بالترتيب وحده، فيبقى تصميم سطح المكتب
   كما هو حرفاً بحرف.
   ================================================================== */
@media(max-width:900px){

  /* ---------- قصتنا ---------- */
  /* اللوحة كانت بارتفاع ثابت (66vh) مع overflow:hidden، والنصّ
     أطول منها — فكانت الفقرة الأخيرة تُقصّ: ٧٠٥px من المحتوى داخل
     ٥٥٧px من اللوحة، أي ١٤٨px محذوفة من الشاشة.
     الحلّ أن يقيس النصُّ اللوحةَ لا العكس: يعود المحتوى إلى مجرى
     الصفحة فيدفع اللوحة إلى ارتفاعه. يبقى relative لا static كي
     يظلّ z-index فوق طبقة التعتيم. */
  .ab-hero{ min-height:auto; }
  .ab-hero-content{
    position:relative; top:auto; transform:none;
    /* الترويسة ثابتة وشفّافة فوق اللوحة؛ الحشو العلوي يُخلّيها */
    padding-block:126px 66px;
  }
  .ab-story{ margin-top:20px; }

  /* ---------- كلمتا القيادة ---------- */
  /* المرآة بين الكلمتين فكرةُ سطح مكتب: كلمة يمينها صورة والأخرى
     يسارها. على عمود واحد بقيت خلايا المقلوبة مسمّاة (grid-column:2)
     فنجت من الانهيار، وضاق عمود النصّ إلى ١٣٥px. لا يكفي order —
     فهو لا يُخرج عنصراً من عمودٍ سُمّي له — بل تُعاد تسمية الخليّة. */
  .ab-leader.is-flipped .ab-leader-grid{ grid-template-columns:1fr; }
  .ab-leader.is-flipped .ab-leader-figure{ grid-column:1; grid-row:1; }
  .ab-leader.is-flipped .ab-leader-text{ grid-column:1; grid-row:2; }

  /* ---------- رؤيتنا ورسالتنا ---------- */
  /* نفس العلّة: عمود النصّ انكمش إلى ٣٠px — حرفٌ في كلّ سطر. */
  .ab-vmv-split{ grid-template-columns:1fr; gap:34px; }
  .ab-vmv-art{ grid-column:1; grid-row:1; height:auto; }
  .ab-vmv-copy{ grid-column:1; grid-row:2; }
  /* نفس مقاس «عن هوية» في الصفحة الرئيسية: الشكل داخل حدود .container
     لا بعرض الشاشة، بحدّ أقصى 650px ومتوسّطاً — فيبقى بينه وبين حافة
     الشاشة الفراغُ نفسه (20px) الذي يحدّ بقيّة نصوص الصفحة. */
  .ab-vmv-art .geo-collage{ width:100%; max-width:650px; margin:0 auto; }
  /* مقاس النصّ كما في «عن هوية» بالصفحة الرئيسية.
     الترجيح هنا ضرورة لا زينة: القاعدة العامة في أعلى الملف تضبط
     h3 بـ !important لكلّ الصفحة. */
  .ab-vmv-block h3{ font-size:22px !important; line-height:1.4 !important; margin-bottom:10px; }
  .ab-vmv-block p{ font-size:16px; line-height:1.9; }
  .ab-values li{ font-size:16px; }
}

/* ---------- شريط الأرقام ---------- */
/* نُقل القسم من الصفحة الرئيسية بدون كتلة الجوال الخاصة به، فورث
   حشو .stats العام (24px فوق) وفجوة 36px بدل 44px، وبقي الخطّ
   الذهبي ملتصقاً بالأرقام. هذه هي القيم نفسها التي تستعملها
   الصفحة الرئيسية. */
/* ===== شريط الأرقام — بقية ما لم يُنقل من الصفحة الرئيسية =====
   نُسخ القسم سابقاً بلا حشوه ولا كتلة جواله، فورث حشو .stats العام
   (24px فوق) وبقي على الجوال صفّاً من ثلاثة أرقام ثم خطاً ثم صفّاً من
   ثلاثة نصوص — كلّ نصّ بعيد عن رقمه بشاشة كاملة. ما يلي منقول حرفياً
   من css/index.css. */
.stats-band{ padding-block:96px 88px; }
.stats-band > .container{ overflow:visible; }

/* ===== شريط الأرقام على الجوال =====
   الشريط صفّان: صفّ أرقام ثم خط ثم صفّ نصوص. على العرض الواسع تصطفّ
   الأعمدة الثلاثة فيقع كل نصّ تحت رقمه. وعلى الجوال ينهار كل صفّ إلى عمود،
   فتتجمّع الأرقام الثلاثة معاً ثم الخط ثم النصوص الثلاثة — منفصلة عن أرقامها.
   الحلّ: نُذيب الصفّين (display:contents) فتصير البطاقات الستّ أبناءً مباشرين
   للحاوية، ثم نتناوب بينها بـ order، ويحمل كل رقم خطّه الخاص بدل خط واحد
   مشترك لا موضع له بعد التفكيك. */
@media(max-width:900px){
  .stats-band > .container{ display:grid; grid-template-columns:1fr; row-gap:0; }
  .stats-band > .container > .stats-grid{ display:contents; }
  .stats-band > .container > .stats-rule{ display:none; }

  .stats-band > .container > .stats-grid:first-child > .stat-card:nth-child(1){ order:1 }
  .stats-band > .container > .stats-grid:last-child  > .stat-card:nth-child(1){ order:2 }
  .stats-band > .container > .stats-grid:first-child > .stat-card:nth-child(2){ order:3 }
  .stats-band > .container > .stats-grid:last-child  > .stat-card:nth-child(2){ order:4 }
  .stats-band > .container > .stats-grid:first-child > .stat-card:nth-child(3){ order:5 }
  .stats-band > .container > .stats-grid:last-child  > .stat-card:nth-child(3){ order:6 }

  /* الرقم ثم خطّه ثم نصّه، ثم فاصل قبل المجموعة التالية */
  .stats-band > .container > .stats-grid:first-child > .stat-card{
    position:relative; padding-bottom:14px; margin-bottom:0;
  }
  /* the rule runs the full width of the screen, not of the padded container —
     it reads as a band across the page rather than a line inside a column */
  .stats-band > .container > .stats-grid:first-child > .stat-card::after{
    content:''; position:absolute; bottom:0; height:1px;
    inset-inline:auto; left:calc(50% - 50vw); width:100vw;
    background:var(--gold,#c9a876);
    transform:scaleX(0); transform-origin:center;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
  }
  /* the caption belongs to the number above it, so it sits close under the
     rule instead of drifting into the middle of the gap */
  .stats-band > .container > .stats-grid:last-child > .stat-card{ padding-top:12px; }
  .stats-band.drawn > .container > .stats-grid:first-child > .stat-card::after{ transform:scaleX(1); }
  .stats-band > .container > .stats-grid:last-child > .stat-card{ margin-bottom:38px; }
  .stats-band > .container > .stats-grid:last-child > .stat-card:nth-child(3){ margin-bottom:0; }
}

/* ===== بنر «من نحن» على سطح المكتب =====
   كان يقف عند 82vh فيظهر أسفله طرفُ القسم التالي — والمطلوب شاشةٌ
   كاملة. والتعتيم فوقه كان يشتدّ كلّما نزل حتى يبلغ 0.92 عند القاع،
   أي حجاباً شبه مصمت على أسفل الفيلم.
   التعتيم يخدم قراءة النصّ لا غير، والنصّ متوسّطٌ رأسياً ينتهي عند
   نحو 72٪ من ارتفاع البنر — فيبقى الحجاب حيث الكلام ويتلاشى تحته
   حتى ينعدم عند الحافة، فيُرى الجزء الأسفل من الفيلم على حقيقته. */
@media(min-width:901px){
  .ab-hero{ min-height:100vh; }
  .ab-hero-overlay{
    background:linear-gradient(180deg,
      rgba(13,22,32,.45) 0%,
      rgba(13,22,32,.42) 45%,
      rgba(13,22,32,.40) 68%,
      rgba(13,22,32,0)   100%);
  }
}

/* ===== «قصتنا» — فقرة واحدة في كل شاشة =====
 * كانت الفقرات الثلاث كتلةً واحدة: 644px من النصّ المتّصل على جهاز
 * 390px، وهو ما يُقرأ جداراً لا قصّة.
 *
 * الشريط الآن بطول شاشة لكل فقرة وشاشة زائدة تثبت عندها الأخيرة،
 * والمسرح مثبَّت بداخله فتبقى الصورة والعنوان في مكانهما بينما
 * تتبادل الفقرات. الفقرات في خليّة شبكة واحدة، فيأخذ الصندوق ارتفاع
 * أطولها ولا يقفز شيء عند التبديل.
 */
.ab-hero{
  position:relative;
  height:calc((var(--ab-story, 3) + 1) * 100vh);
  min-height:0;
  /* overflow:hidden مكتوبة على .ab-hero في أعلى الملف، وهي تُبطل
     position:sticky في أي سليل — فكان المسرح يمرّ ولا يثبت. القصّ
     ينتقل إلى المسرح نفسه، وهو موضعه الصحيح أصلاً. */
  overflow:visible;
}
.ab-hero-stage{
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
}
/* المحتوى يتوسّط المسرح لا الشريط كلّه */
.ab-hero-content{
  position:absolute; inset-inline:0; top:50%;
  transform:translateY(-50%);
  z-index:2;
  padding-block:0;
}
.ab-story{ display:grid; }
.ab-story p{
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(34px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}
.ab-story p.is-on{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  .ab-hero{ height:auto; min-height:100vh; }
  .ab-hero-stage{ position:static; height:auto; min-height:100vh; }
  .ab-story{ display:block; }
  .ab-story p{ opacity:1; transform:none; transition:none; }
}