/* ===== BRAND TOKENS — Generated from brand-config.json ===== */
/* Edit via /visual-identity/ — do NOT edit manually */
:root {
  --navy: #081E35;
  --deep: #081E35;
  --orange: #F38727;
  --teal: #10729C;
  --teal-deep: #074F6D;
  --red: #E92A27;
  --ink: #14202E;
  --muted: #5B6B7A;
  --soft: #F3F7FA;
  --line: #E4EBF2;
  --white: #FFFFFF;
  --whatsapp: #25D366;
  --hero-overlay: linear-gradient(270deg, rgba(8,30,53,.96) 0%, rgba(8,30,53,.86) 48%, rgba(8,30,53,.48) 100%);
  --cta-band: linear-gradient(135deg, var(--orange) 0%, #F59B31 54%, #D96E12 100%);
  --shadow: 0 18px 56px rgba(8,30,53,.14);
  --radius: 14px;
  --max: 1280px;
  --font-primary: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body{font-family:var(--font-primary)!important;color:var(--ink);}
.site-header.scrolled,.site-header.menu-open,.site-footer,.stats-band,.stat-card{background:var(--navy)!important;}
.btn-primary,.cta-band{background:var(--orange)!important;}
.desktop-nav a:hover,.desktop-nav a.active,.section-kicker{border-color:var(--orange)!important;color:var(--orange)!important;}
.whatsapp-fab,.btn-whatsapp{background:var(--whatsapp,#25D366)!important;}
.section h2,.section-head h2,.copy-block h2,.card h3,.service-card h3,.fleet-card h3{color:var(--navy)!important;}
.muted-section{background:var(--soft)!important;}
.brand-pattern-bg{background-image:url(/assets/img/brand-pattern.webp);background-repeat:repeat;background-size:200px;opacity:.04;}

/* services-section-polish-20260623
   Improve dark services section readability and remove background logo/pattern. */
.dark-section{
  background:
    radial-gradient(circle at 18% 18%, rgba(243,135,39,.12) 0, rgba(243,135,39,0) 28rem),
    linear-gradient(180deg,#081E35 0%, #081E35 48%, #081E35 100%) !important;
  color:#fff !important;
}
.dark-section::before{display:none!important;background:none!important;content:none!important;}
.dark-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:92px 92px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  opacity:.45;
}
.dark-section > *{position:relative;z-index:1;}
.dark-section .section-kicker{color:#ff9a35!important;letter-spacing:1.2px;}
.dark-section .section-head{max-width:820px;margin-bottom:56px;}
.dark-section .section-head h2,
.dark-section h2{
  color:#ffffff!important;
  text-shadow:0 10px 34px rgba(0,0,0,.25);
}
.dark-section .section-head p{
  color:rgba(255,255,255,.78)!important;
  max-width:720px;
  margin-inline:auto;
}
.dark-section .services-grid{gap:20px;align-items:stretch;}
.dark-section .service-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:300px;
  padding:30px 24px 26px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16)!important;
  border-top:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;
  box-shadow:0 22px 54px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.dark-section .service-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--orange),#ffc179);
}
.dark-section .service-card::after{
  content:"";
  position:absolute;
  inset:auto -30% -45% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(243,135,39,.10);
  filter:blur(4px);
}
.dark-section .service-card:hover{
  transform:translateY(-7px);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
  border-color:rgba(255,255,255,.26)!important;
}
.dark-section .service-card span{
  align-self:flex-start;
  min-width:42px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(243,135,39,.14);
  color:#ff9a35!important;
  border:1px solid rgba(243,135,39,.28);
  letter-spacing:0;
}
.dark-section .service-card h3{
  color:#ffffff!important;
  font-size:clamp(20px,1.45vw,25px);
  margin:22px 0 12px;
}
.dark-section .service-card p{
  color:rgba(255,255,255,.77)!important;
  font-size:15.5px;
  line-height:2;
  margin:0 0 22px;
}
.dark-section .service-card a{
  margin-top:auto;
  color:#ffd6aa!important;
  font-weight:900;
}
@media (max-width:1100px){.dark-section .services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:760px){.dark-section .services-grid{grid-template-columns:1fr}.dark-section .service-card{min-height:auto}.dark-section::after{opacity:.25}}

/* remove-background-logo-pattern-20260623 */
.cta-band::before{display:none!important;background:none!important;content:none!important;}
.cta-band{background:linear-gradient(135deg,#f38727 0%,#f59b31 52%,#d96e12 100%)!important;}

/* project-section-polish-all-sections-20260623
   Remove busy background image and normalize dark section readability. */
.project-section{
  background:
    radial-gradient(circle at 82% 18%,rgba(243,135,39,.10) 0,rgba(243,135,39,0) 24rem),
    radial-gradient(circle at 12% 88%,rgba(16,114,156,.14) 0,rgba(16,114,156,0) 26rem),
    linear-gradient(180deg,#081E35 0%,#081E35 52%,#081E35 100%)!important;
  color:#fff!important;
}
.project-section .project-bg{display:none!important;background:none!important;}
.project-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  opacity:.38;
}
.project-section > *{position:relative;z-index:1;}
.project-section .section-kicker{color:#ff9a35!important;letter-spacing:1.2px;}
.project-section .section-head{max-width:850px;margin-bottom:54px;}
.project-section .section-head h2,
.project-section h2{
  color:#fff!important;
  text-shadow:0 10px 34px rgba(0,0,0,.24);
}
.project-section .section-head p{
  color:rgba(255,255,255,.80)!important;
  max-width:760px;
  margin-inline:auto;
}
.project-section .projects-grid{gap:22px;}
.project-section .project-card{
  min-height:205px;
  padding:30px 32px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.project-section .project-card small{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-bottom:14px;
  color:#ffd6aa!important;
  font-weight:900;
}
.project-section .project-card h3{
  color:#fff!important;
  font-size:clamp(22px,1.8vw,30px);
  line-height:1.25;
  margin:0 0 16px;
}
.project-section .project-card p{
  color:rgba(255,255,255,.76)!important;
  font-size:16px;
  line-height:2;
}
.project-section .project-meta{
  background:rgba(243,135,39,.16)!important;
  color:#ffd6aa!important;
  border:1px solid rgba(243,135,39,.24);
}
.clients-section,.blog-preview,.muted-section{position:relative;overflow:hidden;}
.clients-section::before,.blog-preview::before,.muted-section::before{content:none!important;display:none!important;background:none!important;}
@media (max-width:1100px){.project-section .projects-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:760px){.project-section .projects-grid{grid-template-columns:1fr}.project-section .project-card{min-height:auto;padding:24px}.project-section::before{opacity:.22}}