/* ==========================================================================
   KQ Solicitors — Motion & Depth System  v11.0.0
   --------------------------------------------------------------------------
   Replaces css/kq-animate.css.

   THE ONE RULE THAT CHANGED EVERYTHING
   ------------------------------------
   v10 hid every .sr element by default and relied on JavaScript to reveal
   it. When JS was slow, blocked, or the tab was backgrounded, sections
   shipped blank — which is why v10 had to bolt on a 3-second "force
   everything visible" timer. That timer then revealed the whole page after
   3s, so scroll animations below the fold never actually played.

   v11 inverts it. Content is visible by default. The reveal state is
   scoped behind `html.kq-motion`, a class the engine only adds once it has
   confirmed IntersectionObserver support and that the user has not asked
   for reduced motion. No JS, old browser, print, or reduced motion => the
   page simply renders, fully visible, instantly. No timers. No blank
   sections. Ever.

   TOKENS
   ------
   --kq-rx / --kq-ry   card tilt in degrees (written by the engine)
   --kq-lift           hover lift in px
   --kq-mx / --kq-my   pointer position inside a card, 0–100%
   --kq-press          1 while a card is being pressed
   ========================================================================== */

:root {
  /* Exponential ease-outs. No bounce, no elastic. */
  --kq-out:        cubic-bezier(0.16, 1, 0.3, 1);     /* expo   */
  --kq-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);     /* quart  */
  --kq-out-soft:   cubic-bezier(0.33, 1, 0.68, 1);    /* cubic  */
  --kq-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  --kq-dur-fast:   .22s;
  --kq-dur:        .42s;
  --kq-dur-slow:   .78s;
  --kq-dur-reveal: .92s;

  /* Semantic z-index scale. Replaces the ad-hoc 99999s scattered around. */
  --kq-z-base:      1;
  --kq-z-raised:    10;
  --kq-z-sticky:    100;
  --kq-z-nav:       200;
  --kq-z-overlay:   300;
  --kq-z-modal:     400;
  --kq-z-toast:     500;
  --kq-z-editor:    900;
  --kq-z-grain:     9999;

  --kq-gold:        #A48945;
  --kq-gold-lo:     #8B7339;
  --kq-gold-hi:     #D4B96A;
  --kq-gold-pale:   #F3E2AE;
  --kq-navy:        #1A1C30;
}

/* ==========================================================================
   1. REVEAL SYSTEM
   Default = visible. Hidden state only exists inside html.kq-motion.
   ========================================================================== */

/* The shared transition contract. Applied always so the reveal is smooth
   even if the class lands mid-scroll, but with no starting offset unless
   the engine is live. */
.sr,
[data-kq-reveal] {
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--kq-dur-reveal), var(--kq-dur-reveal), .6s, var(--kq-dur-reveal);
  transition-timing-function: var(--kq-out);
}

/* ---- Hidden states: scoped, so they can never strand content ---- */
html.kq-motion .sr:not(.v),
html.kq-motion [data-kq-reveal]:not(.v) {
  opacity: 0;
  will-change: opacity, transform;
}

/* rise — the default. Quiet, fast, used for most blocks. */
html.kq-motion .sr:not(.v),
html.kq-motion [data-kq-reveal="rise"]:not(.v) {
  transform: translate3d(0, 26px, 0);
}

/* flip — reserved for card decks, where the "dealt" read is meaningful */
html.kq-motion [data-kq-reveal="flip"]:not(.v) {
  transform: perspective(1100px) rotateY(-14deg) rotateX(4deg) translate3d(-14px, 30px, -40px) scale(.965);
  filter: blur(3px);
}
html.kq-motion .kq-stagger > [data-kq-reveal="flip"]:nth-child(even):not(.v) {
  transform: perspective(1100px) rotateY(14deg) rotateX(4deg) translate3d(14px, 30px, -40px) scale(.965);
}

/* scale — images, media, portraits */
html.kq-motion [data-kq-reveal="scale"]:not(.v) {
  transform: scale(1.045);
  filter: blur(6px) saturate(.85);
  clip-path: inset(0 0 0 0 round var(--radius, 16px));
}

/* mask — headings and pull quotes wipe up from behind an edge */
html.kq-motion [data-kq-reveal="mask"]:not(.v) {
  clip-path: inset(0 0 105% 0);
  transform: translate3d(0, 12px, 0);
  opacity: 1;
}
html.kq-motion [data-kq-reveal="mask"].v {
  clip-path: inset(0 0 -20% 0);
}

