/* KhalidElzein.com — approved executive homepage v4. Loaded last. */
:root{
  --v4-bg:#061827;
  --v4-bg-2:#082b43;
  --v4-bg-3:#0d3b58;
  --v4-gold:#e0b455;
  --v4-gold-soft:#f3d388;
  --v4-white:#f8fbfd;
  --v4-text:#c6d3db;
  --v4-muted:#8fa5b2;
  --v4-line:rgba(255,255,255,.16);
  --v4-shadow:0 22px 60px rgba(0,0,0,.28);
}

html{scroll-behavior:smooth;}
body{background:var(--v4-bg)!important;}
.site-header{background:rgba(4,20,32,.97)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(18px);}
.site-header .nav-shell{min-height:70px!important;}
.site-header .editorial-wordmark{color:var(--v4-gold-soft)!important;font-size:34px!important;line-height:1!important;}
.site-header .brand-copy strong{color:#fff!important;font-size:13px!important;letter-spacing:.02em;}
.site-header .brand-copy small{color:#aebdc6!important;font-size:8px!important;letter-spacing:.17em!important;text-transform:uppercase;}
.site-header .site-nav a,.site-header .language-link{color:#eef4f7!important;font-size:11px!important;}
.site-header .editorial-nav-contact{border:1px solid var(--v4-gold)!important;border-radius:6px!important;padding:10px 16px!important;color:var(--v4-gold-soft)!important;}
.site-footer{background:#03111c!important;border-top:1px solid rgba(255,255,255,.13)!important;color:#dce5ea!important;}
.site-footer a,.site-footer p,.site-footer span{color:#b9c7cf!important;}
.site-footer .editorial-wordmark{color:var(--v4-gold-soft)!important;}

.home-v4{background:var(--v4-bg);color:#fff;overflow:hidden;}
.home-v4 *{box-sizing:border-box;}
.home-v4 .reveal,.home-v4 .reveal-delay{opacity:1!important;visibility:visible!important;transform:none!important;}
.v4-anchor{position:absolute;top:-76px;}
.v4-kicker{display:inline-flex;align-items:center;gap:14px;color:var(--v4-gold-soft);font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;}
.v4-kicker:after{content:"";width:40px;height:2px;background:var(--v4-gold);display:inline-block;}
html[dir="rtl"] .v4-kicker{letter-spacing:0;}
.v4-btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:46px;padding:0 22px;border:1px solid rgba(243,211,136,.64);border-radius:6px;color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:800;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.v4-btn:hover{transform:translateY(-2px);border-color:var(--v4-gold-soft);}
.v4-btn-primary{background:linear-gradient(135deg,#f5dc98,#d7a543)!important;border-color:transparent!important;color:#0c2537!important;box-shadow:0 12px 30px rgba(217,173,87,.2);}

/* HERO */
.v4-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 76% 24%,#195374 0,#0d3b58 27%,#082a42 48%,#061827 78%);border-bottom:1px solid rgba(255,255,255,.14);}
.v4-hero:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(3,17,29,.36) 0%,rgba(3,17,29,.04) 46%,rgba(3,17,29,.16) 100%);pointer-events:none;}
.v4-city{position:absolute!important;z-index:0!important;inset:auto 0 0!important;width:100%!important;height:88%!important;object-fit:cover!important;object-position:center bottom!important;opacity:.28!important;filter:saturate(.78) contrast(1.06)!important;pointer-events:none!important;}
.v4-hero-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.82fr) minmax(180px,.42fr);gap:28px;align-items:end;min-height:565px;padding-top:44px;}
.v4-hero-copy{align-self:center;max-width:650px;padding:40px 0 58px;}
.v4-hero-copy h1{margin:18px 0 8px!important;color:#fff!important;font-family:Arial,"Segoe UI",sans-serif!important;font-size:clamp(46px,5.3vw,72px)!important;font-weight:780!important;line-height:.98!important;letter-spacing:-.045em!important;}
.v4-title{margin:0 0 18px!important;color:var(--v4-gold-soft)!important;font-size:16px!important;font-weight:700!important;letter-spacing:.27em!important;text-transform:uppercase;}
html[dir="rtl"] .v4-title{letter-spacing:0!important;}
.v4-lead{max-width:625px;margin:0!important;color:#d3dde3!important;font-size:14px!important;line-height:1.65!important;}
.v4-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.v4-portrait-wrap{position:relative;align-self:end;justify-self:center;width:min(36vw,430px);height:525px;overflow:visible;display:flex;align-items:flex-end;justify-content:center;}
.v4-portrait-wrap:before{content:"";position:absolute;inset:14% 3% 0;border-radius:50% 50% 6% 6%;background:radial-gradient(circle at 50% 34%,rgba(72,145,187,.25),rgba(6,24,39,0) 69%);filter:blur(18px);z-index:-1;}
.v4-portrait-wrap img{display:block!important;width:100%!important;height:100%!important;max-width:430px!important;max-height:525px!important;object-fit:cover!important;object-position:center 8%!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:contrast(1.02) saturate(.95) drop-shadow(0 26px 34px rgba(0,0,0,.3));-webkit-mask-image:radial-gradient(ellipse 76% 98% at 50% 48%,#000 69%,rgba(0,0,0,.94) 80%,transparent 100%);mask-image:radial-gradient(ellipse 76% 98% at 50% 48%,#000 69%,rgba(0,0,0,.94) 80%,transparent 100%);}
.v4-hero-note{align-self:center;padding:28px 0 40px;color:#d7e0e5;}
.v4-hero-note blockquote{margin:0 0 22px;padding:0;color:#f4f7f8;font-family:Georgia,"Times New Roman",serif;font-size:16px;font-style:italic;line-height:1.55;}
.v4-note-line{display:block;width:48px;height:2px;background:var(--v4-gold);margin-bottom:20px;}
.v4-hero-note small{display:block;color:#98aeb9;font-size:9px;line-height:1.75;letter-spacing:.32em;}
.v4-hero-note p{margin:54px 0 0;color:#9cb0bb;font-size:8.5px;line-height:1.7;letter-spacing:.3em;}
.v4-metrics{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.2);}
.v4-metrics>div{padding:22px 24px;border-inline-end:1px solid rgba(255,255,255,.18);}
.v4-metrics>div:last-child{border-inline-end:0;}
.v4-metrics strong{display:block;color:var(--v4-gold-soft);font-size:30px;line-height:1;font-weight:800;}
.v4-metrics span{display:block;margin-top:7px;color:#c0cdd5;font-size:10px;line-height:1.4;}

/* Shared section framing */
.v4-section{padding:54px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.v4-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px;}
.v4-section-head h2{margin:0!important;color:#fff!important;font-family:Arial,"Segoe UI",sans-serif!important;font-size:clamp(29px,3vw,40px)!important;line-height:1.05!important;font-weight:760!important;letter-spacing:-.035em!important;display:flex;align-items:center;gap:20px;}
.v4-section-head h2:after{content:"";display:inline-block;width:55px;height:2px;background:var(--v4-gold);}
.v4-section-head>span{max-width:225px;text-align:right;color:#8da3af;font-size:9px;font-weight:700;line-height:1.65;letter-spacing:.27em;}
html[dir="rtl"] .v4-section-head>span{text-align:left;letter-spacing:0;}
.v4-section-link{margin-top:22px;text-align:right;}
.v4-section-link a{color:var(--v4-gold-soft)!important;text-decoration:none!important;font-size:11px;font-weight:800;border-bottom:1px solid rgba(243,211,136,.45);padding-bottom:4px;}

/* EXPERIENCE */
.v4-experience{background:linear-gradient(180deg,#061827,#08263a);}
.v4-timeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.3);padding-top:22px;}
.v4-timeline-item{position:relative;min-width:0;padding-inline-end:20px;}
.v4-timeline-item:not(:last-child){border-inline-end:1px solid rgba(255,255,255,.11);margin-inline-end:20px;}
.v4-timeline-item i{position:absolute;top:-29px;inset-inline-start:0;width:11px;height:11px;border:2px solid var(--v4-gold-soft);border-radius:50%;background:#062137;box-shadow:0 0 0 4px rgba(224,180,85,.05);}
.v4-timeline-item time{color:var(--v4-gold-soft);font-size:10px;font-weight:800;}
.v4-timeline-item h3{margin:12px 0 6px!important;color:#fff!important;font-size:14px!important;line-height:1.28!important;}
.v4-timeline-item strong{display:block;color:#d2dde3;font-size:10.5px;line-height:1.45;}
.v4-timeline-item small{display:block;color:#7894a4;font-size:8.5px;margin-top:4px;}
.v4-timeline-item p{margin:12px 0 0!important;color:#9fb2bd!important;font-size:9.5px!important;line-height:1.58!important;}

/* COMPANIES */
.v4-companies{background:radial-gradient(circle at 50% 0,#0d3752 0,#08263a 42%,#061827 100%);}
.v4-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.v4-company-card{overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#08283e;box-shadow:0 14px 34px rgba(0,0,0,.18);transition:.22s ease;}
.v4-company-card:hover{transform:translateY(-3px);border-color:rgba(243,211,136,.5);}
.v4-company-top{display:grid;grid-template-columns:46% 54%;height:128px;border-bottom:1px solid rgba(255,255,255,.12);}
.v4-logo-board{height:100%;min-width:0;padding:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.v4-logo-board img{display:block!important;width:auto!important;height:auto!important;max-width:155px!important;max-height:68px!important;object-fit:contain!important;filter:none!important;}
.v4-company-visual{height:128px;overflow:hidden;background:#0b3551;}
.v4-company-visual img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
.v4-company-copy{padding:14px 15px 16px;min-height:155px;}
.v4-company-copy h3{margin:0 0 5px!important;color:#fff!important;font-size:15px!important;line-height:1.2!important;}
.v4-company-copy>strong{display:block;color:var(--v4-gold-soft);font-size:10.5px;line-height:1.45;}
.v4-company-copy>small{display:block;margin-top:5px;color:#7f98a6;font-size:8.5px;}
.v4-company-copy>p{margin:8px 0 0!important;color:#afbec6!important;font-size:9.5px!important;line-height:1.55!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ACHIEVEMENTS */
.v4-achievements{background:#061827;}
.v4-achievement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;}
.v4-achievement-card{overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#08283e;box-shadow:0 14px 38px rgba(0,0,0,.18);transition:.22s ease;}
.v4-achievement-card:hover{transform:translateY(-4px);border-color:rgba(243,211,136,.48);}
.v4-achievement-media{height:158px;overflow:hidden;background:#0d3854;}
.v4-achievement-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .35s ease;}
.v4-achievement-card:hover .v4-achievement-media img{transform:scale(1.035);}
.v4-achievement-copy{padding:16px;}
.v4-achievement-copy>span{display:block;color:#89a6b5;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.v4-achievement-copy h3{margin:7px 0 7px!important;color:#fff!important;font-size:16px!important;line-height:1.25!important;}
.v4-achievement-copy strong{display:block;color:var(--v4-gold-soft);font-size:12px;line-height:1.45;}
.v4-achievement-copy p{margin:9px 0 0!important;color:#afbec6!important;font-size:9.8px!important;line-height:1.58!important;}

/* CTA */
.v4-cta{position:relative;isolation:isolate;overflow:hidden;padding:36px 0;background:linear-gradient(90deg,#08243a,#0c3853 58%,#061827);border-bottom:1px solid rgba(255,255,255,.14);}
.v4-cta>img{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.25;filter:saturate(.75);}
.v4-cta:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,22,35,.9),rgba(5,22,35,.45) 55%,rgba(5,22,35,.8));}
.v4-cta-grid{display:grid;grid-template-columns:1.2fr auto .42fr;gap:35px;align-items:center;}
.v4-cta h2{margin:9px 0 5px!important;color:#fff!important;font-family:Arial,"Segoe UI",sans-serif!important;font-size:32px!important;letter-spacing:-.035em!important;}
.v4-cta p{margin:0!important;max-width:650px;color:#c1cdd4!important;font-size:11px!important;line-height:1.55!important;}
.v4-cta-actions{display:flex;gap:10px;}
.v4-cta blockquote{margin:0;padding-inline-start:20px;border-inline-start:1px solid rgba(255,255,255,.35);color:#f2f5f7;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-style:italic;line-height:1.45;}

/* CONTACT */
.v4-contact-form-section{padding:58px 0;background:#03131f;}
.v4-contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:start;}
.v4-contact-copy h2{margin:12px 0 12px!important;color:#fff!important;font-size:34px!important;}
.v4-contact-copy p{color:#9fb1bc!important;font-size:11px!important;line-height:1.7!important;}
.v4-contact-links{display:flex;flex-direction:column;gap:7px;margin-top:18px;}
.v4-contact-links a{color:#dce5e9!important;font-size:11px;}
.v4-contact-form-section .contact-panel{background:#fff!important;color:#102739!important;border:0!important;border-radius:10px!important;box-shadow:var(--v4-shadow)!important;padding:22px!important;}
.v4-contact-form-section .contact-form input,.v4-contact-form-section .contact-form textarea{background:#f1f5f7!important;color:#102739!important;border-color:#dce5e9!important;}

/* Keep full company page disciplined too. */
.approved-companies .reveal,.approved-companies .reveal-delay{opacity:1!important;visibility:visible!important;transform:none!important;}
.approved-company-card{overflow:hidden!important;}
.approved-company-visual{min-height:280px!important;max-height:330px!important;overflow:hidden!important;}
.approved-company-visual img{display:block!important;width:100%!important;height:100%!important;min-height:280px!important;max-height:330px!important;object-fit:cover!important;}
.approved-logo-panel{box-sizing:border-box!important;width:230px!important;max-width:100%!important;height:78px!important;max-height:78px!important;padding:11px 16px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:#fff!important;border-radius:8px!important;}
.approved-logo-panel img{display:block!important;width:auto!important;height:auto!important;max-width:195px!important;max-height:52px!important;object-fit:contain!important;filter:none!important;}

@media(max-width:1180px){
  .v4-hero-stage{grid-template-columns:1.08fr .8fr;gap:20px;min-height:540px;}
  .v4-hero-note{display:none;}
  .v4-portrait-wrap{width:min(39vw,400px);height:500px;}
  .v4-company-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v4-timeline{grid-template-columns:repeat(3,1fr);gap:28px 0;}
  .v4-timeline-item:nth-child(3){border-inline-end:0!important;}
}

@media(max-width:820px){
  .v4-hero-stage{grid-template-columns:1fr;min-height:auto;padding-top:35px;}
  .v4-hero-copy{padding:35px 0 0;max-width:none;}
  .v4-portrait-wrap{justify-self:center;width:min(76vw,390px);height:470px;margin-top:-5px;}
  .v4-metrics{grid-template-columns:repeat(2,1fr);}
  .v4-section-head{align-items:start;flex-direction:column;gap:10px;}
  .v4-section-head>span{text-align:left;}
  html[dir="rtl"] .v4-section-head>span{text-align:right;}
  .v4-company-grid,.v4-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v4-cta-grid{grid-template-columns:1fr;gap:18px;}
  .v4-cta blockquote{display:none;}
  .v4-contact-grid{grid-template-columns:1fr;gap:30px;}
}

@media(max-width:580px){
  .site-header .brand-copy small{display:none;}
  .v4-hero-copy h1{font-size:44px!important;}
  .v4-title{font-size:13px!important;letter-spacing:.18em!important;}
  .v4-portrait-wrap{width:min(88vw,360px);height:430px;}
  .v4-metrics{grid-template-columns:1fr 1fr;}
  .v4-metrics>div{padding:17px 14px;}
  .v4-metrics strong{font-size:25px;}
  .v4-section{padding:42px 0;}
  .v4-section-head h2{font-size:28px!important;}
  .v4-timeline{grid-template-columns:1fr;gap:28px;border-top:0;padding-top:0;}
  .v4-timeline-item{padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.22);border-inline-end:0!important;margin-inline-end:0!important;}
  .v4-timeline-item i{top:4px;inset-inline-start:-6px;}
  .v4-company-grid,.v4-achievement-grid{grid-template-columns:1fr;}
  .v4-company-top{height:118px;}
  .v4-company-visual{height:118px;}
  .v4-achievement-media{height:175px;}
  .v4-cta-actions{flex-direction:column;align-items:stretch;}
}




/* =========================================================
   HERO PORTRAIT - FINAL SIZE / SPACING FIX
   ========================================================= */

/* توزيع الـ Hero */
.v4-hero-stage {
    grid-template-columns: minmax(0, 1.18fr) minmax(260px, .62fr) minmax(180px, .42fr) !important;
    gap: 38px !important;
    min-height: 525px !important;
    padding-top: 38px !important;
}

/* مساحة النص */
.v4-hero-copy {
    align-self: center !important;
    padding-top: 30px !important;
    padding-bottom: 55px !important;
}

/* الحاوية الخاصة بصورتي */
.v4-portrait-wrap {
    position: relative !important;
    width: min(27vw, 350px) !important;
    height: 480px !important;
    max-width: 350px !important;
    align-self: end !important;
    justify-self: center !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 30px 0 0 !important;
    margin: 0 18px !important;
    overflow: visible !important;
}

    /* الصورة الشفافة نفسها */
    .v4-portrait-wrap img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        /*
      الصورة أصبحت Transparent، لذلك لا نحتاج Mask
      كان مستخدمًا مع الصورة القديمة.
    */
        -webkit-mask-image: none !important;
        mask-image: none !important;
        filter: contrast(1.02) saturate(.96) drop-shadow(0 24px 28px rgba(0, 0, 0, .28)) !important;
    }

    /* وهج خفيف خلف الجسم فقط حتى يندمج مع الخلفية */
    .v4-portrait-wrap::before {
        content: "" !important;
        position: absolute !important;
        inset: 18% 7% 3% !important;
        background: radial-gradient( ellipse at center, rgba(71, 144, 184, .18) 0%, rgba(22, 76, 108, .10) 40%, transparent 72% ) !important;
        filter: blur(22px) !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .v4-hero-stage {
        grid-template-columns: minmax(0, 1.08fr) minmax(270px, .68fr) !important;
        gap: 28px !important;
        min-height: 510px !important;
    }

    .v4-hero-note {
        display: none !important;
    }

    .v4-portrait-wrap {
        width: min(31vw, 330px) !important;
        max-width: 330px !important;
        height: 455px !important;
        padding-top: 28px !important;
        margin-inline: 15px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .v4-hero-stage {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        gap: 0 !important;
        padding-top: 28px !important;
    }

    .v4-hero-copy {
        padding: 30px 0 12px !important;
    }

    .v4-portrait-wrap {
        width: min(72vw, 310px) !important;
        max-width: 310px !important;
        height: 405px !important;
        justify-self: center !important;
        margin: 8px auto 0 !important;
        padding-top: 20px !important;
    }

    .v4-hero-note {
        display: none !important;
    }
}


/* الهواتف الصغيرة */
@media (max-width: 520px) {

    .v4-portrait-wrap {
        width: min(78vw, 285px) !important;
        max-width: 285px !important;
        height: 375px !important;
    }
}