/* =========================================================================
   INNOVAR HERO SYSTEM — CLEAN REBUILD
   Cutover: Release 16E-R31 (Sprint 2). Enqueued after main.css in
   functions.php — this file is now the live source of truth for hero
   rendering.

   Release 16E-R31.1 (fast-follow, 2026-07-20): client re-tested R31 on an
   actual phone and found mobile contrast still short of optimal. Added a
   third, phone-only (<=640px) tier on top of the existing tablet (<=980px)
   tier for the readability gradient and mesh-sculpt filter, plus a wider
   text-shadow stack on phones specifically. See section 2 and section 3
   for the new @media (max-width: 640px) blocks — search "second contrast
   pass" to find both.

   Release 16E-R31.2 (same day): client asked for desktop and tablet
   contrast raised slightly too, not just mobile. Desktop readability
   gradient and both mesh-sculpt filters (home + page/service variants)
   bumped ~15-20%; tablet (<=980px) tier bumped similarly. This makes
   bullet (1) below out of date on the exact numbers it quotes — the
   underlying point (mesh was quietly dimmed from the original R27-R1
   "Option E" intent) still stands, but the live desktop values as of
   R31.2 are brightness .68-.70 / edge-alpha .14-.16, not .72-.74 / .10-.12.

   Release 16E-R31.3 (same day): investigated staging directly instead of
   a 4th contrast guess. Found every hero flashes solid black for ~1-2s on
   fresh load (large WebP + decoding="async" — correct practice, but a
   real gap) before painting the actual photo, which is genuinely vivid
   and colorful, not flat. Fixed the gap itself (fetchpriority="high" on
   the hero <img>, branded gradient instead of flat #000 as the pre-paint
   background) rather than compensating for it with more darkening.
   Client approved.

   Release 16E-R32 (Sprint 3): home hero height increased for immersion,
   at client request and researched against AV/event-production industry
   norms (PRG, Solotech, Clair Global, Christie Digital all run near-full-
   viewport heroes). New --innovar-home-hero-min-vh variable: 86vh desktop,
   stepping down to 58vh on phone (deliberately not full-height on mobile —
   a phone screen filled with just a headline reads as a dead end, and
   data cost matters for this audience). .hero-home switched from
   height:auto/display:block back to min-height + display:flex +
   align-items:center to actually reach that height. Paired with a
   scroll-down cue (.hero-scroll-cue, home hero only) per NN/G's
   "Illusion of Completeness" research on tall-hero usability — without a
   visible affordance, users often don't scroll past a full-height hero.
   Service/generic page heroes are unchanged; only the home hero got
   taller.

   PRAGMATIC CHOICE ON !important: every declaration below carries
   !important. That is not the original intent (the whole point of this
   file was to end a 15-patch specificity war), but main.css mixes hero
   rules into single minified lines alongside unrelated footer/card/media
   rules (a Slice 08B artifact), so safely deleting the old hero patches
   from main.css means parsing and separating those merged lines first —
   real surgery, not a quick edit, and not worth the risk of collateral
   damage to do blind ahead of a release. Adding !important here instead
   guarantees this file wins the cascade (same selectors, later load
   order, equal specificity) without touching main.css at all. main.css
   still contains all ~15 old patches, inert but present — removing them
   for real is a tracked follow-up cleanup story, done carefully once
   there's time to verify each merged line rule-by-rule.

   Replaces 15 layered patches (Slice 08B/08F/08J/11, 13A-Fix through Fix-6,
   13C-Fix-15C, Release 16E-R12/R24/R26-R5/R27-R1/R28) that had accumulated
   in main.css between roughly line 25 and line 4966.

   This file was built by tracing the ACTUAL final winning declaration for
   every hero property across that patch history — not by copying the most
   recent-looking comment block. Two things only became visible by doing
   that trace, and both are preserved deliberately below:

   1. The Option E "mesh-sculpt" corner treatment (R27-R1) was quietly
      dimmed by R28's "maintainable tuning" rule, which has equal-or-higher
      specificity and comes later in the file. The live site has been
      rendering the DIMMED values (brightness .72–.74, alpha .10–.12), not
      the bold original Option E values (brightness .56–.62, alpha .22–.30)
      that the R27-R1 comment describes. This file keeps the dimmed
      (currently-live) values. If the bold treatment was actually preferred
      and just never got its comment updated, that's a one-line change here
      — flag it and I'll adjust.

   2. UPDATED — Release 16E-R34: case-study hero sections (`case-hero`) are
      now migrated onto the same DOM-image system as home/service/page
      (`<img class="hero-background-image">` + `.hero-readability-gradient`
      + mesh-sculpt + signal motif). Investigated first: the live case study
      ("Public-Sector Stakeholder Event Technical Production") turned out to
      have real, substantial content already — Project Snapshot, Overview,
      Related Services — not "placeholder content" as originally assumed
      here; only its hero image was unwired. single-case_studies.php now
      uses the same markup as page.php. The old CSS-background-image legacy
      block (`::before` + `--innovar-hero-bg`) that used to live in section 5
      below has been removed as dead code now that the template no longer
      needs it. No hero image is wired into innovar_release16e_hero_map()
      for this case study yet — the only candidate source photo is the same
      Eskom/NTCSA-branded image already parked under the deprioritized
      client-branded-imagery approval decision, so it renders the branded
      fallback gradient (same as before this migration) until that's
      resolved. `.case-hero`'s own min-height tier and button-row spacing
      rules in section 4 below are unchanged.

   Elements this file intentionally drops as dead weight: `.hero-bg-grid`,
   `.hero-brand-glow`, `.hero-proof-row`, `.hero-credibility-row`,
   `.hero-eyebrow`. None of these classes are rendered by any current
   template (front-page.php, single-services.php, page.php,
   single-case_studies.php) — confirmed by grep across all templates. They
   were guarded off (`display:none`) by later patches anyway, so removing
   them changes nothing visible; it just stops shipping and re-parsing CSS
   for elements that don't exist.
   ========================================================================= */

