body #sanbo-header.sb-header {
  padding-inline: 5%;
  color: #f2f3f4;
}

body #sanbo-header.sb-header:not(.over-hero) {
  border-bottom: 1px solid #ffffff20;
  background: #272b2f;
  box-shadow: 0 4px 16px #171a1e16;
  backdrop-filter: none;
}

body #sanbo-header.sb-header::after {
  display: none;
}

body #sanbo-header.sb-header .sb-header-inner {
  max-width: 1660px;
}

body #sanbo-header.sb-header nav a {
  color: #d2d6da;
}

body #sanbo-header.sb-header.over-hero nav a {
  text-shadow: 0 1px 6px #000a;
}

body #sanbo-header.sb-header nav a:is(:hover, [aria-current]) {
  color: #fff;
}

body #sanbo-header.sb-header nav a::after {
  bottom: 7px;
  border-radius: 1px;
  background: #e2e5e8;
}

body #sanbo-header.sb-header nav a:focus-visible {
  outline-offset: -2px;
}

body #sanbo-header.sb-header .sb-contact {
  min-height: 44px;
  height: auto;
  padding: 9px 20px;
  border: 1px solid #c9cdd1;
  border-radius: 999px;
  background: #e8eaed;
  box-shadow: none;
  color: #24282c !important;
  font-weight: 600;
  transition: background-color .2s, border-color .2s;
}

body #sanbo-header.sb-header .sb-contact::after {
  display: none;
}

body #sanbo-header.sb-header .sb-contact:is(:hover, :focus-visible, :active) {
  transform: none;
  border-color: #fff;
  background: #fff;
  box-shadow: none;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer {
  --sb-line: #ffffff24;
  padding: 58px 5% 24px;
  background: #272b2f;
  color: #f2f3f4;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-cut {
  opacity: .65;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-logo-light {
  display: none;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-logo-dark {
  display: block;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-brand {
  width: 132px;
  height: 78px;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer :is(.sb-footer-top, .sb-footer-bottom) {
  max-width: 1660px;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-top {
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: 30px;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-top h2 {
  margin-bottom: 14px;
  color: #f2f3f4;
  font-size: 14px;
  font-weight: 600;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-top .sb-footer-project h2 {
  font-size: 20px;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer :is(p, nav a, .sb-footer-project > a, .sb-footer-bottom) {
  color: #cbd0d4;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer :is(.sb-services, .sb-footer-project > span) {
  color: #aeb5bb;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-brand p {
  margin-block: 14px 10px;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer nav a {
  margin-block: 10px;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer :is(a, button):hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .22em;
}

body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-bottom {
  font-size: 12px;
}

@media (max-width: 900px) {
  body #sanbo-header.sb-header .sb-header-inner {
    height: auto;
    min-height: 0;
    padding-block: 8px 0;
    row-gap: 0;
    column-gap: 12px;
  }

  body #sanbo-header.sb-header nav {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
}

@media (max-width: 639px) {
  body #sanbo-header.sb-header,
  body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer {
    padding-inline: 20px;
  }

  body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer {
    padding-top: 50px;
  }

  body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer :is(.sb-footer-brand, .sb-footer-project) {
    grid-column: 1 / -1;
  }

  body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-project {
    padding: 16px 0 0;
    border-top: 1px solid var(--sb-line);
  }

  body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-bottom {
    gap: 8px 20px;
  }

  body:has(#sanbo-header.sb-header) #sanbo-footer.sb-footer .sb-footer-bottom > span {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #sanbo-header.sb-header .sb-contact {
    transition: none;
  }
}