/* GLMVH — fast, governance-grade UI  (Green Refresh + overlap fix) */
:root{
  /* existing palette */
  --bg:#071722; --bg2:#0b2130; --panel:#0e2535; --card:#102c3d;
  --text:#eaf6ff; --muted:#a9c6d6; --gold:#e2b714; --accent:#2bc1ff; --ok:#6ed38c;
  --radius:16px; --shadow:0 10px 28px rgba(0,0,0,.25);

  /* new green accents */
  --emerald:#10a37f;
  --emerald-2:#0b7a5f;

  /* 🔶 NEW: declare header height for hero padding calc */
  --headerH:62px;
}

/* --- Resets / base --- */
*{box-sizing:border-box}
img{max-width:100%;display:block}
html,body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted)} .gold{color:var(--gold)} .center{text-align:center}

/* --- Floating language toggle (moved to avoid overlap) --- */
.lang-toggle{
  position:fixed; z-index:70;
  left:12px; bottom:16px;             /* moved from top to bottom */
  background:#0a2231; color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25)
}
.lang-toggle:hover{filter:brightness(1.1)}
html[lang="ar"] .lang-toggle{ right:12px; left:auto }
@media (max-width:520px){
  .lang-toggle{ padding:7px 11px; font-size:.92rem; bottom:14px }
}

/* --- Topbar --- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#0b2130,#071b27);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{width:28px;height:28px;border-radius:8px}
.spacer{flex:1}
.menu a{margin:0 10px;opacity:.95}
.menu a.cta{
  padding:8px 12px;background:var(--gold);color:#111;border-radius:10px;
  box-shadow:var(--shadow);font-weight:900
}
.active{border-bottom:2px solid var(--gold)}
.burger{display:none;background:transparent;border:0;color:var(--text);font-size:24px}
@media (max-width:860px){
  .menu{display:none}
  .menu.show{
    display:block;position:absolute;top:62px;left:0;right:0;background:var(--bg2);
    border-bottom:1px solid rgba(255,255,255,.06)
  }
  .menu a{display:block;padding:10px 14px}
  .burger{display:block}
}

/* --- Hero (original utilities still used on other pages) --- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .bg{
  position:absolute;inset:0;background:
  radial-gradient(1100px 360px at -10% 0, rgba(43,193,255,.14), transparent 60%),
  radial-gradient(900px 300px at 110% 15%, rgba(226,183,20,.12), transparent 55%),
  linear-gradient(180deg,#081a27,#06141d)
}
.hero .overlay{
  position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,23,34,.28),rgba(7,23,34,.55)),
  radial-gradient(900px 420px at 5% 5%, rgba(16,163,127,.12), transparent 60%)
}
.hero-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:24px;
  min-height:520px;align-items:center;padding:34px 18px
}
.h-eyebrow{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-weight:900;font-size:.78rem}
.h-title{font-size:clamp(28px,4.2vw,44px);margin:.2rem 0 .6rem}
.h-sub{color:var(--muted);max-width:60ch}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);font-weight:800}
.btn.primary{background:linear-gradient(90deg,var(--accent),#6fd9ff);color:#06202a;border:0}
.btn.soft{background:#103449;color:var(--text)}
.notice{padding:10px 12px;border-radius:12px;background:#0a2231;border:1px solid rgba(255,255,255,.12)}
.ok{border-color:rgba(110,211,140,.35);background:rgba(110,211,140,.08)}

/* --- Cards --- */
.hero-card,.card{
  background:linear-gradient(180deg,#103449,#0b2738);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px
}

/* --- Sections / grids --- */
section{padding:40px 0}
h2{font-size:clamp(20px,3.2vw,30px);margin:.1rem 0 .6rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:#0f2a3b;border:1px solid rgba(255,255,255,.1);border-radius:12px;text-align:center;padding:14px}
.chips span{
  display:inline-block;margin:4px 6px 0 0;background:#0a2231;border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;border-radius:999px; box-shadow:0 0 0 1px rgba(16,163,127,.18) inset
}

/* --- Lists --- */
.list{padding-left:18px}
.list.check li{list-style:none;position:relative;margin:.5rem 0;padding-left:22px}
.list.check li:before{
  content:""; position:absolute; left:0; top:.25rem; width:16px; height:16px; border-radius:5px;
  background:linear-gradient(180deg, var(--emerald), var(--emerald-2));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.285 6.707L9 18l-5.285-5.293l1.414-1.414L9 15.172l9.871-9.879z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.285 6.707L9 18l-5.285-5.293l1.414-1.414L9 15.172l9.871-9.879z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* --- Executive Banner (Founder/Person) --- */
.person{
  display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;
  background:var(--panel);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:14px
}
.person img{width:120px;height:120px;object-fit:cover;border-radius:14px;border:3px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.18)}
.person .title{font-weight:900}
.person .subtitle{color:var(--muted)}
.contact-list{list-style:none;margin:.5rem 0 0;padding:0}
.contact-list li{margin:.35rem 0}
.contact-list li strong{display:inline-block;min-width:92px}
.card h1{font-size:clamp(22px,3.6vw,36px);margin:.1rem 0 .4rem}

@media (max-width:760px){
  .person{grid-template-columns:88px 1fr}
  .person img{width:88px;height:88px}
}
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .leaders{grid-template-columns:repeat(3,1fr)}
}

/* --- Leadership grid --- */
.leaders{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.leaders img{width:100%;height:120px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}

/* --- Forms --- */
form{display:grid;gap:10px;margin-top:6px}
.label{font-weight:800;font-size:.9rem}
input,select,textarea{
  background:#0a2231;border:1px solid rgba(255,255,255,.14);color:var(--text);
  border-radius:12px;padding:12px 12px;outline:0}
textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:680px){.row{grid-template-columns:1fr}}

/* --- Footer --- */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* Green declaration line */
.green-note{ text-align:center; color:var(--muted); font-size:.94rem; margin-top:10px }
.green-note strong{ color:var(--gold) }

/* ===========================================================
   🔶 NEW: Hero v2 (used by from-ghana-to-dubai.html)
   Keeps HH Sheikh Hamdan visible and moves copy lower left.
   =========================================================== */
.hero{
  border-bottom:4px solid var(--gold);
}
.hero-cover{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:1;
}
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(7,23,34,.55) 0%, rgba(7,23,34,.85) 65%, rgba(7,23,34,1) 100%),
    radial-gradient(900px 380px at 6% 12%, rgba(16,163,127,.18), transparent 60%);
}
.hero-copy{
  position:relative; z-index:3; max-width:720px;
  padding: calc(var(--headerH) + 36px) 18px 56px;   /* clears sticky header */
}
.hero-eyebrow{
  color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.86rem; font-weight:800;
}
.hero-title{
  margin:10px 0 8px; color:var(--gold); font-weight:900; line-height:1.12;
  font-size: clamp(26px, 6vw, 46px);
  text-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.hero-sub{
  color:var(--text); max-width:52ch;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
@media (max-width:480px){
  .hero-copy{ padding: calc(var(--headerH) + 18px) 14px 48px }
  .hero-title{ font-size: clamp(22px, 7vw, 34px) }
}

/* Optional: small gold divider line below hero copy */
.hero + .wrap .card:first-child{ margin-top:-14px }