/* ============================================================
   header.css — merged header styling for header-5 (dark solid
   header + services mega menu). Merged from header-dark.css +
   mega-menu.css (CSS audit 2026-08). Load order preserved.
   ============================================================ */

/* ---------- header-dark ---------- */
/* Shared dark header (header-5) — used site-wide */

header.header-dark {
  background-color: #000000;
  position: sticky;
  top: 0;
  z-index: 1000;
}

header.header-dark .tp-header-top {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

header.header-dark .bs-header-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 16px;
}

/* Align logo and CTA with the top bar edges (theme adds side padding on .tp-header-wrap). */
header.header-dark .tp-header-wrap {
  padding-inline: 0 !important;
}

/* Mobile only: keep logo and menu button off the screen edges. */
@media (max-width: 767.98px) {
  header.header-dark .tp-header-wrap {
    padding-inline: 16px !important;
  }

  header.header-dark #header-sticky.header-sticky .tp-header-wrap {
    padding-inline: 16px !important;
  }
}

header.header-dark .tp-header-cta {
  margin-left: 0 !important;
}

header.header-dark .tp-header-cta-phone {
  display: inline-block !important;
}

header.header-dark .tp-header-logo a {
  display: inline-flex;
}

header.header-dark .tp-header-cta {
  justify-content: flex-end;
  width: 100%;
}

@media (min-width: 1200px) {
  header.header-dark .tp-header-wrap > .row {
    --bs-gutter-x: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header.header-dark .tp-header-wrap > .row > [class*="col-"]:first-child {
    padding-left: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  header.header-dark .tp-header-wrap > .row > [class*="col-"]:nth-child(2) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    flex: 0 0 auto;
    max-width: none;
    padding: 0;
    z-index: 2;
    pointer-events: none;
  }

  header.header-dark .tp-header-wrap > .row > [class*="col-"]:nth-child(2) .tp-header-menu {
    pointer-events: auto;
    transform: none !important;
  }

  header.header-dark .tp-header-wrap > .row > [class*="col-"]:last-child {
    padding-right: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: auto;
  }
}

header.header-dark .bs-header-top-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease, transform 0.3s ease;
}

header.header-dark .bs-header-top-item:hover {
  color: var(--tp-secoundery-color);
  transform: translateY(-1px);
}

header.header-dark .bs-header-top-item:hover .bs-header-top-icon {
  border-color: var(--tp-secoundery-color);
  background-color: rgba(239, 205, 26, 0.12);
  color: var(--tp-secoundery-color);
}

header.header-dark .bs-header-top-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(239, 205, 26, 0.35);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--tp-secoundery-color);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

header.header-dark .bs-header-top-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
}

header.header-dark .bs-header-top-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
}

header.header-dark .bs-header-top-item:hover .bs-header-top-label {
  color: rgba(239, 205, 26, 0.75);
}

header.header-dark .bs-header-top-value {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  transition: color 0.3s ease;
}

header.header-dark .bs-header-top-item:hover .bs-header-top-value {
  color: var(--tp-secoundery-color);
}

header.header-dark .bs-header-top-item--email {
  flex-direction: row-reverse;
  text-align: right;
}

header.header-dark #header-sticky,
header.header-dark #header-sticky.header-sticky {
  background-color: #000000;
  position: relative;
  z-index: 1000;
}

/* Sticky only: nav bar is fixed full-width — constrain inner content to match container-wide. */
header.header-dark #header-sticky.header-sticky.media {
  padding-left: 0;
  padding-right: 0;
}

header.header-dark #header-sticky.header-sticky .tp-header-wrap {
  max-width: 1860px;
  margin-inline: auto;
  width: 100%;
  padding-inline: 20px !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  header.header-dark #header-sticky.header-sticky .tp-header-wrap {
    padding-inline: 15px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px),
       (max-width: 574.98px),
       only screen and (min-width: 576px) and (max-width: 767.98px) {
  header.header-dark #header-sticky.header-sticky .tp-header-wrap {
    padding-inline: 10px !important;
  }
}

header.header-dark .tp-cta-phone a,
header.header-dark .tp-cta-phone samp {
  color: #ffffff;
}

