/* ===========================================================================
   VKV Group — Premium Refinement Layer (Module 27)
   Loaded LAST, after design-system → components → utilities → main → header →
   vkv-network. Purpose: enforce one consistent, luxury, corporate-grade system
   across every page without touching content, routes, or markup semantics.

   PRINCIPLES
   - Additive and token-driven. No new palette is invented: everything derives
     from the existing navy/gold tokens.
   - Vertical rhythm is owned by vkv-ux.css §3 (a proportional, fluid scale).
     The tokens below are legacy aliases that now resolve to that scale.
   - Motion is subtle: transform/opacity only, refined pulse/glow, never text,
     never harsh flashing, fully disabled under prefers-reduced-motion.
   - Every override is scoped so existing components keep working.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Token refinement
   --------------------------------------------------------------------------- */
:root {
  /* Section rhythm — Module 38: the literal 35px/17.5px pair is retired. These
     names are kept only because rules further down this file still reference
     them; they now RESOLVE to the proportional scale defined in vkv-ux.css §3,
     which is the single source of truth. The fallbacks apply only if that file
     fails to load. */
  --section-gap: var(--space-section, 56px);
  --section-pad: var(--space-strip, 32px);
  --section-pad-lg: 44px;       /* heroes / first-screen surfaces only */
  --block-gap: 28px;            /* head → grid inside a section */

  /* Header geometry.
     --header-h is a STATIC design token (per breakpoint) and is the only one
     layout consumes (.header-inner min-height). vkv-premium.js must never
     write to it: it publishes the MEASURED height as --header-live-h instead.
     Writing the measured value back into --header-h created a feedback loop
     (min-height -> taller header -> ResizeObserver -> larger min-height...)
     that inflated the header to hundreds of px and pushed the page down. */
  --header-h: 72px;
  --util-h: 40px;

  /* Refined elevation — softer, deeper, less "card shadow". */
  --shadow-1: 0 1px 2px rgba(3, 8, 22, 0.20), 0 2px 10px rgba(3, 8, 22, 0.18);
  --shadow-2: 0 10px 30px rgba(3, 8, 22, 0.38);
  --shadow-3: 0 28px 70px rgba(3, 8, 22, 0.52);
  --shadow-gold: 0 10px 26px rgba(201, 162, 75, 0.20);

  /* Hairlines that read as engineered, not drawn. */
  --line: rgba(234, 240, 251, 0.09);
  --line-strong: rgba(234, 240, 251, 0.16);

  /* Z-index — one scale, no local guesses. --z-float is consumed by
     .floating-stack / .mobile-cta-bar in main.css but was never defined, so
     both fell back to 900 and covered the mega panel. */
  --z-base: 1; --z-raised: 10; --z-float: 400; --z-header: 500; --z-mega: 600;
  --z-overlay: 900; --z-modal: 1000; --z-popup: 1050; --z-toast: 1100;
}

/* ---------------------------------------------------------------------------
   2. Typography hierarchy
   --------------------------------------------------------------------------- */
body { font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); letter-spacing: 0.002em; }

h1, .h1 { font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.6rem); line-height: 1.06;
  font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; }
h2, .h2 { font-size: clamp(1.75rem, 1.45rem + 1.35vw, 2.5rem); line-height: 1.16;
  font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; }
h3, .h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.24;
  font-weight: 600; letter-spacing: -0.012em; }
h4, .h4 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); line-height: 1.32;
  font-weight: 600; letter-spacing: -0.008em; }
h5 { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; }
h6 { font-size: 0.95rem; line-height: 1.45; font-weight: 600; letter-spacing: 0.01em; }

p, li { text-wrap: pretty; }
/* Measure is applied to running copy only — a global max-width on <p> also
   narrowed footer, meta and centred one-liners, which forced odd wraps. */
.prose p, .rich-text p, .post-body p, .lead-para, .hero-sub,
.overview-para, .section-center > p, .card-text { max-width: 74ch; }
.section-center p, .lead-para, .plans-note, .coverage-note,
.pagination-note, [style*="text-align:center"] p { margin-inline: auto; }

.eyebrow { letter-spacing: 0.2em; font-size: 0.74rem; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 10px; }
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: 12px; }

/* Long-form body copy (blog, legal, rich text) */
.prose > * + *, .rich-text > * + *, .post-body > * + * { margin-top: 1.05em; }
.prose h2, .rich-text h2, .post-body h2 { margin-top: 1.7em; }
.prose h3, .rich-text h3, .post-body h3 { margin-top: 1.5em; }
.prose p, .rich-text p, .post-body p { max-width: 72ch; line-height: 1.72; }

/* ---------------------------------------------------------------------------
   3. Containers & grids
   --------------------------------------------------------------------------- */
/* Bootstrap ships `.container { max-width: … }` per breakpoint (720/960/1140/1320px),
   which silently capped every VKV container — at 768–991px the whole site was
   pinned to 720px regardless of the design tokens. The VKV container is width-
   driven, so the inherited cap and gutter padding are cleared here. */
.container {
  width: min(100% - 2.5rem, var(--container));
  max-width: none;
  padding-inline: 0;
  margin-inline: auto;
}
.container.wide { --container: var(--container-wide); }
.container.narrow { width: min(100% - 2.5rem, var(--container-narrow)); }
.mega-inner.container { width: min(100% - 2.5rem, var(--container-wide)); }

/* No grid child may ever force an overflow. */
[class*="grid"], [class*="-grid"], .process, .plans, .stat-grid,
.mega-grid, .footer-grid, .bento { min-width: 0; }
[class*="grid"] > *, .process > *, .plans > *, .stat-grid > *,
.mega-grid > *, .footer-grid > * { min-width: 0; }
img, svg, video, iframe, table, pre { max-width: 100%; }
/* `clip` (not `hidden`) — it stops sideways overflow without turning <body>
   into a scroll container, which would break the sticky header. */
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* ---------------------------------------------------------------------------
   4. Vertical rhythm — exactly 35px between major sections
   --------------------------------------------------------------------------- */
body:not(.admin-body) main > section,
body:not(.admin-body) main > div > section,
body:not(.admin-body) main .section {
  padding-block: var(--section-pad);
  margin-block: 0;
}
/* First-screen surfaces keep presence, still resolving to the 35px rhythm. */
main > section.hero,
main > .hero,
main > section[class*="-hero"],
main .hero { padding-block: var(--section-pad-lg) var(--section-pad); }

/* Kill accidental double gaps left by legacy margins. A trailing margin on the
   last child (e.g. .hero-meta's 16px) adds to the section padding and broke the
   35px rhythm — the first gap measured 52px instead of 35px. */
main > section > .container > :first-child,
main .section > .container > :first-child { margin-top: 0; }
body:not(.admin-body) main > section > .container > :last-child,
body:not(.admin-body) main .section > .container > :last-child { margin-bottom: 0; }
main > section:last-child { padding-bottom: var(--section-pad); }
/* Module 33: the .section + .section zeroing and the breadcrumb padding that
   used to sit here were removed — section spacing is owned by vkv-ux.css §3,
   and the breadcrumb UI no longer exists. */

/* Internal block rhythm so a tight section still breathes. */
.section-head, .section-center > .eyebrow:first-child { margin-bottom: 0; }
.section-head + *, .section-center > h2 + *, .section-center > p + * { margin-top: var(--block-gap); }
body:not(.admin-body) main > section > .container > * + *:not(h1):not(h2):not(h3):not(h4):not(p) { margin-top: var(--block-gap); }