:root{
  --innovar-home-hero-pad-top: 94px !important;
  --innovar-home-hero-pad-bottom: 90px !important;
  --innovar-page-hero-min: 400px !important;
  --innovar-proof-hero-min: 430px !important;
  --innovar-page-hero-pad: 64px !important;
  /* Sprint 3 — home hero height, researched against AV/event-production
     industry norms (PRG, Solotech, Clair Global, Christie Digital all run
     near-full-viewport heroes — that's the convention for this vertical,
     not an outlier). Desktop goes to 86vh; each breakpoint below steps
     down, and phone deliberately stays modest (58vh) rather than full —
     a phone screen filled with only a headline reads as a dead end, and
     mobile data cost is a real consideration for a South African
     audience. Paired with .hero-scroll-cue below per NN/G's "Illusion of
     Completeness" finding on tall/full-height hero usability. */
  --innovar-home-hero-min-vh: 86vh !important;
}
@media (max-width: 1180px){
  :root{
    --innovar-home-hero-pad-top: 84px !important;
    --innovar-home-hero-pad-bottom: 82px !important;
    --innovar-page-hero-min: 380px !important;
    --innovar-proof-hero-min: 410px !important;
    --innovar-page-hero-pad: 58px !important;
    --innovar-home-hero-min-vh: 78vh !important;
  }
}
@media (max-width: 980px){
  :root{
    --innovar-home-hero-pad-top: 72px !important;
    --innovar-home-hero-pad-bottom: 70px !important;
    --innovar-page-hero-min: 350px !important;
    --innovar-proof-hero-min: 380px !important;
    --innovar-page-hero-pad: 52px !important;
    --innovar-home-hero-min-vh: 66vh !important;
  }
}
@media (max-width: 640px){
  :root{
    --innovar-home-hero-pad-top: 56px !important;
    --innovar-home-hero-pad-bottom: 54px !important;
    --innovar-page-hero-min: 0px !important;
    --innovar-proof-hero-min: 0px !important;
    --innovar-page-hero-pad: 48px !important;
    --innovar-home-hero-min-vh: 58vh !important;
  }
}

