/* Shared FillFast branding. The SVG assets contain outlined lettering. */
.brand-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  flex-shrink: 0;
  max-width: 100%;
  color: #2e4d59;
  text-decoration: none;
}

.brand-link:focus-visible {
  outline: 3px solid #cf6a3e;
  outline-offset: 5px;
  border-radius: 4px;
}

.brand-icon {
  display: block;
  flex: none;
  width: 40px;
  height: auto;
}

.brand-name {
  display: block;
  font: 700 24px/1.1 'Manrope', Arial, sans-serif;
  letter-spacing: -1px;
}

.brand-copy { display: block; }
.brand-tagline {
  display: block;
  margin-top: 5px;
  color: #52616b;
  font: 400 12px/1.4 'Manrope', Arial, sans-serif;
}

.brand-logo {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
}

.site-footer .brand-logo { width: 170px; }
.branded-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.branded-heading > div { min-width: 0; }
.branded-heading h1 { overflow-wrap: anywhere; }
.response-ui .public-header { display: flex; align-items: flex-start; gap: 10px; }
.response-ui .brand-icon { width: 34px; }

@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; justify-content: center; }
  .site-header nav { flex-wrap: wrap; justify-content: center; width: 100%; }
  .site-header .brand-logo { width: 184px; }
  .site-footer .brand-logo { width: 150px; }
  .brand-name { font-size: 22px; }
  .brand-tagline { font-size: 11px; }
}