/* slide-x — side-by-side editorial rows */
html.kq-motion [data-kq-reveal="left"]:not(.v)  { transform: translate3d(-34px, 0, 0); }
html.kq-motion [data-kq-reveal="right"]:not(.v) { transform: translate3d(34px, 0, 0); }

/* fade — when any movement would be noise */
html.kq-motion [data-kq-reveal="fade"]:not(.v) { transform: none; }

/* ---- Revealed state: one rule wins for every variant ---- */
html.kq-motion .sr.v,
html.kq-motion [data-kq-reveal].v {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Engine strips will-change after the transition ends via .kq-settled,
   so we never leave hundreds of promoted layers alive in memory. */
html.kq-motion .kq-settled {
  will-change: auto;
}

/* ---- Stagger. Set as a custom property by the engine so nth-child
        ceilings (v10 capped at 9) no longer exist. ---- */
html.kq-motion .kq-stagger > * {
  transition-delay: calc(var(--kq-i, 0) * 70ms);
}
html.kq-motion .kq-stagger.kq-stagger-tight > * {
  transition-delay: calc(var(--kq-i, 0) * 45ms);
}

/* Phones sit close to the face: shorten travel, drop the blur cost. */
@media (max-width: 720px) {
  html.kq-motion .sr:not(.v),
  html.kq-motion [data-kq-reveal="rise"]:not(.v) { transform: translate3d(0, 18px, 0); }
  html.kq-motion [data-kq-reveal="flip"]:not(.v),
  html.kq-motion .kq-stagger > [data-kq-reveal="flip"]:nth-child(even):not(.v) {
    transform: perspective(800px) translate3d(0, 22px, 0) scale(.975);
    filter: none;
  }
  html.kq-motion [data-kq-reveal="scale"]:not(.v) { filter: none; transform: scale(1.02); }
  html.kq-motion .kq-stagger > * { transition-delay: calc(var(--kq-i, 0) * 45ms); }
}

/* ==========================================================================
   2. LINE-BY-LINE HEADING REVEAL
   The engine wraps each visual line of a [data-kq-lines] heading. Lines
   wipe up from behind their own mask — the type does the work, no extra
   decoration needed.
   ========================================================================== */
.kq-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;   /* room for descenders inside the mask */
  margin-bottom: -0.08em;
}
.kq-line > span {
  display: block;
  will-change: transform;
}
html.kq-motion [data-kq-lines]:not(.v) .kq-line > span {
  transform: translate3d(0, 105%, 0);
}
html.kq-motion [data-kq-lines] .kq-line > span {
  transition: transform .82s var(--kq-out);
  transition-delay: calc(var(--kq-i, 0) * 85ms);
}

/* ==========================================================================
   3. DEPTH / 3D CARDS
   Perspective is scoped to grids, never <body> — putting it on body breaks
   position:fixed for the grain overlay and the WhatsApp float.
   ========================================================================== */
.kq-journey-grid,
.kq-service-groups,
.kq-video-grid,
.kq-editorial-grid,
.kq-svc-grid,
.howstart-grid,
.kq-depth-grid {
  perspective: 1600px;
  perspective-origin: 50% 30%;
}

.kq-journey-card,
.howstart-card,
.kq-service-group,
.kq-video-card,
.kq-editorial-card,
.kq-fee-table-card,
.faq-card,
.kq-3d-card,
.kq-depth {
  --kq-rx: 0deg;
  --kq-ry: 0deg;
  --kq-lift: 0px;
  --kq-mx: 50%;
  --kq-my: 50%;
  --kq-press: 1;

  position: relative;
  transform-style: preserve-3d;
  transform:
    translate3d(0, var(--kq-lift), 0)
    rotateX(var(--kq-rx))
    rotateY(var(--kq-ry))
    scale(var(--kq-press));
  transition:
    transform var(--kq-dur) var(--kq-out),
    box-shadow var(--kq-dur) var(--kq-out-soft),
    border-color var(--kq-dur-fast) linear;
}

/* While the pointer is actively driving a card, the engine sets transforms
   every frame — a transition would fight it and feel laggy. */
.kq-live-tilt {
  transition:
    box-shadow var(--kq-dur) var(--kq-out-soft),
    border-color var(--kq-dur-fast) linear !important;
  will-change: transform;
}