/* -------------------------------------------------------------------------
   1. No-image fallback state (innovar_hero_classes() applies this when the
      post has no featured image / no packaged hero image).
   ---------------------------------------------------------------------- */
.hero-fallback-gradient{
  background:
    linear-gradient(120deg, rgba(0,0,0,.92), rgba(5,20,40,.86)),
    radial-gradient(circle at 84% 18%, rgba(255,187,0,.17), transparent 35%) !important;
}

/* -------------------------------------------------------------------------
   2. DOM image hero shell — home, service and generic page heroes.
      Live markup: <img class="hero-background-image"> + a sibling
      <div class="hero-readability-gradient">, both direct children of
      section.hero.hero-dom-image.hero-adaptive-readability.hero-balanced-overlay
   ---------------------------------------------------------------------- */
/* 2026-07-20 third contrast pass — found via staging inspection, not a
   contrast bug: hero images are ~500-600KB and decoding="async" (correct,
   keeps the main thread free) means there's a genuine ~1-2s gap on every
   fresh load between the section painting and the photo actually
   appearing. During that gap this background shows solid black — reading
   as broken/empty, not "moody." That's very likely a real contributor to
   "immersion still lacking" independent of the overlay tuning below.
   Swapped to the same branded gradient used by the true no-image fallback
   state, so the pre-paint moment looks like a deliberate dark panel
   revealing a photo, not an empty box. fetchpriority="high" was also added
   to the <img> in front-page.php/single-services.php/page.php to shorten
   the gap itself. */
html body.innovar-site .hero.hero-dom-image{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(120deg, rgba(0,0,0,.92), rgba(5,20,40,.86)),
    radial-gradient(circle at 84% 18%, rgba(255,187,0,.17), transparent 35%) !important;
}

html body.innovar-site .hero.hero-dom-image .hero-background-image{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: var(--innovar-hero-position, 50% 50%) !important;
}

/* Explicit light-dark readability layer — the single overlay carrying most
   of the contrast work between image and text.
   2026-07-20 contrast pass: strengthened at client request — bright hero
   photos were washing out the H1/copy, worst on mobile where text stacks
   directly over the image with no side-by-side "dark half" to sit in.
   Desktop values raised ~35-40%; mobile raised further and reshaped so the
   top of the frame (where the stacked heading sits) gets the most cover,
   fading out lower so the image still reads as immersive, not curtained. */
html body.innovar-site .hero.hero-dom-image .hero-readability-gradient{
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.51) 0%,
      rgba(0,0,0,.39) 32%,
      rgba(0,0,0,.23) 58%,
      rgba(0,0,0,.11) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.19) 0%,
      rgba(0,0,0,.07) 48%,
      rgba(0,0,0,.16) 100%) !important;
}
@media (max-width: 980px){
  html body.innovar-site .hero.hero-dom-image .hero-readability-gradient{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.54) 32%,
        rgba(0,0,0,.36) 62%,
        rgba(0,0,0,.25) 100%) !important;
  }
}
/* 2026-07-20 second contrast pass: R31's mobile fix helped but wasn't
   enough on actual phones — the 980px tier above now covers tablets, but
   phones (tightest crop, text with nowhere to go but over the image) need
   a further step up. This tier stacks on top of the 980px one via later
   source order + equal !important specificity. */
@media (max-width: 640px){
  html body.innovar-site .hero.hero-dom-image .hero-readability-gradient{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.74) 0%,
        rgba(0,0,0,.60) 30%,
        rgba(0,0,0,.40) 60%,
        rgba(0,0,0,.26) 100%) !important;
  }
}

