/* ============================================================================
   AQUA HEADLINE FX — shared banner-headline treatment (2026-07-24, rebuilt
   2026-07-26 to drop the duplicate-layer inlay entirely — see below)
   Applies to EVERY big aqua hero/CTA headline across the gyro-engine proto
   set: h1.gyro-hero-title (page hero) and h2.book-title (Book-a-Call CTA)
   on Home + Front Desk + Communication + Growth + Marketing, plus the
   two-line hero h1 on service-area-map.html. One file, one technique,
   identical everywhere it's used — do not fork per-page.

   ============================================================================
   2026-07-26 REBUILD (owner, verbatim): "The font is still problematic. It
   looks like its just two fonts stacked on top of each other. Not sure why
   this has been so challenging to accomplish. Its on the live site
   already." He was right on both counts, and the reason is structural, not
   a tuning problem:

   Every version of this file up to today (the original soft inner-shadow
   build, then the 07-25 "solid hard-edged inlay/etch" rebuild, then a full
   day of offset tuning — 2px, 1px, 0.5px, 0.25px, several em-relative
   values) rendered the headline string TWO OR THREE TIMES: the real
   .aqua-fx text plus a ::before "inlay" duplicate plus an ::after "eraser"
   duplicate, all offset against each other to fake a carved edge. At any
   offset small enough to read as a clean inset, the effect nearly
   vanished; at any offset large enough to be visible, it read as exactly
   what it was — a second copy of the letterforms sitting slightly off from
   the first. That ceiling was inherent to the technique, so no amount of
   further tuning was ever going to fix it. (Full history of what was tried
   and rejected is preserved in this file's git history, not repeated here.)

   FIX: deleted the ::before/::after inlay/eraser layers outright and
   replaced the effect with the exact SINGLE-LAYER gradient-text-fill
   technique the LIVE PRODUCTION site already ships (styles.css, `.hero h1`
   / `.accent`, ~line 143) — one real text layer, no pseudo-elements, no
   duplicate strings painted at all. Gradient stops/angle/clip method below
   are copied verbatim from production so these prototype headlines render
   pixel-identical to the shipped homepage hero, not just "similar."
   `aqua-headline-fx.css` itself is still prototype-only (not linked from
   index.html or any production page) — only the visual TREATMENT now
   matches; the file boundary is unchanged.

   Also in this file (untouched by this rebuild): the "DESCRIPTION-LEVEL
   ETCH" text-shadow treatment for hero subheads + section-lead body copy
   (p.lead) — see that block further down. It's a different, simpler
   technique (flat text-shadow, no gradient/pseudo-element layer) and was
   never part of today's headline problem.

   ACCESSIBILITY: the outer h1/h2 carries `aria-label` with the plain
   string; the inner .aqua-fx span is `aria-hidden="true"`. aria-label on
   the ancestor wins accessible-name computation outright, so screen
   readers announce the headline exactly once, correctly. This contract is
   unchanged by today's rebuild and is actually simpler to reason about now
   — there is only ONE visible text layer, so there is no ::before/::after
   generated content left for any browser to double-count in the
   accessible name.

   MARKUP CONTRACT (unchanged — every hero h1.gyro-hero-title and ctaband
   h2.book-title on every proto page already matches this; replicate
   exactly if a new aqua banner headline is added):
     <h1 class="... gyro-hero-title" aria-label="Exact Text">
       <span class="aqua-fx" data-text="Exact Text" aria-hidden="true">Exact Text</span>
     </h1>
   `data-text` is now vestigial — nothing reads attr(data-text) via
   generated content anymore, since ::before/::after are gone. Left in the
   markup rather than editing six HTML files to strip it; it has zero
   visual or accessibility effect either way.

   Sizing (font-size/letter-spacing/line-height/margin) stays on the OUTER
   .gyro-hero-title / .book-title / .beat-hero h1 rule in each page's own
   CSS file — this file only ever touches the INNER .aqua-fx fill, so
   per-page responsive clamp() sizes are untouched and .aqua-fx just
   inherits them.
   ============================================================================ */

.aqua-fx{display:inline-block}

