/* ============================================================
   JAZEERA AL MARYAH — stylesheet
   Palette derived from brand logo:
   petrol #1b5671 · crimson #e62545 · ink #231f20 · steel #8e9093
   Pure CSS — no frameworks
   ============================================================ */

:root{
  /* brand */
  --petrol:#1b5671;
  --petrol-600:#14455c;
  --petrol-800:#0d3345;
  --petrol-900:#092634;
  --deep:#051a24;
  --crimson:#e62545;
  --crimson-600:#c81c39;
  --crimson-soft:rgba(230,37,69,.12);

  /* neutrals */
  --ink:#20262b;
  --slate:#57676f;
  --mist:#8fa2ab;
  --paper:#f3f7f9;
  --paper-2:#e9f0f3;
  --line:#dbe5ea;
  --white:#ffffff;

  /* effects */
  --shadow-sm:0 2px 10px rgba(9,38,52,.07);
  --shadow-md:0 16px 44px -16px rgba(9,38,52,.28);
  --shadow-lg:0 32px 70px -26px rgba(5,26,36,.5);

  /* type */
  --font-display:'Barlow Condensed',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --wrap:1220px;
  --radius:14px;
  --radius-sm:9px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0;
  font-weight:600;
  line-height:1.05;
  letter-spacing:.01em;
  text-wrap:balance;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:3px solid var(--crimson); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(100% - 44px,var(--wrap)); margin-inline:auto; }
.section{ padding-block:clamp(68px,9vw,120px); }

/* engineering-sheet eyebrow: JAM-SHT-01 · WHO WE ARE */
.sheet{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--crimson); font-weight:500;
}
.sheet::before{
  content:""; width:34px; height:1.5px; background:var(--crimson);
}
.sheet .n{ color:var(--mist); }
.section-head{ max-width:660px; margin-bottom:54px; }
.section-head h2{
  font-size:clamp(2.3rem,5vw,3.6rem); margin-block:14px 14px; color:var(--petrol-900);
  text-transform:uppercase;
}
.section-head h2 em{ font-style:normal; color:var(--crimson); }
.section-head p{ color:var(--slate); font-size:1.06rem; }
.center{ margin-inline:auto; text-align:center; }
.center .sheet{ justify-content:center; }
.center .sheet::before{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:13px 28px; border-radius:var(--radius-sm); transition:.3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{
  color:#fff; background:var(--crimson);
  box-shadow:0 12px 28px -10px rgba(230,37,69,.55);
}
.btn-primary:hover{ background:var(--crimson-600); transform:translateY(-2px); }
.btn-ghost{
  color:var(--petrol-900); background:transparent; border:1.5px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--petrol); color:var(--petrol); transform:translateY(-2px); }
.btn-outline-light{ color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn-outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:70;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.header.scrolled{ box-shadow:var(--shadow-sm); }
.header .wrap{ display:flex; align-items:center; gap:28px; min-height:82px; }
.brand{ flex-shrink:0; display:flex; align-items:center; }
.brand img{ height:70px; width:auto; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  font-family:var(--font-display); font-weight:500; font-size:1.06rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--petrol-800); padding:9px 14px; border-radius:8px; position:relative; transition:.25s;
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--crimson); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--crimson); }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); }
.nav a.active{ color:var(--crimson); }
.header-cta{ display:flex; align-items:center; gap:10px; }
.burger{ display:none; width:46px; height:46px; border-radius:10px; color:var(--petrol-900); }
.burger svg{ width:27px; height:27px; }