html body.innovar-site .hero.hero-dom-image .container,
html body.innovar-site .hero.hero-dom-image .hero-content,
html body.innovar-site .hero.hero-dom-image .hero-home-grid,
html body.innovar-site .hero.hero-dom-image .hero-home-grid-no-media{
  position: relative !important;
  z-index: 3 !important;
}

html body.innovar-site .hero.hero-dom-image h1,
html body.innovar-site .hero.hero-dom-image .hero-copy,
html body.innovar-site .hero.hero-dom-image .eyebrow,
html body.innovar-site .hero.hero-dom-image .section-eyebrow{
  text-shadow: 0 3px 14px rgba(0,0,0,.78), 0 1px 3px rgba(0,0,0,.60) !important;
}

/* Approved gold bottom edge */
html body.innovar-site .hero.hero-dom-image::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 4px !important;
  z-index: 3 !important;
  background: var(--innovar-gold) !important;
}

/* -------------------------------------------------------------------------
   3. Mesh-sculpt local readability accent (adaptive-readability).
      Values below are the DIMMED, currently-live tuning — see file header
      note (1). Home and page/service use slightly different intensities.
   ---------------------------------------------------------------------- */
html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability{
  --ilm-mesh-x: -54px !important;
  --ilm-mesh-y: -40px !important;
  --ilm-mesh-w: min(860px, calc(100% + 108px)) !important;
  --ilm-mesh-h: calc(100% + 82px) !important;
  --ilm-mesh-radius: 42px !important;
  --ilm-mesh-filter: brightness(.68) contrast(1.10) saturate(.98) !important;
  --ilm-mesh-edge-alpha: .16 !important;
  --ilm-mesh-aura-alpha: .16 !important;
}
html body.innovar-site .hero.hero-page.hero-dom-image.hero-adaptive-readability{
  --ilm-mesh-x: -46px !important;
  --ilm-mesh-y: -32px !important;
  --ilm-mesh-w: min(760px, calc(100% + 92px)) !important;
  --ilm-mesh-h: calc(100% + 66px) !important;
  --ilm-mesh-filter: brightness(.70) contrast(1.09) saturate(.98) !important;
  --ilm-mesh-edge-alpha: .14 !important;
  --ilm-mesh-aura-alpha: .14 !important;
}

html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content{
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
}
html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content > *{
  position: relative !important;
  z-index: 3 !important;
}

html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content::before{
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: var(--ilm-mesh-x) !important;
  top: var(--ilm-mesh-y) !important;
  width: var(--ilm-mesh-w) !important;
  height: var(--ilm-mesh-h) !important;
  border-radius: var(--ilm-mesh-radius) !important;
  pointer-events: none !important;
  display: block !important;
  background:
    radial-gradient(ellipse 70% 72% at 30% 44%,
      rgba(0,0,0,var(--ilm-mesh-aura-alpha)) 0%,
      rgba(0,0,0,.18) 38%,
      rgba(0,0,0,.08) 66%,
      rgba(0,0,0,0) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,var(--ilm-mesh-edge-alpha)) 0%,
      rgba(0,0,0,.16) 42%,
      rgba(0,0,0,.05) 72%,
      rgba(0,0,0,0) 100%) !important;
  -webkit-backdrop-filter: var(--ilm-mesh-filter) !important;
  backdrop-filter: var(--ilm-mesh-filter) !important;
  -webkit-mask-image: radial-gradient(ellipse 94% 88% at 34% 46%, #000 0%, rgba(0,0,0,.98) 42%, rgba(0,0,0,.48) 73%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 94% 88% at 34% 46%, #000 0%, rgba(0,0,0,.98) 42%, rgba(0,0,0,.48) 73%, transparent 100%) !important;
}

