/* =========================================================
   SRISHAILA — HEADER FINAL (single source of truth)
   Load this file LAST on every page (after all other CSS and
   after any inline <style>). It makes the header identical on
   all pages: same logo size, same nav text size/weight/font.

   To change header text size on ALL pages, edit only the
   variables below.
   ========================================================= */
:root {
  --hdr-font: "IBM Plex Sans", Arial, sans-serif;
  --hdr-size: 16px;        /* Home, About, Capabilities, Projects, Equipment, Clients, Contact */
  --hdr-weight: 600;
  --hdr-gap: 28px;
  --hdr-height: 78px;
  --hdr-logo-w: 200px;
  --hdr-menu-size: 15px;   /* dropdown list items */
}

/* ---- bar layout (same on every page) ---- */
html body[class][class] header.site-header[class][class] .nav-inner,
html body[class][class] header.site-header[class][class].is-scrolled .nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1440px !important;
  min-height: var(--hdr-height) !important;
  height: var(--hdr-height) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
}

html body[class][class] header.site-header[class][class] .brand-logo,
html body[class][class] header.site-header[class][class].is-scrolled .brand-logo {
  display: block !important;
  width: var(--hdr-logo-w) !important;
  max-width: var(--hdr-logo-w) !important;
  height: auto !important;
  max-height: 60px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* ---- nav row ---- */
html body[class][class] header.site-header[class][class] .main-nav,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--hdr-gap) !important;
  font-family: var(--hdr-font) !important;
  font-size: var(--hdr-size) !important;
  font-weight: var(--hdr-weight) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ---- EVERY nav item: links, dropdown buttons, labels, Contact ---- */
html body[class][class] header.site-header[class][class] .main-nav > a,
html body[class][class] header.site-header[class][class] .main-nav > a.nav-cta,
html body[class][class] header.site-header[class][class] .main-nav > .nav-dropdown > .nav-drop-trigger,
html body[class][class] header.site-header[class][class] .main-nav .nav-label,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav > a,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav > a.nav-cta,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav > .nav-dropdown > .nav-drop-trigger,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav .nav-label {
  font-family: var(--hdr-font) !important;
  font-size: var(--hdr-size) !important;
  font-weight: var(--hdr-weight) !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

/* dropdown buttons: remove browser button defaults so they match links */
html body[class][class] header.site-header[class][class] .main-nav > .nav-dropdown > .nav-drop-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
}
html body[class][class] header.site-header[class][class] .main-nav > a:not(.nav-cta) {
  padding: 6px 0 !important;
}

/* dropdown arrow: small, same on every page */
html body[class][class] header.site-header[class][class] .nav-drop-trigger > span:not(.nav-label) {
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}

