/* =====================================================================
   HAE Industrial brand layer — applied on top of the cloned Pye-Barker
   theme (Base + PageContent CSS). Source: "HAE Industrial Website Style
   Guide" (Aug/Sept 2026). Loaded after all theme CSS; selectors are
   prefixed with `html` so they win over Astro-scoped rules.
   Remove the <link> to this file in chunks/Base_*.mjs to revert.
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/hae/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

html:root {
  /* Brand palette */
  --hae-blue: #003b8b;         /* Motor Blue */
  --hae-blue-deep: #002c69;    /* Motor Blue hover/pressed */
  --hae-white: #ffffff;        /* System White */
  --hae-graphite: #5d5f66;     /* Graphite */
  --hae-alloy: #d4d4bf;        /* Alloy */
  --hae-alloy-tint: #eeeee5;   /* Alloy at ~45% on white — light band/surface */
  --hae-red: #b22222;          /* Signal Red */
  --hae-red-dark: #9c1e1e;     /* Signal Red, 12% darker (hover/focus) */
  --hae-brass: #c9a45a;        /* Brass Fitting */
  --hae-rule: #d3d4d6;         /* restrained Graphite border */
  /* body-text-2026-10-12 (Michael): body copy #212121 on light backgrounds, #FFFFFF on blue.
     Graphite stays the brand color for the CTA band background and borders. */
  --hae-text: #212121;
  --hae-text-on-blue: #ffffff;

  /* Remap the theme tokens */
  --pb-red: var(--hae-red);
  --pb-red-dark: var(--hae-red-dark);
  --pb-red-soft: var(--hae-alloy-tint);
  --pb-black: var(--hae-blue);
  --pb-ink: var(--hae-text);
  --pb-graphite: var(--hae-graphite);
  --pb-steel: #63656c;
  --pb-line: var(--hae-rule);
  --pb-mist: var(--hae-alloy-tint);

  --color-bg: var(--hae-white);
  --color-surface: var(--hae-alloy-tint);
  --color-bg-subtle: #f7f7f2;
  --color-text: var(--hae-text);
  --color-muted: var(--hae-text);
  --color-border: var(--hae-rule);
  --color-brand: var(--hae-blue);
  --color-brand-strong: var(--hae-blue-deep);
  --color-brand-soft: var(--hae-alloy-tint);
  --color-on-brand: var(--hae-white);
  --color-dark: var(--hae-blue);
  --color-on-dark: var(--hae-white);
  --color-on-dark-muted: var(--hae-text-on-blue);
  --color-brand-ring: color-mix(in srgb, var(--hae-blue) 25%, transparent);
  --color-danger: var(--hae-red);

  --font-display: "Archivo", Arial, Helvetica, sans-serif;
  --font-body: "Archivo", Arial, Helvetica, sans-serif;
  --font-heading: "Archivo", Arial, Helvetica, sans-serif;
  --font-weight-heading: 600;
  --font-weight-display: 700;
  --font-size-md: 1.125rem;
  --leading-normal: 1.55;
  --tracking-caps: 0.06em;
  --tracking-wide: 0.06em;
  --prose-width: 42rem;

  --diagonal-red: var(--hae-blue);
  --dot-grid: none;

  /* EmDash content blocks */
  --emdash-button-bg: var(--hae-red);
  --emdash-button-bg-hover: var(--hae-red-dark);
  --emdash-button-color: var(--hae-white);
  --emdash-pullquote-border: var(--hae-blue);
  --emdash-pullquote-color: var(--hae-blue);
}

