:root {
  --nav-bg: #ffffff;
  --nav-text: #111111;
  --nav-accent: #F37C02;
  --nav-border: #e2e5ea;
  --nav-hover-bg: #f5f6f8;
  --logo-w: 160px;
  --mega-bg: #ffffff;
  --mega-shadow: 0 20px 60px rgba(0,0,0,.13);
  --mega-radius: 0 0 16px 16px;
  --group-title-color: #F37C02;
}

/* ── Reset helpers ── */
.site-header a { text-decoration: none; }
.site-header button { font: inherit; cursor: pointer; }

/* ── Sticky bar ── */
.site-header {
  position: sticky; top: 0; z-index: 2000;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.main-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Logo ── */
.logo img { width: var(--logo-w); height: auto; display: block; }

/* ── Primary nav ── */
.primary-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.top-level {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0; padding: 0;
}

/* Top-level link / button */
.top-link,
.primary-nav a.top-link {
  color: var(--nav-text);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .55rem .8rem;
  border-radius: .375rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.top-link:hover,
.top-link:focus-visible {
  background: var(--nav-hover-bg);
  outline: none;
}

/* Chevron icon */
.chevron {
  width: 14px; height: 14px;
  transition: transform .2s ease;
  flex-shrink: 0;
  opacity: .6;
}
.has-sub:hover .chevron,
.has-sub:focus-within .chevron,
.has-sub.open .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Standard small dropdown ── */
.has-sub { position: relative; }

.submenu {
  position: absolute;
  left: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: var(--mega-bg);
  border-radius: .6rem;
  padding: .5rem;
  border: 1px solid var(--nav-border);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  display: none;
  z-index: 100;
}
.submenu li { list-style: none; }
.submenu a {
  display: block;
  padding: .48rem .75rem;
  border-radius: .35rem;
  color: #222;
  font-size: .85rem;
  transition: background .12s ease;
}
.submenu a:hover,
.submenu a:focus-visible {
  background: var(--nav-hover-bg);
  outline: none;
}

/* hover show (desktop) */
@media (hover: hover) and (pointer: fine) {
  .has-sub:hover > .submenu,
  .has-sub:focus-within > .submenu { display: block; }
}

/* ── MEGA MENU ── */
.has-mega { position: static; }

.mega-menu {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--mega-bg);
  border-top: 2px solid var(--nav-accent);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--mega-shadow);
  border-radius: var(--mega-radius);
  display: none;
  z-index: 200;
  padding: 2rem 2.5rem 2rem;
}

/* Anchor mega to the header, not the li */
.site-header { position: sticky; }
.top-level { position: static; }

@media (hover: hover) and (pointer: fine) {
  .has-mega:hover > .mega-menu,
  .has-mega:focus-within > .mega-menu { display: block; }
}

.mega-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
}

/* Center single-group mega menus (About Us, Projects, Our Commitment, Careers) */
.mega-inner:has(> .mega-group:only-child) {
  justify-content: center;
}
.mega-inner > .mega-group:only-child {
  flex: 0 0 auto;
  min-width: 280px;
  text-align: left;
}

.mega-group {
  flex: 1;
  min-width: 160px;
}

.mega-group-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--group-title-color);
  margin: 0 0 .65rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.mega-group-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--nav-accent);
}

.mega-group ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.mega-group ul a {
  display: block;
  padding: .4rem .5rem;
  border-radius: .35rem;
  color: #222;
  font-size: .875rem;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}
.mega-group ul a:hover,
.mega-group ul a:focus-visible {
  background: var(--nav-hover-bg);
  color: var(--nav-accent);
  outline: none;
}

/* Mega divider between groups */
.mega-divider {
  width: 1px;
  background: #ebebeb;
  align-self: stretch;
  flex-shrink: 0;
}

/* ── Active page ── */
.top-link[aria-current="page"] {
  background: #fff4e8;
  color: var(--nav-accent);
}

/* ── Nav actions (search) ── */
.nav-actions { display: flex; align-items: center; margin-left: .25rem; }
.search-link {
  color: var(--nav-text);
  padding: .45rem;
  border-radius: .35rem;
  transition: background .15s ease;
}
.search-link:hover,
.search-link:focus-visible { background: var(--nav-hover-bg); outline: none; }

/* ── Hamburger toggle ── */
.nav-toggle {
  display: none;
  background: transparent;
  color: var(--nav-text);
  border: 1px solid var(--nav-border);
  border-radius: .5rem;
  padding: .35rem .5rem;
  margin-left: auto;
}

/* ── MOBILE ── */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(92vw, 360px);
    transform: translateX(100%);
    transition: transform .25s ease;
    background: #fff;
    color: #111;
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem .75rem;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
    overflow-y: auto;
    z-index: 2100;
  }
  .primary-nav.open { transform: translateX(0); }

  .top-level { flex-direction: column; gap: .15rem; }

  .top-link {
    color: #111;
    width: 100%;
    text-align: left;
    padding: .75rem .7rem;
    font-size: .95rem;
  }

  /* Mobile: small dropdowns */
  .submenu {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    background: #fafafa;
    border-radius: .5rem;
    padding: .25rem .25rem .5rem;
    margin-top: .15rem;
  }
  .has-sub.open > .submenu { display: block; }

  /* Mobile: mega menus collapse to same style */
  .mega-menu {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    padding: .5rem .5rem .75rem;
    background: #fafafa;
    border-radius: .5rem;
    margin-top: .15rem;
  }
  .has-mega.open > .mega-menu { display: block; }

  .mega-inner {
    flex-direction: column;
    gap: 1.25rem;
  }
  .mega-divider { display: none; }
  .mega-group-title { font-size: .68rem; }
  .mega-group ul a { padding: .4rem .6rem; }

  .nav-actions { margin-top: .5rem; }

  /* Backdrop */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 2099;
  }
  .nav-backdrop.visible { display: block; }
}

/* ── Accessibility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Remove default button outline chrome */
.primary-nav button.top-link {
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.top-link:focus { outline: none; box-shadow: none; }
.top-link:focus-visible { background: var(--nav-hover-bg); }
.top-link:active { background: #0000001a; outline: none; box-shadow: none; }
.top-link[aria-expanded="true"] { background: var(--nav-hover-bg); }