/* Footer joins the same rhythm (was 6rem + 4rem). */
.site-footer { margin-top: var(--section-gap); padding-top: var(--section-gap); }
.site-footer > section, .site-footer .footer-band { padding-block: var(--section-pad); }
.footer-bar { margin-top: var(--section-gap); padding-block: 18px; }
.footer-bar-inner p, .footer-legal-line { max-width: none; }

/* Bands that paint their own background read as deliberate insets. */
.trust-strip, .cta-band, .newsletter-band, .section-alt {
  padding-block: var(--section-pad);
}
/* Band interiors must not add a second layer of vertical padding on top of
   the 35px rhythm — this was the source of the uneven 52px gap after the hero. */
.trust-inner, .util-bar-inner > *, .footer-main > .container { padding-block: 0; }
.trust-inner { row-gap: 10px; }
.cta-band .container, .newsletter-band .container { padding-block: 22px; }

/* ---------------------------------------------------------------------------
   5. Buttons, links, focus
   --------------------------------------------------------------------------- */
.btn {
  min-height: 44px; padding: 0.72rem 1.4rem; font-size: 0.94rem;
  letter-spacing: 0.005em; border-radius: var(--radius-pill); white-space: nowrap;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out),
              background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-lg { min-height: 52px; padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: 0.5rem 1rem; font-size: 0.86rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Refined sheen on gold buttons — a slow highlight, never a flash. */
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.32) 50%, transparent 64%);
  background-size: 240% 100%; background-position: 130% 50%;
  transition: background-position 900ms var(--ease-out);
}
.btn-gold:hover::after { background-position: -30% 50%; }
.btn-navy { background: var(--grad-navy); color: var(--text); border-color: var(--line-strong); }
.btn-navy:hover { border-color: var(--glass-border); box-shadow: var(--shadow-2); }
.btn-outline:hover { background: rgba(228, 199, 126, 0.06); }

a { color: inherit; }
/* Inline content links only — chrome links (nav, util bar, footer) keep their
   own treatment so nothing picks up an unexpected underline. */
.prose a:not([class]), .rich-text a:not([class]), .post-body a:not([class]),
main p > a:not([class]), main li > a:not([class]) {
  color: var(--accent-soft); text-decoration: none;
  border-bottom: 1px solid rgba(228, 199, 126, 0.35);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.prose a:not([class]):hover, .rich-text a:not([class]):hover, .post-body a:not([class]):hover,
main p > a:not([class]):hover, main li > a:not([class]):hover { color: var(--gold-300); border-color: var(--gold-300); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--accent-soft);
  font-weight: 600; font-size: 0.9rem; }
.link-arrow svg, .link-arrow span { transition: transform 240ms var(--ease-out); }
.link-arrow:hover svg, .link-arrow:hover span, .card:hover .link-arrow svg { transform: translateX(4px); }

:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { box-shadow: var(--ring); }

/* ---------------------------------------------------------------------------
   6. Surfaces, cards, icons, micro-interactions
   --------------------------------------------------------------------------- */
.card, .bento-card, .service-card, .who-card, .plan-card, .post-card,
.testimonial, .leader-card, .areas-card, .overview-card, .stat, .mega-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23, 38, 79, 0.55), rgba(10, 22, 51, 0.62));
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease),
              box-shadow 320ms var(--ease-out), background 320ms var(--ease);
}
.card:hover, .bento-card:hover, .service-card:hover, .who-card:hover,
.plan-card:hover, .post-card:hover, .leader-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-2);
}
.stat { background: transparent; border-color: transparent; }

/* Icon tiles: soft glow that breathes, plus a lift on card hover. */
.service-icon, .mega-ico, .benefit-check, .trust-check, .feature-icon, .scope-card .service-icon {
  position: relative;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), color 320ms var(--ease);
}
.service-icon::after, .feature-icon::after {
  content: ""; position: absolute; inset: -35%; border-radius: inherit; z-index: -1;
  background: radial-gradient(closest-side, rgba(228, 199, 126, 0.20), transparent 72%);
  opacity: 0.55; pointer-events: none;
}
.card:hover .service-icon, .service-card:hover .service-icon, .card:hover .feature-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(201, 162, 75, 0.22);
}

/* Refined pulse for decorative status dots and accent pins. */
.util-dot, .area-pin, .badge-dot { position: relative; }
.util-dot::after, .area-pin::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0; pointer-events: none;
}

/* Images/media: quiet elegance, never a bare rectangle. */
.card-media, .post-thumb, .media, figure img, .leader-photo, .team-photo {
  border-radius: var(--radius); overflow: hidden;
}
.card-media img, .post-thumb img, .leader-photo img {
  transition: transform 620ms var(--ease-out), filter 620ms var(--ease);
}
.card:hover .card-media img, .post-card:hover .post-thumb img { transform: scale(1.035); }

/* Module 35: hr / .hairline paint nothing — they keep only their spacing role. */
hr, .hairline { border: 0; height: 0; background: none; margin-block: 10px; }

/* Forms */
.input, .textarea, .select, input[type="text"], input[type="email"],
input[type="tel"], input[type="search"], textarea, select {
  min-height: 46px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: rgba(7, 14, 35, 0.55);
  color: var(--text); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
textarea { min-height: 120px; }
.input:focus, .textarea:focus, .select:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold-400); box-shadow: var(--ring); background: rgba(7, 14, 35, 0.75);
}
::placeholder { color: var(--slate-400); opacity: 0.75; }
.field + .field { margin-top: 14px; }
.field-label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 500; color: var(--text); }

/* ---------------------------------------------------------------------------
   7. Header, mega menu, off-canvas — overlap + z-index fixes
   --------------------------------------------------------------------------- */
.util-bar { position: relative; z-index: calc(var(--z-header) + 1); }
.util-bar-inner { min-height: var(--util-h); gap: 14px; flex-wrap: wrap; }
.util-links { gap: 20px; }
.util-links a, .util-tag { white-space: nowrap; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(10, 22, 51, 0.78);
  overflow: visible;                     /* the mega panel must escape */
}
.site-header[data-mega-open] { z-index: var(--z-mega); background: rgba(7, 14, 35, 0.97); }
.header-inner { min-height: var(--header-h); gap: clamp(0.75rem, 1.5vw, 1.5rem); flex-wrap: nowrap; }

/* Logo: one fixed optical height everywhere, on a white plate so the official
   full-colour mark keeps its exact brand colours on the navy header. */
.brand, .footer-brand, .admin-brand a { display: inline-flex; align-items: center; }
.brand-logo {
  display: block; width: auto; height: 34px;
  max-width: min(46vw, 210px); object-fit: contain;
}
.brand-plate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 12px; border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 18px rgba(3, 8, 22, 0.35);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.brand:hover .brand-plate, .footer-brand:hover .brand-plate {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 10px 26px rgba(3, 8, 22, 0.45);
}
.site-header[data-scrolled] .brand-logo { height: 30px; }
.brand-logo, .site-header[data-scrolled] .brand-logo { transition: height 240ms var(--ease-out); }

/* Nav */
.primary-nav { margin-left: auto; min-width: 0; }
.nav-list { flex-wrap: nowrap; gap: 2px; }
.nav-link { position: relative; padding: 0.58rem 0.8rem; font-size: 0.92rem; white-space: nowrap; border-radius: 10px; }
.nav-link::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.28rem; height: 1px;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.nav-item { position: relative; }
.nav-link:hover::after, .nav-link.active::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-link.active { background: transparent; }