header.header-dark .header-sidebar-btn span {
  background-color: #ffffff;
}

/* Get in touch button — brand yellow fill (brand gold = --tp-secoundery-color) */
header.header-dark .tp-header-cta-button .tp-btn {
  background-color: var(--tp-secoundery-color);
  border-color: var(--tp-secoundery-color);
  color: #000000;
}
header.header-dark .tp-header-cta-button .tp-btn:hover {
  color: #000000;
}
header.header-dark .tp-header-cta-button .tp-btn .tp-btn-icon::before {
  background-color: #000000;
}
header.header-dark .tp-header-cta-button .tp-btn .tp-btn-icon svg {
  color: var(--tp-secoundery-color);
}

/* ---------- mega-menu ---------- */
/* ==========================================================================
   Bright Space — Services mega menu (desktop / xl+ only)
   Full-bleed panel anchored to #header-sticky so it tracks the sticky header.
   Mobile offcanvas is untouched: Services stays a plain link there.
   ========================================================================== */

:root {
  --bs-mega-gold: #efcd1a;
  --bs-mega-ink: #f4f4f1;
  --bs-mega-muted: rgba(255, 255, 255, 0.46);
  --bs-mega-line: rgba(255, 255, 255, 0.10);
  --bs-mega-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keep the full-bleed panel from spilling a horizontal scrollbar (100vw vs the
   scrollbar width) while still letting the dropdown fall below the header. */
header.header-dark {
  overflow-x: clip;
  overflow-y: visible;
}

/* Positioning context for the absolute panel in the non-sticky state.
   When sticky, the theme sets position:fixed, which is also a containing block. */
header.header-dark #header-sticky {
  position: relative;
}

/* --- Trigger (the "Services" nav item) ------------------------------------ */
.tp-header-menu .bs-has-mega {
  position: static; /* let the panel anchor to #header-sticky, not this <li> */
}

.bs-mega-caret {
  display: inline-flex;
  margin-left: 6px;
  transform: translateY(1px);
  transition: transform 0.4s var(--bs-mega-ease);
}
.bs-mega-caret svg {
  width: 9px;
  height: 9px;
}

/* Invisible bridge so the cursor can cross the header's bottom padding
   from the link into the panel without hover dropping. Desktop menu only.
   Height must clear the header row's vertical padding (19px non-sticky) plus
   the vertical-centring slack, so it is deliberately generous. */
.tp-header-menu .bs-has-mega > a::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 100%;
  height: 52px;
}

/* --- Panel ---------------------------------------------------------------- */
.bs-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%) translateY(-12px);
  z-index: 30;
  background: linear-gradient(180deg, #0b0b0c 0%, #060606 100%);
  border-top: 1px solid var(--bs-mega-line);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.34s ease,
    transform 0.46s var(--bs-mega-ease),
    visibility 0s linear 0.46s;
}

/* Full-width catch strip directly above the panel. It overlaps the link
   bridge so the band between the nav row and the panel has no dead spot,
   in both the sticky (12px pad) and non-sticky (19px pad) states. Only
   active while the panel is open (panel is pointer-events:none when closed). */
.bs-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 46px;
}

/* Reveal on hover / keyboard focus of the trigger OR the panel itself. */
#header-sticky:has(.bs-has-mega:hover) .bs-mega,
#header-sticky:has(.bs-has-mega:focus-within) .bs-mega,
#header-sticky:has(.bs-mega:hover) .bs-mega,
#header-sticky:has(.bs-mega:focus-within) .bs-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.34s ease,
    transform 0.46s var(--bs-mega-ease),
    visibility 0s linear 0s;
}

#header-sticky:has(.bs-has-mega:hover) .bs-mega-caret,
#header-sticky:has(.bs-has-mega:focus-within) .bs-mega-caret,
#header-sticky:has(.bs-mega:hover) .bs-mega-caret {
  transform: translateY(1px) rotate(180deg);
}

.bs-mega__inner {
  max-width: 1780px;
  margin: 0 auto;
  padding: clamp(30px, 3vw, 46px) clamp(24px, 3.4vw, 66px) clamp(34px, 3vw, 50px);
}

