/* ============================================
   AL MEHRAJ INDUSTRIES — BRAND STYLESHEET
   Colors extracted from Al Mehraj + Strong Bond logos
   ============================================ */

:root{
  /* ============ INDUSTRIAL CORPORATE THEME ============
     Slate navy + steel gray + strong accent red.
     Variable names kept for backwards compat — values remapped.
     - "purple-*" now maps to the slate navy ramp
     - "red-*" now maps to the corporate accent red (kept similar to prior Pegasus red)
     - Neutrals shifted from purple-tinted to true steel grays
  */

  /* Slate navy ramp (was: purple) */
  --purple-900:#0F1B29;
  --purple-800:#1B2838;
  --purple-700:#2A3B4F;
  --purple-600:#3D5169;
  --purple-500:#5A6B7A;

  /* Corporate accent red (was: Pegasus red — slightly darker/less saturated) */
  --red-700:#8B2A1F;
  --red-600:#A83224;
  --red-500:#C43E30;
  --red-400:#D4574A;

  /* Strong Bond brand (unchanged — brand asset, must stay consistent) */
  --sb-orange:#EF7623;
  --sb-orange-light:#F58F45;
  --sb-purple:#462E8C;

  /* Brochure teal wave accent (subtle secondary — kept but muted) */
  --teal-700:#1F5A66;
  --teal-600:#2A7280;
  --teal-500:#3A9AA8;

  /* Neutrals — true steel grays, no purple tint */
  --cream:#F4F6F8;
  --paper:#F7F9FB;
  --ink:#0F1B29;
  --muted:#5A6B7A;
  --muted-light:#8B9AAA;
  --line:rgba(15,27,41,0.10);
  --line-light:rgba(15,27,41,0.05);
  --white:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0;}

/* Industrial theme: em in headings = accent weight+color, not italic */
h1 em, h2 em, h3 em, h4 em, .display em{font-style:normal;color:var(--red-500);font-weight:600;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-weight:400;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:1320px;margin:0 auto;padding:0 32px;}
.display{font-family:'IBM Plex Sans',sans-serif;font-weight:400;letter-spacing:-0.02em;line-height:1.05;}
.label{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--red-500);}
.label-purple{color:var(--purple-700);}

a{color:inherit;}

/* ============ BROCHURE WAVE DIVIDER ============ */
.wave-divider{
  position:relative;height:80px;overflow:hidden;margin:0;
}
.wave-divider svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--purple-900);color:rgba(255,255,255,0.8);
  font-size:12.5px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.topbar-left{display:flex;gap:24px;align-items:center;}
.topbar-left span{display:flex;align-items:center;gap:7px;}
.topbar-right{display:flex;gap:18px;align-items:center;}
.topbar-right a{color:rgba(255,255,255,0.8);text-decoration:none;transition:color .2s;}
.topbar-right a:hover{color:#fff;}
.iso-badge{
  background:var(--red-500);color:#fff;padding:3px 10px;
  border-radius:2px;font-weight:700;font-size:10.5px;letter-spacing:0.06em;
}

/* ============ HEADER ============ */
header{
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(10px);
}
#site-header{display:contents;}
#site-footer{display:contents;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0;}
.logo{display:flex;align-items:center;text-decoration:none;}
.logo-full{
  height:72px;width:auto;display:block;
}
.logo-full-footer{
  height:56px;width:auto;display:block;
  margin-bottom:22px;
}

nav.main ul{list-style:none;display:flex;gap:32px;align-items:center;}
nav.main a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s;position:relative;}
nav.main a:hover{color:var(--purple-700);}
nav.main a.active{color:var(--purple-700);}
nav.main a.active::after{
  content:'';position:absolute;bottom:-22px;left:0;right:0;
  height:2px;background:var(--red-500);
}
nav.main a.has-dropdown::after{content:'▾';font-size:9px;margin-left:5px;color:var(--muted);position:static;height:auto;}

