.brand-icon {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand-icon-dark,
.brand-icon-light {
  position: absolute;
  inset: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.brand-icon-dark {
  opacity: 1;
}

.brand-icon-light {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92);
}

.brand-icon-light img {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.header.scrolled .brand-icon-dark {
  opacity: 0;
  transform: scale(0.92);
}

.header.scrolled .brand-icon-light {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .brand-icon {
    width: 44px;
    height: 44px;
  }

  .brand-icon img {
    width: 100%;
    height: 100%;
  }
}

/* Real stacked project covers: the next image physically covers the previous one. */
.project-cover {
  opacity: .33;
  overflow: hidden;
  transform: none;
  background: none !important;
  transition: none;
}

.project-cover-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: translateY(100%);
  transition: none;
  will-change: transform;
}
.mobile-cover{display:none}

.project-cover-layer:first-child,
.project-cover-layer.is-covered {
  transform: translateY(0);
}

.project-panel {
  transition: opacity .3s ease, translate .48s cubic-bezier(.22,.75,.22,1);
}

@media (prefers-reduced-motion: reduce) {
  .project-cover-layer,
  .project-panel {
    transition-duration: .01ms;
  }
}

/* Geographic ADM1 polygons projected from real GeoJSON coordinates. */
.ksa-map.geo-regions { filter:none; opacity:1; overflow:visible; }
.geo-regions path { fill:rgba(255,255,255,.055); stroke:rgba(255,255,255,.3); stroke-width:1.4; vector-effect:non-scaling-stroke; transition:fill .16s ease,stroke .16s ease,filter .16s ease; }
.geo-regions path.active { fill:rgba(184,150,58,.68); stroke:#e3c879; stroke-width:2; filter:drop-shadow(0 0 11px rgba(184,150,58,.7)); }

.geo-regions path { pointer-events:all; cursor:pointer; touch-action:manipulation; }
.map-progress b { transition-duration:.14s !important; }
.geo-regions path:focus-visible { outline:none; stroke:#fff; stroke-width:3; }

.service { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.service-arrow { width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s ease; }
.service.active .service-arrow { transform:rotate(-45deg); }

@media (hover:none) {
  .service:not(.active) p { max-height:0; opacity:0; }
  .service.active p { max-height:130px; opacity:1; }
}

/* Scroll/swipe affordance for the project journey */
.gesture-hint { position:absolute; z-index:8; left:50%; bottom:62px; transform:translateX(-50%); color:#fff; transition:opacity .45s ease,transform .45s ease; pointer-events:none; }
.gesture-hint.is-hidden { opacity:0; transform:translate(-50%,14px); }
.gesture-hint span { display:flex; flex-direction:column; align-items:center; gap:9px; }
.gesture-hint em { font:600 10px Cairo,sans-serif; font-style:normal; letter-spacing:.4px; color:rgba(255,255,255,.75); white-space:nowrap; }
.mobile-gesture { display:none !important; }
.mouse-icon { position:relative; width:22px; height:36px; border:1.5px solid rgba(255,255,255,.85); border-radius:15px; }
.mouse-icon b { position:absolute; top:7px; left:50%; width:2px; height:7px; border-radius:2px; background:var(--gold); transform:translateX(-50%); animation:mouseScroll 1.6s ease-in-out infinite; }
@keyframes mouseScroll { 0%{opacity:0;transform:translate(-50%,-2px)} 30%{opacity:1} 75%{opacity:1;transform:translate(-50%,8px)} 100%{opacity:0;transform:translate(-50%,11px)} }
.finger-icon { position:relative; width:34px; height:44px; }
.finger-icon:before { content:""; position:absolute; left:12px; bottom:0; width:12px; height:29px; border:1.5px solid #fff; border-radius:8px 8px 5px 5px; transform-origin:bottom center; animation:fingerSwipe 1.7s ease-in-out infinite; }
.finger-icon:after { content:""; position:absolute; left:17px; top:0; width:1px; height:15px; background:linear-gradient(transparent,var(--gold)); animation:swipeTrail 1.7s ease-in-out infinite; }
.finger-icon b { position:absolute; left:8px; bottom:0; width:23px; height:15px; border:1.5px solid rgba(255,255,255,.8); border-top:0; border-radius:0 0 10px 10px; }
@keyframes fingerSwipe { 0%,100%{transform:translateY(7px) rotate(-5deg);opacity:.45} 45%,65%{transform:translateY(-8px) rotate(3deg);opacity:1} }
@keyframes swipeTrail { 0%,100%{opacity:0;transform:translateY(11px)} 35%{opacity:1} 70%{opacity:0;transform:translateY(-5px)} }
@media(max-width:900px){.desktop-gesture{display:none!important}.mobile-gesture{display:flex!important}.gesture-hint{top:48vh;bottom:auto}.gesture-hint em{font-size:9px}}
@media(prefers-reduced-motion:reduce){.mouse-icon b,.finger-icon:before,.finger-icon:after{animation:none}}

/* Floating olive glass navigation */
.header{
  top:18px;
  right:4vw;
  left:4vw;
  width:auto;
  height:76px;
  padding:0 24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(24,43,37,.18);
  box-shadow:0 12px 40px rgba(8,20,16,.08);
  backdrop-filter:blur(5px) saturate(115%);
  -webkit-backdrop-filter:blur(5px) saturate(115%);
  transition:height .4s cubic-bezier(.16,1,.3,1),background .4s ease,border-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease,transform .4s ease;
}
.header:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 38%,rgba(184,150,58,.05));
  pointer-events:none;
}
.header.scrolled{
  top:14px;
  height:68px;
  background:rgba(36,58,50,.78);
  border-color:rgba(218,197,137,.2);
  box-shadow:0 18px 55px rgba(5,18,13,.28),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.header nav{position:relative;z-index:1}
.header .brand-icon{width:42px;height:42px}
.header nav a{color:rgba(255,255,255,.84);transition:color .25s ease}
.header nav a:hover{color:#fff}
.header-cta{position:relative;z-index:1;background:rgba(255,255,255,.05);transition:background .25s ease,border-color .25s ease}
.header-cta:hover{background:rgba(184,150,58,.16);border-color:rgba(216,189,114,.55)}

@media(max-width:900px){
  .header,.header.scrolled{top:10px;right:12px;left:12px;width:auto!important;max-width:none!important;height:64px;padding:0 17px;border-radius:15px;overflow:visible!important}
  .header nav{display:flex!important;position:absolute;z-index:100;top:74px!important;right:0!important;left:0!important;padding:20px!important;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(24,43,37,.97)!important;box-shadow:0 20px 45px rgba(5,18,13,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,-10px,0) scale(.98);transform-origin:top center;transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .25s}
  .header.menu-open nav{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
  .header.menu-open{background:rgba(36,58,50,.9);border-color:rgba(218,197,137,.22)}
  .menu{position:relative;z-index:2;width:42px;height:42px;padding:7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu i{transition:transform .3s ease,opacity .2s ease;transform-origin:center}
  .header.menu-open .menu i:first-child{transform:translateY(4px) rotate(45deg)}
  .header.menu-open .menu i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .header .brand-icon{width:34px;height:34px}
}