/* --- Mega menu: anchored to the header, never overlapping the nav row --- */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--z-mega);
  padding: 10px 0 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 200ms;
}
/* Hover-open only on true pointer devices; touch/tablet uses click. */
.mega, .has-mega:hover .mega { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
html[data-pointer="fine"] .has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega[data-open] .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega-inner {
  width: min(100% - 2.5rem, var(--container-wide));
  margin-inline: auto;
  /* Fully opaque: at 0.96 alpha the hero headline behind the panel was still
     legible through it, which read as a rendering fault and hurt contrast.
     The blur is now decorative rather than load-bearing. */
  background: #0B1734;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 18px; box-shadow: var(--shadow-3);
  padding: 18px;
  max-height: min(calc(100vh - var(--header-live-h, var(--header-h)) - 24px), 76vh);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.mega-inner::-webkit-scrollbar { width: 8px; }
.mega-inner::-webkit-scrollbar-thumb { background: rgba(228, 199, 126, 0.28); border-radius: 8px; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 8px; align-items: start;
}
.mega-card { padding: 14px; border-radius: 14px; background: transparent; border: 1px solid transparent; }
.mega-card:hover { background: rgba(255, 255, 255, 0.035); border-color: var(--line); transform: none; box-shadow: none; }
.mega-card-head { gap: 0.7rem; align-items: flex-start; }
.mega-card-title { font-size: 0.95rem; line-height: 1.3; }
.mega-card-desc { display: block; font-size: 0.78rem; line-height: 1.45; margin-top: 2px; }
.mega-ico { width: 34px; height: 34px; border-radius: 10px; }
.mega-links { margin-top: 14px; gap: 0; display: grid; }
/* Indent the child links so they read as belonging to the service above them
   — flush-left against the icon they looked like an unrelated list. */
.mega-links a { display: block; padding: 0.3rem 0.5rem 0.3rem 2.9rem; font-size: 0.84rem;
  border-radius: 8px; line-height: 1.35; }
.mega-promo { background: linear-gradient(160deg, rgba(23,38,79,0.9), rgba(7,14,35,0.95));
  border: 1px solid var(--glass-border); justify-content: center; }
.mega-promo .btn { align-self: flex-start; }

.header-cta { gap: 8px; }
.header-call { border: 1px solid var(--line-strong); }

/* Hamburger + off-canvas */
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.offcanvas { z-index: var(--z-modal); }
.offcanvas-panel { width: min(88vw, 400px); padding: 18px; gap: 4px; }
.offcanvas-head { margin-bottom: 14px; padding-bottom: 14px; }
.offcanvas-nav a, .oc-trigger { min-height: 46px; display: flex; align-items: center; }
/* Every control in the drawer is a real touch target. */
.offcanvas .modal-close, .offcanvas-head .modal-close {
  min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 10px;
}
.offcanvas-cta { padding-top: 18px; }
body.vkv-modal-open { overflow: hidden; }

/* Fixed page furniture must never sit above the mega panel or a modal. */
.floating-actions, .floating-stack, .mobile-cta-bar { z-index: var(--z-float); }

/* ---------------------------------------------------------------------------
   7b. Bootstrap component-name collisions (measured, high severity)

   Bootstrap 5.3 loads on every page, and the site's own components reuse three
   of its class names. Bootstrap's rules were winning on properties the site's
   CSS never declares, so nothing downstream could override them:

   - .offcanvas          Bootstrap: visibility: hidden  -> the mobile drawer
                         opened with aria-expanded="true", the body locked and
                         focus moved, but NOTHING was visible on screen.
   - .offcanvas-backdrop  Bootstrap: z-index: 1040      -> the backdrop painted
                         ON TOP of the drawer panel, so its links were dead.
   - .modal-backdrop      Bootstrap: opacity: 0
   - .modal-dialog        Bootstrap: pointer-events: none, margin: .5rem

   Scoped to the site's own elements so any genuine Bootstrap widget still
   behaves normally. Fixing it here (rather than renaming classes) keeps every
   PHP template and JS selector untouched.
   --------------------------------------------------------------------------- */
.offcanvas:has(> .offcanvas-panel), .offcanvas:has(> .offcanvas-backdrop) {
  visibility: visible;
  transform: none;
  transition: none;
  max-width: none;
}
.offcanvas:has(> .offcanvas-panel)[hidden] { display: none; }
.offcanvas > .offcanvas-backdrop { z-index: 0; opacity: 1; }
.offcanvas > .offcanvas-panel { z-index: 1; visibility: visible; }
/* :has() fallback for older engines — the id the templates actually ship. */
#offcanvas-nav.offcanvas { visibility: visible; transform: none; transition: none; max-width: none; }
#offcanvas-nav.offcanvas[hidden] { display: none; }
#offcanvas-nav .offcanvas-backdrop { z-index: 0; opacity: 1; }
#offcanvas-nav .offcanvas-panel { z-index: 1; visibility: visible; }
.modal-root .modal-backdrop { z-index: 0; opacity: 1; }
.modal-root .modal-dialog { pointer-events: auto; z-index: 1; margin: 0; width: auto; }

/* ---------------------------------------------------------------------------
   8. Ambient premium visuals (subtle, non-gaming)
   --------------------------------------------------------------------------- */
/* Page-wide continuous motion: one fixed, cheap layer behind everything. The
   base colour lives on <html> so this can sit under the page without ever
   being painted over by the body background. */
html { background: var(--bg-deep); }
body { background: transparent; position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52vw 52vw at 78% -8%, rgba(255, 176, 60, 0.075), transparent 68%),
    radial-gradient(42vw 42vw at 8% 108%, rgba(214, 122, 34, 0.055), transparent 70%),
    var(--bg);
}
body > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: vkv-page-aura 64s ease-in-out infinite alternate; }
}
@keyframes vkv-page-aura {
  from { background-position: 0% 0%, 0% 100%, 0 0; }
  to   { background-position: 6% 4%, -5% 96%, 0 0; }
}

/* A quiet engineered grid + light bloom, injected per section by JS. */
.vkv-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: paint; }
.vkv-fx-host { position: relative; isolation: isolate; }
/* Module 38: .vkv-fx-grid and its @keyframes vkv-grid-breathe were DELETED —
   the layer painted a 72px engineered grid over section backdrops and is no
   longer injected by vkv-premium.js either. The blooms below carry the depth. */
.vkv-fx-bloom {
  position: absolute; border-radius: 50%; filter: blur(4px);
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  inset: -22% -12% auto auto;
  background: radial-gradient(closest-side, rgba(255, 176, 60, 0.095), transparent 70%);
}
.vkv-fx-bloom.is-gold {
  inset: auto auto -30% -14%;
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  background: radial-gradient(closest-side, rgba(255, 196, 82, 0.085), transparent 70%);
}
/* Module 36: .vkv-fx-rule and its legacy body were deleted — the selector is
   never emitted and the rule was a decorative hairline. */