/* Hover lift works with zero JS, so keyboard and touch users get it too. */
.kq-journey-card:hover,
.howstart-card:hover,
.kq-service-group:hover,
.kq-video-card:hover,
.kq-editorial-card:hover,
.faq-card:hover,
.kq-3d-card:hover,
.kq-depth:hover,
.kq-journey-card:focus-within,
.howstart-card:focus-within,
.kq-service-group:focus-within,
.kq-video-card:focus-within,
.kq-editorial-card:focus-within,
.kq-3d-card:focus-within,
.kq-depth:focus-within {
  --kq-lift: -6px;
  box-shadow:
    0 2px 4px rgba(26, 28, 48, .04),
    0 18px 34px -14px rgba(26, 28, 48, .16),
    0 34px 70px -28px rgba(26, 28, 48, .22),
    0 0 0 1px rgba(164, 137, 69, .20);
}
.kq-journey-card:active,
.howstart-card:active,
.kq-3d-card:active,
.kq-depth:active { --kq-press: .988; }

/* ---- Inner parallax layers. Opt in with data-kq-layer="1|2|3". ---- */
[data-kq-layer="1"] { transform: translateZ(14px); }
[data-kq-layer="2"] { transform: translateZ(30px); }
[data-kq-layer="3"] { transform: translateZ(48px); }
[data-kq-layer] { transition: transform var(--kq-dur) var(--kq-out); }

/* ==========================================================================
   4. SHEEN — one injected <span class="kq-sheen"> per card
   Cursor-tracked specular highlight plus a lit top edge. It renders behind
   card content and above the card background, so nothing in the template
   needs to know it exists.
   ========================================================================== */
.kq-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--kq-out-soft);
}
/* the moving highlight */
.kq-sheen::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    260px circle at var(--kq-mx) var(--kq-my),
    rgba(212, 185, 106, .22),
    rgba(212, 185, 106, .07) 38%,
    transparent 62%
  );
}
/* a hairline of light along the edge nearest the cursor */
.kq-sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--kq-sheen-angle, 145deg),
    rgba(255, 255, 255, .55),
    rgba(255, 255, 255, 0) 42%
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  opacity: .8;
}

.kq-journey-card:hover  > .kq-sheen,
.howstart-card:hover    > .kq-sheen,
.kq-service-group:hover > .kq-sheen,
.kq-video-card:hover    > .kq-sheen,
.kq-editorial-card:hover > .kq-sheen,
.faq-card:hover         > .kq-sheen,
.kq-3d-card:hover       > .kq-sheen,
.kq-depth:hover         > .kq-sheen,
.kq-live-tilt           > .kq-sheen { opacity: 1; }

/* On dark cards the warm-white highlight reads as dust; go pale gold. */
.kq-3d-card-feat .kq-sheen::before,
.kq-dark .kq-sheen::before,
[data-kq-tone="dark"] .kq-sheen::before {
  background: radial-gradient(
    260px circle at var(--kq-mx) var(--kq-my),
    rgba(243, 226, 174, .20),
    rgba(243, 226, 174, .05) 38%,
    transparent 62%
  );
}
[data-kq-tone="dark"] .kq-sheen::after { opacity: .35; }

/* Card content must sit above the sheen. Templates set their own stacking
   contexts inconsistently, so this is the safety net. */
.kq-journey-card > *:not(.kq-sheen),
.howstart-card > *:not(.kq-sheen),
.kq-service-group > *:not(.kq-sheen),
.kq-video-card > *:not(.kq-sheen),
.kq-editorial-card > *:not(.kq-sheen),
.kq-3d-card > *:not(.kq-sheen),
.kq-depth > *:not(.kq-sheen) { position: relative; z-index: 2; }

/* ==========================================================================
   5. SERVICE LINK LIFT
   ========================================================================== */
.kq-service-links a {
  transition: transform var(--kq-dur-fast) var(--kq-out),
              background var(--kq-dur-fast) linear,
              padding-left var(--kq-dur-fast) var(--kq-out);
}
.kq-service-links a:hover {
  transform: translateZ(18px);
  padding-left: 1.1rem;
}

/* ==========================================================================
   6. MAGNETIC CTAs
   The engine writes --kq-magx/--kq-magy on fine pointers only. Falls back
   to a plain hover lift everywhere else.
   ========================================================================== */
