html, body {
  min-height: 100%;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}

body.drawer-open {
  overflow-y: auto !important;
}

a, button, [role="button"] {
  touch-action: manipulation;
}

.footerunder__page,
.footerunder__spLink {
  cursor: pointer;
  text-decoration: underline transparent;
  text-underline-offset: 0.22em;
  transition: color 160ms ease, text-decoration-color 160ms ease, transform 160ms ease;
}

.footerunder__page:hover,
.footerunder__spLink:hover,
.footerunder__page:focus-visible,
.footerunder__spLink:focus-visible {
  color: #e15169 !important;
  text-decoration-color: currentColor;
  transform: translateX(4px);
}

.footerunder__page:focus-visible,
.footerunder__spLink:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

#about, #service, #works, #effects, #family, #contact {
  scroll-margin-top: 96px;
}

/* Keep the careers callout optically centered at every viewport height. */
.portfolioCareers {
  display: flex !important;
  align-items: center !important;
  min-height: 460px;
}
.portfolioCareers__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center !important;
  gap: clamp(32px, 7vw, 110px);
}
.portfolioCareers__copy,
.portfolioCareers__action {
  align-self: center !important;
  margin-block: 0 !important;
}
.portfolioCareers__action {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 760px) {
  .portfolioCareers { min-height: 520px; }
  .portfolioCareers__inner { width: min(100% - 32px, 560px); grid-template-columns: 1fr; gap: 28px; }
}