/* Contact button: same text size/font as the rest, pill shape only */
html body[class][class] header.site-header[class][class] .main-nav > a.nav-cta,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav > a.nav-cta {
  padding: 11px 20px !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* dropdown list items */
html body[class][class] header.site-header[class][class] .nav-dropdown-menu a,
html body[class][class] header.site-header[class][class].is-scrolled .nav-dropdown-menu a {
  font-family: var(--hdr-font) !important;
  font-size: var(--hdr-menu-size) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.35 !important;
}

/* ---- tablet / mobile: same size inside the collapsed menu ---- */
@media (max-width: 1180px) {
  :root { --hdr-gap: 20px; }
  html body[class][class] header.site-header[class][class] .nav-inner,
  html body[class][class] header.site-header[class][class].is-scrolled .nav-inner { padding: 0 20px !important; }
}
@media (max-width: 900px) {
  :root { --hdr-height: 70px; --hdr-logo-w: 170px; }
  html body[class][class] header.site-header[class][class] .main-nav > a,
  html body[class][class] header.site-header[class][class] .main-nav > .nav-dropdown > .nav-drop-trigger { padding: 12px 10px !important; }
}

/* ---- no hamburger icon anywhere ---- */
html body .nav-hamburger, html body .hamburger-panel { display: none !important; }

/* ---- SAME header look on every page (solid blue bar, red Contact) ---- */
html body[class][class] header.site-header[class][class],
html body[class][class] header.site-header[class][class].is-scrolled {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--hdr-height) !important;
  background: #214275 !important;
  background-color: #214275 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22) !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body[class][class] header.site-header[class][class] .nav-inner,
html body[class][class] header.site-header[class][class].is-scrolled .nav-inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body[class][class] header.site-header[class][class] .main-nav > a,
html body[class][class] header.site-header[class][class] .nav-drop-trigger,
html body[class][class] header.site-header[class][class] .nav-drop-trigger span {
  color: #fff !important;
  text-shadow: none !important;
}
html body[class][class] header.site-header[class][class] .main-nav > a.nav-cta,
html body[class][class] header.site-header[class][class].is-scrolled .main-nav > a.nav-cta {
  background: #c8102e !important;
  border: 1px solid #c8102e !important;
  border-radius: 2px !important;
  color: #fff !important;
  box-shadow: none !important;
}
html body[class][class] header.site-header[class][class] .main-nav > a.nav-cta:hover {
  background: #a80d26 !important; border-color: #a80d26 !important;
}
html body[class][class] header.site-header[class][class] .brand-logo { filter: none !important; }
/* keep dropdown panels readable (white box, dark text) */
html body[class][class] header.site-header[class][class] .nav-dropdown-menu a { color: #222 !important; background: #fff !important; }
html body[class][class] header.site-header[class][class] .nav-dropdown-menu a:hover { color: #c8102e !important; background: #f7f7f7 !important; }

/* identical Home link on every page: no active underline, no extra spacing */
html body[class][class] header.site-header[class][class] .main-nav > a::after { display: none !important; }
html body[class][class] header.site-header[class][class] .main-nav > a.is-active,
html body[class][class] header.site-header[class][class] .main-nav > a:first-child {
  margin: 0 !important; padding: 6px 0 !important; letter-spacing: .01em !important;
}

/* =========================================================
   HOME PAGE ONLY — CLEAN TRANSPARENT HEADER + CLEARER VIDEO
   ========================================================= */

/* 1. Header fully transparent at the top: no black, no blur */
html body.home-page[class][class] header.site-header[class][class]:not(.is-scrolled),
html body.home-page[class][class] header.site-header[class][class]:not(.is-scrolled) .nav-inner {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 2. White nav text, readable through a text shadow only */
html body.home-page[class][class] header.site-header[class][class] .main-nav > a:not(.nav-cta),
html body.home-page[class][class] header.site-header[class][class] .nav-drop-trigger,
html body.home-page[class][class] header.site-header[class][class] .nav-drop-trigger span {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.45) !important;
}

/* 3. No dark fade over the top of the video; light fade at the bottom only */
html body.home-page .executive-hero .hero-slide-shade {
  background: linear-gradient(0deg, rgba(3,16,22,.35) 0%, rgba(3,16,22,0) 45%) !important;
}

/* 4. Video: natural colours, no extra filter */
html body.home-page .executive-hero .hero-slide-video {
  filter: none !important;
}

/* 5. Eyebrow text (the line above the heading) */
html body.home-page .executive-hero .hero-eyebrow {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.6) !important;
}

/* =========================================================
   HOME HERO — TEXT FADES OUT AFTER 5 SECONDS
   Shows once on page load, then stays hidden (only the video
   remains). Comes back only when the page is reloaded.
   Change 5s = delay before fading, 1.2s = fade speed.
   ========================================================= */
@keyframes heroTextFadeOut {
  0%   { opacity: 1; transform: translateY(0);     visibility: visible; }
  99%  { opacity: 0; transform: translateY(-14px); visibility: visible; }
  100% { opacity: 0; transform: translateY(-14px); visibility: hidden; }
}

html body.home-page .executive-hero .hero-content.executive-hero-content > * {
  animation: heroTextFadeOut 1.2s ease 5s 1 forwards !important;
}



/* =========================================================
   HOME HERO — BRIGHTER, RICHER VIDEO
   ========================================================= */
html body.home-page .executive-hero .hero-slide-video {
  filter: brightness(1.12) contrast(1.08) saturate(1.15) !important;
}

/* lighter overlay so the footage shows through */
html body.home-page .executive-hero .hero-slide-shade {
  background:
    linear-gradient(180deg, rgba(3,16,22,.22) 0, rgba(3,16,22,0) 130px),
    linear-gradient(0deg, rgba(3,16,22,.30) 0%, rgba(3,16,22,0) 42%) !important;
}