@media (prefers-reduced-motion: no-preference) {
  .vkv-fx-bloom { animation: vkv-bloom-drift 42s ease-in-out infinite alternate; }
  .vkv-fx-bloom.is-gold { animation-duration: 56s; animation-direction: alternate-reverse; }
  .service-icon, .feature-icon { animation: vkv-icon-glow 6.5s var(--ease) infinite; }
  .service-card:nth-child(2n) .service-icon { animation-delay: 1.2s; }
  .service-card:nth-child(3n) .service-icon { animation-delay: 2.4s; }
  .util-dot::after { animation: vkv-ring 3.6s var(--ease-out) infinite; }
  .area-pin::after { animation: vkv-ring 4.4s var(--ease-out) infinite; }
  .stat-value, .plan-badge { will-change: auto; }
}
@keyframes vkv-bloom-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 3%, 0) scale(1.08); }
}
@keyframes vkv-icon-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 75, 0); }
  50%      { box-shadow: 0 6px 22px rgba(201, 162, 75, 0.16); }
}
@keyframes vkv-ring {
  0%   { opacity: 0.45; transform: scale(0.7); }
  70%  { opacity: 0;    transform: scale(1.5); }
  100% { opacity: 0;    transform: scale(1.5); }
}

/* Scroll reveal — fail-safe by construction.
   The hidden state is applied ONLY while the script is alive and has armed it
   (html[data-vkv-reveal]) and only to elements the script itself marked. If the
   script never runs, is blocked, or errors, nothing is ever hidden — which is
   what previously turned whole sections into an empty dark area. The existing
   [data-reveal] hook stays owned by utilities.css + ui.js; this layer does not
   touch it. */
