/* Shared site chrome — contact strip, header, nav, mega-dropdown.
   Extracted from the 11 per-page inline <style> blocks, where every rule
   below was duplicated verbatim.

   LOAD ORDER MATTERS: link this AFTER base.css but BEFORE each page's
   inline <style>, which is exactly where these rules used to sit. Page
   rules still override them and components.css (loaded last) still
   refines them. Putting this in components.css would flip that order.

   Selectors that genuinely differ per page (.dd-item, .contact-inner a,
   .nav-item > a, :root, body, .hero, ...) were deliberately left inline. */

.contact-strip {
  height: 30px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 1001;
}
.contact-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.main-header {
  height: 80px;
  background: #fff;
  position: sticky;
  top: 30px;
  z-index: 1000;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img {
  width: 44px;
  height: 44px;
  object-fit: cover;
}
.nav {
  display: flex;
  gap: 34px;
  align-items: center;
  color: #064c7d;
  font-size: 14px;
}
.nav a {
  padding-block: 28px;
}
.nav a:hover {
  color: #111b21;
}
.menu-button {
  display: none;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 24px;
  padding: 12px;
  cursor: pointer;
}
.nav-item {
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(2, 69, 122, 0.18);
  border: 1px solid #e0eaf4;
  min-width: 560px;
  padding: 20px;
  z-index: 2000;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  display: grid;
}
.dd-item:hover {
  background: #f0f6ff;
}
.dd-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid #e8f0fb;
  padding: 4px;
  background: #fff;
}
.dd-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
}
.dd-text span {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 2px;
  line-height: 1.3;
}