/* Subtle upper-left editorial light falloff, near the first headline line */
html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content::after{
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: -38px !important;
  top: -24px !important;
  width: min(720px, calc(100% + 76px)) !important;
  height: calc(56% + 38px) !important;
  pointer-events: none !important;
  display: block !important;
  background: linear-gradient(135deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,0) 78%) !important;
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 26% 28%, #000 0%, rgba(0,0,0,.45) 64%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 88% 78% at 26% 28%, #000 0%, rgba(0,0,0,.45) 64%, transparent 100%) !important;
}

/* Fallback when backdrop-filter is unsupported: keep an organic aura, no
   solid fill or full-width overlay. */
@supports not ((backdrop-filter: brightness(.8)) or (-webkit-backdrop-filter: brightness(.8))){
  html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content::before{
    background:
      radial-gradient(ellipse 76% 72% at 32% 44%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.10) 72%, rgba(0,0,0,0) 100%),
      linear-gradient(90deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.10) 58%, rgba(0,0,0,0) 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 980px){
  html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability{
    --ilm-mesh-x: -26px !important;
    --ilm-mesh-y: -24px !important;
    --ilm-mesh-w: calc(100% + 52px) !important;
    --ilm-mesh-h: calc(100% + 48px) !important;
    /* Darkened alongside the readability gradient above — mobile mesh was
       inheriting the desktop-tuned (dimmed) brightness/alpha, which wasn't
       enough once text has nowhere to go but directly over the image. */
    --ilm-mesh-filter: brightness(.56) contrast(1.14) saturate(.96) !important;
    --ilm-mesh-edge-alpha: .26 !important;
    --ilm-mesh-aura-alpha: .26 !important;
  }
  html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content::after{
    display: none !important;
  }
  html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability .hero-readable-content::before{
    -webkit-mask-image: radial-gradient(ellipse 98% 92% at 42% 46%, #000 0%, rgba(0,0,0,.90) 48%, rgba(0,0,0,.44) 78%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 98% 92% at 42% 46%, #000 0%, rgba(0,0,0,.90) 48%, rgba(0,0,0,.44) 78%, transparent 100%) !important;
  }
}
/* 2026-07-20 second contrast pass — phone-specific mesh boost, stacks on
   top of the tablet tier above via later source order. Also widens the
   text-shadow stack on h1/copy for phones, which does the last bit of the
   work independent of what's actually in the photo underneath. */
@media (max-width: 640px){
  html body.innovar-site .hero.hero-dom-image.hero-adaptive-readability{
    --ilm-mesh-filter: brightness(.50) contrast(1.16) saturate(.94) !important;
    --ilm-mesh-edge-alpha: .30 !important;
    --ilm-mesh-aura-alpha: .30 !important;
  }
  html body.innovar-site .hero.hero-dom-image h1,
  html body.innovar-site .hero.hero-dom-image .hero-copy,
  html body.innovar-site .hero.hero-dom-image .eyebrow,
  html body.innovar-site .hero.hero-dom-image .section-eyebrow{
    text-shadow: 0 4px 18px rgba(0,0,0,.88), 0 2px 6px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.92) !important;
  }
}

/* -------------------------------------------------------------------------
   3b. Signal-flow line motif — "Signal & Precision" direction, locked
       2026-07-20. From CI Section 9 graphic language (thin gold divider
       lines, AV signal-flow lines, gold dot as recurring motif). Rendered
       via innovar_hero_signal_motif() in functions.php. Purely decorative,
       sits above the readability gradient/mesh but below the text content.
   ---------------------------------------------------------------------- */
