/* A freestanding logo and rounded navigation, inspired by the supplied reference. */
:root { --site-header-height: 118px; }
body > .site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
/* The initial header scrolls away; only the upward-scroll state is revealed. */
body > .site-header.is-floating {
  position: fixed;
  transform: translateY(-110%);
  visibility: hidden;
  pointer-events: none;
}
body > .site-header.is-floating.is-visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
body > .site-header.is-floating.is-animated {
  transition: transform .38s cubic-bezier(.22,1,.36,1), visibility .38s;
}
body.menu-open > .site-header { background: #fff; }
main:not(.page-index) { padding-top: var(--site-header-height); }
.page-news { background: linear-gradient(#f5f8fb, #f5f8fb) top / 100% var(--site-header-height) no-repeat; }
.page-index .showcase-main {
  padding-top: var(--site-header-height);
  min-height: 100svh;
}
.site-header .header-inner {
  width: min(1720px, calc(100% - 64px));
  height: auto;
  min-height: 118px;
  padding: 22px 0;
  gap: 24px;
}
.site-header .brand { position: relative; width: 200px; transform: none; }
.site-index .site-header:not(.is-floating) .brand { background: #fff; }
.site-header .brand:before {
  content: ''; position: absolute;
  inset: calc(0px - var(--site-header-height)) -14px -12px; z-index: -1;
  border-radius: 0 0 22px 22px; background: #fff; opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-floating .brand:before { opacity: 1; }
.site-index .site-header .brand:before { opacity: 1; }
.site-header #navigation {
  position: static;
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
  padding: 8px;
  background: #f3f5f8;
  border: 1px solid #eef1f5;
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: blur(16px);
}
.site-header #navigation > a:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .005em;
  white-space: nowrap;
  color: #20364b;
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.site-header #navigation > a:not(.button):hover { color: #0868cc; background: #ffffffb3; }
.site-header #navigation > a[aria-current] { color: #0868cc; background: #fff; box-shadow: 0 2px 10px #12385706; }
.site-header #navigation > a[aria-current]:after,
.site-header #navigation:after { display: none; }
.site-header #navigation > .header-contact {
  min-height: 52px;
  margin: 0 0 0 6px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #082f50;
  color: white;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.site-header .header-contact span { font-size: inherit; line-height: inherit; }
.site-header .header-contact svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.site-header #navigation > .header-contact:hover { transform: none; background: #0868cc; box-shadow: 0 5px 18px #0868cc18; }
.site-header #navigation > .header-contact[aria-current] { background: #0868cc; color: #fff; }
.site-header .header-contact:hover svg { transform: translateX(3px); }
.site-header #navigation a:focus-visible { outline: 2px solid #0868cc; outline-offset: 3px; }
.site-header .menu-button { display: none; }
body.menu-open { overflow: hidden; }
@media (min-width: 1700px) {
  .page-index { --hero-main-height: 700px; }
}
@media (max-width: 1100px) {
  .page-index { --hero-main-height: 600px; }
}
@media (min-width: 1201px) and (max-width: 1450px) {
  :root { --site-header-height: 108px; }
  .site-header .header-inner { width: calc(100% - 48px); gap: 16px; min-height: 108px; }
  .site-header .brand { transform: scale(.88); transform-origin: left center; margin-right: -24px; }
  .site-header #navigation { gap: 1px; padding: 6px; }
  .site-header #navigation > a:not(.button) { padding: 0 9px; font-size: 14px; min-height: 46px; }
  .site-header #navigation > .header-contact { font-size: 14px; min-height: 48px; padding: 12px 16px; }
}
@media (max-width: 1200px) {
  :root { --site-header-height: 84px; }
  .site-header .header-inner { width: calc(100% - 48px); min-height: 84px; padding: 18px 0; gap: 16px; }
  .site-header .brand { width: 200px; transform: scale(.92); transform-origin: left center; }
  .site-header .menu-button {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
    padding: 0; margin-left: auto; background: #f3f5f8;
    border: 1px solid #edf1f5; border-radius: 50%; z-index: 32;
  }
  .site-header #navigation {
    display: none; position: absolute; top: 84px; left: 0; right: 0;
    height: calc(100dvh - 84px); margin: 0;
    padding: 20px 32px 36px; border: 0; border-radius: 0;
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header #navigation.open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .site-header #navigation > a:not(.button) {
    justify-content: flex-start; flex-shrink: 0; min-height: 64px;
    padding: 15px 18px !important; border: 0; border-radius: 16px;
    font-size: 27px; font-weight: 400; line-height: 1.4; white-space: normal;
  }
  .site-header #navigation > a[aria-current] { background: #eef5fb; box-shadow: none; }
  .site-header #navigation > .header-contact {
    align-self: stretch; justify-content: space-between; flex-shrink: 0;
    min-height: 58px; margin: 18px 0 0; padding: 16px 24px !important;
    font-size: 16px;
  }
  .site-header #navigation:after {
    display: block; content: 'ONE ROUTE. END TO END.';
    margin-top: auto; padding: 30px 18px 0;
    font-size: 10px; letter-spacing: .14em; color: #6d8092;
  }
}
@media (max-width: 850px) {
  .page-index { --hero-main-height: 590px; }
}
@media (max-width: 560px) {
  .page-index { --hero-main-height: 730px; }
  .site-header .header-inner { width: calc(100% - 40px); }
  .site-header .menu-button { width: 46px; height: 46px; }
  .site-header #navigation { padding: 15px 20px 28px; }
  .site-header #navigation > a:not(.button) { font-size: clamp(23px,6vw,27px); min-height: 59px; }
}
@media (prefers-reduced-motion: reduce) {
  body > .site-header.is-floating.is-animated,
  .site-header .brand:before,
  .site-header #navigation > a,
  .site-header .header-contact svg { transition: none; }
  .site-header .header-contact:hover svg { transform: none; }
}

/* Photo-led pages place the initial navigation directly over the image. */
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) .brand {
  background: #fff;
}
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) .brand:before { opacity: 1; }
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) .brand img {
  filter: none;
  mix-blend-mode: normal;
}
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation > a:not(.button) {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation > a[aria-current],
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation > a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation > .header-contact {
  background: transparent;
  border-color: #ffffff80;
}
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation > .header-contact:hover { background: #ffffff20; }
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) #navigation a:focus-visible { outline-color: #fff; }
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) .menu-button { background: transparent; border-color: #ffffff80; }
:is(.site-index, .site-services):not(.menu-open) .site-header:not(.is-floating) .menu-lines i { background: #fff; }

/* The white tab behind the logo starts above the viewport and ends 12px under the
   logo, while the logo sits centred in a taller header row, so the tab showed far
   more space above the logo than below it. Wherever the tab shows, lift the logo by
   half that difference and extend the tab downward by the same amount: the tab keeps
   its size and the logo sits with equal space above and below. The tab is drawn in
   the logo's own coordinates, so the extension is divided by the logo's scale. */
:root { --brand-lift: 12.5px; --brand-tab-extra: 12.5px; }
@media (min-width: 1201px) and (max-width: 1450px) {
  :root { --brand-lift: 12px; --brand-tab-extra: 13.7px; }
}
@media (max-width: 1200px) {
  :root { --brand-lift: 5.4px; --brand-tab-extra: 5.8px; }
}
.site-header.is-floating .brand,
.site-index .site-header .brand,
.site-services:not(.menu-open) .site-header:not(.is-floating) .brand {
  translate: 0 calc(-1 * var(--brand-lift));
}
.site-header.is-floating .brand:before,
.site-index .site-header .brand:before,
.site-services:not(.menu-open) .site-header:not(.is-floating) .brand:before {
  bottom: calc(-12px - var(--brand-tab-extra));
}