/* --- Head row ------------------------------------------------------------- */
.bs-mega__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--bs-mega-line);
}

.bs-mega__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-mega-muted);
}
.bs-mega__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-mega-gold);
}

.bs-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.3s ease, gap 0.3s var(--bs-mega-ease);
}
.bs-mega__all svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s var(--bs-mega-ease);
}
.bs-mega__all:hover {
  color: var(--bs-mega-gold);
  gap: 13px;
}
.bs-mega__all:hover svg {
  transform: translate(2px, -2px);
}

/* --- Grid ----------------------------------------------------------------- */
.bs-mega__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: clamp(16px, 1.6vw, 30px);
  row-gap: clamp(22px, 2vw, 34px);
}

/* --- Card ----------------------------------------------------------------- */
.bs-mega-card {
  display: block;
  color: inherit;
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 0.5s var(--bs-mega-ease),
    opacity 0.5s ease;
}
#header-sticky:has(.bs-has-mega:hover) .bs-mega-card,
#header-sticky:has(.bs-has-mega:focus-within) .bs-mega-card,
#header-sticky:has(.bs-mega:hover) .bs-mega-card,
#header-sticky:has(.bs-mega:focus-within) .bs-mega-card {
  transform: translateY(0);
  opacity: 1;
}
/* Gentle stagger, left-to-right across each row. */
.bs-mega-card:nth-child(6n + 1) { transition-delay: 0.02s; }
.bs-mega-card:nth-child(6n + 2) { transition-delay: 0.05s; }
.bs-mega-card:nth-child(6n + 3) { transition-delay: 0.08s; }
.bs-mega-card:nth-child(6n + 4) { transition-delay: 0.11s; }
.bs-mega-card:nth-child(6n + 5) { transition-delay: 0.14s; }
.bs-mega-card:nth-child(6n + 6) { transition-delay: 0.17s; }

.bs-mega-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #131313;
}
.bs-mega-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0.9;
  transition: opacity 0.5s ease;
}
.bs-mega-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.32) brightness(0.82) contrast(1.02);
  transform: scale(1.01);
  transition:
    transform 0.7s var(--bs-mega-ease),
    filter 0.55s ease;
}

.bs-mega-card__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--bs-mega-gold);
  color: #101010;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bs-mega-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
}

.bs-mega-card__title {
  position: relative;
  font-size: 16.5px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--bs-mega-ink);
  transition: color 0.3s ease;
}
/* Draws a short gold rule under the title on hover. */
.bs-mega-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--bs-mega-gold);
  transition: width 0.4s var(--bs-mega-ease);
}

.bs-mega-card__arrow {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--bs-mega-gold);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.35s ease, transform 0.4s var(--bs-mega-ease);
}
.bs-mega-card__arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Card hover state */
.bs-mega-card:hover .bs-mega-card__media img {
  transform: scale(1.07);
  filter: grayscale(0) brightness(1) contrast(1);
}
.bs-mega-card:hover .bs-mega-card__media::after { opacity: 0.5; }
.bs-mega-card:hover .bs-mega-card__title { color: #ffffff; }
.bs-mega-card:hover .bs-mega-card__title::after { width: 26px; }
.bs-mega-card:hover .bs-mega-card__arrow {
  opacity: 1;
  transform: translate(0, 0);
}
.bs-mega-card:focus-visible {
  outline: 2px solid var(--bs-mega-gold);
  outline-offset: 6px;
  border-radius: 4px;
}

/* --- Responsive within the desktop range --------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .bs-mega-card__title { font-size: 15px; }
  .bs-mega__inner { padding-left: clamp(20px, 2.6vw, 40px); padding-right: clamp(20px, 2.6vw, 40px); }
}

/* Never show the mega panel below xl — mobile uses the offcanvas menu. */
@media (max-width: 1199.98px) {
  .bs-mega { display: none !important; }
}

/* Mobile offcanvas: keep the Services item exactly as before (no caret). */
.tp-offcanvas-menu .bs-mega-caret { display: none !important; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .bs-mega,
  .bs-mega-card,
  .bs-mega-card__media img,
  .bs-mega-card__arrow,
  .bs-mega-caret {
    transition-duration: 0.001ms !important;
  }
}