/* ==========================================================================
   HEADER — top bar, main nav, mega menu, mobile menu, banner, enquire tab
   Requires base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOP BAR
   -------------------------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: var(--z-header);
  background-color: var(--c-topbar-bg);
  color: var(--c-white);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--topbar-h);
}

.topbar__tagline {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color:var(--c-white);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar__mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  transition: color var(--t-fast);
}
.topbar__mail:hover { color: var(--c-primary); }
.topbar__mail svg { flex: none; }

.topbar__divider {
  width: 1px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.3);
}

.topbar__socials {
  display: flex;
  align-items: center;
  gap: 12px;
  svg{
    padding-top:5px;
  }
}
.topbar__socials a { display: inline-flex; transition: color var(--t-fast); }
.topbar__socials a:hover { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   2. HEADER — transparent, sits over the banner, hairline underneath
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--header-h);

}

.site-logo { flex: none; display: block; }
.site-logo svg { height: 56px; width: auto; }

/* --------------------------------------------------------------------------
   3. DESKTOP NAV
   -------------------------------------------------------------------------- */

.site-nav { margin-left: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* static so the mega menu can position against .site-header */
.site-nav__item { position: static; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--header-h);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-white);
  transition: color var(--t-fast);
}

.site-nav__link:hover,
.site-nav__item.is-open > .site-nav__link,
.site-nav__item.is-current > .site-nav__link {
  color: var(--c-primary);
}

.site-nav__caret {
  flex: none;
  width: 9px;
  height: 6px;
  transition: transform var(--t-fast);
}
.site-nav__item.is-open .site-nav__caret { transform: rotate(180deg); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 40px;
}

/* --------------------------------------------------------------------------
   4. MEGA MENU — 1110px wide, centred on the 1440 frame
   -------------------------------------------------------------------------- */

.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  width: 1110px;
  max-width: calc(100vw - (var(--container-pad) * 2));
  margin-top: 2px;
  padding: 40px;
  background-color: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(15, 17, 46, 0.18);
  z-index: var(--z-megamenu);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.site-nav__item.is-open > .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.megamenu__grid {
  display: grid;
  grid-template-columns: 280px 372px 1fr;
  gap: 48px;
  align-items: start;
}

.megamenu__mark { margin-bottom: 38px; }
.megamenu__mark {
  svg,img { height: 58px; width: auto; }
}

.megamenu__title {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-title);
  margin-bottom: 14px;
}

.megamenu__text {
  font-size: var(--fs-p-sm);
  line-height: var(--lh-body);
  color: var(--c-text);
  margin-bottom: 24px;
}

.megamenu__media {
    --chamfer: 32px;
  overflow: hidden;
  aspect-ratio: 372 / 333;
      clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer));
}
.megamenu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.megamenu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.megamenu__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding-inline: 20px;
  border-radius: var(--btn-radius);
  background-color: var(--c-btn-two-bg);
  color: var(--c-title);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.megamenu__link svg { flex: none; transition: transform var(--t-fast); }
.megamenu__link:hover,
.megamenu__link:focus-visible {
  background-color: var(--c-secondary);
  color: var(--c-white);
}
.megamenu__link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. BURGER
   -------------------------------------------------------------------------- */

.burger {
  display: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
}
.burger__close { display: none; }
body.menu-open .burger__open { display: none; }
body.menu-open .burger__close { display: block; }

/* --------------------------------------------------------------------------
   6. MOBILE MENU
   -------------------------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-mobile-menu);
  padding: 6px var(--container-pad) 24px;
  background-color: rgba(13, 13, 13, 0.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }

.mobile-menu__panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-h) - 30px);
  padding: 8px 32px 32px;
  background-color: var(--c-white);
  border-radius: var(--r-lg);
}

.mobile-nav__item { border-bottom: 1px solid rgba(13, 13, 13, 0.12); }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: var(--c-title);
  transition: color var(--t-fast);
}
.mobile-nav__item.is-open > .mobile-nav__link { color: var(--c-primary); }

.mobile-nav__caret {
  flex: none;
  width: 9px;
  height: 6px;
  transition: transform var(--t-fast);
}
.mobile-nav__item.is-open .mobile-nav__caret { transform: rotate(180deg); }

/* Accordion — max-height set inline by JS so it animates to real height */
.mobile-nav__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-base);
}
.mobile-nav__sub-inner { padding-bottom: 12px; }

