/* L2C — Site Header module (site chrome, full-width) */
/* mega-menu rebuild: labels-left layout + full-height promo bleed */
.l2c-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: color-mix(in srgb, var(--l2c-black) 85%, transparent);
  color: var(--l2c-bone);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--l2c-font-sans);
}

/* Fallback for browsers without color-mix: paint solid black. */
@supports not (background: color-mix(in srgb, black, white)) {
  .l2c-header { background: var(--l2c-black); }
}

/* --- Top bar -------------------------------------------------------------- */
.l2c-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 14px clamp(20px, 4vw, 64px);
}

/* --- Brand ---------------------------------------------------------------- */
.l2c-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
  color: var(--l2c-white);
}
.l2c-header__logo {
  height: 40px;
  width: auto;
  display: block;
}
.l2c-header__wordmark {
  font-family: var(--l2c-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--l2c-white);
  white-space: nowrap;
}

/* --- Primary nav ---------------------------------------------------------- */
.l2c-header__nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.l2c-header__nav-item {
  position: static;
}
/* Mega trigger: an invisible bridge fills the gap down to the panel so moving
   the pointer from "Services" into the mega-menu never closes it (no flicker). */
.l2c-header__nav-item--mega {
  position: relative;
}
.l2c-header__nav-item--mega::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: 100%;
  height: 26px;
}
.l2c-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--l2c-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--l2c-white);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.l2c-header__nav-link:hover {
  opacity: 1;
}
/* Bold + full white on hover and while the mega-menu is open (no grey dim). */
.l2c-header__nav-link:hover .l2c-header__nav-label,
.l2c-header__nav-link[aria-expanded="true"] .l2c-header__nav-label {
  font-weight: 500;
}
/* Reserve the bold width so bolding on hover never shifts the other nav items. */
.l2c-header__nav-label {
  display: inline-block;
}
.l2c-header__nav-label::after {
  content: attr(data-label);
  display: block;
  font-weight: 500;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
/* Kill the theme's global button:hover/focus/active background (the highlight box)
   on the nav controls, which are real <button> elements. Scoped with .l2c-header
   so it wins over the global button:hover rule regardless of stylesheet order. */
.l2c-header .l2c-header__nav-link:hover,
.l2c-header .l2c-header__nav-link:focus,
.l2c-header .l2c-header__nav-link:active,
.l2c-header .l2c-header__burger:hover,
.l2c-header .l2c-header__burger:focus,
.l2c-header .l2c-header__burger:active {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--l2c-white);
}
.l2c-header__nav-link:focus-visible {
  outline: 2px solid var(--l2c-cyan);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Caret glyph used on mega-menu triggers */
.l2c-header__caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  margin-top: -3px;
  transition: transform 0.2s ease;
}
.l2c-header__mega-trigger[aria-expanded="true"] .l2c-header__caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* --- Actions (CTA + burger) ---------------------------------------------- */
.l2c-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.l2c-header__cta.l2c-btn {
  font-size: 12px;
  padding: 7px 18px;
}

.l2c-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.l2c-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--l2c-bone);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.l2c-header__burger:focus-visible {
  outline: 2px solid var(--l2c-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
.l2c-header.is-drawer-open .l2c-header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.l2c-header.is-drawer-open .l2c-header__burger span:nth-child(2) {
  opacity: 0;
}
.l2c-header.is-drawer-open .l2c-header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mega-menu panel ------------------------------------------------------ */
.l2c-header__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--l2c-bone);
  color: #1A1A1A;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.l2c-header__mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.l2c-header__mega-inner {
  --promo-w: clamp(300px, 26vw, 420px);
  display: flex;
  align-items: stretch;
}
/* Text column fills the space left of the (edge-bleeding) card. A left padding
   equal to the card width makes justify-content:center land the text on the
   PAGE centre, so it never drifts right on wide screens while the card still
   bleeds to the edge. Narrow screens anchor left to avoid overlapping the card. */
.l2c-header__mega-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 36px clamp(24px, 2vw, 40px) 44px var(--promo-w);
}
.l2c-header__mega-content {
  min-width: 0;
}
.l2c-header__mega-heading {
  font-family: var(--l2c-font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--l2c-navy);
  margin: 0 0 24px;
}
.l2c-header__mega-heading-accent {
  color: var(--l2c-violet);
}
.l2c-header__mega-cols {
  display: flex;
  align-items: flex-start;
}
.l2c-header__mega-labels {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: clamp(28px, 3vw, 48px);
}
.l2c-header__mega-linkcol {
  padding: 0 clamp(22px, 2.6vw, 40px);
}
.l2c-header__mega-labels + .l2c-header__mega-linkcol {
  border-left: 1px solid color-mix(in srgb, var(--l2c-black) 22%, transparent);
  padding-left: clamp(28px, 3vw, 48px);
}
.l2c-header__mega-linkcol + .l2c-header__mega-linkcol {
  border-left: 0;
}
/* Scoped with the parent class so these font rules out-specify the theme's
   global a / a:hover (which otherwise resizes the label on hover -> text shift). */
