/* wj-hero-2026.css — THE web-jive.com hero. One source for the art and the look (2026-09-25).

   CHANGE THE HERO ART: point --wj-hero-img at the new file. Upload it to /assets/img/hero/ under a
   NEW filename (the filename is the cache-bust), then update the one <link rel="preload" as="image">
   in /index.html's <head> so the homepage keeps preloading its LCP background.

   CHANGE THE HERO LOOK: edit the rules below. They are wj-home-2026.css's hero rules, ported
   verbatim (same order, same media queries); only the selector is widened with :is(), which keeps
   the original specificity. The page stylesheets no longer carry any .hero rules.

   A NEW 2026 PAGE: add its namespace to the :is() lists and link this sheet directly BEFORE the
   page's own stylesheet.

   Who uses what:
     .wj-hp .wj-ab .wj-ct .wj-wh .wj-wd .wj-cw   the full hero (home, about, 3 contact pages,
                                                 hosting, web design, copywriting)
     .wj-csh   case-study listings — the shared frame (art, scrim, orange rule, badges, H1); its
               sub/trust/CTA sizes and the --compact H1 stay in wj-cases-2026.css
     --wj-hero-img only: case-study posts (wj-post-hero-2026.css), /arkansas-seo/ and /locations/
               (inline <style>) — their layout is their own. */
:root{ --wj-hero-img: url("/assets/img/hero/wj-hero-bg.webp"); }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero{ position: relative; background: center top / cover no-repeat rgb(11, 11, 13); background-image: var(--wj-hero-img); color: rgb(255, 255, 255); padding: 80px 0px 0px; overflow: hidden; text-align: center; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero::before{ content: ""; position: absolute; inset: 0px; background: radial-gradient(at 50% 45%, rgba(11, 11, 13, 0.55) 0%, rgba(11, 11, 13, 0.15) 45%, transparent 70%); pointer-events: none; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero .wrap{ position: relative; z-index: 2; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero-badge{ display: inline-block; font-family: var(--head); font-size: 14px; letter-spacing: 3px; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 14px; border-radius: 999px; margin-bottom: 26px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero h1{ font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(4rem, 9.6vw, 8.6rem); line-height: 0.92; letter-spacing: 2px; margin: 0px auto 26px; max-width: 1100px; color: rgb(255, 255, 255); }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero h1 .hl{ color: var(--orange); }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-sub{ font-size: 22px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); max-width: 860px; margin: 0px auto 22px; text-align: left; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-trust{ font-family: var(--head); font-size: 15px; letter-spacing: 3px; color: rgba(255, 255, 255, 0.5); margin-bottom: 34px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero-trust span{ color: var(--orange); margin: 0px 10px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-cta{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 0px; padding-bottom: 64px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-cta .btn-light .ic{ color: var(--orange); }
@media (max-width: 640px){
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero{ padding: 56px 0px 0px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero h1{ font-size: 3.6rem; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-cta{ padding-bottom: 48px; }
}
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero-badges{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero-badge{ margin-bottom: 0px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero-badge.rating{ color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.28); }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero-badge.rating .stars{ color: rgb(245, 166, 35); letter-spacing: 1px; margin-right: 6px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones a{ font-size: 13px; color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); padding: 7px 14px; border-radius: 999px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones a b{ color: rgb(255, 255, 255); font-weight: 600; margin-right: 6px; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones a:hover{ background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
@media (max-width: 640px){
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones a{ font-size: 12px; padding: 6px 10px; }
}
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-cta{ padding-bottom: 0px !important; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones{ margin-top: 20px; padding-bottom: 64px; }
@media (max-width: 640px){
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw) .hero-phones{ padding-bottom: 48px; }
}
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero{ overflow: visible !important; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero .wrap{ z-index: 5; }
:is(.wj-hp, .wj-ab, .wj-ct, .wj-wh, .wj-wd, .wj-cw, .wj-csh) .hero{ border-bottom: 3px solid var(--orange); }