html[data-vkv-reveal] [data-vkv-fx-reveal]:not(.is-visible) {
  opacity: 0; transform: translateY(14px);
}
[data-vkv-fx-reveal] {
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
[data-vkv-fx-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   9. Responsive audit — 1920 / 1440 / 1280 / 1024 / 768 / 430 / 390 / 375 / 320
   --------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1280px; --container-wide: 1440px; }
}
@media (max-width: 1280px) {
  .nav-link { padding: 0.55rem 0.62rem; font-size: 0.88rem; }
  .header-consult { padding-inline: 1rem; }
}
@media (max-width: 1100px) {
  .mega-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .header-consult { display: none; }
}
@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process-step:not(:last-child)::after { display: none; }
  .overview-grid, .areas-inner, .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .primary-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .mega { display: none; }                /* off-canvas owns navigation here */
}
@media (max-width: 767.98px) {
  :root { --header-h: 64px; --section-pad-lg: 34px; }
  .container { width: min(100% - 2rem, var(--container)); }
  .process, .plans, .stat-grid, .overview-grid, .areas-inner,
  [class*="-grid"]:not(.mega-grid):not(.footer-grid) { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.span-2, .bento-card.feature, .bento-card.row-2 { grid-column: auto; grid-row: auto; }
  .hero-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .util-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bar-inner { justify-content: center; text-align: center; }
  .brand-logo { height: 30px; }
  .brand-plate { padding: 6px 10px; }
}
@media (max-width: 430px) {
  :root { --header-h: 60px; }
  .container { width: min(100% - 1.75rem, var(--container)); }
  .btn { padding: 0.7rem 1.1rem; white-space: normal; }
  .btn-lg { padding: 0.85rem 1.35rem; font-size: 0.95rem; }
  .hero-actions { display: grid; gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .brand-logo { height: 28px; max-width: 60vw; }
}
@media (max-width: 360px) {
  .brand-logo { height: 26px; }
  .offcanvas-panel { width: 100vw; }
  .fab { width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------------------
   10. Motion preferences & print
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .btn:hover, .card:hover, .service-card:hover, .post-card:hover { transform: none; }
  html[data-vkv-reveal] [data-vkv-fx-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}
@media print {
  .site-header, .util-bar, .offcanvas, .floating-actions, .vkv-fx { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------------------
   11. Admin panel refinement (scoped — no functional selectors touched)
   --------------------------------------------------------------------------- */
.admin-body { font-size: 0.95rem; }
.admin-body .admin-brand { padding: 14px 16px; }
.admin-body .admin-brand .brand-plate { padding: 6px 10px; border-radius: 10px; }
.admin-body .brand-logo { height: 28px; }
.admin-body .admin-h2 { font-size: 1.12rem; letter-spacing: -0.01em; }
.admin-body .admin-card { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.admin-body .admin-card + .admin-card, .admin-body .admin-section { margin-top: var(--section-gap); }
.admin-body .admin-field + .admin-field { margin-top: 14px; }
.admin-body .admin-btn { min-height: 42px; border-radius: var(--radius-pill); padding-inline: 1.2rem;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease); }
.admin-body .admin-btn:hover { transform: translateY(-1px); }
.admin-body .admin-nav-link { min-height: 42px; border-radius: 10px; }
.admin-body input, .admin-body textarea, .admin-body select { min-height: 42px; }
.admin-brand-preview {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px; border-radius: 14px; border: 1px dashed var(--line-strong);
  background: linear-gradient(160deg, rgba(23,38,79,0.35), rgba(10,22,51,0.5));
}
.admin-brand-preview .brand-plate { background: #fff; }
.admin-brand-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------------------
   12. V-series sprite icon slots (Module 27d)

   Two optional slots introduced with the V11-V15 integration. Both are opt-in
   per page, so nothing renders differently where a page supplies no tokens.
   The sprites carry their own duotone fills, so no colour is set here.
   --------------------------------------------------------------------------- */
.deliverable-icon {
  flex: none; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.deliverable-icon svg { width: 100%; height: 100%; display: block; }
.deliverables li.has-icon { display: flex; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .deliverable-icon { animation: vkv-icon-glow 7s var(--ease) infinite; }
  .deliverables li:nth-child(2n) .deliverable-icon { animation-delay: 1.4s; }
  .deliverables li:nth-child(3n) .deliverable-icon { animation-delay: 2.6s; }
}

/* ===========================================================================
   13. Module 28 — content, UI and motion updates
   =========================================================================== */

/* ---- 5. Justified body copy ---------------------------------------------
   Applied to running body copy by NAME, not with a blanket `main p` + :not()
   chain. The chain version was a specificity trap: every :not(.class) added
   class-level specificity, so the justify rule outranked the very exclusions
   meant to hold it back and the hero sub-heading came out justified and
   hyphenated ("en-tire"). Listing the body-copy classes explicitly keeps the
   rule predictable and leaves headings, sub-headings, labels, stats, chips,
   buttons and nav untouched. */
.prose p, .rich-text p, .post-body p,
p.card-text, p.process-desc, p.post-excerpt, p.lead-para,
p.footer-about, .footer-lede, .person-bio,
.legal-body p, .about-body p,
main .container > p:not([class]) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Centred blocks and short strings stay as designed — justification on a
   centred intro or a one-liner reads as a mistake. */
.section-head p, .section-head.center p, .section-center p,
.hero-inner p, .hero-sub, .pricing-note, .coverage-note, .plans-note,
.form-intro, .contact-sub, .card-text-sm, td p, th p {
  text-align: inherit;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.section-head.center p, .section-center p, .pricing-note, .coverage-note { text-align: center; }
.person-title, .project-card-host { text-align: left; hyphens: manual; }

/* ---- 4. Process numbering + flow pointer --------------------------------
   The lists are <ol>, and each item ALSO renders its own .process-num /
   .footer-step-num badge — so the browser's marker produced "1. 01", "2. 02".
   Suppressing the marker keeps the designed badge as the single number. */
.process, .footer-steps, .pricing-bundle-list, .gmb-cities,
ol.process-5, .projects-grid, .people-grid, .pricing-grid { list-style: none; }
.process > li::marker, .footer-steps > li::marker { content: none; }

/* A subtle directional flow along the process row. The pointer is a travelling
   highlight on the connector, not a moving element, so nothing reflows. */
.process-step, .footer-steps > li { position: relative; }
@media (min-width: 1025px) {
  .process-step:not(:last-child)::before,
  .footer-steps > li:not(:last-child)::before { content: none; }
  /* Module 36: the legacy connector-line block was deleted with the hairlines.
     The travelling dot below is a flow cue, not a rule, and stays. */
  .process-step:not(:last-child)::after,
  .footer-steps > li:not(:last-child)::after {
    content: ""; position: absolute; top: 23.5px; left: calc(50% + 26px);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-400); box-shadow: 0 0 10px rgba(201,162,75,0.55);
    opacity: 0; pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .process-step:not(:last-child)::after,
    .footer-steps > li:not(:last-child)::after { animation: vkv-flow 4.2s var(--ease-out) infinite; }
    .process-step:nth-child(2)::after, .footer-steps > li:nth-child(2)::after { animation-delay: 0.5s; }
    .process-step:nth-child(3)::after, .footer-steps > li:nth-child(3)::after { animation-delay: 1s; }
    .process-step:nth-child(4)::after, .footer-steps > li:nth-child(4)::after { animation-delay: 1.5s; }
    .process-step:nth-child(5)::after, .footer-steps > li:nth-child(5)::after { animation-delay: 2s; }
  }
}
@keyframes vkv-flow {
  0%   { opacity: 0;    transform: translateX(0); }
  12%  { opacity: 0.95; }
  78%  { opacity: 0.95; transform: translateX(calc(100% + 0px)); }
  100% { opacity: 0;    transform: translateX(calc(100% + 0px)); }
}

/* ---- 18. Why Choose Us: one balanced 4-up row ---------------------------- */
.why-grid, .benefits-grid .why-list, .footer-why-grid {
  display: grid; gap: var(--gutter, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 1100px) { .why-grid, .footer-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .why-grid, .footer-why-grid { grid-template-columns: 1fr; } }

/* ---- 10. Header pill buttons --------------------------------------------- */
.btn-quiet {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 38px; padding: 0.42rem 0.95rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text);
  background: linear-gradient(160deg, rgba(23,38,79,0.9), rgba(10,22,51,0.92));
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn-quiet .header-pill-ico { display: inline-flex; color: var(--accent-soft); }
.btn-quiet::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(228,199,126,0.20) 50%, transparent 62%);
  background-size: 240% 100%; background-position: 130% 50%;
  transition: background-position 900ms var(--ease-out);
}
.btn-quiet:hover {
  color: var(--gold-300); border-color: rgba(228,199,126,0.45);
  box-shadow: var(--shadow-gold); transform: translateY(-2px);
}
.btn-quiet:hover::after { background-position: -30% 50%; }
.btn-quiet:hover .header-pill-ico { color: var(--gold-300); }
@media (prefers-reduced-motion: no-preference) {
  .header-ebook .header-pill-ico, .header-tax .header-pill-ico {
    animation: vkv-icon-glow 7s var(--ease) infinite;
  }
  .header-tax .header-pill-ico { animation-delay: 1.6s; }
}
.util-quick { font-size: 0.8rem; letter-spacing: 0.02em; }
.offcanvas-pills { display: grid; gap: 8px; margin-bottom: 12px; }

/* ---- 3. GMB coverage list ------------------------------------------------ */
.gmb-cities {
  display: grid; gap: 8px; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.gmb-city {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23,38,79,0.45), rgba(10,22,51,0.55));
  font-size: 0.92rem; font-weight: 500;
  transition: border-color 260ms var(--ease), transform 260ms var(--ease-out);
}
.gmb-city:hover { border-color: var(--glass-border); transform: translateY(-2px); }
.gmb-city-pin { flex: none; width: 20px; height: 20px; color: var(--accent-soft); }
.gmb-city-pin svg { width: 100%; height: 100%; display: block; }

/* ---- 6. Selected projects ------------------------------------------------ */
.projects-grid {
  display: grid; gap: 12px; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.project-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23,38,79,0.55), rgba(10,22,51,0.62));
  text-decoration: none; min-height: 96px; justify-content: center;
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease), box-shadow 300ms var(--ease-out);
}
.project-card:hover { transform: translateY(-4px); border-color: rgba(228,199,126,0.4); box-shadow: var(--shadow-2); }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-card-name { font-weight: 600; font-size: 1rem; color: var(--text); line-height: 1.3; }
.project-card-go { flex: none; color: var(--accent-soft); display: inline-flex; transition: transform 260ms var(--ease-out); }
.project-card:hover .project-card-go { transform: translate(3px, -3px); color: var(--gold-300); }
.project-card-host { font-size: 0.78rem; color: var(--slate-400); letter-spacing: 0.01em; word-break: break-all; }

/* ---- 12. Pricing -------------------------------------------------------- */
.pricing-grid {
  display: grid; gap: 14px; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.pricing-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23,38,79,0.55), rgba(10,22,51,0.66));
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease), box-shadow 300ms var(--ease-out);
}
.pricing-card:hover { transform: translateY(-4px); border-color: var(--glass-border); box-shadow: var(--shadow-2); }
.pricing-card.is-featured { border-color: rgba(228,199,126,0.42); box-shadow: var(--shadow-gold); }
.pricing-flag {
  position: absolute; top: -10px; left: 22px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--grad-gold); color: var(--navy-900);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pricing-name { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.pricing-price { display: flex; flex-direction: column; gap: 2px; margin: 0; max-width: none; text-align: left; }
.pricing-from { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-400); }
.pricing-amount { font-family: var(--font-display, inherit); font-size: 1.95rem; font-weight: 700; line-height: 1.1; color: var(--gold-300); letter-spacing: -0.02em; }
.pricing-star { font-size: 0.9rem; vertical-align: super; color: var(--accent-soft); margin-left: 2px; }
.pricing-unit { font-size: 0.78rem; color: var(--slate-400); line-height: 1.45; }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; }
.pricing-bundles {
  margin-top: 22px; padding: 20px 22px; border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong); background: rgba(7,14,35,0.4);
}
.pricing-bundles-title { font-size: 0.95rem; margin: 0 0 12px; }
.pricing-bundle-list { display: grid; gap: 8px; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pricing-bundle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(23,38,79,0.45); border: 1px solid var(--line); }
.pricing-bundle-label { font-size: 0.9rem; }
.pricing-bundle-price { font-weight: 700; color: var(--gold-300); }
.pricing-note { margin-top: 16px; font-size: 0.78rem; color: var(--slate-400); text-align: center; max-width: none; }

/* ---- 14. People --------------------------------------------------------- */
.people-grid {
  display: grid; gap: 18px; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 980px; margin-inline: auto;
}
.person-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 26px 22px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23,38,79,0.5), rgba(10,22,51,0.62));
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease), box-shadow 300ms var(--ease-out);
}
.person-card:hover { transform: translateY(-4px); border-color: var(--glass-border); box-shadow: var(--shadow-2); }
.person-photo {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  margin-bottom: 8px; flex: none;
  border: 1px solid rgba(228,199,126,0.3);
  box-shadow: 0 10px 28px rgba(3,8,22,0.45);
  background: var(--navy-800);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.person-photo-empty { display: grid; place-content: center; color: var(--slate-400); font-weight: 700; letter-spacing: 0.1em; }
.person-name { font-size: 1.05rem; margin: 0; }
.person-title { font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); margin: 0; }
.person-bio { font-size: 0.88rem; color: var(--slate-400); margin: 6px 0 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .person-photo { animation: vkv-portrait-glow 8s var(--ease) infinite; }
  .people-grid > *:nth-child(2) .person-photo { animation-delay: 2.6s; }
  .people-grid > *:nth-child(3) .person-photo { animation-delay: 5.2s; }
}
@keyframes vkv-portrait-glow {
  0%, 100% { box-shadow: 0 10px 28px rgba(3,8,22,0.45), 0 0 0 rgba(201,162,75,0); }
  50%      { box-shadow: 0 10px 28px rgba(3,8,22,0.45), 0 0 22px rgba(201,162,75,0.18); }
}

