/* Alnajjar editorial scenes: sectors + process */
.l-menu,
body.is-custom-menu-open .l-menu { display: none !important; }
.custom-nav-panel {
  position: fixed;
  z-index: 24999;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(180px,.55fr) minmax(360px,1fr);
  align-items: center;
  gap: clamp(30px,7vw,120px);
  padding: clamp(85px,10vw,150px) clamp(28px,8vw,145px);
  color: #fff;
  background: radial-gradient(circle at 85% 10%,rgba(244,196,48,.13),transparent 28%),#080808;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .35s;
}
.custom-nav-panel::before { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; background:url("../img/cmn/noise_b.jpg") center/360px repeat; mix-blend-mode:screen; }
body.is-custom-menu-open .custom-nav-panel { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.custom-nav-panel__brand { position:relative; display:grid; place-items:center; }
.custom-nav-panel__brand::before { content:""; position:absolute; width:min(28vw,380px); aspect-ratio:1; border-radius:50%; background-image:linear-gradient(rgba(244,196,48,.94),rgba(244,196,48,.94)),url("../img/cmn/noise_b.jpg"); background-size:auto,300px; background-blend-mode:normal,soft-light; }
.custom-nav-panel__brand img { position:relative; z-index:1; width:min(18vw,230px); filter:grayscale(1) brightness(0) invert(1); }
.custom-nav-panel__links { position:relative; z-index:1; display:grid; }
.custom-nav-panel__links a,
.custom-nav-panel__links button { display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:16px; min-height:92px; padding:0; color:#fff; background:transparent; border:0; border-top:1px solid rgba(255,255,255,.2); text-align:start; cursor:pointer; }
.custom-nav-panel__links a:last-child,
.custom-nav-panel__links button:last-child { border-bottom:1px solid rgba(255,255,255,.2); }
.custom-nav-panel__links span { color:#f4c430; font:700 12px/1 "Courier New",monospace; }
.custom-nav-panel__links strong { font-size:clamp(28px,3.4vw,58px); line-height:1; }
.custom-nav-panel__links i { color:#f4c430; font-style:normal; font-size:26px; transition:transform .25s; }
.custom-nav-panel__links a:hover i,
.custom-nav-panel__links button:hover i { transform:translateX(7px); }
[dir="rtl"] .custom-nav-panel__links a:hover i,
[dir="rtl"] .custom-nav-panel__links button:hover i { transform:translateX(-7px); }
.custom-nav-panel__line { position:absolute; inset-inline-end:clamp(28px,8vw,145px); bottom:36px; margin:0; color:rgba(255,255,255,.55); }

.philosophy-statement {
  margin: 0;
  color: #111;
  direction: ltr;
  white-space: nowrap;
  font: 700 clamp(30px,4.2vw,68px)/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing: .08em;
}
.philosophy-statement span { display:inline-block; margin-inline:.12em; font-weight:500; }
.philosophy-copy { text-align:start; }
html[lang="ar"] .philosophy-copy { direction:rtl; font-family:"Tajawal",Tahoma,sans-serif; line-height:1.9; }
html[lang="ar"] .about-copy { direction:rtl; text-align:right !important; }
html:not([lang="ar"]) .about-copy { direction:ltr; text-align:left !important; }
.about-copy p { max-width:64rem; margin-inline:0 !important; }
.footer-contact-button { width:auto !important; padding:0 14px !important; color:#111; background:transparent; border:1px solid #111; font-size:11px; letter-spacing:.12em; cursor:pointer; }

.l-menu .custom-products-link {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.l-menu,
.l-menu a,
.l-menu p { color: #fff !important; }
.l-menu .nav .no,
.l-menu .news .text { color: #f4c430 !important; }
.l-menu .lineText { filter: grayscale(1) brightness(0) invert(1); }
.l-menu .item.is-line { background-color: rgba(255,255,255,.34) !important; }
.l-menu .l-arw .line { background-color: #f4c430 !important; }
.l-menu .l-arw .tri { border-inline-start-color: #f4c430 !important; }

.services-directory {
  color: #111;
  background: transparent;
  isolation: isolate;
}

.services-directory::before {
  z-index: -1;
  opacity: 0;
  background: none;
}

.services-directory::after {
  content: "SECTORS";
  position: absolute;
  z-index: -1;
  inset-inline-end: -.03em;
  top: 7%;
  color: transparent;
  font: italic clamp(90px,15vw,240px)/.8 Georgia,serif;
  letter-spacing: -.07em;
  -webkit-text-stroke: 1px rgba(17,17,17,.08);
  direction: ltr;
  pointer-events: none;
}

.services-header { align-items: end; border-bottom-color: rgba(17,17,17,.18); }
.services-kicker { color: #f4c430; }
.services-title {
  color: #111;
  font-size: clamp(48px,6.8vw,110px);
  line-height: .9;
  letter-spacing: -.05em;
}
.services-intro { max-width: 35rem; color: rgba(17,17,17,.62); line-height: 1.8; }
.services-grid { gap: 0 1.4rem; }
.service-card,
.service-card[open] {
  border: 0;
  border-top: 1px solid rgba(17,17,17,.17);
  border-radius: 0;
  background: transparent;
}
.service-card summary {
  min-height: 3.7rem;
  padding: .45rem 0;
  color: #111;
  transition: padding-inline .24s ease,color .24s ease;
}
.service-card summary:hover { padding-inline: .65rem; color: #f4c430; }
.service-icon { color: #f4c430; background: transparent; border: 1px solid rgba(244,196,48,.34); }
.service-icon {
  background-image: linear-gradient(rgba(244,196,48,.18),rgba(244,196,48,.18)),url("../img/cmn/noise_b.jpg");
  background-size: auto,180px;
  background-blend-mode: normal,soft-light;
}
.service-card summary > span:nth-child(2) { color: #f4c430; }
.service-icon svg,
.service-icon svg .accent { stroke: currentColor; }
.service-toggle { color: #f4c430; }
.service-card ul { padding: 0 0 .8rem; color: rgba(17,17,17,.62); }
.service-card li::before { color: #f4c430; }

.uniform-process {
  color: #111;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}
.uniform-process::before {
  content: "PROCESS";
  position: absolute;
  z-index: -1;
  inset-inline-start: -.04em;
  top: 6%;
  color: transparent;
  font: italic clamp(100px,17vw,270px)/.8 Georgia,serif;
  letter-spacing: -.07em;
  -webkit-text-stroke: 1px rgba(17,17,17,.08);
  direction: ltr;
}
.uniform-process::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0;
  background: none;
}
.process-copy { padding-inline-start: clamp(1rem,2vw,2rem); border-inline-start-color: #f4c430; }
.process-kicker { color: #f4c430; letter-spacing: .16em; }
.process-title { color: #111; font-size: clamp(46px,5.6vw,92px); line-height: .93; }
.process-lead { color: rgba(17,17,17,.62); }
.process-steps { gap: 0; border-top: 1px solid rgba(17,17,17,.2); }
.process-step,
.process-step:hover {
  min-height: 8.2rem;
  color: #111;
  background: transparent;
  border: 0;
  border-inline-end: 1px solid rgba(17,17,17,.16);
  border-radius: 0;
  transform: none;
}
.process-step:last-child { border-inline-end: 0; }
.process-step > span { color: #f4c430; }
.process-step small,
.process-step:hover small { color: rgba(17,17,17,.55); }
.process-visual::before {
  inset: -6%;
  border-radius: 50%;
  background-image: linear-gradient(rgba(244,196,48,.94),rgba(244,196,48,.94)),url("../img/cmn/noise_b.jpg");
  background-size: auto,360px;
  background-blend-mode: normal,soft-light;
}
.process-visual::after { inset: -1%; border-radius: 50%; border: 1px solid rgba(255,255,255,.26); }
.process-visual img {
  border-radius: 50%;
  clip-path: circle(49% at 50% 50%);
  filter: saturate(.82) contrast(1.08);
}
.process-caption { color: #080808; background: #f4c430; }

body.is-services-visible .language-switcher button,
body.is-process-visible .language-switcher button { color: rgba(17,17,17,.54); }
body.is-services-visible .language-switcher button.is-active,
body.is-services-visible .language-switcher button:hover,
body.is-services-visible .language-switcher button:focus-visible,
body.is-process-visible .language-switcher button.is-active,
body.is-process-visible .language-switcher button:hover,
body.is-process-visible .language-switcher button:focus-visible { color: #111; }

@media (max-width:767px) {
  .custom-nav-panel { grid-template-columns:1fr; grid-template-rows:170px auto; gap:24px; padding:80px 8vw 40px; }
  .custom-nav-panel__brand::before { width:190px; }
  .custom-nav-panel__brand img { width:115px; }
  .custom-nav-panel__links a,
  .custom-nav-panel__links button { min-height:67px; grid-template-columns:34px 1fr auto; }
  .custom-nav-panel__links strong { font-size:7vw; }
  .custom-nav-panel__line { inset-inline:8vw; bottom:22px; font-size:12px; }
  .philosophy-statement { font-size:7.2vw; letter-spacing:.045em; }
  .services-directory {
    padding-top: 10vh;
    background: transparent;
  }
  .services-directory::after { top: 13%; font-size: 28vw; }
  .services-title { font-size: 12vw; }
  .services-intro { color: rgba(17,17,17,.62); }
  .services-grid { gap: 0; }
  .service-card summary { min-height: 2.85rem; font-size: 3.8vw; }
  .service-card ul { color: rgba(17,17,17,.62); font-size: 3vw; }
  .service-card[open] { position: relative; z-index: 12; }
  .service-card[open] ul {
    position: absolute;
    z-index: 20;
    top: calc(100% - 1px);
    inset-inline: 0;
    padding: .85rem;
    color: rgba(17,17,17,.72);
    background: #f2f0e9;
    border: 1px solid rgba(244,196,48,.5);
    box-shadow: 0 20px 45px rgba(0,0,0,.48);
  }
  .service-card:nth-last-child(-n+3)[open] ul { top: auto; bottom: calc(100% - 1px); }
  .uniform-process { grid-template-rows: auto 31vh auto; }
  .uniform-process::before { top: 8%; font-size: 29vw; }
  .process-title { font-size: 10vw; }
  .process-lead { color: rgba(17,17,17,.62); }
  .process-step,
  .process-step:hover { min-height: 6rem; padding: .55rem; }
}