/* ---- HORIZONTAL-CENTERING FIX (2026-07-25) — the WRAPPER, not .aqua-fx itself.
   Root cause (measured via headless getBoundingClientRect + Range on the deployed
   preview): .aqua-fx is display:inline-block, so its own box shrink-wraps to its
   widest UNBREAKABLE line. On 4 of the 5 pages that line always fits the
   .gyro-copy column (~549px at desktop) so text-align:center on the h1/h2
   centers it perfectly (measured offset ~0.00px). On the Communication Engine
   page the single word "Communication" alone renders ~631px wide at the 6rem
   desktop font cap — WIDER than the ~549px column — and normal block-layout
   centering (text-align:center, and margin:auto behaves the same way) has a
   hard CSS rule: when a centered box's content is wider than its container,
   the "auto" free space that would go negative is clamped to 0 instead of
   split — so the browser renders it FLUSH-LEFT, not centered-with-overflow.
   That shoved the whole 3-line headline (and its shadow layer) ~41px right of
   true page-center — the reported "hero doesn't align with the center" bug.
   Flexbox's justify-content:center has no such clamp: an overflowing flex
   item still centers, with the overflow bleeding EQUALLY on both sides. So
   h1.gyro-hero-title / h2.book-title (both plain single-child wrappers, one
   .aqua-fx span each) become flex boxes with the child centered on the main
   axis. Nothing about .aqua-fx's own size/wrap/line-count/gradient/shadow
   changes — this only fixes how the already-sized box is POSITIONED — and it
   fixes it uniformly for every page, including any future headline whose
   longest word doesn't fit. text-align:center stays too (harmless; it still
   centers .aqua-fx's own wrapped lines within ITS box). */
h1.gyro-hero-title,
h2.book-title{display:flex;justify-content:center}

/* Several of these headlines wrap onto 2 lines at normal desktop widths
   (.gyro-copy is capped at 58ch — a paragraph-reading width — which is
   narrower than one line of a ~100px headline), so the gradient/shadow
   below is TILED PER LINE (background-size height = the line-height, i.e.
   ~1 line, with background-repeat) instead of stretched across the whole
   multi-line block. Without this, line 1 gets the full effect and line 2+
   comes out almost flat/washed-out (verified via headless screenshot —
   see report). Tiling keeps every line — and every page, whether its
   headline wraps or not — visually IDENTICAL. */

/* ---- GRADIENT STOPS — matched to the CURRENT LIVE SITE's hero h1
   (styles.css .hero h1: linear-gradient(160deg,#eaffff 0%,#7cf0ff 30%,
   var(--aqua) 64%,var(--blue-support) 100%)) so these preview headlines read
   exactly like the live hero: light at the top edge, into light aqua, into
   brand aqua, resolving on a supporting foot color at the bottom of each
   line. Same 160deg angle + stop positions as the live site; only wrapped in
   the per-line tiling (background-size:100% <line-height> repeat-y) this
   file already used, so multi-line headlines ("The Communication Engine" =
   3 lines) get the identical live-site gradient on every line instead of
   one line getting it and the rest washing out flat.
   ---- TUNABLE — LAST STOP (the "foot" color, 100%). Owner: the live site
   uses var(--blue-support) #188bf6 here, but if that last stop reads too
   BLUE rather than "light -> teal-like aqua", swap the variable below to
   var(--aqua-deep) (#0aa6d6, a deeper teal-aqua) or any teal of choice —
   it's isolated as its own custom property for exactly this reason. ---- */
