/* ==========================================================================
   Primary Services - page styles
   The page reuses the shared why / srv / caps / cta blocks, so there is very
   little here: a page hero variant and one chip that behaves as a link.
   ========================================================================== */

/* A chip that is actually a link out to another page. */
.chip--link {
  border-color: rgba(26, 109, 255, 0.45);
  color: var(--nv-blue-bright);
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.chip--link:hover {
  background: var(--nv-blue);
  border-color: var(--nv-blue);
  color: #fff;
}

/* warehouse.jpg is a 1600x314 letterbox strip cut for a band, not a hero. On a
   390px phone it showed 10% of the frame, so the hero now uses office.jpg,
   which is close to 4:3 and survives a tall crop. */
.hero--page .hero__photo img { object-position: 50% 30%; }

@media (max-width: 62rem) {
  .hero--page .hero__photo img { object-position: 50% 22%; }
}