.l2c-header__mega-labels .l2c-header__mega-col-title {
  display: inline-block;
  font-family: var(--l2c-font-mono);
  font-weight: 700;
  font-size: 10px;
  line-height: 24px;
  letter-spacing: var(--l2c-ls-label);
  text-transform: uppercase;
  color: var(--l2c-navy);
  margin: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}
.l2c-header__mega-labels .l2c-header__mega-col-title:hover {
  color: var(--l2c-violet);
}
.l2c-header__mega-labels .l2c-header__mega-col-title:focus-visible {
  outline: 2px solid var(--l2c-violet);
  outline-offset: 2px;
  border-radius: 2px;
}
.l2c-header__mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l2c-header__mega-links a {
  display: inline-block;
  font-family: var(--l2c-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: var(--l2c-navy);
  text-decoration: none;
  transition: color 0.15s ease;
}
.l2c-header__mega-links a:hover {
  color: var(--l2c-violet);
}
.l2c-header__mega-links a:focus-visible {
  outline: 2px solid var(--l2c-violet);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Promo card */
.l2c-header__promo {
  flex: none;
  width: var(--promo-w);
  align-self: stretch;
  background: var(--l2c-orange);
  border-radius: 0;
  padding: 32px clamp(24px, 2.4vw, 44px);
  color: var(--l2c-bone);
}
.l2c-header__promo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.l2c-header__promo-img {
  flex: none;
  width: clamp(120px, 9vw, 168px);
  aspect-ratio: 5 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 22px;
  margin: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.l2c-header__promo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.l2c-header__promo-title {
  font-family: var(--l2c-font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--l2c-bone);
  margin: 0 0 16px;
}
.l2c-header__promo-body {
  font-family: var(--l2c-font-sans);
  font-size: 10px;
  line-height: 2.1;
  color: var(--l2c-bone);
  margin: 0;
}
.l2c-header__promo .l2c-header__promo-link {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--l2c-font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.6;
  color: var(--l2c-bone);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-underline-offset 0.15s ease;
}
.l2c-header__promo .l2c-header__promo-link:hover {
  color: #FFFFFF;
  text-underline-offset: 3px;
}
.l2c-header__promo-link:focus-visible {
  outline: 2px solid var(--l2c-bone);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Mobile drawer -------------------------------------------------------- */
.l2c-header__drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--l2c-black);
  padding: 8px clamp(20px, 4vw, 64px) 32px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.l2c-header__drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l2c-header__drawer-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.l2c-header__drawer-link,
.l2c-header__drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-family: var(--l2c-font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--l2c-bone);
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.l2c-header__drawer-toggle .l2c-header__caret {
  width: 8px;
  height: 8px;
}
.l2c-header__drawer-toggle[aria-expanded="true"] .l2c-header__caret {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.l2c-header__drawer-sub {
  display: none;
  padding: 0 0 16px;
}
.l2c-header__drawer-toggle[aria-expanded="true"] + .l2c-header__drawer-sub {
  display: block;
}
.l2c-header__drawer-sub-title {
  font-family: var(--l2c-font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--l2c-ls-label);
  text-transform: uppercase;
  color: var(--l2c-heliotrope);
  margin: 12px 0 6px;
}
.l2c-header__drawer-sub-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.l2c-header__drawer-sub-list a {
  display: block;
  padding: 6px 0;
  font-family: var(--l2c-font-sans);
  font-size: 15px;
  color: color-mix(in srgb, var(--l2c-bone) 80%, transparent);
  text-decoration: none;
}
.l2c-header__drawer-sub-list a:hover {
  color: var(--l2c-bone);
}
.l2c-header__drawer-cta.l2c-btn {
  display: flex;
  width: 100%;
  margin-top: 24px;
}

/* Narrow desktops (900-1200px): not enough room to page-centre the text without
   it sliding under the card, so anchor the text to the left instead. */
@media (max-width: 1200px) {
  .l2c-header__mega-main {
    justify-content: flex-start;
    padding-left: clamp(24px, 5vw, 80px);
  }
}

/* --- Responsive: collapse to drawer at <= 900px --------------------------- */
@media (max-width: 900px) {
  .l2c-header__nav,
  .l2c-header__cta,
  .l2c-header__mega {
    display: none;
  }
  .l2c-header__burger {
    display: inline-flex;
  }
  .l2c-header.is-drawer-open .l2c-header__drawer {
    display: block;
  }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .l2c-header__mega,
  .l2c-header__caret,
  .l2c-header__burger span,
  .l2c-header__nav-link,
  .l2c-header__promo-link,
  .l2c-header__mega-links a {
    transition: none;
  }
}