/* Shared typography; loaded after the page styles.
   Add supplied Gotham/Tusker webfonts with @font-face before these rules.
   Until then, local font families are preferred and fallbacks stay available. */
:root {
  --font-body: "Gotham", "Barlow", Arial, sans-serif;
  --font-display: "Tusker Grotesk", "Tusker", "Barlow Condensed", Impact, sans-serif;
}
body,
button,
input,
select,
textarea,
nav,
label,
summary,
h3,
h4,
.eyebrow,
.priority-services h2.eyebrow,
.feature-kicker,
.project-kicker,
.number,
.care-number,
.button,
.text-link,
.feature-link,
.project-cta,
.post-caption h3,
.lightbox-caption h3,
.image-tag,
.engine-label > span {
  font-family: var(--font-body);
}
/* Display type is reserved for large headings and featured figures. */
h1,
h2,
.service-feature h3,
.service-priority h3,
.priority-service h3,
.catalog-service h3,
.project-copy h3,
.showcase-card h3,
.classic-caption h3,
.catalog-cover-caption strong,
.catalog-parts-visual > span,
.marea-power > strong,
.catalog-power strong,
.page-catalog #quote h3,
.ticker,
.ticker-item,
.engine-label,
.big-c {
  font-family: var(--font-display);
}

/* SVG arrows remain identical on desktop, Android and iOS. */
.link-arrow {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  vertical-align: -.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-art .button {
  background: #287a14;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
}
.hero-art .button:hover { background: #246c12; }
.hero-art .button > span { color: #fff; }
@media (max-width: 720px) {
  .hero.hero-art .actions { gap: 8px; }
  .hero-art .button {
    width: 100%;
    min-height: 62px;
    padding: 14px 20px;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
  }
  .hero-art .button > span { width: 26px; height: 26px; }
  .hero-art .button .link-arrow { width: 23px; height: 23px; }
  .hero-art .text-link { font-size: 15px; padding: 16px 0; }
}