/* ==========================================================================
   HAL WINSLOW INSURANCE AGENCY  -  the few things that differ from site.css

   site.css is the ColoradoHealth.com stylesheet, copied over unchanged, so
   the two sites keep the same look. Everything that is Winslow-only lives
   here: the coffee-cup logo, two brokers in the header instead of one phone
   number, one quote card instead of three, and three information boxes.
   ========================================================================== */

/* --- the coffee-cup logo ---------------------------------------------------
   The logo has a white background of its own, so it sits on a white rounded
   tile rather than straight on the mountain photo. */
.brand img {
  width: 190px;
  margin: 0 auto;
  padding: 8px 10px 6px;
  background: #fff;
  border-radius: 14px;
  filter: none;
  box-shadow: 0 8px 20px rgba(0, 20, 45, .30);
}
.brand .serving {
  margin-top: 10px;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.2;
  letter-spacing: .01em;
}

/* --- Hal and Todd, side by side in the header ----------------------------- */
.calls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(18px, 3vw, 44px);
}
.calls .call { margin-right: 0; }
.call .role { font-size: clamp(13px, 1vw, 15px); font-weight: 800; margin-bottom: 4px; }
.call .phone { font-size: clamp(22px, 1.75vw, 27px); }
.call .email { font-size: clamp(16px, 1.2vw, 19px); }

h1.headline { margin-top: 44px; }

/* --- one quote card, kept card-sized and centred -------------------------- */
.cards.single {
  grid-template-columns: minmax(0, 440px);
  justify-content: center;
}

/* --- the bar under the photo: what the agency covers ---------------------- */
.address span { white-space: nowrap; }

/* --- three information boxes of equal width ------------------------------- */
@media (min-width: 1000px) {
  .info-boxes { grid-template-columns: 1.3fr 1fr 1fr; }
}
.box .who { margin: -8px 0 12px; color: #5d7185; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.box p:last-child { margin-bottom: 0; }

/* --- phones ---------------------------------------------------------------- */
@media (max-width: 760px) {
  .brand img { width: 150px; }
  .brand .serving { font-size: 15px; }
  .call .role { color: #fff; }
  h1.headline { margin-top: 22px; }
  /* Two brokers make the header taller than ColoradoHealth's, so the photo
     has to reach further down before it fades to white. */
  #hero { --photo-band: 440px; }
  .cards.single { grid-template-columns: 1fr; }
}
@media (max-width: 374px) {
  #hero { --photo-band: 500px; }
}