.nav-cta{
  background:var(--purple-700);color:#fff !important;padding:12px 22px;
  border-radius:2px;font-size:13px;font-weight:600;letter-spacing:0.03em;
  transition:all .25s;
}
.nav-cta:hover{background:var(--red-500);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;font-size:14px;font-weight:600;
  letter-spacing:0.03em;border-radius:2px;text-decoration:none;
  transition:all .25s;cursor:pointer;border:none;
}
.btn-primary{background:var(--red-500);color:#fff;}
.btn-primary:hover{background:var(--red-400);transform:translateY(-1px);box-shadow:0 10px 28px rgba(196,62,48,0.35);}
.btn-purple{background:var(--purple-700);color:#fff;}
.btn-purple:hover{background:var(--purple-800);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--purple-700);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--purple-700);}
.btn-ghost-light{background:transparent;color:var(--purple-900);border:1px solid var(--line);}
.btn-ghost-light:hover{border-color:var(--purple-700);background:rgba(15,27,41,0.03);}
.btn-arrow{transition:transform .25s;}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* ============ PAGE HEADER (for inner pages) ============ */
.page-header{
  background:
    radial-gradient(ellipse 60% 80% at 85% 40%, rgba(196,62,48,0.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(20,165,176,0.1), transparent 60%),
    linear-gradient(180deg,var(--purple-900) 0%,var(--purple-800) 100%);
  color:#fff;padding:80px 0 100px;
  position:relative;overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.page-header::after{
  content:'';position:absolute;top:50%;right:-100px;transform:translateY(-50%);
  width:400px;aspect-ratio:1;opacity:0.08;
  background:url('assets/al-mehraj-industries-pegasus-logo.svg') center/contain no-repeat;
}
.page-header-inner{position:relative;z-index:2;max-width:780px;}
.page-header .label{color:var(--red-400);}
.page-header h1{
  font-family:'IBM Plex Sans',sans-serif;font-weight:400;
  font-size:clamp(38px,4.8vw,64px);line-height:1.05;
  letter-spacing:-0.025em;margin-top:20px;
}
.page-header h1 em{color:var(--red-400);font-weight:600;}
.page-header p{
  font-size:17px;color:rgba(255,255,255,0.78);line-height:1.65;
  margin-top:20px;max-width:680px;font-weight:400;
}
.breadcrumb{
  display:flex;gap:10px;align-items:center;font-size:12px;
  color:rgba(255,255,255,0.6);margin-bottom:20px;letter-spacing:0.04em;
}
.breadcrumb a{color:rgba(255,255,255,0.6);text-decoration:none;transition:color .2s;}
.breadcrumb a:hover{color:var(--red-400);}
.breadcrumb .sep{opacity:0.4;}

/* ============ SECTIONS ============ */
.section{padding:110px 0;}
.section-sm{padding:80px 0;}
.section-header{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px;}
.section h2{
  font-family:'IBM Plex Sans',sans-serif;font-weight:400;
  font-size:clamp(34px,3.8vw,52px);line-height:1.08;
  letter-spacing:-0.025em;color:var(--purple-900);
}
.section h2 em{color:var(--red-500);font-weight:600;}
.section-desc{color:var(--muted);font-size:16px;line-height:1.7;}

/* Content sections in inner pages */
.prose{font-size:16px;line-height:1.75;color:var(--ink);max-width:820px;}
.prose p{margin-bottom:20px;color:var(--muted);}
.prose p.lead{font-size:19px;color:var(--ink);font-weight:400;line-height:1.6;margin-bottom:28px;}
.prose h3{
  font-family:'IBM Plex Sans',sans-serif;font-size:28px;font-weight:500;
  color:var(--purple-900);margin:40px 0 16px;letter-spacing:-0.015em;
}
.prose h4{
  font-family:'IBM Plex Sans',sans-serif;font-size:22px;font-weight:500;
  color:var(--purple-800);margin:28px 0 12px;
}
.prose ul{margin:12px 0 20px 20px;}
.prose ul li{margin-bottom:8px;color:var(--muted);}
.prose ul li::marker{color:var(--red-500);}
.prose strong{color:var(--purple-900);font-weight:600;}

/* ============ CARDS ============ */
.card{
  background:#fff;padding:36px 32px;border-radius:3px;
  border:1px solid var(--line-light);
  transition:all .25s;
}
.card:hover{box-shadow:0 20px 44px rgba(15,27,41,0.1);transform:translateY(-4px);border-color:var(--line);}
.card h3{
  font-family:'IBM Plex Sans',sans-serif;font-size:22px;font-weight:500;
  color:var(--purple-900);margin-bottom:10px;line-height:1.2;
}
.card p{color:var(--muted);font-size:14.5px;line-height:1.65;}

/* ============ APPLICATION LIST (brochure style) ============ */
.app-section{margin-bottom:48px;}
.app-section h4{
  font-family:'IBM Plex Sans',sans-serif;font-size:24px;font-weight:500;
  color:var(--purple-800);margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid var(--red-500);display:inline-block;
}
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px;}
.app-item{
  display:flex;gap:14px;align-items:flex-start;padding:10px 0;
  color:var(--muted);font-size:14.5px;line-height:1.55;
}
.app-item::before{
  content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:var(--red-500);margin-top:7px;
}
.app-footnote{
  font-size:12.5px;color:var(--muted);margin-top:20px;
  padding:10px 14px;background:var(--paper);border-left:3px solid var(--red-500);
  border-radius:0 3px 3px 0;line-height:1.5;
}

/* ============ FOOTER ============ */
footer{
  background:var(--purple-900);color:rgba(255,255,255,0.72);
  padding:80px 0 32px;font-size:14px;position:relative;overflow:hidden;
}
footer::before{
  content:'';position:absolute;bottom:-200px;right:-200px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(196,62,48,0.1),transparent 65%);border-radius:50%;
}
footer::after{
  content:'';position:absolute;top:-100px;left:-100px;
  width:400px;height:400px;opacity:0.04;
  background:url('assets/al-mehraj-industries-pegasus-logo.svg') center/contain no-repeat;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:56px;
  margin-bottom:56px;position:relative;z-index:2;
}
footer h6{
  color:#fff;font-size:11.5px;letter-spacing:0.16em;
  text-transform:uppercase;font-weight:700;margin-bottom:22px;
}
footer ul{list-style:none;}
footer ul li{margin-bottom:10px;font-size:13.5px;}
footer a{color:rgba(255,255,255,0.72);text-decoration:none;transition:color .2s;}
footer a:hover{color:var(--red-400);}
.footer-divisions{
  display:flex;flex-direction:column;gap:12px;
  padding-top:8px;
}
.footer-division{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;}
.footer-division-dot{
  flex-shrink:0;width:8px;height:8px;border-radius:50%;
  background:var(--red-400);margin-top:5px;
}
.footer-division strong{color:#fff;font-weight:600;display:block;}
.footer-division strong a{color:#fff;}
.footer-division strong a:hover{color:var(--red-400);}
.footer-division span{color:rgba(255,255,255,0.55);font-size:11.5px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);padding-top:32px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;color:rgba(255,255,255,0.5);font-size:12.5px;
  position:relative;z-index:2;
}
.footer-bottom .cert{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.footer-dnv-logo{
  height:64px;width:auto;display:block;
  background:#fff;padding:6px 10px;border-radius:3px;
}

/* AED currency symbol — used inline with numbers */
.aed-inline{
  display:inline-block;
  width:0.85em;height:0.74em;
  vertical-align:-0.05em;
  flex-shrink:0;
}
.num-currency{
  display:inline-flex;align-items:center;gap:0.15em;
}
.aed-inline-strong{
  display:inline-flex;align-items:center;gap:0.15em;
}
.aed-inline-wrap{
  display:inline-flex;align-items:center;gap:0.2em;
}

/* VIDEO SECTION — used on Home and Why Us */
.video-section{background:var(--paper);padding:100px 0;}
.video-header{text-align:center;margin-bottom:56px;max-width:680px;margin-left:auto;margin-right:auto;}
.video-header h2{
  font-family:'IBM Plex Sans',sans-serif;font-weight:400;
  font-size:clamp(30px,3.4vw,44px);line-height:1.15;
  letter-spacing:-0.02em;color:var(--purple-900);margin-top:16px;
}
.video-header h2 em{color:var(--red-600);font-weight:600;}
.video-wrap{
  position:relative;max-width:960px;margin:0 auto;
  aspect-ratio:16/9;background:var(--purple-900);
  border-radius:6px;overflow:hidden;
  box-shadow:0 20px 60px rgba(15,27,41,0.15);
}
.video-wrap iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* ============ SOCIAL ICONS ============ */
.social-icons{
  display:flex;gap:10px;align-items:center;
}
.social-icon{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.8);
  text-decoration:none;transition:all .25s;
  border:1px solid rgba(255,255,255,0.1);
}
.social-icon:hover{
  background:var(--red-500);color:#fff;
  border-color:var(--red-500);transform:translateY(-2px);
}
.social-icon svg{width:15px;height:15px;fill:currentColor;}

.topbar .social-icons{gap:8px;}
.topbar .social-icon{
  width:26px;height:26px;
  background:transparent;border:none;
}
.topbar .social-icon:hover{background:var(--red-500);transform:none;}
.topbar .social-icon svg{width:13px;height:13px;}

.footer-social{
  margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-social-label{
  font-size:11px;color:rgba(255,255,255,0.55);
  letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:12px;
}

/* ============ FORMSPREE STATUS MESSAGES ============ */
.form-status{
  margin-top:16px;padding:14px 18px;border-radius:2px;
  font-size:14px;line-height:1.5;display:none;
}
.form-status.success{
  display:block;background:rgba(20,165,176,0.1);
  border-left:3px solid var(--teal-500);color:var(--teal-700);
}
.form-status.error{
  display:block;background:rgba(196,62,48,0.1);
  border-left:3px solid var(--red-500);color:var(--red-700);
}
.form-status strong{display:block;margin-bottom:4px;}

/* ============ MOBILE ============ */
@media(max-width:960px){
  .section-header{grid-template-columns:1fr;gap:32px;}
  .app-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  nav.main ul{display:none;}
  .topbar-left{font-size:11.5px;gap:14px;}
  .topbar-right{display:none;}
  .page-header{padding:56px 0 72px;}
  .topbar .social-icons{display:none;}
}

/* ============ FONT-SIZE ADJUSTER (Accessibility) ============ */
body{zoom:var(--user-zoom,1);}
.font-adjuster{
  position:fixed;bottom:24px;right:24px;z-index:200;
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:6px 10px;box-shadow:0 6px 24px rgba(30,9,82,0.15);
  font-size:13px;color:var(--muted);
}
.font-adjuster-label{
  font-size:10.5px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted-light);
  padding:0 6px;user-select:none;
}
.font-adjuster button{
  border:0;background:transparent;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--purple-700);font-weight:700;font-size:14px;
  transition:all .18s;
}
.font-adjuster button:hover{background:var(--paper);color:var(--red-500);}
.font-adjuster button:disabled{opacity:0.3;cursor:not-allowed;}
.font-adjuster button.small-a{font-size:12px;}
.font-adjuster button.large-a{font-size:16px;}
@media(max-width:600px){
  .font-adjuster{bottom:16px;right:16px;padding:4px 6px;}
  .font-adjuster-label{display:none;}
  .font-adjuster button{width:28px;height:28px;}
}