/* Final shared layer: one header and one first-screen typographic system. */

/* The rendered site uses the same header fragment on every public page. */
#site-header,
#site-header .navigation-wrap-2 {
  box-sizing: border-box;
  width: 100%;
}

#site-header .navigation-container-3 {
  box-sizing: border-box;
  width: 100%;
  min-height: 90px;
  padding-right: 5%;
  padding-left: 5%;
}

#site-header .navigation-link-3,
#site-header .dropdown-2,
#site-header .dropdown-toggle-3,
#site-header .lang-sec {
  font-family: "Noto Sans", Arial, sans-serif;
}

/* Only Instagram and LinkedIn are present; empty legacy placeholders must not
   consume space or pull the visible icons away from the header baseline. */
#site-header .div-block-86-en {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0 0 0 16px;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#site-header .div-block-86-en > .twitter,
#site-header .div-block-86-en > .facebook,
#site-header .div-block-86-en > .youtube {
  display: none;
}

#site-header .div-block-86-en > .instagram,
#site-header .div-block-86-en > .linkedin {
  display: flex;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  filter: none;
}

#site-header .div-block-86-en .linkedin-link {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
}

/* Legacy image heroes: company pages, directories, projects, division
   profiles and the five main divisions all share this geometry. */
:is(.breadcrumb, .breadcrumb-copy, .breadcrumb-2) {
  box-sizing: border-box;
  width: 90% !important;
  margin: 100px auto 10px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  justify-content: flex-start !important;
}

:is(.sectors-head, .sectors-head-copy, .sectors-head-2, .sectors-head-3, .sectors-head-4) {
  box-sizing: border-box;
  display: flex !important;
  width: 90% !important;
  max-width: none !important;
  min-height: 108px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  color: #fff;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: clamp(34px, 3.35vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
  text-align: left !important;
  overflow-wrap: anywhere;
}

:is(.sectors-description, .sectors-description-copy, .sectors-description-2, .sectors-description-3) {
  box-sizing: border-box;
  display: flex !important;
  width: 90% !important;
  max-width: none !important;
  min-height: 54px !important;
  margin: 16px auto 0 !important;
  padding: 0 30% 0 0 !important;
  justify-content: flex-start !important;
  color: #fff;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* Profile pages keep the shared type scale but their title and breadcrumb live
   inside a height-reserving hero container. */
:is(.supply-profile-page, .oilgas-profile-page) .division-profile-hero .breadcrumb {
  display: flex !important;
  width: 100% !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
}

:is(.supply-profile-page, .oilgas-profile-page) .division-profile-hero .division-detail-title {
  width: min(920px, 100%) !important;
  min-height: 108px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Structured subcategory and project pages use the same content width,
   vertical rhythm and compact type scale as the legacy first screens. */
.drilling-pilot .dp-hero,
.project-detail-page .pd-hero,
.contact-meba .contact-hero,
.news-meba .news-hero {
  min-height: 540px;
}

.dp-hero-inner,
.pd-hero__inner,
.contact-hero__content,
.news-hero__content {
  box-sizing: border-box;
  width: min(1180px, 90%);
  margin-right: auto;
  margin-left: auto;
  padding-top: 166px;
  padding-bottom: 58px;
}

:is(.dp-breadcrumb, .pd-breadcrumb, .contact-breadcrumb, .news-breadcrumb) {
  margin-bottom: 32px;
}

.drilling-pilot .dp-hero h1,
.project-detail-page .pd-hero h1,
.contact-meba .contact-hero h1,
.news-meba .news-hero h1 {
  max-width: 920px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: clamp(34px, 3.35vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.drilling-pilot .dp-hero-copy,
.project-detail-page .pd-hero__summary,
.contact-meba .contact-hero__copy,
.news-meba .news-hero__copy {
  max-width: 760px;
  margin-top: 16px;
  margin-bottom: 0;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
}

@media screen and (min-width: 992px) and (max-width: 1100px) {
  #site-header .navigation-container-3 {
    padding-right: 2%;
    padding-left: 2%;
  }

  #site-header .div-block-86-en {
    margin-left: 8px;
    gap: 8px;
  }
}

@media screen and (max-width: 991px) {
  :is(.sectors-head, .sectors-head-copy, .sectors-head-2, .sectors-head-3, .sectors-head-4) {
    font-size: 38px !important;
  }

  :is(.sectors-description, .sectors-description-copy, .sectors-description-2, .sectors-description-3) {
    padding-right: 15% !important;
    font-size: 16px !important;
  }

  .dp-hero-inner,
  .pd-hero__inner,
  .contact-hero__content,
  .news-hero__content {
    padding-top: 140px;
    padding-bottom: 52px;
  }
}

@media screen and (max-width: 767px) {
  #site-header .navigation-container-mob-2 {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
  }

  #site-header .navigation-container-mob-2 > .w-nav-brand {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 0;
  }

  #site-header .flowbase-logo {
    width: 120px;
    max-width: 100%;
  }

  #site-header .mobile-header-languages {
    flex: 0 0 auto;
    margin-left: auto;
  }

  #site-header .mobile-header-lang {
    min-width: 26px;
    padding-right: 3px;
    padding-left: 3px;
  }

  #site-header .menu-mob-3 {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 60px;
    min-height: 60px;
  }

  :is(.supply-profile-page, .oilgas-profile-page) .division-profile-hero .breadcrumb {
    display: flex !important;
    margin-bottom: 26px !important;
  }

  :is(.supply-profile-page, .oilgas-profile-page) .division-profile-hero .division-detail-title {
    width: 100% !important;
    min-height: 78px !important;
    margin: 0 !important;
  }

  :is(.breadcrumb, .breadcrumb-copy, .breadcrumb-2) {
    display: none !important;
  }

  :is(.sectors-head, .sectors-head-copy, .sectors-head-2, .sectors-head-3, .sectors-head-4) {
    width: 90% !important;
    min-height: 78px !important;
    margin: 80px auto 0 !important;
    font-size: 29px !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }

  :is(.sectors-description, .sectors-description-copy, .sectors-description-2, .sectors-description-3) {
    display: flex !important;
    width: 90% !important;
    min-height: 48px !important;
    margin: 12px auto 0 !important;
    padding-right: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  .drilling-pilot .dp-hero,
  .project-detail-page .pd-hero,
  .contact-meba .contact-hero,
  .news-meba .news-hero {
    min-height: 480px;
  }

  .dp-hero-inner,
  .pd-hero__inner,
  .contact-hero__content,
  .news-hero__content {
    width: min(100% - 40px, 620px);
    padding-top: 120px;
    padding-bottom: 42px;
  }

  :is(.dp-breadcrumb, .pd-breadcrumb, .contact-breadcrumb, .news-breadcrumb) {
    margin-bottom: 26px;
    font-size: 10px;
  }

  .drilling-pilot .dp-hero h1,
  .project-detail-page .pd-hero h1,
  .contact-meba .contact-hero h1,
  .news-meba .news-hero h1 {
    max-width: 100%;
    font-size: 29px;
    line-height: 1.12;
  }

  .drilling-pilot .dp-hero-copy,
  .project-detail-page .pd-hero__summary,
  .contact-meba .contact-hero__copy,
  .news-meba .news-hero__copy {
    max-width: 100%;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
  }
}