/* abvolt brand font update
   Adds the Abvolt Extended font in a few places and the ABVOLT wordmark in the hero.
   Colors, layout, headlines, paragraphs, buttons and cards stay as they are. */

@font-face {
  font-family: "Abvolt Extended";
  src: url("../fonts/AbvoltExtended-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Abvolt Extended";
  src: url("../fonts/AbvoltExtended-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root { --abv-display: "Abvolt Extended", "Eurostile", "Michroma", system-ui, sans-serif; }

/* Site-wide: brand font on section headlines (face is caps-only and very wide, so body copy keeps the original font) */
html body h2, html body h3 { font-family: var(--abv-display) !important; font-weight: 400; letter-spacing: 0.02em; }

/* ---- Where the brand font makes sense: short, label-like text ---- */

/* Top nav links (About, Areas, Insights, Partners). Only at wide screens: the extended face
   makes the centered link group too wide to clear the phone pill below ~1180px. */
@media (min-width: 1280px) {
.abv-nav a:not(.abv-phone) {
  font-family: var(--abv-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem !important;
}
}

/* Phone pill: kept at the original site font and size (brand rule removed at client request) */

/* Hero pills + glass intro card: brand font, bubbles locked to their original size */
.hero-cta-group .chrome-btn { font-family: var(--abv-display) !important; height: 58.5px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 10px !important; letter-spacing: 0.04em; -webkit-text-stroke: 0.45px currentColor; }
.hero-cta-group a[href="#electrical"] { width: 150px; }
.hero-cta-group a[href="#smart"] { width: 198px; }
.hero-glass h1 { font-family: var(--abv-display) !important; font-weight: 400; font-size: 13px !important; line-height: 21.45px !important; letter-spacing: 0.02em !important; -webkit-text-stroke: 0.5px currentColor; }
.hero-glass p { font-family: var(--abv-display) !important; font-size: 9.5px !important; line-height: 19.5px; letter-spacing: 0.04em; -webkit-text-stroke: 0.35px currentColor; }

/* Service card titles and their 01-04 numbers (same width gate: narrow cards below 1280px) */
@media (min-width: 1280px) {
.abv-card-title {
  font-family: var(--abv-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem !important;
  white-space: nowrap;
}
}

/* Tagline */
.abv-tagline {
  font-family: var(--abv-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-wrap: balance;
}

/* ---- Hero: ABVOLT centered with the tagline below ---- */
.abv-hero-brand {
  position: absolute;
  left: 50%;
  top: clamp(96px, 16vh, 170px);        /* below the nav, above the mongoose */
  transform: translateX(-50%);
  width: min(620px, 78vw);
  text-align: center;
  color: #0d0d0d;
  pointer-events: none;                 /* never blocks the nav or pills */
  z-index: 2;
}
.abv-hero-wordmark { display: block; width: 100%; height: auto; filter: drop-shadow(1px 0 0 #0d0d0d) drop-shadow(-1px 0 0 #0d0d0d) drop-shadow(0 1px 0 #0d0d0d) drop-shadow(0 -1px 0 #0d0d0d); }
.abv-hero-wordmark .abv-node { fill: #ff9a2e; }   /* amber, same as the mongoose's eye */
.abv-hero-brand .abv-tagline {
  margin: 0.9em 0 0;
  color: #3b434b;
  font-size: clamp(0.62rem, 1.05vw, 0.9rem);
}
@media (max-height: 700px) {
  .abv-hero-brand { top: 72px; width: min(400px, 60vw); }
}
@media (max-width: 600px) {
  .abv-hero-brand { top: 88px; width: 86vw; }
  .abv-hero-brand .abv-tagline { letter-spacing: 0.14em; }
}
/* Mobile: pills sit in the gap between the tagline and the mongoose instead of under the wordmark */
@media (max-width: 768px) {
  .hero-cta-group { position: absolute; left: 50%; top: calc(88px + 13vw + 48px); transform: translateX(-50%) !important; width: max-content; }
}
@media (max-width: 380px) {
  .hero-cta-group { gap: 8px !important; }
  .hero-cta-group a[href="#electrical"] { width: 130px; }
  .hero-cta-group a[href="#smart"] { width: 176px; }
}