.aqua-fx{
  --aqua-fx-foot: var(--blue-support); /* TUNABLE last stop — see note above */
  background:linear-gradient(160deg,
    #eaffff 0%,           /* near-white highlight, top of each line — matches live hero */
    #7cf0ff 30%,          /* light aqua — matches live hero */
    var(--aqua) 64%,      /* brand aqua #00d2ff — matches live hero */
    var(--aqua-fx-foot) 100%); /* supporting foot — live hero uses --blue-support, tunable above */
  background-size:100% 1.15em;background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- REMOVED 2026-07-26: the duplicate-layer "solid hard-edged inlay/etch"
   (.aqua-fx::before solid TRUE inlay + .aqua-fx::after aqua "eraser", tuned
   through several rounds — 1.5px, then 1px/2px, then 0.5/1, 0.25/0.5, and
   finally em-relative 0.008em/0.016em). Every variant painted the headline
   string a second (or third) time and offset it against the base layer;
   that is structurally indistinguishable from "a duplicate font stacked on
   top," which is exactly what the owner flagged on a real phone. Deleted
   outright rather than re-tuned again — see the top-of-file comment for the
   full rationale. .aqua-fx is now JUST the single gradient fill above; no
   ::before/::after, no --aqua-fx-inlay custom property, nothing else to
   tune here. ---- */

/* ============================================================================
   DESCRIPTION-LEVEL ETCH — hero subheads + section-lead paragraphs (2026-07-25)
   Owner ask: "that needs to be for all the hero and main descriptions" — the
   subhead line under each hero H1, plus the section-lead paragraph directly
   under a section heading (NOT every paragraph — tool-card body copy like
   .ht-copy, fine print like .dim/.engines-note are deliberately excluded).

   Scoped to `p.lead` inside this shared file (which only loads on the 5 gyro
   pages) because that single selector already matches EXACTLY the intended
   set on every page and nothing else — audited via full markup grep:
     - .gyro-copy .lead   → the hero subhead under the H1 (all 5 pages)
     - .humanity-head .lead / the "4 very powerful systems" section-lead →
       the intro line under the tools-section heading (all 5 pages)
     - .roi-section .center .lead → the ROI-calculator section-lead (4 engine
       pages; Home has no ROI section)
     - .ctaband .lead (.book-sub + the "A short call…" line) → the two lines
       under h2.book-title, i.e. the CTA's own "hero" subhead/description
   No other paragraph on these pages carries class="lead".

   WHY NOT the same .aqua-fx gradient-clip + mix-blend-mode:multiply
   architecture used for the headlines above: that mechanism only works
   because the BASE layer is a multi-stop GRADIENT (light top -> deep aqua
   bottom) — multiply darkens whichever gradient stop sits under the shadow.
   This body copy is a FLAT SOLID color (#fff, set per-page — home-engine-
   gyro.css `.gyro-copy .lead{color:#fff}` etc.). mix-blend-mode:multiply
   against a flat white base is mathematically identical to a plain alpha-
   composite of the (dark) blend color over white — i.e. it just paints the
   shadow color straight over the letters, turning them grey/muddy exactly
   as the owner warned. Verified two other blend modes (overlay, soft-light)
   are pure no-ops on flat white (their formulas collapse to "return base"
   whenever base = 255) — no blend mode makes a flat-white base look shaded
   the way it makes a gradient base look shaded. So this uses a plain
   text-shadow instead: no duplicate data-text/aria layer needed at all
   (text-shadow paints straight off the element's own text), and no risk of
   turning the white grey (the shadow sits BEHIND/around the opaque glyph,
   never recolors the glyph fill itself).

   Compared subtle/dark-below/dark-below+light-above/dark-above/dark-above+
   light-below via the same temp comparison harness. Dark-ABOVE variants
   (matching the headline's "shadow concentrated at the top" direction) were
   verified to render as near-invisible: the shadow color sits over the
   already-near-black page background above each glyph, so there's nothing
   for it to visibly darken — a text-shadow can only become visible where it
   peeks out from BEHIND the opaque glyph, and "above" mostly peeks out onto
   background, not onto anything with contrast. A shadow with a component
   BELOW the glyph is what's actually visible (it hugs the glyph's own
   silhouette against the dark backdrop). Landed on a crisp 1px hairline
   (no blur, so it stays a sharp "pressed" edge, not a soft ambient glow)
   plus a very soft wider falloff for a touch of depth — deliberately
   LIGHTER than the headline treatment (this is read as prose, not seen as
   a graphic): alpha capped at .42/.22 vs the headline's .62, and using the
   same dark-teal family (not black) so it never reads as a grey smear. */
p.lead{
  text-shadow:
    0 1px 0 rgba(3,14,20,.42),   /* crisp hairline — the "pressed" edge */
    0 2px 4px rgba(3,14,20,.22); /* soft falloff — a little depth, no glow */
}

/* ============================================================================
   CTA BREATHING GLOW + SONAR PING (2026-07-26 motion audit, Recommendation 2)
   Ported from scroll.css, which is NOT linked on any of these 6 proto pages
   (confirmed via full <link>/<script> trace) — this file is, on all 6 (the
   5 gyro pages directly; service-area-map.html picked it up 2026-07-26 for
   the hero-etch fix), so it's the natural shared home instead of linking the
   whole of scroll.css, which is built against the main site's polish.js/
   scroll.js (nav-condense classes, feature-walk scroll-pin hooks, livecall
   card shadows) that these standalone prototypes don't load and weren't
   built against — porting just this ~15-line, already-finished, already
   reduced-motion-safe block avoids any risk of that unrelated CSS colliding
   with the proto pages' own rules. Untouched from the source: box-shadow/
   opacity only (no transform on the button itself, so it never fights the
   site's magnetic-button JS), pauses on hover, skips it entirely under
   `prefers-reduced-motion`. ADDED here vs. the source: a `:active` pause
   twin (source only paused on `:hover`, which touch never fires) so a
   finger pressing the button doesn't fight the ping/throb mid-press. */
.btn-primary{position:relative}
@media (prefers-reduced-motion:no-preference){
  .btn-primary:not(.lc-play):not(.lc-replay)::before{content:"";position:absolute;inset:0;border-radius:inherit;
    z-index:-1;pointer-events:none;box-shadow:0 14px 48px -2px rgba(0,210,255,.62);
    opacity:.4;animation:ctaThrob 2.8s ease-in-out infinite;will-change:opacity}
  .btn-primary:not(.lc-play):not(.lc-replay)::after{content:"";position:absolute;inset:0;border-radius:inherit;
    z-index:-1;pointer-events:none;box-shadow:0 0 0 1.5px rgba(0,210,255,.55);animation:ctaPing 2.8s ease-out infinite}
  .btn-primary.btn-lg::before,.btn-primary.btn-lg::after{animation-duration:2.6s}
  .btn-primary:not(.lc-play):not(.lc-replay):hover::before,
  .btn-primary:not(.lc-play):not(.lc-replay):active::before{animation:none;opacity:0}
  .btn-primary:not(.lc-play):not(.lc-replay):hover::after,
  .btn-primary:not(.lc-play):not(.lc-replay):active::after{animation:none;opacity:0}
}
@keyframes ctaThrob{
  0%,100%{opacity:.32}
  50%{opacity:1}
}
@keyframes ctaPing{
  0%{opacity:.6;transform:scale(1)}
  70%{opacity:0;transform:scale(1.16)}
  100%{opacity:0;transform:scale(1.16)}
}

/* ============================================================================
   MOBILE NAV PANEL OPEN/CLOSE ANIMATION (2026-07-26 motion audit, Rec. 5)
   `.nav-mobile` is styled in the SITE-WIDE styles.css (display:none ->
   .menu-open .nav-mobile{display:flex}, an instant unanimatable snap). This
   file is confirmed loaded ONLY on these 6 proto pages (NOT index.html/any
   other production page — grepped, zero matches), so this override cannot
   leak onto the live site's nav, precisely the risk the audit flagged for
   this fix. Scoped to the SAME @media(max-width:780px) breakpoint styles.css
   already uses (the hamburger/panel only exist there at all), so it never
   fires at any width where the inline nav links are showing instead. */
@media(max-width:780px){
  .nav-mobile{display:flex;max-height:0;opacity:0;overflow:hidden;
    visibility:hidden;pointer-events:none;
    transition:max-height .32s var(--ease),opacity .2s var(--ease),visibility 0s linear .32s}
  .nav.menu-open .nav-mobile{max-height:calc(100vh - 74px);opacity:1;
    visibility:visible;pointer-events:auto;
    transition:max-height .32s var(--ease),opacity .26s var(--ease) .05s,visibility 0s linear 0s}
}
@media(max-width:780px) and (prefers-reduced-motion:reduce){
  .nav-mobile,.nav.menu-open .nav-mobile{transition:none}
}