/* HAVENMARK — October 2026 combined header, ticker & gold heading update.
   This stylesheet is intentionally added *after* styles.css; no other site design is changed. */

/* Navy ticker with readable, champagne-gold text */
html body .ticker {
  background: #061C37 !important;
  color: #F2CC76 !important;
  border-bottom: 2px solid #C69A3C !important;
}
html body .ticker .ticker-track span {
  color: #F2CC76 !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}

/* Make the BRAND stretch to the phone number with approx 1 inch of open space.
   Keep the metallic H at its natural proportions; expand ONLY the wording image. */
html body .tophead {
  display: flex; align-items: center;
  justify-content: space-between; gap: 96px;
}
html body .tophead a.havenmark-lockup {
  display: flex; flex: 1 1 0; min-width: 0;
  align-items: center; align-self: center;
  line-height: 0; text-decoration: none; white-space: nowrap;
}
html body .tophead .havenmark-symbol {
  display: block; height: 108px; width: auto;
  min-width: 0; flex: 0 0 auto; object-fit: contain;
}
html body .tophead .havenmark-wordmark {
  display: block; flex: 1 1 0; min-width: 0; width: 100%;
  height: 108px; object-fit: fill; /* stretch words ONLY */
}
html body .tophead .header-facts { flex: 0 0 auto; }

/* Metallic gold, matching the Havenmark symbol */
html body .havenmark-gold-heading {
  color: #B88622;
  background: linear-gradient(180deg,#F7DE9D 0%,#D4AA52 44%,#A87519 100%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* Tablet and smaller laptop: phone stays available, brand expands to available width. */
@media (max-width: 1200px) {
  html body .tophead { gap: 64px; }
  html body .tophead .havenmark-symbol,
  html body .tophead .havenmark-wordmark { height: 84px; }
}
@media (max-width: 980px) {
  html body .tophead { gap: 42px; }
  html body .tophead .havenmark-symbol,
  html body .tophead .havenmark-wordmark { height: 74px; }
}
@media (max-width: 640px) {
  html body .tophead { gap: 12px; }
  html body .tophead .havenmark-symbol,
  html body .tophead .havenmark-wordmark { height: clamp(38px, 11vw, 65px); }
  html body .tophead .header-facts { flex-shrink: 0; }
}
@media (max-width: 370px) {
  html body .tophead .havenmark-symbol,
  html body .tophead .havenmark-wordmark { height: 35px; }
}