/* ============================================================
   NAVBAR COMPONENT — navbar.css
   Depends on the shared CSS variables below. If this page
   already defines its own :root palette, just delete this
   block and keep the palette that's already on the page.
   ============================================================ */

:root{
  --white:#000000;
  --ink:#ffffff;
  --ink-soft:#ffffff;
  --citrine:#FFCC00;
  --citrine-deep:#E0A800;
  --citrine-glow:rgba(255,204,0,0.4);
  --cobalt:#2A4FD6;
  --cobalt-deep:#1E3AA8;
  --cobalt-glow:rgba(42,79,214,0.35);
  --line:#E4E2DB;
  --radius:3px;
}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(0, 0, 0, 0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header nav{
  max-width:1240px;margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
header .logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  line-height:1;
}

header .logo-img{
  height:42px;
  width:auto;
  display:block;
  object-fit:contain;
}

header .logo-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

header .logo-main{
  font-size:18px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:White;
  line-height:1;
}

header .logo-sub{
  font-size:18px;
  font-weight:700;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--citrine);
  line-height:1;
}
header .nav-links{display:flex;gap:34px;align-items:center;}
header .nav-links a{
  font-size:14.5px;font-weight:500;color:var(--ink-soft);
  text-decoration:none;transition:color .15s;
}
header .nav-links a:hover{color:var(--cobalt);}
header .nav-cta{display:flex;align-items:center;gap:22px;}

/* ---- Services dropdown ---- */
header .nav-item{position:relative;}
header .nav-item > a{
  display:flex;align-items:center;gap:5px;
}
header .nav-item .chevron{
  width:9px;height:9px;
  transition:transform .18s ease;
}
header .nav-item:hover .chevron{transform:rotate(180deg);}

/*
  IMPORTANT: no translateY / margin gap between the trigger link
  and this box. The visual breathing room lives in padding-top,
  which stays PART of the hoverable element, so the cursor never
  crosses a "dead zone" on its way from the link into the menu.
  That dead zone was what caused the dropdown to close before
  you could reach it.
*/
header .dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  padding-top:14px;      /* visual gap, still inside the hover box */
  margin-top:-4px;       /* pulls the box back up close to the link */
  min-width:340px;
  z-index:60;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, visibility .16s;
}
header .nav-item:hover .dropdown,
header .nav-item:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Inner box holds the actual visible styling (background, border,
   shadow, grid) so padding-top above stays purely spatial/invisible. */
header .dropdown-inner{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 20px 44px rgba(18,18,18,0.14);
  padding:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}

header .dropdown a{
  display:block;
  padding:20px 23px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
header .dropdown a:hover,
header .dropdown a:focus-visible{
  background:var(--cobalt);
  color:var(--white);
}

@media (max-width:960px){
  header .dropdown{
    position:static;
    transform:none;
    margin-top:0;
    padding-top:0;
    min-width:0;
    z-index:auto;
  }
  header .dropdown-inner{
    box-shadow:none;
    border:none;
    padding:0;
  }
  header .nav-item .dropdown{
    display:none;
  }
  header .nav-item:hover .dropdown,
  header .nav-item:focus-within .dropdown{
    display:none;
  }
}

header .btn{
  padding:11px 22px;
  font-size:14px;font-weight:600;
  border-radius:var(--radius);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  display:inline-block;text-decoration:none;
}
header .btn-primary{background:var(--cobalt);color:var(--white);}
header .btn-primary:hover{background:var(--cobalt-deep);box-shadow:0 6px 20px var(--cobalt-glow);}

@media (max-width:960px){
  header .nav-links{display:none;}
}