html body.innovar-site .hero.hero-dom-image .hero-signal-motif{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .55 !important;
  pointer-events: none !important;
}
html body.innovar-site .hero.hero-dom-image .hero-signal-motif line{
  stroke: var(--innovar-gold, #FFBB00) !important;
  stroke-width: 1 !important;
  opacity: .3 !important;
}
html body.innovar-site .hero.hero-dom-image .hero-signal-motif .hero-signal-wave{
  stroke: var(--innovar-gold, #FFBB00) !important;
  stroke-width: 1.2 !important;
  fill: none !important;
  opacity: .4 !important;
}
html body.innovar-site .hero.hero-dom-image .hero-signal-motif .hero-signal-dot{
  fill: var(--innovar-gold, #FFBB00) !important;
}
@media (max-width: 640px){
  /* On phones the wave/dot sit inside the text zone and read as clutter
     behind a stacked headline — keep only the faint edge lines. */
  html body.innovar-site .hero.hero-dom-image .hero-signal-motif{ opacity: .35 !important; }
  html body.innovar-site .hero.hero-dom-image .hero-signal-motif .hero-signal-wave,
  html body.innovar-site .hero.hero-dom-image .hero-signal-motif .hero-signal-dot{
    display: none !important;
  }
}

/* WhatsApp secondary CTA — same .btn.btn-secondary base, icon + label */
.btn-whatsapp{ display: inline-flex !important; align-items: center !important; gap: 9px !important; }
.btn-whatsapp .btn-icon{ width: 18px !important; height: 18px !important; flex: 0 0 auto !important; }

/* -------------------------------------------------------------------------
   4. Hero sizing system — home (compact), page, service, and proof-type
      pages (services/case-studies archives).
   ---------------------------------------------------------------------- */
.hero.hero-home,
.hero-home.hero-home-compact{
  min-height: var(--innovar-home-hero-min-vh) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}
.hero-home.hero-home-compact > .container,
.hero-home.hero-home-compact .hero-home-grid,
.hero-home.hero-home-compact .hero-home-grid-no-media,
.hero.hero-home > .container.hero-home-grid-no-media{
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  padding-top: var(--innovar-home-hero-pad-top) !important;
  padding-bottom: var(--innovar-home-hero-pad-bottom) !important;
}
.hero-home.hero-home-compact .hero-content,
.hero.hero-home .hero-content{
  max-width: 820px !important;
  margin: 0 !important;
}
.hero-home.hero-home-compact h1,
.hero.hero-home h1{
  font-size: clamp(2.55rem, 4.5vw, 4.55rem) !important;
  line-height: 1.07 !important;
  max-width: 900px !important;
}
@media (max-width: 1180px){
  .hero-home.hero-home-compact h1,
  .hero.hero-home h1{ font-size: clamp(2.45rem, 4.6vw, 4.35rem) !important; }
}
@media (max-width: 640px){
  .hero-home.hero-home-compact h1,
  .hero.hero-home h1{ font-size: clamp(2.05rem, 9vw, 3rem) !important; }
}

/* Scroll-down affordance — home hero only, see functions.php
   innovar_hero_scroll_cue(). Subtle, gold, gently bouncing chevron; NN/G
   research on tall/full-height heroes flags that without a visible cue,
   users often don't discover there's more content below. */
html body.innovar-site .hero.hero-home .hero-scroll-cue{
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  width: 30px !important;
  height: 30px !important;
  opacity: .68 !important;
  pointer-events: none !important;
  animation: innovarHeroScrollCue 2.1s ease-in-out infinite !important;
}
html body.innovar-site .hero.hero-home .hero-scroll-cue svg{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
html body.innovar-site .hero.hero-home .hero-scroll-cue path{
  stroke: var(--innovar-gold, #FFBB00) !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
@keyframes innovarHeroScrollCue{
  0%, 100%{ transform: translateX(-50%) translateY(0); opacity: .68; }
  50%{ transform: translateX(-50%) translateY(8px); opacity: .95; }
}
@media (max-width: 640px){
  html body.innovar-site .hero.hero-home .hero-scroll-cue{
    bottom: 14px !important;
    width: 24px !important;
    height: 24px !important;
  }
}
@media (prefers-reduced-motion: reduce){
  html body.innovar-site .hero.hero-home .hero-scroll-cue{
    animation: none !important;
  }
}

.hero.hero-page,
.hero.hero-page.hero-fallback-gradient{
  padding: var(--innovar-page-hero-pad) 0 !important;
  min-height: var(--innovar-page-hero-min) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}
.hero.hero-page > .container,
.hero.hero-page > .container.hero-content,
.hero.hero-page .container.hero-content{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.hero.hero-page .hero-content{
  max-width: 900px !important;
  margin: 0 !important;
}
.hero.hero-page h1{
  font-size: clamp(2.25rem, 4.05vw, 4.05rem) !important;
  line-height: 1.08 !important;
  max-width: 940px !important;
}
.hero.hero-page .hero-copy{
  font-size: clamp(1.02rem, 1.75vw, 1.22rem) !important;
  max-width: 780px !important;
}

.hero.hero-page.service-hero,
.hero.hero-page.case-hero,
.post-type-archive-case_studies .hero.hero-page,
.post-type-archive-services .hero.hero-page{
  min-height: var(--innovar-proof-hero-min) !important;
}
.hero.hero-page.service-hero h1{
  font-size: clamp(2.12rem, 3.65vw, 3.75rem) !important;
  max-width: 940px !important;
}
.hero.hero-page.service-hero .button-row,
.hero.hero-page.case-hero .button-row{
  margin-top: 1.15rem !important;
  max-width: 980px !important;
}
.hero.hero-page.service-hero .service-tag-row{
  margin-top: 16px !important;
  gap: 8px !important;
  max-width: 980px !important;
}
.hero.hero-page.service-hero .service-tag-row span{
  padding: 5px 9px !important;
  font-size: .78rem !important;
}

@media (max-width: 980px){
  .hero.hero-page h1{ font-size: clamp(2.1rem, 5.2vw, 3.35rem) !important; }
  .hero.hero-page.service-hero h1{ font-size: clamp(2.05rem, 5vw, 3.1rem) !important; }
}
@media (max-width: 640px){
  .hero.hero-page,
  .hero.hero-page.service-hero,
  .hero.hero-page.case-hero{
    min-height: 0 !important;
    padding-top: 48px !important;
    padding-bottom: 46px !important;
    display: block !important;
  }
  .hero.hero-page h1,
  .hero.hero-page.service-hero h1{
    font-size: clamp(2.05rem, 9vw, 3rem) !important;
  }
  .hero.hero-page .hero-copy{ font-size: 1rem !important; }
  .hero.hero-page.service-hero .service-tag-row span{ font-size: .76rem !important; }
}

/* Hero content column width/centering */
.hero.hero-page > .container.hero-content,
.hero.hero-page > .container.service-hero-layout,
.hero.hero-page > .container.case-hero-layout,
.hero.hero-page .container.hero-content{
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hero.hero-page > .container.hero-content > *,
.hero.hero-page > .container.service-hero-layout > *,
.hero.hero-page .container.hero-content > *{
  max-width: 940px !important;
}
@media (max-width: 640px){
  .hero.hero-page > .container.hero-content,
  .hero.hero-page > .container.service-hero-layout,
  .hero.hero-page > .container.case-hero-layout,
  .hero.hero-page .container.hero-content{
    width: min(100% - 32px, 1180px) !important;
    max-width: min(100% - 32px, 1180px) !important;
  }
}

/* -------------------------------------------------------------------------
   5. REMOVED — Release 16E-R34. This block used to carry the legacy
      CSS-background-image path for case-hero (::before + --innovar-hero-bg).
      single-case_studies.php now uses the same <img class=
      "hero-background-image"> + .hero-readability-gradient markup as
      home/service/page (see section 2/3 above), so this path is dead. Left
      as a comment, not silently vanished, so the removal is traceable.
   ---------------------------------------------------------------------- */