/* Typography inspired by the supplied brand guide.
   Google Sans is the specified body family. Fraunces, Montserrat and
   Yellowtail are visual substitutes for the unavailable named font files. */
:root {
  --font-headline: "Fraunces", Georgia, serif;
  --font-subheading: "Montserrat", Arial, sans-serif;
  --font-body: "Google Sans", Arial, sans-serif;
  --font-accent: "Yellowtail", cursive;
}
body, input, select, textarea, button {
  font-family: var(--font-body);
}
body { font-weight: 500; }
h1, h2 {
  font-family: var(--font-headline);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: 1.12;
  overflow-wrap: break-word;
}
h3, .eyebrow, .nav-links, .links, .site-nav,
.nav-cta, .primary-button, .secondary-button, .button, .btn,
button, .icon-strip a, .trust-band strong, .status-panel strong {
  font-family: var(--font-subheading);
  font-weight: 800;
}
h3, .eyebrow, .nav-links, .links, .site-nav,
.nav-cta, .primary-button, .secondary-button, .button, .btn, button {
  text-transform: uppercase;
  letter-spacing: .035em;
}
h3 { line-height: 1.3; }
.eyebrow { letter-spacing: .14em; }
.nav-links, .links, .site-nav, .nav-cta, .primary-button,
.secondary-button, .button, .btn, button { font-size: .875rem; }
.nav-links, .links { flex-wrap: wrap; }
.main-nav, .nav { flex-wrap: wrap; }
.hero h1, .hero-copy h1, .page-hero h1, .detail-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.section-heading h2, .locations h2, .why-section h2,
.contact-section h2, .business-lines h2, .faq-section h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
}
.heritage-note {
  font-family: var(--font-accent);
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}
.hero > *, .locations > *, .why-section > *, .contact-section > *,
.status-panel, .service-card, .line-card, .difference-card > * { min-width: 0; }
@media (max-width: 620px) {
  .hero h1, .hero-copy h1, .page-hero h1, .detail-hero h1 {
    font-size: clamp(1.875rem, 8vw, 2.375rem);
  }
  .nav-links, .links { gap: 12px 16px; }
  .heritage-note { font-size: 1.375rem; }
}

/* Brand-sheet graphics are displayed through individual CSS sprite windows. */
.status-panel > .status-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #e8e2d9;
}
.status-panel .status-copy { flex: 1; min-width: 0; }
.status-panel .status-copy strong { color: var(--ink); line-height: 1.3; margin-bottom: 6px; }
.status-panel .status-copy > span { color: var(--muted); }
.status-panel .brand-graphic {
  flex: 0 0 66px;
  width: 66px;
  height: 64px;
  display: grid;
  place-items: center;
  mix-blend-mode: multiply;
}
.brand-graphic::before {
  content: "";
  display: block;
  background-image: url("assets/redline-supporting-graphics.jpeg");
  background-repeat: no-repeat;
  background-size: 168.84px 212.52px;
}
.brand-graphic--flame::before {
  width: 42.7px; height: 63px;
  background-position: -10.5px -88.2px;
}
.brand-graphic--drop::before {
  width: 42px; height: 62.3px;
  background-position: -103.6px -23.1px;
}
.brand-graphic--air-mover::before {
  width: 65.8px; height: 60.2px;
  background-position: -58.8px -135.8px;
}
@media (max-width: 620px) {
  .status-panel > .status-card { gap: 12px; padding: 18px 14px; }
  .status-panel .brand-graphic { flex-basis: 50px; width: 50px; }
  .brand-graphic::before { transform: scale(.75); }
  .status-panel .status-copy strong { font-size: 1.125rem; }
}