/* ---- 13. YouTube 9:16 --------------------------------------------------- */
.yt-vertical-wrap { display: flex; justify-content: center; }
.yt-facade-vertical {
  position: relative; width: min(100%, 360px); aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-3);
  background: var(--navy-900);
}
.yt-facade-vertical img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade-vertical iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 430px) { .yt-facade-vertical { width: min(100%, 300px); } }

/* ---- 15. Footer contact bar --------------------------------------------- */
.footer-contact-bar { padding-block: var(--section-pad); }
.footer-contact-inner {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  align-items: flex-start; justify-content: center;
}
.footer-contact-item { display: flex; align-items: flex-start; gap: 12px; margin: 0; max-width: none; text-align: left; }
.footer-contact-ico { flex: none; color: var(--accent-soft); margin-top: 1px; }
.footer-contact-label { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-400); }
.footer-contact-value { font-size: 0.95rem; color: var(--text); }
a.footer-contact-value:hover { color: var(--gold-300); }
@media (max-width: 640px) { .footer-contact-inner { justify-content: flex-start; } }

/* ---- 16. Floating Call + WhatsApp pulse --------------------------------- */
.floating-btn, .floating-whatsapp, .floating-call { position: relative; }
.floating-whatsapp::after, .floating-call::after,
.fab-whatsapp::after, .fab-call::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid currentColor; opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .floating-whatsapp::after, .fab-whatsapp::after { animation: vkv-fab-ring 3.4s var(--ease-out) infinite; }
  .floating-call::after, .fab-call::after { animation: vkv-fab-ring 3.4s var(--ease-out) infinite 1.7s; }
  .floating-whatsapp, .floating-call { animation: vkv-fab-breathe 3.4s var(--ease) infinite; }
  .floating-call { animation-delay: 1.7s; }
}
/* A soft expanding ring and a gentle scale — never opacity flicker on the icon,
   so the target stays fully legible and tappable at all times. */
@keyframes vkv-fab-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.42); }
  100% { opacity: 0;   transform: scale(1.42); }
}
@keyframes vkv-fab-breathe {
  0%, 100% { transform: translateZ(0) scale(1); }
  50%      { transform: translateZ(0) scale(1.045); }
}

/* ---- 17. Contact page polish -------------------------------------------
   The live page is built on .form-tabs (not a two-column .contact-layout), so
   the premium treatment is applied THERE — an elevated panel around the tab set
   with the option pills centred above it. The .contact-layout rules below are
   kept for any page that does use that pattern. */