/* ---------- Base type ---------- */
html body {
  font-family: var(--font-body);
  font-size: 1.125rem;          /* 18px primary copy */
  line-height: 1.55;
  color: var(--hae-text);
  font-weight: 400;
}
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: 0;
  color: var(--hae-blue);
}
html h1 { font-size: clamp(2.25rem, 1.65rem + 1.9vw, 3rem); line-height: 1.1; font-weight: 700; }
html h2 { font-size: clamp(1.875rem, 1.6rem + 0.85vw, 2.25rem); line-height: 1.15; font-weight: 700; }
html h3 { font-size: clamp(1.5rem, 1.4rem + 0.32vw, 1.625rem); line-height: 1.2; font-weight: 600; }
html h4 { font-size: clamp(1.1875rem, 1.15rem + 0.12vw, 1.25rem); line-height: 1.25; font-weight: 600; }
html:not(#_) .headline.headline { font-size: clamp(1.875rem, 1.6rem + 0.85vw, 2.25rem); line-height: 1.15; font-weight: 700; }
html:not(#_) .headline.headline .accent.accent.accent { color: var(--hae-red); }
html:not(#_) .lede.lede { font-size: 1.125rem; color: var(--hae-text); }

html ::selection { background: var(--hae-blue); color: #fff; }
html :focus-visible { outline: 3px solid var(--hae-blue); outline-offset: 2px; }
html:not(#_) .section-dark :focus-visible,
html:not(#_) .site-footer :focus-visible,
html:not(#_) .topbar :focus-visible,
html:not(#_) .page-hero :focus-visible,
html:not(#_) .cta-band :focus-visible,
html:not(#_) .industries-list :focus-visible,
html:not(#_) .mobile-nav :focus-visible { outline-color: #fff; }
html:not(#_) .skip-link.skip-link { background: var(--hae-blue); color: #fff; }

/* Eyebrows: the only place short all-caps labels are used */
html:not(#_) .eyebrow.eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem; line-height: 1.2; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hae-red);
}
html:not(#_) .section-dark .eyebrow.eyebrow,
html:not(#_) .page-hero .eyebrow.eyebrow,
html:not(#_) .eyebrow-light.eyebrow-light { color: var(--hae-alloy); }

/* Links in body copy */
html:not(#_) .prose a:not(.btn),
html:not(#_) .page-prose a:not(.btn),
html:not(#_) .prose-run a:not(.btn),
html:not(#_) .faq-answer a:not(.btn),
html:not(#_) .columns-body a:not(.btn) {
  color: var(--hae-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
html:not(#_) .prose a:not(.btn):hover, html:not(#_) .prose a:not(.btn):focus-visible,
html:not(#_) .page-prose a:not(.btn):hover, html:not(#_) .prose-run a:not(.btn):hover,
html:not(#_) .faq-answer a:not(.btn):hover, html:not(#_) .columns-body a:not(.btn):hover { color: var(--hae-red); }
html:not(#_) .section-dark .prose a:not(.btn), html:not(#_) .section-dark .columns-body a:not(.btn) { color: #fff; }
html:not(#_) .section-dark .prose a:not(.btn):hover, html:not(#_) .section-dark .columns-body a:not(.btn):hover { color: var(--hae-alloy); }

html:not(#_) .link-arrow.link-arrow {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 1rem; color: var(--hae-blue);
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
html:not(#_) .link-arrow.link-arrow:hover { color: var(--hae-red); }
html:not(#_) .card-body .link-arrow.link-arrow, html:not(#_) .location .link-arrow.link-arrow { font-size: 1rem; }

/* ---------- Buttons ---------- */
html:not(#_) .btn.btn {
  font-family: var(--font-body);
  text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  min-height: 44px; padding-inline: 22px;
  border-radius: 4px; border-width: 2px;
}
html:not(#_) .btn.btn-lg { font-size: 1.0625rem; min-height: 48px; padding-inline: 24px; }
html:not(#_) .btn.btn-sm { font-size: 1rem; min-height: 44px; padding-inline: 20px; }
/* Primary CTA — Signal Red */
html:not(#_) a.btn-primary.btn-primary, html:not(#_) .btn-primary.btn-primary {
  background: var(--hae-red); border-color: var(--hae-red); color: #fff;
}
html:not(#_) a.btn-primary.btn-primary:hover, html:not(#_) .btn-primary.btn-primary:hover,
html:not(#_) a.btn-primary.btn-primary:focus-visible, html:not(#_) .btn-primary.btn-primary:focus-visible {
  background: var(--hae-red-dark); border-color: var(--hae-red-dark); color: #fff;
}
/* Secondary CTA — Motor Blue outline on light surfaces */
html:not(#_) .btn-outline.btn-outline {
  background: transparent; border-color: var(--hae-blue); color: var(--hae-blue);
}
html:not(#_) .btn-outline.btn-outline:hover, html:not(#_) .btn-outline.btn-outline:focus-visible {
  background: var(--hae-blue); border-color: var(--hae-blue); color: #fff;
}
/* Secondary CTA on Motor Blue / Graphite */
html:not(#_) .section-dark .btn-outline.btn-outline, html:not(#_) .page-hero .btn-outline.btn-outline,
html:not(#_) .cta-band .btn-outline.btn-outline, html:not(#_) .mobile-nav .btn-outline.btn-outline,
html:not(#_) .btn-ghost-light.btn-ghost-light {
  background: transparent; border-color: #fff; color: #fff;
}
html:not(#_) .section-dark .btn-outline.btn-outline:hover, html:not(#_) .page-hero .btn-outline.btn-outline:hover,
html:not(#_) .cta-band .btn-outline.btn-outline:hover, html:not(#_) .mobile-nav .btn-outline.btn-outline:hover,
html:not(#_) .btn-ghost-light.btn-ghost-light:hover,
html:not(#_) .section-dark .btn-outline.btn-outline:focus-visible, html:not(#_) .page-hero .btn-outline.btn-outline:focus-visible,
html:not(#_) .cta-band .btn-outline.btn-outline:focus-visible, html:not(#_) .mobile-nav .btn-outline.btn-outline:focus-visible {
  background: #fff; border-color: #fff; color: var(--hae-blue);
}
html:not(#_) .btn-dark.btn-dark { background: var(--hae-blue); border-color: var(--hae-blue); color: #fff; }
html:not(#_) .btn-dark.btn-dark:hover { background: var(--hae-blue-deep); border-color: var(--hae-blue-deep); }
html:not(#_) .btn-light.btn-light { background: #fff; border-color: #fff; color: var(--hae-blue); }
html:not(#_) .btn-light.btn-light:hover { background: var(--hae-alloy); border-color: var(--hae-alloy); }

/* ---------- Topbar (utility) ---------- */
html:not(#_) .topbar.topbar { background: var(--hae-blue); color: var(--hae-text-on-blue); }
html:not(#_) .topbar.topbar a { color: var(--hae-text-on-blue); }
html:not(#_) .topbar.topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; }
html:not(#_) .topbar.topbar svg { color: var(--hae-text-on-blue); }

/* ---------- Header ---------- */
html:not(#_) .site-header.site-header { background: #fff; border-bottom: 1px solid var(--hae-rule); }
html:not(#_) .brand.brand { display: inline-flex; align-items: center; }
html:not(#_) .site-header .brand-img.brand-img {
  /* The approved SVG carries its own clear space inside its viewBox */
  width: 200px; height: auto; max-height: none; max-width: none; display: block;
  margin-block: -14px -18px;
}
html:not(#_) .nav-link.nav-link {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: 1rem; font-weight: 600; color: var(--hae-blue);
  background: transparent; position: relative;
}
html:not(#_) .nav-link.nav-link:hover, html:not(#_) .nav-item.open > .nav-link.nav-link {
  color: var(--hae-blue); background: transparent;
  text-decoration: underline; text-decoration-color: var(--hae-alloy);
  text-decoration-thickness: 2px; text-underline-offset: 0.5em;
}
html:not(#_) .nav-link.nav-link[aria-current="page"],
html:not(#_) .nav-item.is-current > .nav-link.nav-link {
  text-decoration: underline; text-decoration-color: var(--hae-red);
  text-decoration-thickness: 2px; text-underline-offset: 0.5em;
}
html:not(#_) .nav-link.nav-link:focus-visible { outline: 2px solid var(--hae-blue); outline-offset: 2px; }
html:not(#_) .submenu.submenu { border: 1px solid var(--hae-rule); border-top: 3px solid var(--hae-blue); background: #fff; }
html:not(#_) .submenu.submenu a { color: var(--hae-graphite); font-size: 1rem; }
html:not(#_) .submenu.submenu a:hover, html:not(#_) .submenu.submenu a:focus-visible { background: var(--hae-alloy-tint); color: var(--hae-blue); }
html:not(#_) .submenu.submenu a[aria-current="page"] { color: var(--hae-blue); box-shadow: inset 2px 0 0 var(--hae-red); }
html:not(#_) .menu-btn.menu-btn { color: var(--hae-blue); border-color: var(--hae-rule); }

/* Mobile menu — Motor Blue panel */
html:not(#_) .mobile-nav.mobile-nav { background: var(--hae-blue); border-top: 0; }
html:not(#_) .mobile-list.mobile-list > li { border-bottom: 1px solid rgba(255,255,255,.16); }
html:not(#_) .mobile-list.mobile-list a, html:not(#_) .mobile-list.mobile-list summary {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 1.0625rem; color: #fff;
}
html:not(#_) .mobile-list.mobile-list details ul a { font-weight: 400; color: var(--hae-alloy); }
html:not(#_) .mobile-list.mobile-list a:hover, html:not(#_) .mobile-list.mobile-list summary:hover,
html:not(#_) .mobile-list.mobile-list a[aria-current="page"] { color: var(--hae-alloy); }
html:not(#_) .mobile-list.mobile-list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hae-alloy); text-underline-offset: .25em; text-decoration-thickness: 2px; }

/* ---------- Footer ---------- */
html:not(#_) .site-footer.site-footer { background: var(--hae-blue); border-top: 4px solid var(--hae-brass); color: var(--hae-text-on-blue); }
html:not(#_) .site-footer .brand-img.brand-img { width: 200px; height: auto; max-height: none; max-width: none; display: block; margin-block: -14px -16px; margin-left: -12px; }
html:not(#_) .footer-blurb.footer-blurb { color: var(--hae-text-on-blue); font-size: 1rem; }
html:not(#_) .footer-col.footer-col h4 { color: #fff; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; font-weight: 600; }
html:not(#_) .footer-col.footer-col a { color: #fff; font-size: 1rem; }
html:not(#_) .footer-col.footer-col a:hover { color: var(--hae-alloy); text-decoration: underline; text-underline-offset: 0.18em; }
html:not(#_) .footer-locations.footer-locations li { color: var(--hae-text-on-blue); }
html:not(#_) .footer-locations.footer-locations strong { color: #fff; font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
html:not(#_) .footer-social.footer-social a { border-color: rgba(255,255,255,.4); color: #fff; }
html:not(#_) .footer-social.footer-social a:hover { background: #fff; border-color: #fff; color: var(--hae-blue); }
html:not(#_) .footer-bottom.footer-bottom { background: var(--hae-blue); color: var(--hae-text-on-blue); border-top: 1px solid rgba(255,255,255,.16); }
html:not(#_) .footer-legal.footer-legal a { color: var(--hae-text-on-blue); }
html:not(#_) .footer-legal.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- Home hero ---------- */
html:not(#_) .hero.hero { background: #fff; }
html:not(#_) .hero-bg.hero-bg, html:not(#_) .why-texture.why-texture { display: none; }
html:not(#_) .hero-slash.hero-slash {
  opacity: 1;
  background: var(--hae-blue) url("/hae/patterns/sm-lobe-pattern.svg") center / 900px auto repeat;
}
html:not(#_) .hero-slash.hero-slash::after { display: none; }
html:not(#_) .hero-headline.hero-headline {
  font-family: var(--font-heading);
  /* home-hero-font-2026-10-02: match the Products-page hero headline (Archivo 800, up to 56px) */
  font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -0.015em;
  text-transform: capitalize; /* short hero lines → Title Case */
  color: var(--hae-blue);
}
html:not(#_) .hero-headline.hero-headline .accent.accent.accent { color: var(--hae-red); }
html:not(#_) .hero-sub.hero-sub { color: var(--hae-text); font-weight: 500; font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); }
html:not(#_) .hero-body.hero-body { color: var(--hae-text); font-size: 1.125rem; }
html:not(#_) .hero-ctrl.hero-ctrl { border-color: var(--hae-rule); color: var(--hae-blue); background: #fff; }
html:not(#_) .hero-ctrl.hero-ctrl:hover, html:not(#_) .hero-ctrl.hero-ctrl:focus-visible { background: var(--hae-blue); border-color: var(--hae-blue); color: #fff; }
html:not(#_) .hero-dot.hero-dot { background: var(--hae-rule); }
html:not(#_) .hero-dot.hero-dot[aria-selected="true"], html:not(#_) .hero-dot.hero-dot.is-active { background: var(--hae-blue); }

/* Industries strip */
html:not(#_) .industries-list.industries-list { background: var(--hae-blue); }
html:not(#_) .industries-list.industries-list li + li { border-left-color: rgba(255,255,255,.14); }
html:not(#_) .industry.industry { color: #fff; }
html:not(#_) a.industry.industry:hover { background: rgba(255,255,255,.08); }
html:not(#_) .industry-icon.industry-icon { background: rgba(255,255,255,.12); color: var(--hae-alloy); }
html:not(#_) .industry-label.industry-label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1rem; }
html:not(#_) .industries-arrow.industries-arrow:hover, html:not(#_) .industries-arrow.industries-arrow:focus-visible { background: #fff; border-color: #fff; color: var(--hae-blue); }

/* Solutions / benefits / quotes */
html:not(#_) .benefit-icon.benefit-icon { border-color: var(--hae-blue); color: var(--hae-blue); background: #fff; }
html:not(#_) .benefit-label.benefit-label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--hae-blue); }
html:not(#_) .quote-card.quote-card { border-left-color: var(--hae-blue); }
html:not(#_) .quote-card.quote-card { border-top-color: var(--hae-blue); }
html:not(#_) .quote-mark.quote-mark, html:not(#_) .t-mark.t-mark { color: var(--hae-blue); }
html:not(#_) .stars.stars { color: var(--hae-red); }
html:not(#_) .quote-card-contacts.quote-card-contacts svg, html:not(#_) .quote-card-links.quote-card-links a svg { color: var(--hae-blue); }
html:not(#_) .quote-card-contacts.quote-card-contacts small { letter-spacing: 0.06em; }
html:not(#_) .quote-card-contacts.quote-card-contacts a { font-family: var(--font-body); font-weight: 600; color: var(--hae-blue); }
html:not(#_) .quote-card-links.quote-card-links a { font-size: 1rem; }
html:not(#_) .quote-card-links.quote-card-links a:hover { color: var(--hae-red); }
html:not(#_) .quote-card-top.quote-card-top p { font-size: 1rem; }

/* Cards */
html:not(#_) .card.card { border-color: var(--hae-rule); background: #fff; }
html:not(#_) .card.card:hover { border-color: var(--hae-graphite); }
html:not(#_) .card-body.card-body h3 { font-size: 1.25rem; line-height: 1.25; color: var(--hae-blue); }
html:not(#_) .card-body.card-body p { font-size: 1rem; line-height: 1.5; color: var(--hae-text); }
html:not(#_) .card-icon.card-icon { color: var(--hae-blue); }
html:not(#_) .f-icon.f-icon { background: var(--hae-blue); color: #fff; }
html:not(#_) .f-item.f-item p { font-size: 1rem; color: var(--hae-text); }
html:not(#_) .t-card.t-card { border-top-color: var(--hae-blue); }
html:not(#_) .t-card.t-card footer strong { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }

/* Why-choose-us — the page's one Motor Blue emphasis band */
html:not(#_) .section-dark.section-dark { background: var(--hae-blue); color: #fff; }
html:not(#_) .section-dark.section-dark h2, html:not(#_) .section-dark.section-dark h3, html:not(#_) .why-copy.why-copy h2 { color: #fff; }
html:not(#_) .section-dark .lede.lede { color: var(--hae-text-on-blue); }
html:not(#_) .why-copy.why-copy h2::after {
  content: ""; display: block; width: 180px; height: 45px; margin-top: 4px;
  background: url("/hae/patterns/brass-underline-1.svg") left center / contain no-repeat;
}
html:not(#_) .points.points li { color: #fff; }
html:not(#_) .points.points svg { color: var(--hae-brass); }
html:not(#_) .stats.stats li + li { border-left-color: rgba(255,255,255,.2); }
html:not(#_) .stat-value.stat-value { font-family: var(--font-heading); color: #fff; font-weight: 700; }
html:not(#_) .stat-label.stat-label { font-family: var(--font-body); color: var(--hae-text-on-blue); font-size: .875rem; letter-spacing: 0.06em; }

/* Contact band — Graphite so it doesn't stack with the blue band */
html:not(#_) .cta-band.cta-band { background: var(--hae-graphite); color: #fff; }
html:not(#_) .cta-icon.cta-icon { background: rgba(255,255,255,.14); }
html:not(#_) .cta-message.cta-message p { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; }
html:not(#_) .cta-contact.cta-contact { font-family: var(--font-body); color: #fff; font-weight: 600; }
html:not(#_) .cta-contact.cta-contact:hover { text-decoration: underline; text-underline-offset: .18em; }

/* Brand (distributor) strip */
html:not(#_) .brands-headline.brands-headline { color: var(--hae-text); font-size: .875rem; letter-spacing: 0.06em; }
html:not(#_) .brand-name.brand-name { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
html:not(#_) .brand.brand:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hae-blue); }

/* FAQ */
html:not(#_) .faq-item.faq-item summary { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--hae-blue); }
html:not(#_) .faq-item.faq-item summary svg { color: var(--hae-blue); }
html:not(#_) .faq-answer.faq-answer { color: var(--hae-text); }

/* Blog cards */
html:not(#_) .post-cats.post-cats a { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--hae-blue); background: var(--hae-alloy-tint); }
html:not(#_) .post-body.post-body h3 { font-family: var(--font-heading); color: var(--hae-blue); }
html:not(#_) .post-body.post-body h3 a:hover { color: var(--hae-red); }
html:not(#_) .post-excerpt.post-excerpt { font-size: 1rem; color: var(--hae-text); }
html:not(#_) .post-media-fallback.post-media-fallback { color: var(--hae-blue); }
html:not(#_) .latest.latest { background: var(--hae-alloy-tint); }

/* ---------- Interior page banners — Motor Blue field ---------- */
html:not(#_) .page-hero.page-hero { background: var(--hae-blue); color: #fff; }
html:not(#_) .page-hero-slash.page-hero-slash {
  opacity: 1;
  background: var(--hae-blue) url("/hae/patterns/sm-lobe-pattern.svg") center / 900px auto repeat;
}
html:not(#_) .page-hero.page-hero h1 { color: #fff; font-size: clamp(2.25rem, 1.65rem + 1.9vw, 3rem); line-height: 1.1; font-weight: 700; }
html:not(#_) .page-hero-intro.page-hero-intro { color: var(--hae-text-on-blue); font-size: 1.125rem; }
html:not(#_) .crumbs.crumbs ol { color: var(--hae-alloy); font-size: .875rem; letter-spacing: 0; text-transform: none; }
html:not(#_) .crumbs.crumbs a { color: var(--hae-alloy); text-decoration: underline; text-underline-offset: .18em; }
html:not(#_) .crumbs.crumbs a:hover, html:not(#_) .crumbs.crumbs [aria-current] { color: #fff; }

/* ---------- Prose (pages & posts) ---------- */
html:not(#_) .prose.prose p { color: var(--hae-text); }
html:not(#_) .prose.prose h2 { border-top: 2px solid var(--hae-alloy); }
html:not(#_) .prose.prose strong { color: inherit; }
html:not(#_) .prose.prose ul li::marker { color: var(--hae-blue); }
html:not(#_) .prose.prose blockquote { border-left-color: var(--hae-blue); background: var(--hae-alloy-tint); }
html:not(#_) .prose.prose th { font-family: var(--font-body); text-transform: none; letter-spacing: 0; background: var(--hae-alloy-tint); color: var(--hae-blue); }

/* ---------- Forms ---------- */
html:not(#_) .field.field label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1rem; color: var(--hae-blue); }
html:not(#_) .field.field label .req { color: var(--hae-red); }
html:not(#_) .field.field input, html:not(#_) .field.field textarea, html:not(#_) .field.field select {
  color: #2b2d31; background: #fff; border: 1px solid var(--hae-graphite); font-size: 1rem;
}
html:not(#_) .field.field input:focus, html:not(#_) .field.field textarea:focus, html:not(#_) .field.field select:focus {
  border-color: var(--hae-blue); box-shadow: 0 0 0 3px var(--color-brand-ring); outline: none;
}
html:not(#_) .contact-form-wrap.contact-form-wrap { border-top-color: var(--hae-blue); }
html:not(#_) .form-intro.form-intro, html:not(#_) .form-status.form-status { font-size: 1rem; }
html:not(#_) .contact-phone.contact-phone { font-family: var(--font-body); font-weight: 600; color: var(--hae-blue); }
html:not(#_) .contact-phone.contact-phone svg { background: var(--hae-blue); color: #fff; }
html:not(#_) .contact-phone.contact-phone:hover { color: var(--hae-red); }
html:not(#_) .locations.locations h2 { border-bottom-color: var(--hae-blue); }
html:not(#_) .location.location > svg { color: var(--hae-blue); }
html:not(#_) .location.location p { font-size: 1rem; }

/* Misc */
html:not(#_) .tool.tool svg:first-child { color: var(--hae-blue); }
html:not(#_) .tool.tool p { font-size: 1rem; }
html:not(#_) .media-placeholder.media-placeholder { font-family: var(--font-body); }
html:not(#_) .pb-gallery-arrow.pb-gallery-arrow:hover, html:not(#_) .pb-gallery-arrow.pb-gallery-arrow:focus-visible,
html:not(#_) .pb-press-lightbox__btn.pb-press-lightbox__btn:hover { background: var(--hae-blue); border-color: var(--hae-blue); }

@media (max-width: 760px) {
  html:not(#_) .site-header .brand-img.brand-img { width: 170px; margin-block: -12px -15px; }
  html:not(#_) .site-footer .brand-img.brand-img { width: 180px; margin-left: -10px; }
}

/* ---------- Follow-ups from preview review ---------- */
/* Short section headlines in Title Case (content is stored in sentence case) */
html:not(#_) .headline.headline { text-transform: capitalize; }
/* Long eyebrows (columns block) — no all caps per guide */
html:not(#_) .columns .eyebrow.eyebrow, html:not(#_) .columns-head .eyebrow.eyebrow { text-transform: none; letter-spacing: 0; }
/* Legacy Pye-Barker card photos are baked red duotones — neutralize until real photography is supplied */
html:not(#_) img[src*='/theme/pye-barker-img-'] { filter: grayscale(1) contrast(1.05); }
/* Header logo at the upper end of the 190-220px target */
html:not(#_) .site-header .brand-img.brand-img { width: 216px; margin-block: -16px -20px; }
@media (max-width: 760px) {
  html:not(#_) .site-header .brand-img.brand-img { width: 170px; margin-block: -12px -15px; }
}

html:not(#_) .card-body .link-arrow.link-arrow { font-size: .9375rem; }
html:not(#_) .site-footer .brand-img.brand-img { width: 216px; margin-block: -16px -18px; margin-left: -13px; }
html:not(#_) .footer-locations.footer-locations li { font-size: .9375rem; }
/* Page-banner eyebrows are long taglines — no all caps */
html:not(#_) .page-hero .eyebrow.eyebrow { text-transform: none; letter-spacing: 0; font-size: 1rem; }
/* Long-form headings follow the guide scale */
html:not(#_) .prose.prose h2 { font-size: clamp(1.875rem, 1.6rem + 0.85vw, 2.25rem); line-height: 1.15; font-weight: 700; }
html:not(#_) .prose.prose h3 { font-size: clamp(1.5rem, 1.4rem + 0.32vw, 1.625rem); line-height: 1.2; font-weight: 600; }
html:not(#_) .prose.prose h4 { font-size: clamp(1.1875rem, 1.15rem + 0.12vw, 1.25rem); line-height: 1.25; font-weight: 600; }
@media (max-width: 760px) {
  html:not(#_) .site-footer .brand-img.brand-img { width: 180px; margin-left: -11px; }
}
/* Keep the menu button right-aligned when the desktop nav is hidden */
html:not(#_) .header-actions { margin-left: auto; }
/* Generic dot-grid texture is not an approved pattern */
html:not(#_) .dot-grid, html:not(#_) .page-hero-texture { background-image: none; }

/* ===== Website review revisions, Oct 6 2026 (Michael / Bryan annotated PDFs) ===== */
html:root { --hae-gray-media: #e7e8ea; }

/* Home hero: larger lobe artwork, no skew. The panel keeps its diagonal edge via
   clip-path, so the pattern itself is never distorted. */
html:not(#_) .hero-slash.hero-slash {
  transform: none;
  top: 0; right: 0; height: 100%; width: 50%;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--hae-blue) url("/_emdash/api/media/file/01M48B06ZFM70FRY7MCJZ3ZRMB.png") center / cover no-repeat;
}
@media (max-width: 960px) {
  html:not(#_) .hero-slash.hero-slash { width: 100%; right: 0; opacity: .12; clip-path: none; }
}
/* Keep the company-name line (Formerly Pye-Barker Supply Co.) on one line */
html:not(#_) .hero-sub.hero-sub { max-width: none; white-space: nowrap; }
@media (max-width: 360px) { html:not(#_) .hero-sub.hero-sub { white-space: normal; } }

/* Brass Fitting accents: home stats, benefit labels in title case */
html:not(#_) .stat-value.stat-value { color: var(--hae-brass); }
html:not(#_) .benefit-label.benefit-label { text-transform: capitalize; }

/* Manufacturer strip: label as a header above one legible row of logos */
html:not(#_) .brands-inner.brands-inner { flex-direction: column; align-items: center; gap: 18px; padding-block: 36px; }
html:not(#_) .brands-headline.brands-headline { white-space: normal; text-align: center; font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hae-blue); margin: 0; }
html:not(#_) .brands-list.brands-list { flex: 0 1 auto; width: 100%; flex-wrap: nowrap; justify-content: center; gap: 24px 48px; padding: 0; margin: 0; }
html:not(#_) .brands-list.brands-list > li { flex: 0 1 auto; }
html:not(#_) .brands .brand.brand img { height: auto; max-height: 96px; width: auto; max-width: 100%; }
html:not(#_) .brands .brand.brand:hover, html:not(#_) .brands .brand.brand:focus-visible { transform: scale(1.04); }
@media (max-width: 760px) {
  html:not(#_) .brands-list.brands-list { flex-wrap: wrap; gap: 20px 28px; }
}

/* Blog cards: gray behind images, no Alloy behind the blog highlight section,
   topic tags as text + icon instead of button-like pills */
html:not(#_) .latest.latest { background: #fff; border-top: 1px solid var(--hae-rule); }
html:not(#_) .post-media.post-media { background: var(--hae-gray-media); }
html:not(#_) .post-cats.post-cats { gap: 4px 16px; }
html:not(#_) .post-cats.post-cats a {
  background: none; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--hae-blue);
}
html:not(#_) .post-cats.post-cats a::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: var(--hae-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:not(#_) .post-cats.post-cats a:hover { color: var(--hae-red); text-decoration: underline; text-underline-offset: .18em; }

/* Interior page banners: same larger, unskewed lobe artwork */
html:not(#_) .page-hero-slash.page-hero-slash {
  transform: none; top: 0; right: 0; height: 100%; width: 34%;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--hae-blue) url("/_emdash/api/media/file/01M48B06ZFM70FRY7MCJZ3ZRMB.png") center / cover no-repeat;
}

/* Oct 6 review: shorter CTA strip - give the message the free width so it sits on two lines, contacts stay on the same row */
@media (min-width: 1280px) {
  html:not(#_) .cta-band .cta-inner.cta-inner { flex-wrap: nowrap; gap: 24px; }
  html:not(#_) .cta-band .cta-message.cta-message { flex: 1 1 0; min-width: 0; }
  html:not(#_) .cta-band .cta-message.cta-message p { max-width: none; }
  html:not(#_) .cta-band .cta-contacts.cta-contacts { flex: 0 0 auto; gap: 24px; }
  html:not(#_) .cta-band .cta-message.cta-message { gap: 12px; }
}


/* justify-posts-2026-10-09: blog post body text justified on tablet/desktop (Mark, via Michael).
   Phones keep left alignment: justified text in a narrow column opens wide gaps between words. */
@media (min-width: 768px) {
  .post-prose p,
  .post-prose li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}


/* card-fit-2026-10-12 (Michael): homepage Industrial Solutions cards show the whole machine.
   Same 4:3 frame, white background and padding on all six; image is contained, never cropped or stretched. */
html.home:not(#_) .cards .card-media.card-media { background: #fff; padding: 14px 16px; border-bottom: 1px solid var(--hae-rule); }
html.home:not(#_) .cards .card-media.card-media img { object-fit: contain; object-position: center; width: 100%; height: 100%; }
@media (max-width: 640px) {
  html.home:not(#_) .cards .card-media.card-media { padding: 12px; }
}

/* hero-align-2026-10-12 (Michael/Erin): on desktop the blue hero panel ends at the same right edge as the
   industries bar and the 1200px content column, instead of running to the window edge. Balances the white
   space left and right on wide screens (1920x1080). Tablet/phone (<=960px) keep the faded full-width pattern. */
@media (min-width: 961px) {
  html.home:not(#_) .hero .hero-slash.hero-slash { left: 50%; width: auto; right: max(0px, calc((100% - 1200px) / 2)); }
}