/* Small production corrections that should win over dynamically loaded sync styles. */
.portrait-placeholder img {
  object-position: 20% center !important;
}

/* Make portfolio image hover zoom feel gradual instead of snapping. */
@media (hover: hover) and (pointer: fine) {
  .motion-ready .project-media img {
    transition: transform 720ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease !important;
  }
}

/* Keep contact labels available to assistive technology without showing them visually. */
.contact-form .form-field label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Use the same Montserrat voice inside the contact fields as the rest of the interface. */
.contact-form .form-field input,
.contact-form .form-field textarea {
  font-family: Montserrat, sans-serif !important;
  font-weight: 500;
  color: #34383f;
}

.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  color: #747b86;
  opacity: 1;
}

/* Keep the form compact now that the visible field labels are gone. */
.contact-form {
  min-height: 0 !important;
  padding-bottom: 24px !important;
}

.contact-form .form-status:empty {
  display: none;
}

/* Balance the desktop contact section so the space below the form matches the 80px top padding. */
@media (min-width: 721px) {
  .contact-section {
    min-height: 0 !important;
    padding: 80px 0 !important;
  }
}

/* Draw a restrained underline beneath navigation links on hover/focus. */
.desktop-nav a,
.footer-nav a,
.mobile-menu a {
  position: relative;
}

.desktop-nav a::after,
.footer-nav a::after,
.mobile-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .9;
  transition: transform 340ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover::after,
  .footer-nav a:hover::after {
    transform: scaleX(1);
  }
}

.desktop-nav a:focus-visible::after,
.footer-nav a:focus-visible::after,
.mobile-menu a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav a::after,
  .footer-nav a::after,
  .mobile-menu a::after {
    transition: none;
  }
}

@media (max-width: 720px) {
  .portrait-placeholder img {
    object-position: 20% center !important;
  }

  .work-tabs {
    justify-content: flex-start !important;
    gap: 24px !important;
  }

  #tab-digital,
  #tab-multimedia,
  #tab-brand {
    width: auto !important;
  }

  #tab-digital::after,
  #tab-multimedia::after,
  #tab-brand::after {
    width: 100% !important;
  }

  .mobile-menu a::after {
    right: auto;
    width: max-content;
    min-width: 0;
  }
}