.contact-cards .contact-card { text-align: center; align-items: center; }
.contact-cards .contact-card .service-icon { margin-inline: auto; }
.form-tabs {
  padding: 28px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23, 38, 79, 0.5), rgba(10, 22, 51, 0.66));
  box-shadow: var(--shadow-2);
  display: grid; gap: 22px;
}
.form-tabs > .tab-list {
  justify-self: center;
  background: rgba(7, 14, 35, 0.55);
  border-color: var(--line-strong);
  /* components.css sets overflow-x:auto so the pills can scroll on narrow
     screens. That also produced a stray VERTICAL scrollbar stub inside the
     pill row; pinning overflow-y and hiding the bar cosmetically keeps the
     horizontal scroll (and keyboard/touch access) without the artefact. */
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.form-tabs > .tab-list::-webkit-scrollbar { height: 0; width: 0; }
.form-tabs .tab { min-height: 40px; }
.form-tabs .tab:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.form-tabs .form-intro { text-align: center; color: var(--slate-400); font-size: 0.9rem; margin: 0 0 4px; }
@media (max-width: 560px) {
  .form-tabs { padding: 20px 16px; }
  .form-tabs > .tab-list { justify-self: stretch; width: 100%; }
}
.contact-layout {
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form-col {
  padding: 28px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23,38,79,0.5), rgba(10,22,51,0.66));
  box-shadow: var(--shadow-2);
}
@media (max-width: 430px) { .contact-form-col { padding: 20px 18px; } }
.contact-aside { display: grid; gap: 14px; }
.contact-card { padding: 20px 22px; }
.contact-card .card-title { font-size: 1rem; margin: 10px 0 6px; }
.contact-sub { font-size: 0.82rem; color: var(--slate-400); }
.contact-trust {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  padding-top: 18px; margin-top: 18px;
}
.contact-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--slate-400); margin: 0; }
.contact-trust-item .trust-check { color: var(--accent-soft); }
.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.form-grid .field-wide, .form-grid .consent-field { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- 7. Lead popup ----------------------------------------------------- */
.lead-popup { position: fixed; inset: 0; z-index: var(--z-popup); display: grid; place-items: center; padding: 20px; }
.lead-popup[hidden] { display: none; }
.lead-popup-backdrop { position: absolute; inset: 0; background: rgba(3,8,22,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lead-popup-panel {
  position: relative; z-index: 1;
  width: min(100%, 480px); max-height: min(88vh, 720px);
  overflow-y: auto;
  /* overflow-x must be hidden: the lead form's grid was pushing a horizontal
     scrollbar inside the panel, which also collided with the close button. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 46px 28px 30px; border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(20,36,76,0.98), rgba(9,18,42,0.99));
  box-shadow: var(--shadow-3);
}
@media (prefers-reduced-motion: no-preference) {
  .lead-popup:not([hidden]) .lead-popup-panel { animation: vkv-popup-in 420ms var(--ease-out) both; }
}
@keyframes vkv-popup-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.lead-popup-close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(7,14,35,0.6); color: var(--text);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lead-popup-close:hover { border-color: var(--glass-border); color: var(--gold-300); }
.lead-popup-panel h2 { font-size: 1.4rem; margin: 6px 0 8px; }
.lead-popup-panel .lead-form, .lead-popup-panel .form-grid { max-width: 100%; }
.lead-popup-panel .form-grid { grid-template-columns: 1fr; }
.lead-popup-panel input, .lead-popup-panel textarea, .lead-popup-panel select,
.lead-popup-panel .btn { width: 100%; max-width: 100%; box-sizing: border-box; }
.lead-popup-panel .form-actions { display: grid; gap: 10px; }
.lead-popup-text { font-size: 0.92rem; color: var(--slate-400); margin: 0 0 16px; text-align: left; }
@media (max-width: 430px) { .lead-popup-panel { padding: 42px 18px 24px; } }

/* ===========================================================================
   14. Module 29 — popup, cards, top strip, hero, TV video, compact footer
   =========================================================================== */

/* ---- 1 & 7. Popup: compact, consent text fully visible ------------------
   The consent row is the part that was clipping: a checkbox plus two lines of
   text inside a grid cell. Making it an explicit grid (fixed checkbox column +
   flexible text column) guarantees the text wraps INSIDE the panel instead of
   pushing the row wider than its container. */
.lead-popup-panel {
  width: min(100%, 420px);
  /* Generous cap so the whole form — consent row included — fits without
     scrolling on any normal screen; short landscape viewports still scroll
     (handled by the max-height:620px block below) rather than clip. */
  max-height: min(92vh, 760px);
  padding: 40px 24px 24px;
}
.lead-popup-panel .eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; }
.lead-popup-panel h2 { font-size: 1.22rem; line-height: 1.25; margin: 4px 0 6px; }
.lead-popup-text { font-size: 0.86rem; line-height: 1.5; margin: 0 0 14px; }
.lead-popup-panel .lead-form { display: grid; gap: 11px; }
.lead-popup-panel .form-grid { grid-template-columns: 1fr; gap: 11px; }
/* components.css gives every .field a 16px bottom margin. Inside the popup that
   margin STACKS with the form grid's row-gap, so five fields wasted ~80px of
   panel height and pushed the consent row out of view. The grid gap is the
   single source of vertical rhythm here. */
.lead-popup-panel .field { display: grid; gap: 5px; min-width: 0; margin: 0; }
.lead-popup-panel .form-grid > * { margin-bottom: 0; }
.lead-popup-panel label { font-size: 0.8rem; }
.lead-popup-panel input:not([type="checkbox"]),
.lead-popup-panel textarea,
.lead-popup-panel select {
  min-height: 40px; padding: 8px 11px; font-size: 0.9rem;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.lead-popup-panel textarea { min-height: 56px; }
.lead-popup-panel .consent-field { min-width: 0; }
.lead-popup-panel .consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  cursor: pointer;
}
.lead-popup-panel .consent input[type="checkbox"] {
  width: 16px; height: 16px; margin: 2px 0 0; flex: none;
  min-height: 0; padding: 0;
}
.lead-popup-panel .consent > span {
  font-size: 0.74rem; line-height: 1.45; color: var(--slate-400);
  min-width: 0; text-align: left; hyphens: manual;
  overflow-wrap: break-word;
}
.lead-popup-panel .consent a { text-decoration: underline; }
.lead-popup-panel .form-actions { margin-top: 2px; }
.lead-popup-panel .form-actions .btn { width: 100%; min-height: 44px; }
.lead-popup-panel .field-error { font-size: 0.72rem; margin: 0; }
/* The optional/required hint tags must not force the label wider than the row. */
.lead-popup-panel .opt, .lead-popup-panel .req { font-size: 0.72rem; }
@media (max-width: 430px) {
  .lead-popup-panel { padding: 38px 16px 20px; max-height: 88vh; }
  .lead-popup-panel h2 { font-size: 1.12rem; }
}
/* Short viewports (landscape phones): the panel scrolls rather than clipping. */
@media (max-height: 620px) {
  .lead-popup { align-items: start; padding-block: 12px; }
  .lead-popup-panel { max-height: calc(100vh - 24px); }
}

/* ---- 2. All cards/boxes: premium shadow + hover lift, never touching ----
   A single rule set so every card-like box across the site behaves the same.
   The gap guarantee is on the GRID (gap can't collapse), not on card margins,
   because margins on a grid child don't create separation between tracks. */
.card, .service-card, .scope-card, .why-card, .contact-card, .pricing-card,
.person-card, .leader-card, .project-card, .post-card, .industry-card,
.mega-card, .value-card, .stat, .gmb-city, .pricing-bundle, .footer-col {
  box-shadow: var(--shadow-1);
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    border-color 320ms var(--ease);
  will-change: auto;
}
.card:hover, .service-card:hover, .scope-card:hover, .why-card:hover,
.contact-card:hover, .pricing-card:hover, .person-card:hover,
.leader-card:hover, .project-card:hover, .post-card:hover,
.industry-card:hover, .value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3);
  border-color: var(--glass-border);
}
.stat:hover, .gmb-city:hover, .pricing-bundle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
/* Guaranteed separation: no adjacent boxes may touch or overlap at any width. */
.grid, .grid-2, .grid-3, .grid-4, .projects-grid, .pricing-grid, .people-grid,
.why-grid, .gmb-cities, .leaders, .footer-grid, .stat-grid, .footer-numbers,
.contact-cards, .pricing-bundle-list {
  gap: var(--gutter, 24px);
}
.stat-grid, .footer-numbers, .gmb-cities, .pricing-bundle-list { gap: 12px; }
@media (max-width: 600px) {
  .grid, .grid-2, .grid-3, .grid-4, .projects-grid, .pricing-grid,
  .people-grid, .why-grid, .leaders, .contact-cards { gap: 16px; }
}
/* Cards sit above the decorative FX layer so a glow can never wash over copy. */
.card, .pricing-card, .person-card, .leader-card, .project-card,
.contact-card, .post-card { position: relative; z-index: 1; }

/* ---- 3. Top utility strip ----------------------------------------------- */
.util-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap;
}
.util-contact { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; min-width: 0; }
.util-contact-item {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; font-size: 0.8rem; color: var(--slate-300);
  white-space: nowrap; text-decoration: none;
}
a.util-contact-item:hover { color: var(--gold-300); }
.util-ico { display: inline-flex; color: var(--accent-soft); flex: none; }
.util-bar .util-tag { margin: 0; white-space: nowrap; }
@media (max-width: 860px) {
  .util-bar .util-tag { display: none; }          /* keep the phone, drop the tagline */
  .util-bar-inner { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .util-hours { display: none; }                  /* phone alone on small screens */
  .util-contact-item { font-size: 0.76rem; }
}

/* ---- 4. Header: one clean horizontal row, never wrapping ---------------- */
.header-inner {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: nowrap;                 /* the whole point: no second row */
  min-width: 0;
}
.primary-nav { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.nav-list {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(2px, 0.9vw, 14px);      /* tightens before anything wraps */
  min-width: 0;
}
.nav-item { flex: 0 0 auto; }
.nav-link { white-space: nowrap; }
.header-cta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand { flex: 0 0 auto; }
/* The desktop row is only rendered where it genuinely fits. header.css switched
   to the off-canvas drawer at 980px, which left a cramped 981–1100px band where
   the logo + 5 nav items + 3 buttons could not fit on one line: it used to WRAP
   into a second row (the reported bug), and once wrapping was forbidden it
   pushed ~102px of horizontal page overflow instead. Raising the switch to
   1100px removes that band altogether — nothing is hidden, because the drawer
   carries every nav item and both pill buttons. */
@media (max-width: 1100px) {
  .primary-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
}
@media (min-width: 1101px) {
  .nav-toggle { display: none; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  /* Reclaim width in the order that costs the least: type and padding tighten,
     so the row stays single-line without hiding anything. */
  .nav-link { font-size: 0.88rem; padding-inline: 8px; }
  .btn-quiet { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
  .header-consult { font-size: 0.82rem; padding-inline: 0.85rem; }
}

/* ---- 5. Breadcrumbs: removed in PHP; this is belt-and-braces ------------ */
.breadcrumbs { display: none !important; }

/* ---- 6. Hero: animation only, NO shadow overlay ------------------------- */
.hero, .home-hero, .page-hero, .service-hero {
  box-shadow: none !important;
}
.hero::after, .home-hero::after { box-shadow: none; }
/* Other sections keep subtle premium depth. */
.section-alt { box-shadow: inset 0 1px 0 rgba(228, 199, 126, 0.05); }

/* ---- 10. Premium TV-style 16:9 video frame ------------------------------ */
.yt-tv {
  max-width: 860px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.yt-tv-screen {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  padding: 10px; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(28, 44, 86, 0.95), rgba(8, 16, 38, 0.98));
  border: 1px solid var(--glass-border);
  box-shadow:
    0 26px 70px rgba(3, 8, 22, 0.6),
    0 0 0 1px rgba(228, 199, 126, 0.1) inset,
    0 0 42px rgba(201, 162, 75, 0.12);
}
.yt-tv-screen iframe {
  position: absolute; inset: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  border: 0; border-radius: 7px; display: block;
  background: #000;
}
/* Module 32: click-to-load facade inside the TV screen. Same geometry as the
   iframe it replaces, so the frame never changes shape when the player loads. */
.yt-tv-facade {
  position: absolute; inset: 10px; border-radius: 6px; overflow: hidden;
  cursor: pointer; background: #000; z-index: 2;
}
.yt-tv-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-tv-facade:focus-visible { outline: 2px solid #E4C77E; outline-offset: 2px; }
.yt-tv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(10, 22, 51, 0.72);
  border: 2px solid rgba(228, 199, 126, 0.9);
  box-shadow: 0 10px 30px rgba(3, 8, 22, 0.45);
  transition: transform 180ms ease, background 180ms ease;
}
.yt-tv-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #E4C77E;
}
.yt-tv-facade:hover .yt-tv-play { transform: translate(-50%, -50%) scale(1.06); background: rgba(10, 22, 51, 0.85); }

.yt-tv-stand {
  width: 132px; height: 10px; margin-top: -1px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(28, 44, 86, 0.9), rgba(8, 16, 38, 0.75));
  border: 1px solid var(--line);
  border-top: 0;
}
@media (max-width: 600px) {
  .yt-tv-screen { padding: 6px; border-radius: 11px; }
  .yt-tv-screen iframe { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 5px; }
  .yt-tv-facade { inset: 6px; border-radius: 5px; }
  .yt-tv-play { width: 58px; height: 58px; }
  .yt-tv-play::after { border-width: 10px 0 10px 16px; }
  .yt-tv-stand { width: 92px; height: 8px; }
}

/* ---- 8. Stats: keep the four metrics balanced --------------------------- */
.stat-grid, .footer-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .stat-grid, .footer-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stat-grid, .footer-numbers { grid-template-columns: 1fr; } }
.stat-value { display: flex; align-items: baseline; justify-content: center; gap: 1px; }

/* ---- 12. Compact, premium legal row ------------------------------------- */
.footer-legal-bar { padding-block: 14px; }
.footer-legal-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 9px;
  margin: 0; max-width: none;
  font-size: 0.78rem; line-height: 1.5; color: var(--slate-400);
  text-align: center; hyphens: manual;
}
.footer-legal-line .sep { color: var(--line-strong); }
.footer-legal-brand { font-weight: 600; color: var(--text); }
.footer-legal-line a:hover { color: var(--gold-300); }
@media (max-width: 600px) {
  .footer-legal-bar { padding-block: 12px; }
  .footer-legal-line { font-size: 0.73rem; gap: 3px 7px; }
}

