:root {
  --main-orange: #ee5224;
}

.nav-brand {
  width: 11rem;
  min-width: 11rem;
}

.tranzport-logo {
  width: 100% !important;
  height: 4.5rem !important;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

/* The logo tracks the background actually visible behind it. */
.header-logo {
  display: block;
}

.header-logo .logo-main,
.header-logo .logo-tagline {
  fill: #fff !important;
  transition: fill 250ms ease;
}

.header-logo .logo-accent,
.navbar_wrapper[data-logo-background="light"] .header-logo .logo-accent {
  fill: #f4511e;
  transition: fill 250ms ease;
}

.navbar_wrapper[data-logo-background="light"] .header-logo .logo-main,
.navbar_wrapper[data-logo-background="light"] .header-logo .logo-tagline {
  fill: #05051e !important;
}

.footer-brand img {
  width: 12rem !important;
  height: auto !important;
  object-fit: contain;
}

/* Keep the unused accreditation block out of view. The homepage logo marquee
   and footprint sections remain visible as part of the supplied design. */
.section_logo-block {
  display: none !important;
}

a[href*="toggle-studio.com"] {
  display: none !important;
}

/* Use the supplied Lloyds Mall photo in the contact-page side panel. */
.contact-hero_img {
  background-image: url("/assets/images/contact-lloyds-mall.jpeg");
  background-position: center;
}

.back-to-top {
  width: 3.375rem;
  height: 3.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--main-orange);
  color: #fff;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease,
    background-color .2s ease;
  box-shadow: 0 .5rem 1.5rem rgba(5, 5, 30, .22);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #c93f18;
}

.back-to-top:focus-visible {
  outline: .1875rem solid #fff;
  outline-offset: .1875rem;
}

.back-to-top svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 767px) {
  .nav-brand {
    width: 9rem;
    min-width: 9rem;
  }

  .tranzport-logo {
    height: 3.75rem !important;
  }

  .back-to-top {
    width: 3rem;
    height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }

  .header-logo .logo-main,
  .header-logo .logo-accent,
  .header-logo .logo-tagline {
    transition: none;
  }
}

/* Keep brand link colors consistent before and after visiting. */
a:where(:link, :visited) { color: inherit; }