.mobile-nav__sub a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 18px;
  color: var(--c-title);
  transition: color var(--t-fast);
}
.mobile-nav__sub a:hover { color: var(--c-primary); }

.mobile-menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.mobile-menu__foot { margin-top: auto; padding-top: 48px; }

.mobile-menu__tagline {
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--c-text);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}

.mobile-menu__mail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
  font-size: 16px;
  color: var(--c-title);
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}
.mobile-menu__mail svg { flex: none; color: var(--c-primary); }

.mobile-menu__socials {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   7. BANNER
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 840px;
  padding-top: var(--header-h);
  padding-bottom: 152px;
  isolation: isolate;
  overflow: hidden;
}

.banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--c-banner-overlay);
  z-index: 1;
}

/* Optional YouTube background. The iframe keeps YouTube's 16:9 ratio whatever
   the banner's shape, so it is sized to cover the larger of the two axes and
   centred — the same result object-fit: cover gives an image, which an iframe
   does not support. It sits above the poster image and below the overlay. */
.banner__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
  container-type: size;
}
.banner__video.is-playing { opacity: 1; }

.banner__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  /* Viewport units are the fallback; they are only exact when the banner
     fills the screen, which the homepage hero nearly does. */
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
}

@supports (width: 100cqw) {
  .banner__video iframe {
    width: 100cqw;          /* 16:9 measured off the banner itself, so an */
    height: 56.25cqw;       /* inner banner or a short viewport still fills. */
    min-width: 177.78cqh;
    min-height: 100cqh;
  }
}

/* Decorative angled lines, bottom-right. Swap for the Figma SVG export. */
.banner__deco {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(430px, 40%);
  pointer-events: none;
}

.banner__inner { width: 100%; }
.banner__content { max-width: 780px; }
.banner__eyebrow { margin-bottom: 24px; }

.banner__title {
  color: var(--c-white);
  margin-bottom: 24px;
}

.banner__text {
  font-size: var(--fs-p-lg);
  line-height: var(--lh-body);
  color: var(--c-white);
  max-width: 660px;
  margin-bottom: 40px;
  opacity:0.8;
} 

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   8. STICKY ENQUIRE TAB
   -------------------------------------------------------------------------- */

.enquire-tab {
  position: fixed;
  right: var(--container-pad);
  bottom: 0;
  z-index: var(--z-enquire);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background-color: var(--c-primary);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--t-fast);
}
.enquire-tab:hover { background-color: var(--c-secondary); }

/* --------------------------------------------------------------------------
   9. MOBILE — 991.98px and below
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .topbar { display: none; }

  .site-header {
    position: fixed;
    top: 0;
    background-color: transparent;
  }
  body.menu-open .site-header { background-color: var(--c-footer-bg); }

  .site-logo svg { height: 48px; }

  .site-nav,
  .header-actions { display: none; }

  .burger { display: flex; }

  .banner {
    min-height: 0;
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 48px);
    padding-bottom: 120px;
  }

  .banner__content { max-width: none; }
  .banner__eyebrow { margin-bottom: 20px; }
  .banner__title { margin-bottom: 16px; }
  .banner__text { margin-bottom: 24px; }
  .banner__actions { gap: 12px; }
  .banner__deco { width: 60%; }

  .enquire-tab {
    right: 50%;
    transform: translateX(50%);
    height: 46px;
  }
}

/* Let the two banner buttons stack on very small phones rather than overflow */
@media (max-width: 400px) {
  .banner__actions .btn { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   10. INNER BANNER
   Same media, overlay and stepped edge as the homepage banner, but the
   height is driven by content rather than a fixed 840px.
   Measured: 122px above the breadcrumb, 136px below the last element.
   -------------------------------------------------------------------------- */

.banner--inner {
  min-height: 0;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + 122px);
  padding-bottom: 136px;
}

.banner--inner .banner__content { max-width: 860px; }
.banner--inner .banner__title { margin-bottom: 20px; }
.banner--inner .banner__text { margin-bottom: 32px; }
.banner--inner .banner__text:last-child { margin-bottom: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-white);
}
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb__sep { color: var(--c-on-dark-60); }
.breadcrumb [aria-current='page'] { color: var(--c-on-dark-70); }

@media (max-width: 991.98px) {
  .banner--inner {
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 72px;
  }
  .banner--inner .banner__content { max-width: none; }
  .breadcrumb { font-size: 12px; margin-bottom: 16px; }
}