/* mobile nav panel */
.mnav{
  display:none; position:fixed; inset:82px 0 auto 0; z-index:69;
  background:var(--white); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md); padding:12px 22px 22px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:.3s var(--ease);
}
.mnav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mnav a{
  display:block; padding:13px 8px; font-family:var(--font-display);
  font-size:1.15rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--petrol-900); border-bottom:1px solid var(--paper-2);
}
.mnav a.active{ color:var(--crimson); }
.mnav .btn{ margin-top:16px; width:100%; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative; color:#e8f1f5; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1000px 560px at 85% -10%,rgba(27,86,113,.65),transparent 60%),
    radial-gradient(700px 480px at -5% 110%,rgba(230,37,69,.16),transparent 55%),
    linear-gradient(160deg,#04141c 0%,var(--petrol-900) 55%,#0b3040 100%);
}
/* blueprint grid */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:
    linear-gradient(rgba(140,190,215,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,215,.08) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 62% 38%,#000 5%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 62% 38%,#000 5%,transparent 78%);
}
.hero .wrap{
  position:relative;
  padding-block:clamp(84px,12vw,164px) clamp(120px,14vw,180px);
  max-width:980px;
}
.hero-kicker{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:#9fc2d4; display:flex; align-items:center; gap:12px;
}
.hero-kicker::before{ content:""; width:36px; height:1.5px; background:var(--crimson); }
.hero h1{
  font-size:clamp(3rem,8.4vw,6.2rem); text-transform:uppercase;
  color:#fff; margin-block:22px 8px; line-height:.98;
}
.hero h1 .rot{ color:var(--crimson); display:inline-block; min-width:5.2ch; }
.hero-sub{
  color:#b6cdd9; font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:56ch; margin-top:18px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }



/* ---------- hero slider (full-screen, 3 slides) ---------- */
.hero.slider{ min-height:min(88vh,860px); display:flex; flex-direction:column; }
.hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 80% 0%,rgba(230,37,69,.18),transparent 60%),
    linear-gradient(160deg,rgba(4,20,28,.9) 0%,rgba(9,38,52,.82) 55%,rgba(11,48,64,.86) 100%);
}
.hero.slider::before{ z-index:2; }
.hero.slider .conduit{ z-index:3; }
.hero.slider .slides{ z-index:4; }
.hero.slider .slider-ui{ z-index:5; }
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } }
.slides{ position:relative; flex:1; display:grid; }
.slide{
  grid-area:1/1; display:grid; place-items:center; text-align:center;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.slide.is-active{ opacity:1; transform:none; pointer-events:auto; }
.slide .wrap{ padding-block:clamp(90px,12vw,150px) clamp(120px,13vw,160px); max-width:920px; }
.slide .hero-kicker{ justify-content:center; }
.slide .hero-kicker::after{ content:""; width:36px; height:1.5px; background:var(--crimson); }
.slide h1{
  font-size:clamp(3rem,8.6vw,6.4rem); text-transform:uppercase;
  color:#fff; margin-block:22px 8px; line-height:.98;
}
.slide h1 em{ font-style:normal; color:var(--crimson); }
.slide .hero-sub{ margin-inline:auto; }
.slide .hero-actions{ justify-content:center; }
.slider-ui{
  position:absolute; left:0; right:0; bottom:34px; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:22px;
}
.slider-arrow{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:#cfe2ec; border:1.5px solid rgba(255,255,255,.28); transition:.3s var(--ease);
}
.slider-arrow:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.slider-arrow svg{ width:20px; height:20px; }
.slider-dots{ display:flex; gap:9px; }
.slider-dots button{
  width:26px; height:4px; border-radius:2px; background:rgba(255,255,255,.25);
  transform:skewX(-20deg); transition:.3s var(--ease); padding:0;
}
.slider-dots button.active{ background:var(--crimson); width:40px; }

/* ---------- about collage (overlapping panels) ---------- */
.collage{ position:relative; aspect-ratio:5/4.4; }
.collage .cpanel{
  position:absolute; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); display:grid; place-items:center; isolation:isolate;
}
.collage .cpanel::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(rgba(160,205,225,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,205,225,.1) 1px,transparent 1px);
  background-size:36px 36px;
}
.collage .cpanel svg{ width:60%; height:auto; filter:drop-shadow(0 14px 24px rgba(0,0,0,.35)); }
.collage .c1{
  inset:0 14% 26% 0; background:linear-gradient(160deg,var(--petrol) 0%,var(--petrol-900) 75%); z-index:1;
}
.collage .c2{
  inset:auto 0 6% auto; width:56%; aspect-ratio:1/1;
  background:linear-gradient(160deg,#256a8a 0%,var(--petrol-900) 80%); z-index:2;
  border:5px solid var(--white);
}
.collage .c3{
  inset:auto auto 0 6%; width:44%; aspect-ratio:5/4;
  background:linear-gradient(160deg,#124156 0%,var(--deep) 80%); z-index:3;
  border:5px solid var(--white);
}
.collage .feat-tag{ z-index:4; }

/* ---------- video showcase (Innovo-style play banner) ---------- */
.video-banner{
  position:relative; margin-top:52px; border-radius:calc(var(--radius) + 6px);
  overflow:hidden; isolation:isolate; min-height:min(52vw,420px);
  display:grid; place-items:center; text-align:center; color:#fff;
  background:
    radial-gradient(700px 360px at 80% 10%,rgba(230,37,69,.28),transparent 60%),
    linear-gradient(150deg,var(--petrol) 0%,var(--petrol-900) 60%,var(--deep));
  box-shadow:var(--shadow-lg); cursor:pointer;
}
.video-banner::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(rgba(160,205,225,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,205,225,.09) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 80%);
}
.vb-inner{ position:relative; z-index:1; padding:clamp(40px,7vw,72px) 24px; }
.play-btn{
  width:92px; height:92px; border-radius:50%; margin:0 auto 22px;
  display:grid; place-items:center; color:#fff; background:var(--crimson);
  box-shadow:0 0 0 0 rgba(230,37,69,.45); transition:.3s var(--ease);
  animation:pulse 2.4s infinite;
}
.play-btn svg{ width:34px; height:34px; margin-left:5px; }
.video-banner:hover .play-btn{ transform:scale(1.08); background:var(--crimson-600); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(230,37,69,.45); }
  70%{ box-shadow:0 0 0 26px rgba(230,37,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(230,37,69,0); }
}
@media (prefers-reduced-motion:reduce){ .play-btn{ animation:none; } }
.vb-inner .sheet{ justify-content:center; color:#ff5c77; }
.vb-inner .sheet::before{ display:none; }
.vb-inner h3{
  font-size:clamp(1.8rem,4.4vw,3rem); text-transform:uppercase; margin-top:10px;
}
.vb-inner p{ color:#b6cdd9; margin-top:8px; font-size:1.02rem; }

/* video lightbox */
.video-modal{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:22px;
  background:rgba(4,16,23,.86); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:.3s var(--ease);
}
.video-modal.show{ opacity:1; pointer-events:auto; }
.video-frame{
  width:min(1000px,100%); aspect-ratio:16/9; background:#000;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  transform:scale(.96); transition:.3s var(--ease);
}
.video-modal.show .video-frame{ transform:scale(1); }
.video-frame iframe,.video-frame video{ width:100%; height:100%; border:0; display:block; }
.video-close{
  position:absolute; top:20px; right:22px; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; color:#fff; border:1.5px solid rgba(255,255,255,.3);
  transition:.25s;
}
.video-close:hover{ background:var(--crimson); border-color:var(--crimson); }
.video-close svg{ width:20px; height:20px; }

/* inner page hero (shorter) */
.page-hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    radial-gradient(800px 400px at 90% 0%,rgba(230,37,69,.18),transparent 55%),
    linear-gradient(155deg,#04141c,var(--petrol-900) 60%,#0b3040);
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(140,190,215,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,215,.08) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 70% 20%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 70% 20%,#000,transparent 75%);
}
.page-hero .wrap{ position:relative; padding-block:clamp(64px,9vw,110px); }
.page-hero .sheet{ color:#ff5c77; }
.page-hero .sheet .n{ color:#7f9dac; }
.page-hero h1{
  font-size:clamp(2.6rem,6.5vw,4.6rem); text-transform:uppercase; margin-block:16px 12px;
}
.page-hero p{ color:#b6cdd9; max-width:62ch; font-size:1.08rem; }

/* ============================================================
   STATS BAND (overlapping)
   ============================================================ */
.stats{ background:var(--white); }
.stats .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  margin-top:-64px; position:relative; z-index:3;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:36px 30px; box-shadow:var(--shadow-md);
}
.stat{ text-align:center; position:relative; }
.stat:not(:last-child)::after{
  content:""; position:absolute; right:-13px; top:14%; height:72%; width:1px; background:var(--line);
}
.stat b{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.2rem,4vw,3.1rem); color:var(--petrol-900); display:block; line-height:1;
}
.stat b span{ color:var(--crimson); }
.stat small{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em;
  color:var(--slate); font-size:.72rem; margin-top:10px; display:block;
}

/* ============================================================
   SECTOR CARDS — What we do
   ============================================================ */
.sectors {
    background: var(--paper);
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.sector-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 28px;
    color: #eaf3f7;
    isolation: isolate;
    box-shadow: var(--shadow-sm);
    transition: .4s var(--ease);
}

    .sector-card::before { /* image + brand duotone overlay */
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        transition: .5s var(--ease);
        background: linear-gradient(165deg,rgba(27,86,113,.55) 0%,rgba(9,38,52,.9) 72%), var(--cover) center/cover;
    }

    .sector-card:hover::before {
        transform: scale(1.06);
    }

    .sector-card::after { /* blueprint texture */
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .5;
        background-image: linear-gradient(rgba(160,205,225,.1) 1px,transparent 1px), linear-gradient(90deg,rgba(160,205,225,.1) 1px,transparent 1px);
        background-size: 42px 42px;
        mask-image: radial-gradient(circle at 50% 0%,#000,transparent 80%);
        -webkit-mask-image: radial-gradient(circle at 50% 0%,#000,transparent 80%);
    }

    .sector-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

.sector-ic {
    position: absolute;
    top: 26px;
    left: 26px;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    transition: .35s var(--ease);
}

.sector-card:hover .sector-ic {
    background: var(--crimson);
    border-color: var(--crimson);
}

.sector-ic svg {
    width: 28px;
    height: 28px;
}

.sector-tag {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    color: #ff6d85;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sector-card h3 {
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
}

.sector-card p {
    color: #b9cfda;
    font-size: .96rem;
    margin-bottom: 18px;
    /* show 2 lines only */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sector-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: #fff;
}

    .sector-link svg {
        width: 17px;
        height: 17px;
        transition: transform .3s var(--ease);
    }

.sector-card:hover .sector-link {
    color: #ff8296;
}

    .sector-card:hover .sector-link svg {
        transform: translateX(5px);
    }
/* ============================================================
   FEATURE (about split)
   ============================================================ */
.feature .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(38px,6vw,84px);
}

.feature.rev .feat-media {
    order: 2;
}

.feat-body h2 {
    font-size: clamp(2rem,4.2vw,3.1rem);
    color: var(--petrol-900);
    text-transform: uppercase;
    margin-block: 14px 16px;
}

    .feat-body h2 em {
        font-style: normal;
        color: var(--crimson);
    }

.feat-body > p {
    color: var(--slate);
    font-size: 1.04rem;
    margin-bottom: 24px;
}

.feat-list {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

    .feat-list li {
        display: flex;
        gap: 13px;
        align-items: flex-start;
    }

    .feat-list .chk {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--crimson-soft);
        color: var(--crimson);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 2px;
    }

        .feat-list .chk svg {
            width: 15px;
            height: 15px;
        }

    .feat-list b {
        color: var(--petrol-900);
        display: block;
        font-size: .98rem;
    }

    .feat-list span {
        color: var(--slate);
        font-size: .92rem;
    }

.feat-media {
    position: relative;
}

/*.feat-panel {
    border-radius: calc(var(--radius) + 6px);
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg,rgba(27,86,113,.35) 0%,rgba(9,38,52,.55) 80%), var(--cover) center/cover;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 5/4;
}*/

.feat-panel {
    border-radius: calc(var(--radius) + 6px);
    position: relative;
    overflow: hidden;
    background: var(--cover) center/cover;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 5/4;
}

    .feat-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .5;
        background-image: linear-gradient(rgba(160,205,225,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(160,205,225,.09) 1px,transparent 1px);
        background-size: 44px 44px;
        mask-image: radial-gradient(circle at 50% 35%,#000,transparent 78%);
        -webkit-mask-image: radial-gradient(circle at 50% 35%,#000,transparent 78%);
    }

.feat-tag {
    position: absolute;
    z-index: 2;
    background: linear-gradient(165deg,rgba(27,86,113,.35) 0%,rgba(9,38,52,.55) 80%);
    color: var(--petrol-900);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .86rem;
}

    .feat-tag svg {
        width: 18px;
        height: 18px;
        color: var(--crimson);
        flex-shrink: 0;
    }

    .feat-tag b {
        font-family: var(--font-display);
        font-size: 1.02rem;
        letter-spacing: .03em;
    }

    .feat-tag.t1 {
        top: 22px;
        right: -14px;
    }

    .feat-tag.t2 {
        bottom: 26px;
        left: -14px;
    }
/* ============================================================
   PILLARS (numbered — real sequence of delivery)
   ============================================================ */
.pillars{ background:var(--petrol-900); color:#e6eff4; position:relative; overflow:hidden; }
.pillars::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(rgba(140,190,215,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,215,.07) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 72%);
}
.pillars .wrap{ position:relative; z-index:1; }
.pillars .section-head h2{ color:#fff; }
.pillars .section-head p{ color:#a8c2cf; }
.pillars .sheet .n{ color:#6f93a3; }
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pillar{
  background:rgba(255,255,255,.045); border:1px solid rgba(150,200,225,.16);
  border-radius:var(--radius); padding:30px 26px; transition:.35s var(--ease); position:relative;
}
.pillar:hover{ background:rgba(230,37,69,.09); border-color:rgba(230,37,69,.4); transform:translateY(-5px); }
.pillar .num{
  font-family:var(--font-mono); color:var(--crimson); font-size:.82rem; letter-spacing:.12em;
}
.pillar h3{ font-size:1.5rem; text-transform:uppercase; color:#fff; margin-block:10px 10px; }
.pillar p{ color:#a8c2cf; font-size:.94rem; }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-card{
  position:relative; border-radius:var(--radius); overflow:hidden; isolation:isolate;
  min-height:400px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px 26px; color:#fff; box-shadow:var(--shadow-sm); transition:.4s var(--ease);
}
.project-card::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(170deg,#2a6f90 0%,var(--petrol-900) 80%);
}
.project-card.p2::before{ background:linear-gradient(170deg,#1a4c64 0%,var(--deep) 80%); }
.project-card.p3::before{ background:linear-gradient(170deg,#123a4e 0%,#08222e 80%); }
.project-card::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:
    linear-gradient(rgba(160,205,225,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,205,225,.1) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(#000,transparent 85%);
  -webkit-mask-image:linear-gradient(#000,transparent 85%);
}
.project-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pr-status{
  position:absolute; top:20px; left:20px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px);
}
.pr-status.done{ color:#8fe3b0; }
.pr-status.wip{ color:#ffd479; }
.pr-scope{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:#ff6d85; margin-bottom:8px;
}
.project-card h3{ font-size:1.75rem; text-transform:uppercase; margin-bottom:8px; }
.project-card p{ color:#b9cfda; font-size:.94rem; }
.projects-cta{ text-align:center; margin-top:44px; }

/* project detail rows (projects page) */
.proj-detail{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,70px); align-items:center; }
.proj-detail + .proj-detail{ margin-top:clamp(60px,8vw,96px); }
.proj-detail.rev .proj-media{ order:2; }
.proj-media{ position:relative; }
.proj-body .sheet{ margin-bottom:10px; }
.proj-body h3{ font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--petrol-900); text-transform:uppercase; margin-bottom:14px; }
.proj-body p{ color:var(--slate); margin-bottom:20px; }
.spec-list{ display:grid; gap:10px; }
.spec-list li{
  position:relative; padding-left:24px; color:var(--slate); font-size:.96rem;
}
.spec-list li::before{
  content:""; position:absolute; left:0; top:9px; width:11px; height:4px;
  background:var(--crimson); transform:skewX(-20deg); border-radius:1px;
}

/* ============================================================
   CLIENTS STRIP / GRID
   ============================================================ */
.clients-strip{ background:var(--white); border-top:1px solid var(--line); }
.clients-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.client-card{
  border:1px solid var(--line); border-radius:var(--radius);
  display:grid; place-items:center; padding:34px 20px; min-height:120px;
  font-family:var(--font-display); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mist); font-size:1.15rem;
  transition:.3s var(--ease); text-align:center; background:var(--white);
}
.client-card:hover{ border-color:var(--petrol); color:var(--petrol); transform:translateY(-4px); box-shadow:var(--shadow-sm); }

/* ============================================================
   WHY US (six reasons)
   ============================================================ */
.why{ background:var(--paper); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; transition:.35s var(--ease); position:relative; overflow:hidden;
}
.why-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:var(--crimson); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.why-card:hover::before{ transform:scaleX(1); }
.why-ic{
  width:54px; height:54px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--crimson-soft); color:var(--crimson); transition:.35s var(--ease);
}
.why-card:hover .why-ic{ background:var(--crimson); color:#fff; }
.why-ic svg{ width:26px; height:26px; }
.why-card h3{ font-size:1.45rem; text-transform:uppercase; color:var(--petrol-900); margin-bottom:8px; }
.why-card p{ color:var(--slate); font-size:.94rem; }

/* ============================================================
   SERVICES PAGE — division blocks
   ============================================================ */
.division{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,70px); align-items:start; }
.division + .division{ margin-top:clamp(64px,9vw,110px); padding-top:clamp(56px,7vw,84px); border-top:1px solid var(--line); }
.division.rev > .div-media{ order:2; }
.div-media{ position:sticky; top:110px; }
.div-body h3{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--petrol-900); text-transform:uppercase; margin-block:12px 14px; }
.div-body > p{ color:var(--slate); margin-bottom:26px; font-size:1.03rem; }
.scope-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.scope-item{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 16px; transition:.3s var(--ease);
}
.scope-item:hover{ border-color:var(--crimson); box-shadow:var(--shadow-sm); }
.scope-item svg{ width:19px; height:19px; color:var(--crimson); flex-shrink:0; margin-top:3px; }
.scope-item span{ color:var(--ink); font-size:.93rem; font-weight:500; }

/* ============================================================
   CTA BAND
   ============================================================ */
.ctaband{ background:var(--white); }
.ctaband .inner{
  background:
    radial-gradient(700px 340px at 88% 0%,rgba(230,37,69,.32),transparent 60%),
    linear-gradient(135deg,var(--petrol-800),var(--petrol-900) 60%,var(--deep));
  border-radius:calc(var(--radius) + 8px); padding:clamp(44px,6vw,72px);
  color:#fff; position:relative; overflow:hidden; text-align:center; box-shadow:var(--shadow-lg);
}
.ctaband .inner::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(rgba(140,190,215,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,215,.09) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%);
}
.ctaband h2{
  font-size:clamp(2.1rem,4.6vw,3.3rem); text-transform:uppercase;
  position:relative; z-index:1; margin-bottom:14px;
}
.ctaband h2 em{ font-style:normal; color:#ff5c77; }
.ctaband p{ position:relative; z-index:1; color:#b6cdd9; max-width:52ch; margin:0 auto 32px; font-size:1.06rem; }
.ctaband .hero-actions{ justify-content:center; margin-top:0; position:relative; z-index:1; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,60px); align-items:start; }
.contact-info{ display:grid; gap:18px; margin-top:26px; }
.ci-row{ display:flex; gap:15px; align-items:flex-start; }
.ci-ic{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:var(--crimson-soft); color:var(--crimson); flex-shrink:0;
}
.ci-ic svg{ width:22px; height:22px; }
.ci-row b{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.03em; text-transform:uppercase; color:var(--petrol-900); display:block; }
.ci-row span,.ci-row a{ color:var(--slate); font-size:.96rem; }
.ci-row a:hover{ color:var(--crimson); }
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,4vw,40px); box-shadow:var(--shadow-md);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1 / -1; }
.field label{
  display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); padding:13px 15px; font-family:var(--font-body);
  font-size:.96rem; color:var(--ink); transition:.25s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--crimson); background:var(--white);
  box-shadow:0 0 0 4px rgba(230,37,69,.1);
}
.map-embed{
  margin-top:clamp(48px,7vw,72px); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.map-embed iframe{ display:block; width:100%; height:380px; border:0; }

/* toast */
.toast{
  position:fixed; z-index:100; left:50%; bottom:26px; transform:translate(-50%,16px);
  background:var(--petrol-900); color:#fff; font-weight:600; font-size:.92rem;
  padding:13px 24px; border-radius:12px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:.35s var(--ease);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--deep); color:#9fb8c4; position:relative; overflow:hidden; }
.footer::before{
  content:""; position:absolute; inset:0; opacity:.3;
  background-image:
    linear-gradient(rgba(140,190,215,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,215,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(#000,transparent 70%);
  -webkit-mask-image:linear-gradient(#000,transparent 70%);
}
.footer .wrap{ position:relative; z-index:1; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(30px,4vw,54px);
  padding-block:clamp(52px,7vw,76px) 44px;
}
.footer-brand img{ height:56px; width:auto; margin-bottom:18px; }
.footer-brand p{ font-size:.92rem; max-width:34ch; }
.footer h4{
  color:#fff; font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px;
}
.footer-links{ display:grid; gap:10px; }
.footer-links a{ font-size:.94rem; transition:.25s; display:inline-flex; align-items:center; gap:8px; }
.footer-links a::before{ content:""; width:8px; height:3px; background:var(--crimson); transform:skewX(-20deg); opacity:0; transition:.25s; }
.footer-links a:hover{ color:#fff; }
.footer-links a:hover::before{ opacity:1; }
.footer-contact{ display:grid; gap:12px; font-size:.93rem; }
.footer-contact div{ display:flex; gap:11px; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; color:var(--crimson); flex-shrink:0; margin-top:4px; }
.footer-contact a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(160,200,220,.14); padding-block:22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.85rem;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.1s; } .rv.d2{ transition-delay:.2s; } .rv.d3{ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{ display:none; }
  .header-cta .btn{ display:none; }
  .burger{ display:grid; place-items:center; margin-left:auto; }
  .mnav{ display:block; }
  .sector-grid,.projects-grid,.why-grid{ grid-template-columns:repeat(2,1fr); }
  .pillar-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .stats .wrap{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
  .stat:nth-child(2)::after{ display:none; }
  .feature .wrap,.contact-grid,.division,.proj-detail{ grid-template-columns:1fr; }
  .feature.rev .feat-media,.division.rev > .div-media,.proj-detail.rev .proj-media{ order:0; }
  .div-media{ position:static; }
  .feat-tag.t1{ right:10px; } .feat-tag.t2{ left:10px; }
  .clients-grid{ grid-template-columns:repeat(2,1fr); }
  .conduit{ opacity:.45; width:76vw; }
}
@media (max-width:600px){
  .sector-grid,.projects-grid,.why-grid,.pillar-grid,.scope-grid,.form-grid{ grid-template-columns:1fr; }
  .form-grid .full{ grid-column:auto; }
  .stats .wrap{ margin-top:-48px; padding:28px 20px; }
  .hero-actions .btn{ width:100%; }
  .sector-card{ min-height:340px; }
  .brand img{ height:44px; }
}
/* ============================================================
   PROJECT SLIDER
   ============================================================ */
.proj-slider {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 32px 70px -26px rgba(5,26,36,.5);
    background: #0b2f40;
}

.pslides {
    position: absolute;
    inset: 0;
}

.pslide {
    position: absolute;
    inset: 0;
    background-image: var(--cover);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 7s linear;
}

    .pslide.is-active {
        opacity: 1;
        transform: scale(1);
    }

    .pslide.no-img {
        background-image: none;
        background: linear-gradient(160deg,#1b5671 0%,#0b2f40 75%);
    }

.pdots {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    justify-content: center;
    gap: 9px;
}

    .pdots button {
        width: 24px;
        height: 4px;
        border-radius: 2px;
        padding: 0;
        border: none;
        cursor: pointer;
        background: rgba(255,255,255,.35);
        transition: .3s cubic-bezier(.22,.61,.36,1);
    }

        .pdots button.active {
            background: #e62545;
            width: 38px;
        }

.proj-slider .feat-tag {
    position: absolute;
    z-index: 3;
    bottom: 20px;
    left: 20px;
    background: #fff;
    color: #0b2f40;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 32px 70px -26px rgba(5,26,36,.5);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .86rem;
}

    .proj-slider .feat-tag svg {
        width: 18px;
        height: 18px;
        color: #e62545;
        flex-shrink: 0;
    }

@media (prefers-reduced-motion:reduce) {
    .pslide {
        transition: opacity .3s;
        transform: none;
    }
}

/* ============================================================
   PROJECT DETAILS LAYOUT
   ============================================================ */
.proj-layout {
    display: flex;
    gap: 44px;
    align-items: flex-start;
    margin-top: 44px;
}

.proj-body {
    flex: 1 1 auto;
    min-width: 0;
}

    .proj-body h3 {
        font-size: clamp(1.8rem, 3.6vw, 2.6rem);
        color: #0b2f40;
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .proj-body p {
        color: #57676f;
        margin-bottom: 16px;
        line-height: 1.75;
    }

/* ---------- facts card ---------- */
.proj-facts {
    flex: 0 0 340px;
    background: #f3f7f9;
    border-radius: 16px;
    padding: 30px 28px;
    border-top: 4px solid #e62545;
    position: sticky;
    top: 110px;
}

    .proj-facts h4 {
        font-size: 1.15rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #0b2f40;
        margin: 0 0 6px;
        padding-bottom: 16px;
        border-bottom: 1px solid #dbe5ea;
    }

.facts-list {
    margin: 0;
}

    .facts-list > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 18px;
        padding: 14px 0;
        border-bottom: 1px solid #dbe5ea;
    }

        .facts-list > div:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .facts-list dt {
        color: #57676f;
        font-size: .92rem;
        flex-shrink: 0;
    }

    .facts-list dd {
        margin: 0;
        color: #0b2f40;
        font-weight: 600;
        font-size: .95rem;
        text-align: right;
    }

@media (max-width: 900px) {
    .proj-layout {
        flex-direction: column;
        gap: 32px;
        margin-top: 32px;
    }

    .proj-facts {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }
}
/*Send Email*/
.field-error {
    display: block;
    color: #e62545;
    font-size: .82rem;
    margin-top: 6px;
}

.form-error {
    color: #e62545;
    font-size: .9rem;
    background: rgba(230,37,69,.08);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 4px;
}

    .form-error ul {
        margin: 0;
        padding-left: 18px;
    }

    .form-error:empty {
        display: none;
    }


/* ============================================================
   FLOATING ACTIONS
   ============================================================ */
.floating-actions {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    box-shadow: 0 14px 32px -12px rgba(7,31,43,.45);
    transition: .3s cubic-bezier(.22,.61,.36,1);
    text-decoration: none;
}

    .fa-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px -14px rgba(7,31,43,.55);
    }

    .fa-btn svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

/* PDF button */
.fa-pdf {
    background: #fff;
    color: #1b5671;
    padding: 13px 22px;
}

    .fa-pdf:hover {
        background: #1b5671;
        color: #fff;
    }

/* WhatsApp button */
.fa-wa {
    width: 56px;
    height: 56px;
    justify-content: center;
    background: #25d366;
    color: #fff;
    padding: 0;
}

    .fa-wa:hover {
        background: #1eb855;
    }

    .fa-wa svg {
        width: 30px;
        height: 30px;
    }

/* mobile — أيقونة بس */
@media (max-width: 640px) {
    .floating-actions {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .fa-pdf {
        width: 52px;
        height: 52px;
        justify-content: center;
        padding: 0;
    }

        .fa-pdf span {
            display: none;
        }

    .fa-wa {
        width: 52px;
        height: 52px;
    }
}