/* ---- 15. Contact page: compact, not oversized --------------------------- */
.form-tabs { padding: 22px; gap: 16px; }
.form-tabs .form-grid { gap: 13px; }
.form-tabs input:not([type="checkbox"]), .form-tabs textarea, .form-tabs select {
  min-height: 42px; padding: 9px 12px; font-size: 0.92rem;
}
.form-tabs textarea { min-height: 92px; }
.form-tabs .consent {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px; align-items: start;
}
.form-tabs .consent input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin-top: 2px; }
.form-tabs .consent > span { font-size: 0.78rem; line-height: 1.5; min-width: 0; text-align: left; hyphens: manual; }
.form-tabs .form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-tabs .form-actions .btn { min-height: 46px; }
.contact-trust { gap: 8px 18px; padding-top: 14px; margin-top: 14px; }
.contact-trust-item { font-size: 0.8rem; }
@media (max-width: 560px) { .form-tabs { padding: 18px 15px; } }

/* ===========================================================================
   15. Layered premium atmosphere
   =========================================================================== */

/* Module 33: the entire hero-video block that used to open this section
   (.has-hero-video, .hero-video-wrap, .hero-video, .hero-video-scrim and their
   reduced-motion / mobile variants) was DELETED along with the MP4, its poster
   and the JS controller. The hero is now a static composition — see
   vkv-ux.css §4. Nothing references these class names any more. */

/* ---- B. Layered premium atmosphere --------------------------------------
   Depth comes from three stacked, very low-opacity fields rather than one flat
   colour: a base gradient, a fine grid that reads as engineered structure, and
   soft light orbs. Intensity is tiered — hero strongest, major sections
   medium, supporting sections subtle — so the page has rhythm instead of the
   same treatment everywhere. */
.section, .footer-band { position: relative; isolation: isolate; }
.section > .container, .footer-band > .container { position: relative; z-index: 2; }

/* Tier 2 — major sections: a soft directional light bed. */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 70% at 14% 0%, rgba(42,108,200,0.055), transparent 72%),
    radial-gradient(48% 62% at 88% 100%, rgba(201,162,75,0.045), transparent 74%);
}
/* Tier 3 — alternating sections: Module 33 removed the fine engineered grid
   that used to paint here. It read as an unwanted lined/grid sheet across the
   page, which is exactly what the brief asked to eliminate. The tier-2 light
   bed above still gives these sections their depth. */
/* Module 35: the brushed-metal section seams are removed — they were the main
   source of the "lined sheet" appearance on alternating sections. */
.section-alt { border-block: 0; }

/* ---- Premium card elevation ---------------------------------------------
   Layered shadow (contact + ambient + depth) reads as glass on dark, where a
   single Bootstrap-style shadow reads as a flat drop. The top inset hairline
   is what sells the glass edge. */
.card, .pricing-card, .person-card, .leader-card, .project-card,
.contact-card, .post-card, .industry-card, .value-card, .why-card, .scope-card {
  box-shadow:
    0 1px 2px rgba(3,8,22,0.40),
    0 8px 24px rgba(3,8,22,0.30),
    inset 0 1px 0 rgba(255,255,255,0.045);
}
.card:hover, .pricing-card:hover, .person-card:hover, .leader-card:hover,
.project-card:hover, .contact-card:hover, .post-card:hover,
.industry-card:hover, .value-card:hover, .why-card:hover, .scope-card:hover {
  box-shadow:
    0 2px 4px rgba(3,8,22,0.45),
    0 18px 44px rgba(3,8,22,0.46),
    0 0 26px rgba(201,162,75,0.10),
    inset 0 1px 0 rgba(255,255,255,0.075);
}
.pricing-card.is-featured {
  box-shadow:
    0 2px 4px rgba(3,8,22,0.45),
    0 18px 46px rgba(3,8,22,0.44),
    0 0 34px rgba(201,162,75,0.14),
    inset 0 1px 0 rgba(228,199,126,0.16);
}

/* ---- Premium button micro-interaction ----------------------------------- */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.42) 50%, transparent 66%);
  background-size: 260% 100%; background-position: 140% 50%;
  transition: background-position 820ms var(--ease-out);
}
.btn-gold:hover::after { background-position: -40% 50%; }
.btn-gold:active { transform: translateY(1px); }

/* ---- Reduced motion: strip movement, keep every visual ------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-gold::after { transition: none; }
}