.kq-magnetic {
  --kq-magx: 0px;
  --kq-magy: 0px;
  transform: translate3d(var(--kq-magx), var(--kq-magy), 0);
  transition: transform .5s var(--kq-out), box-shadow var(--kq-dur) var(--kq-out-soft);
}
.kq-magnetic.kq-mag-live { transition: box-shadow var(--kq-dur) var(--kq-out-soft); }

/* ==========================================================================
   7. SCROLL PROGRESS
   Uses the native scroll-driven animation where the browser supports it
   (zero JS on the scroll path), and falls back to the engine's rAF writer.
   ========================================================================== */
#kqProgress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: var(--kq-z-toast);
  background: linear-gradient(90deg, var(--kq-gold-lo), var(--kq-gold-hi) 55%, var(--kq-gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  box-shadow: 0 1px 8px rgba(164, 137, 69, .38);
}

@supports (animation-timeline: scroll()) {
  html.kq-motion #kqProgress {
    animation: kq-progress linear;
    animation-timeline: scroll(root block);
  }
  @keyframes kq-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ==========================================================================
   8. AMBIENT HERO DEPTH
   ========================================================================== */
.hero .fs,
.hero .hero-grid {
  transition: transform .9s var(--kq-out);
}
.hero .fs { will-change: transform; }

/* ==========================================================================
   9. INTERACTION POLISH
   ========================================================================== */

/* One-sweep gold shimmer. Hover only, never looping. */
.btn-gold, .hcard-cta, .vc-next, .vc-submit { position: relative; overflow: hidden; }
.btn-gold::after, .hcard-cta::after, .vc-next::after, .vc-submit::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .34) 50%, transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: none;
}
.btn-gold:hover::after, .hcard-cta:hover::after,
.vc-next:hover:not(:disabled)::after, .vc-submit:hover:not(:disabled)::after {
  transition: left .62s var(--kq-out);
  left: 130%;
}

.btn-gold:active, .hcard-cta:active, .btn-ghost:active, .btn-outline:active {
  transform: translateY(0) scale(.975);
  transition-duration: .08s;
}

/* Nav underline grows from the left */
.nav-main ul li > a { position: relative; }
.nav-main ul li > a::after {
  content: '';
  position: absolute;
  left: .65rem; right: .65rem; bottom: .18rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kq-gold), var(--kq-gold-hi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .32s var(--kq-out);
}
.nav-main ul li > a:hover::after,
.nav-main ul li.current-menu-item > a::after,
.nav-main ul li.current_page_item > a::after { transform: scaleX(1); }
.nav-main ul li ul.sub-menu li a::after { display: none; }

/* Section heading accent draws itself in as the heading arrives */
.sc-head h2 em {
  background-image: linear-gradient(90deg, rgba(164, 137, 69, .42), rgba(212, 185, 106, .42));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 2px;
  transition: background-size .9s .3s var(--kq-out);
}
.sr.v .sc-head h2 em,
.sc-head.sr.v h2 em,
.v .sc-head h2 em { background-size: 100% 2px; }

/* Eligibility result pop */
@keyframes kqResultPop {
  0%   { transform: scale(.94); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
#calcResult.vc-pop { animation: kqResultPop .5s var(--kq-out); }
#calcResult.vc-pop .calc-result-icon { animation: kqResultPop .55s .08s var(--kq-out) backwards; }

/* ==========================================================================
   10. FOCUS
   Every interactive element gets a visible ring. Non-negotiable.
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kq-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :where(a, button):focus-visible,
[data-kq-tone="dark"] :where(a, button):focus-visible {
  outline-color: var(--kq-gold-pale);
}

/* ==========================================================================
   11. REDUCED MOTION & PRINT
   `html.kq-motion` is never added under reduced motion, so the reveal
   system is already inert. These rules shut down the decorative extras.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .sr, [data-kq-reveal], .kq-line > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  #kqProgress { display: none; }
  .kq-sheen { display: none; }
  .btn-gold::after, .hcard-cta::after, .vc-next::after, .vc-submit::after { display: none; }
  .sc-head h2 em { background-size: 100% 2px; }
  .hero .fs, .hero .hero-grid { transform: none !important; }
}

@media print {
  .sr, [data-kq-reveal], .kq-line > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .kq-sheen, #kqProgress, .kq-svc-floater { display: none !important; }
  * { animation: none !important; transition: none !important; }
}