/* Shared branding: each homepage section receives a decorative VP watermark. */
main > section { position: relative; isolation: isolate; overflow: hidden; }
main > section::before {
  content: "";
  position: absolute;
  left: calc(50% - 650px);
  top: 5px;
  width: 640px;
  height: 690px;
  background-image: url("lettering-flat.png");
  background-repeat: no-repeat;
  background-size: 1440px auto;
  background-position: -65px -130px;
  opacity: .09;
  filter: grayscale(1) brightness(.45) sepia(1) saturate(3) hue-rotate(160deg);
  pointer-events: none;
  z-index: -1;
}
main > section > * { position: relative; }
@media (max-width: 760px) {
  main > section::before {
    left: auto;
    right: -65px;
    top: 40px;
    width: 340px;
    height: 370px;
    background-size: 765px auto;
    background-position: -35px -69px;
    opacity: .07;
  }
}

/* Slightly larger primary logo, with proportional mobile sizes. */
header .brand-photo { width: 112px; height: 112px; }
@media (max-width: 760px) { header .brand-photo { width: 80px; height: 80px; } }
@media (max-width: 380px) { header .brand-photo { width: 68px; height: 68px; } }

/* High-contrast yellow primary call button. */
.hero .button { background: #ffed00; color: #102e49; }
.hero .button:hover { background: #e6d500; }
.hero .button:focus-visible { outline-color: #102e49; }

/* Header call link blends with the header while keeping clear white text. */
header nav .button { background: var(--navy); color: #fff; }
header nav .button:hover { background: #1a405e; }
header nav .button:focus-visible { outline-color: #ffed00; }

/* Footer call button matches the navy contact section. */
.contact .button { background: var(--navy); color: #fff; }
.contact .button:hover { background: #1a405e; }
.contact .button:focus-visible { outline-color: #ffed00; }