/* ===========================================================
   EliteCrew Consulting Limited (ECOT) — shared stylesheet
   =========================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #F5F7FA;
  font-family: 'Source Sans 3', sans-serif;
  color: #33415C;
  -webkit-font-smoothing: antialiased;
}

a { color: #F5872E; }
a:hover { color: #E0731A; }

img { max-width: 100%; }

input:focus, textarea:focus, select:focus {
  outline: 2px solid #F5872E;
  outline-offset: 1px;
  border-color: #F5872E !important;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,135,46,.45); }
  50%      { box-shadow: 0 0 0 12px rgba(245,135,46,0); }
}

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- navbar ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .35s ease, box-shadow .35s ease;
  background: linear-gradient(180deg, rgba(6,14,34,.62) 0%, rgba(6,14,34,0) 100%);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 20px rgba(8,20,48,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 10px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(8,20,48,.18); flex-shrink: 0;
}
.brand-mark img { width: 36px; height: 36px; object-fit: contain; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name .main {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 19px;
  letter-spacing: .06em; color: #FFFFFF; transition: color .35s ease;
}
.brand-name .sub {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .28em; color: #F5872E;
}
.site-header.is-scrolled .brand-name .main { color: #0E2A5C; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 13.5px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 8px 12px; border-radius: 6px; color: #FFFFFF;
  border-bottom: 2px solid transparent; transition: color .35s ease;
}
.site-header.is-scrolled .nav-link { color: #0E2A5C; }
.nav-link:hover { color: #F5872E; }
.nav-link.active { color: #F5872E; border-bottom-color: #F5872E; }

.btn-nav-contact {
  margin-left: 14px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #FFFFFF;
  background: #F5872E; padding: 12px 22px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(245,135,46,.35); transition: transform .2s ease, background .2s ease;
}
.btn-nav-contact:hover { background: #E0731A; transform: translateY(-2px); color: #FFFFFF; }

.burger {
  display: none;
  width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(245,135,46,.5);
  background: rgba(8,20,48,.35); cursor: pointer; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.burger span { width: 20px; height: 2px; background: #FFFFFF; display: block; }
.burger span:nth-child(2) { background: #F5872E; }
.site-header.is-scrolled .burger { background: transparent; border-color: rgba(14,42,92,.3); }
.site-header.is-scrolled .burger span { background: #0E2A5C; }
.site-header.is-scrolled .burger span:nth-child(2) { background: #F5872E; }

.mobile-overlay {
  position: fixed; inset: 0; z-index: 1001; background: rgba(4,10,26,.6);
  backdrop-filter: blur(3px); display: none;
}
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1002; width: min(320px, 85vw);
  background: linear-gradient(180deg, #0E2A5C 0%, #081C3F 100%); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: -12px 0 40px rgba(4,10,26,.5);
  transform: translateX(100%); transition: transform .3s ease;
}
body.menu-open .mobile-overlay { display: block; }
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mobile-nav-brand { display: flex; align-items: center; gap: 10px; }
.mobile-nav-brand .mark {
  width: 40px; height: 40px; border-radius: 9px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.mobile-nav-brand .mark img { width: 30px; height: 30px; object-fit: contain; }
.mobile-nav-brand .label { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 17px; letter-spacing: .06em; color: #FFFFFF; }
.mobile-close {
  width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25);
  background: transparent; color: #FFFFFF; font-size: 18px; cursor: pointer;
}
.mobile-link {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: #FFFFFF; padding: 13px 14px;
  border-radius: 8px; border-left: 3px solid transparent; background: transparent;
}
.mobile-link:hover { color: #F5872E; }
.mobile-link.active { color: #F5872E; border-left-color: #F5872E; background: rgba(245,135,46,.12); }
.mobile-cta {
  margin-top: auto; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: #FFFFFF; background: #F5872E; padding: 15px 22px; border-radius: 8px;
}
.mobile-cta:hover { color: #FFFFFF; }

@media (max-width: 999px) {
  .main-nav { display: none; }
  .burger { display: flex; }
}

/* ---------- buttons ---------- */
.btn {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14.5px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  display: inline-block; border: none; cursor: pointer;
  padding: 16px 30px; border-radius: 9px; transition: transform .2s ease, background .2s ease;
}
.btn-primary { color: #FFFFFF; background: #F5872E; box-shadow: 0 8px 24px rgba(245,135,46,.4); }
.btn-primary:hover { background: #E0731A; transform: translateY(-3px); color: #FFFFFF; }
.btn-ghost {
  color: #FFFFFF; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-3px); color: #FFFFFF; }
.btn-outline-navy {
  color: #0E2A5C; background: transparent; border: 2px solid #0E2A5C; padding: 14px 26px;
  transition: all .2s ease;
}
.btn-outline-navy:hover { background: #0E2A5C; color: #FFFFFF; }

.link-arrow {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: #F5872E; display: inline-flex;
  align-items: center; gap: 8px;
}
.link-arrow:hover { color: #E0731A; }

/* ---------- cards ---------- */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(8,20,48,.16); }

.hover-lift-sm { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift-sm:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(8,20,48,.12); }

.sector-tile { transition: background .25s ease; }
.sector-tile:hover { background: rgba(245,135,46,.14); }

.tab-btn { transition: all .2s ease; }
.tab-btn:hover { border-color: #F5872E !important; color: #F5872E !important; }

.detail-link { text-decoration: none; }
.detail-link:hover { color: #F5872E !important; }

/* ---------- footer ---------- */
.site-footer {
  background: linear-gradient(180deg, #081C3F 0%, #050F26 100%);
  color: #B8C4DA; font-family: 'Source Sans 3', sans-serif;
}
.footer-grid {
  max-width: 1240px; margin: 0 auto; padding: 64px 24px 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 44px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .mark {
  width: 44px; height: 44px; border-radius: 10px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.footer-brand .mark img { width: 34px; height: 34px; object-fit: contain; }
.footer-brand .name { display: flex; flex-direction: column; line-height: 1.05; }
.footer-brand .name .main { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; letter-spacing: .06em; color: #FFFFFF; }
.footer-brand .name .sub { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: .28em; color: #F5872E; }
.footer-col h3 {
  margin: 0 0 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase; color: #FFFFFF;
}
.footer-col a { color: #B8C4DA; text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: #F5872E; }
.footer-credit-link { color: #9FB0CC; text-decoration: underline; }
.footer-credit-link:hover { color: #F5872E; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom-inner {
  max-width: 1240px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px;
}

/* ---------- misc layout helpers ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- auto-sliding carousel (Home "Impact on the Ground") ---------- */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; border-radius: 18px; }
.carousel-track { display: flex; transition: transform .55s cubic-bezier(.65,0,.35,1); }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: #FFFFFF; color: #0E2A5C; box-shadow: 0 8px 22px rgba(8,20,48,.18);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.carousel-arrow:hover { background: #F5872E; color: #FFFFFF; }
.carousel-arrow.prev { left: -22px; }
.carousel-arrow.next { right: -22px; }
@media (max-width: 700px) {
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
}
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: #D8DFEA; transition: background .2s ease, transform .2s ease;
}
.carousel-dots button.active { background: #F5872E; transform: scale(1.25); }