/* ==========================================================================
   KQ Solicitors — Atelier design layer  v11.1.0
   --------------------------------------------------------------------------
   The deep makeover. Loads last, after style.css, kq-motion.css and kq-ui.css.

   THE ONE CONSTRAINT
   ------------------
   The palette is frozen. Navy #1A1C30, gold #A48945, cream #FAF6EE and their
   existing tints are used exactly as-is — every colour here resolves to a
   token already defined in style.css. What changes is everything *around*
   colour: the type scale, the spacing rhythm, the elevation ramp, the way
   surfaces catch light, the density of detail. A brand is not just its
   colours; it is the confidence of the execution. This layer supplies the
   confidence without touching the colours.

   WHY A LAYER, NOT 50 REWRITES
   ----------------------------
   The 50 page templates carry real SEO copy and bespoke inline CSS. Rewriting
   them means re-testing 50 pages of legal content. Instead this works through
   the class hooks every page already renders — .hero, .sc-head, .btn-gold,
   .srv-card, .section, the header, the footer — so a single well-made file
   lifts the whole site at once. Page-specific inline styles that are more
   specific than these rules will win; that is intentional and safe.

   WHAT THE SKILLS FLAGGED, AND WHAT I DID ABOUT IT
   ------------------------------------------------
   The design references call out today's AI tells: default glassmorphism,
   muddy cards, the tiny-uppercase-eyebrow-on-every-section reflex, side-stripe
   borders, gradient text. The v10 theme leaned on several. This layer does not
   amplify them — it refines the glass into something intentional, gives the
   eyebrow a real typographic system so it reads as brand voice, and replaces
   muddy translucency with clean surfaces that still feel layered.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — scale, rhythm, elevation, materials
   ========================================================================== */
:root {
  /* ---- Fluid modular type scale (1.20 minor-third, 320px→1400px) ----
     Replaces 295 hand-tuned font-sizes with one coherent system. Templates
     still using literal sizes are untouched; the shared components below
     move onto the scale. */
  --step--2: clamp(0.69rem, 0.66rem + 0.15vw, 0.77rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.26vw, 1.15rem);   /* body */
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.50vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.59rem + 0.69vw, 2.25rem);
  --step-4:  clamp(2.07rem, 1.88rem + 0.95vw, 2.81rem);
  --step-5:  clamp(2.49rem, 2.23rem + 1.29vw, 3.52rem);
  --step-6:  clamp(2.99rem, 2.64rem + 1.74vw, 4.40rem);   /* hero ceiling ~70px */

  /* ---- Fluid spacing scale ---- */
  --space-2xs: clamp(0.44rem, 0.42rem + 0.10vw, 0.50rem);
  --space-xs:  clamp(0.69rem, 0.65rem + 0.18vw, 0.81rem);
  --space-sm:  clamp(0.88rem, 0.83rem + 0.24vw, 1.06rem);
  --space-md:  clamp(1.31rem, 1.24rem + 0.36vw, 1.60rem);
  --space-lg:  clamp(1.75rem, 1.65rem + 0.48vw, 2.13rem);
  --space-xl:  clamp(2.63rem, 2.48rem + 0.73vw, 3.19rem);
  --space-2xl: clamp(3.50rem, 3.30rem + 0.97vw, 4.25rem);
  --space-3xl: clamp(5.25rem, 4.95rem + 1.46vw, 6.38rem);

  /* ---- Radius scale ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* ---- Elevation ramp. Navy-tinted, two-part (contact + ambient), so
          surfaces feel lit from above rather than dropped on a flat grey. ---- */
  --elev-1: 0 1px 2px rgba(26,28,48,.05), 0 2px 6px -1px rgba(26,28,48,.05);
  --elev-2: 0 1px 3px rgba(26,28,48,.05), 0 8px 20px -6px rgba(26,28,48,.10);
  --elev-3: 0 2px 4px rgba(26,28,48,.05), 0 16px 34px -10px rgba(26,28,48,.13);
  --elev-4: 0 4px 8px rgba(26,28,48,.06), 0 28px 56px -16px rgba(26,28,48,.18);
  --elev-gold: 0 8px 30px -8px rgba(164,137,69,.42);

  /* ---- Hairlines. A single warm hairline reads as craft; a grey 1px
          border reads as a wireframe. ---- */
  --hair: 1px solid rgba(26,28,48,.08);
  --hair-gold: 1px solid rgba(164,137,69,.22);

  /* ---- Signature easings, shared with the motion engine ---- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ==========================================================================
   2. BODY — paper grain
   A near-invisible tooth on the cream so large flat areas read as fine stock
   rather than a flat fill. One tiny inline SVG, fixed, GPU-cheap, no request.
   ========================================================================== */
body {
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}
/* Content must sit above the grain.
   ---------------------------------------------------------------------------
   v11.2.3 — THIS RULE BROKE EVERY DROPDOWN ON THE SITE.
   It used to read:

     .site-header, .topbar, main, footer, .hero, section, .kq-skip
       { position: relative; z-index: 1; }

   Lifting the page content above body::before is correct, but sweeping the
   header into the same declaration dropped it from style.css's z-index:100 to
   z-index:1 — the same layer as .hero and every <section>. Two consequences,
   both fatal for the navigation:

     1. .site-header became a stacking context at level 1, which traps its
        children. The submenu's own z-index:200 is resolved INSIDE that
        context, so it can never rise above a sibling of the header.
     2. .hero and the sections come later in DOM order at the identical
        z-index, so they paint on top.

   Net effect: opening "About Us" drew the dropdown underneath the hero. Only
   the sliver overlapping the header's own band was visible; the rest was
   covered. Same for the language menu in the topbar.

   The fix is to keep the grain lift for content, but give the two sticky
   chrome bars their own tier above it. Layer scale:
       0    body::before paper grain
       1    page content (main, footer, hero, sections)
       100  sticky chrome (header, topbar) and anything they open
   ------------------------------------------------------------------------ */
main, footer, .hero, section { position: relative; z-index: 1; }

/* Sticky chrome sits above content so its dropdowns are not painted over. */
.site-header { position: sticky; z-index: 100; }
.topbar      { position: relative; z-index: 101; }
.kq-skip     { position: relative; z-index: 200; }

/* Belt and braces: the panels themselves stay above the header's own band,
   so a future stacking-context change cannot bury them again. */
.nav-main ul li ul.sub-menu,
.kq-translate-wrap .lang-dropdown,
.lang-dropdown { z-index: 300; }

/* ==========================================================================
   3. TYPOGRAPHY — refined display feel
   ========================================================================== */
.hero-text h1,
.sc-head h2,
.page-hero h1,
.cta-section h2,
.fee-hero h1,
.whyus-head h2,
.about-section h2 {
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* The gold italic accent is the brand's signature gesture. Give it optical
   care: true italic, a hair of extra tracking so it breathes against the
   upright roman around it. */
.hero-text h1 em,
.sc-head h2 em,
.cta-section h2 em,
h1 em, h2 em {
  font-style: italic;
  letter-spacing: 0;
  padding-right: 0.02em;
}

p, li { line-height: 1.72; }

/* ==========================================================================
   4. SECTION RHYTHM
   Vary the vertical rhythm instead of the same 4.5rem everywhere — rhythm is
   what stops a long page feeling like a spreadsheet.
   ========================================================================== */
.section { padding-block: var(--space-2xl); }
.section + .section { padding-top: var(--space-xl); }

/* A hairline seam between adjacent light sections, so they read as distinct
   panels of one document rather than one undifferentiated scroll. */
.section + .section:not([class*="cta"]):not(.hero)::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,28,48,.10) 20%, rgba(164,137,69,.22) 50%, rgba(26,28,48,.10) 80%, transparent);
}

/* ==========================================================================
   5. SECTION HEADERS — editorial, not the eyebrow reflex
   The skill flags the tiny-uppercase-kicker-on-every-section as an AI tell.
   Rather than delete it (50 templates render it), give it a real system: a
   short drawn gold rule pairs with the kicker so it reads as a deliberate
   brand device, and the heading gets proper display treatment.
   ========================================================================== */
.sc-head { margin-bottom: var(--space-xl); }
.sc-head h2 { font-size: var(--step-4); line-height: 1.12; }

/* Kicker: .sc-label is the real hook the templates render before every h2 —
   plain gold caps, which is precisely the "eyebrow on every section" AI tell.
   Rather than delete it from 50 templates, promote it into a deliberate brand
   device: pair the caps with a short drawn gold rule so it reads as a mark,
   not scaffolding. Same for the other common kicker hooks. */
.sc-label,
.sc-eyebrow, .sc-kicker, .sc-head .eyebrow, .section-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  /* A hair deeper than --gold-dark so the tracked caps clear 4.5:1 on cream
     (measured 5.56:1). Scoped to the kicker only; the palette tokens the rest
     of the site uses are untouched. */
  color: #75612D;
  margin-bottom: var(--space-sm);
}
.sc-label::before,
.sc-eyebrow::before, .sc-kicker::before,
.sc-head .eyebrow::before, .section-label::before {
  content: "";
  width: 24px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
/* Centred headers get the rule on both sides for symmetry. */
.sc-head { text-align: center; }
.sc-head .sc-label,
.sc-head .sc-eyebrow, .sc-head .sc-kicker, .sc-head .eyebrow { justify-content: center; }
.sc-head .sc-label::after,
.sc-head .sc-eyebrow::after, .sc-head .sc-kicker::after, .sc-head .eyebrow::after {
  content: "";
  width: 24px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
/* On dark sections the kicker needs the brighter gold to stay legible. */
[data-kq-tone="dark"] .sc-label, .cta-section .sc-label,
.whyus-head .sc-label { color: var(--gold-light); }

/* Sub-copy under a section heading */
.sc-head p, .sc-sub {
  font-size: var(--step-0);
  color: var(--text-mid);
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.7;
}

/* ==========================================================================
   6. HERO — richer composition, same colours
   ========================================================================== */
.hero { min-height: min(94vh, 900px); }

/* Rebuild the background as a layered mesh from the existing navy/gold/indigo,
   plus a fine vignette and a hairline gold horizon. More depth, zero new hues. */
.hero-bg {
  background:
    radial-gradient(60% 50% at 22% 32%, rgba(164,137,69,.20), transparent 60%),
    radial-gradient(46% 46% at 82% 28%, rgba(191,164,92,.10), transparent 60%),
    radial-gradient(70% 60% at 68% 88%, rgba(39,39,58,.70), transparent 62%),
    linear-gradient(168deg, #0c0d1e 0%, var(--deep) 34%, #141530 64%, var(--indigo) 100%);
}
/* A soft top-to-bottom vignette anchors the content and adds gravity. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(8,9,20,.45) 100%),
    linear-gradient(to top, rgba(8,9,20,.35), transparent 30%);
}
.hero-c { position: relative; z-index: 3; }

/* Floating orbs: from hard-bordered squares to soft lit glass discs.
   v11.2.3 — specificity fix. This block was written as a bare `.fs`, but
   style.css sets the shape per-orb with `.fs:nth-child(3){border-radius:22px}`,
   which is class + pseudo-class and therefore WINS. So the makeover only ever
   half-landed: orb 4 (already 50%) became a disc, while orb 3 kept its 22px
   rounded-square corners and merely picked up the new gold tint. The hero
   showed one circle and one dark rounded square — visibly a mistake rather
   than a pair. Matching the specificity makes both render as intended. */
.fs,
.hero .fs:nth-child(3),
.hero .fs:nth-child(4) {
  border-radius: 50%;
  border: 1px solid rgba(191,164,92,.14);
  background: radial-gradient(circle at 35% 30%, rgba(191,164,92,.10), transparent 70%);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 40px rgba(191,164,92,.06);
}

/* Hero badge: from a flat pill to a lit capsule with an inner highlight. */
.hbadge {
  font-size: var(--step--2);
  letter-spacing: .14em;
  padding: .42rem 1rem;
  background: linear-gradient(180deg, rgba(164,137,69,.16), rgba(164,137,69,.08));
  border: 1px solid rgba(191,164,92,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 16px -6px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.hbadge-dot {
  box-shadow: 0 0 8px rgba(191,164,92,.9);
}

.hero-text h1 { font-size: var(--step-6); line-height: 1.06; }
.hero-text > p { font-size: var(--step-0); color: rgba(250,246,238,.62); max-width: 30rem; }

/* ==========================================================================
   7. BUTTONS — lit, tactile, consistent
   ========================================================================== */
.btn-gold, .hcard-cta, .hdr-cta, .mob-nav-cta {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  color: var(--deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.10),
    var(--elev-gold);
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-soft), filter .25s;
}
.btn-gold { font-size: var(--step--1); padding: .82rem 1.9rem; }
.btn-gold:hover, .hcard-cta:hover, .hdr-cta:hover, .mob-nav-cta:hover {
  transform: translateY(-3px);
  color: var(--deep);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 14px 40px -10px rgba(164,137,69,.55);
}

/* Secondary — outline that fills on hover, so the hierarchy is unmistakable. */
.btn-outline, .btn-ghost {
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 650;
  padding: .78rem 1.7rem;
  border: 1.5px solid rgba(164,137,69,.45);
  color: var(--gold-dark);
  background: transparent;
  transition: transform .3s var(--e-out), background .3s, border-color .3s, color .3s;
}
.btn-outline:hover, .btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(164,137,69,.08);
  border-color: var(--gold);
  color: var(--gold-dark);
}
/* On dark surfaces the ghost goes pale so it stays visible. */
.hero .btn-outline, .hero .btn-ghost,
.cta-section .btn-outline, [data-kq-tone="dark"] .btn-ghost {
  border-color: rgba(243,236,217,.35);
  color: var(--cream);
}
.hero .btn-outline:hover, .cta-section .btn-outline:hover {
  background: rgba(250,246,238,.08);
  border-color: rgba(243,236,217,.6);
  color: var(--cream);
}

/* ==========================================================================
   8. CARDS — clean surfaces, refined depth
   The v10 cards were translucent glass over a busy background, which muddies
   text. Give them a clean near-cream surface, a warm hairline, and depth from
   the elevation ramp instead of blur. The gold top-rule stays but as a subtle
   craft detail, not a highlighter stripe. The motion engine adds the tilt and
   sheen on top of this resting state.
   ========================================================================== */
.srv-card, .team-card, .blog-card,
.kq-journey-card, .howstart-card, .kq-3d-card, .kq-editorial-card, .faq-card {
  background: linear-gradient(180deg, #fff, #FDFBF5);
  backdrop-filter: none;
  border: var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-soft), border-color .3s;
}
.srv-card:hover, .team-card:hover, .blog-card:hover,
.kq-journey-card:hover, .howstart-card:hover, .kq-3d-card:hover,
.kq-editorial-card:hover, .faq-card:hover {
  border-color: rgba(164,137,69,.28);
  box-shadow: var(--elev-3);
}

/* Refine the gold top-rule: thinner, softer, and it now fades in rather than
   wiping like a loading bar. */
.srv-card::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent);
  transform: scaleX(.4);
  opacity: 0;
  transition: opacity .4s var(--e-soft), transform .5s var(--e-out);
}
.srv-card:hover::before { opacity: 1; transform: scaleX(1); }

.srv-card { padding: var(--space-md); }
.srv-card h3 { font-size: var(--step-1); }
.srv-card p { font-size: var(--step--1); color: var(--text-mid); line-height: 1.7; }

/* A restrained corner tick — the kind of small mark that reads as considered.
   Applied to the primary journey/how-to-start cards only. */
.kq-journey-card, .howstart-card { overflow: visible; }
.kq-journey-card::after, .howstart-card::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 14px; height: 14px;
  border-top: 1.5px solid rgba(164,137,69,.35);
  border-right: 1.5px solid rgba(164,137,69,.35);
  border-top-right-radius: 4px;
  opacity: 0;
  transition: opacity .4s var(--e-soft), transform .4s var(--e-out);
  transform: translate(-3px, 3px);
}
.kq-journey-card:hover::after, .howstart-card:hover::after {
  opacity: 1; transform: translate(0, 0);
}

/* ==========================================================================
   9. HERO CARD (the eligibility-checker / booking card in the hero)
   From flat glass to a genuinely premium floating panel.
   ========================================================================== */
.hcard {
  border-radius: var(--r-lg);
  border: 1px solid rgba(191,164,92,.18);
  background: linear-gradient(180deg, rgba(31,32,58,.92), rgba(20,21,44,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 70px -20px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.2);
  backdrop-filter: blur(14px);
}
.hcard-title, .hcard h3 { font-size: var(--step-2) !important; }

/* ==========================================================================
   10. HEADER & NAV
   ========================================================================== */
.site-header {
  background: rgba(250,246,238,.72);
  border-bottom: 1px solid rgba(164,137,69,.10);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
.site-header.sc {
  background: rgba(250,246,238,.90);
  border-bottom-color: rgba(164,137,69,.16);
  box-shadow: 0 6px 30px -12px rgba(26,28,48,.18);
}
.nav-main ul li a {
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--text-mid);
}
.nav-main ul li a:hover { color: var(--deep); background: transparent; }

/* Dropdown submenu: crisper surface and a lift-in. */
.nav-main ul li ul.sub-menu {
  border: var(--hair);
  border-radius: var(--r-sm);
  box-shadow: var(--elev-3);
  background: rgba(252,250,244,.98);
  backdrop-filter: blur(20px);
}

/* WhatsApp float — v11.2.3.
   .kq-wa-float is overflow:hidden (it has to be, so the "Chat on WhatsApp"
   label can slide out from under the icon without spilling). .kq-wa-pulse is
   a CHILD of it, animating scale(0.9) -> scale(1.8) to suggest a radiating
   ring. A child cannot escape its parent's overflow, so the ring was being
   sliced flat against the button's 50px rounded rect — rendering as a stray
   pale-green disc offset from the button rather than a pulse.

   It cannot be fixed in place: position:fixed would normally escape overflow,
   but .kq-wa-float carries a transform (entrance animation, and translateY on
   hover), which makes it the containing block for fixed descendants and
   re-clips them. A ::after is a descendant too, so that is clipped as well.

   Disabled rather than reworked. It is decoration on a button that is already
   a saturated green circle against cream — it was not earning the artifact.
   Markup is untouched, so re-enabling is a one-line revert if wanted. */
.kq-wa-pulse { display: none; }

.topbar { background: var(--deep); font-size: var(--step--2); }
.topbar-right a { border-radius: 999px; font-weight: 700; }

/* ==========================================================================
   11. TRUST STRIP / LOGOS
   ========================================================================== */
.trust-strip { padding-block: var(--space-xl); }
.trust-strip img, .logo-row img {
  filter: grayscale(1) opacity(.5);
  transition: filter .4s var(--e-soft), transform .4s var(--e-out);
}
.trust-strip img:hover, .logo-row img:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}

/* ==========================================================================
   12. CTA SECTION — the closing appeal
   ========================================================================== */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 20% 20%, rgba(164,137,69,.16), transparent 60%),
    radial-gradient(46% 60% at 84% 84%, rgba(191,164,92,.10), transparent 60%);
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2 { font-size: var(--step-5); line-height: 1.1; }

/* A drawn gold hairline above the CTA heading — a curtain-raiser. */
.cta-section .sc-head::before,
.cta-section h2 + .cta-rule { display: none; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer, footer.site-footer, .footer {
  position: relative;
}
.site-footer a { transition: color .2s; }

/* ==========================================================================
   14. FORMS — inputs that feel considered
   ========================================================================== */
.fg input, .fg select, .fg textarea,
.wpcf7 input:not([type=submit]), .wpcf7 select, .wpcf7 textarea {
  border-radius: var(--r-xs);
  border: 1.5px solid rgba(26,28,48,.12);
  background: #fff;
  padding: .8rem 1rem;
}
.fg label { font-size: var(--step--1); font-weight: 600; color: var(--text); }

/* ==========================================================================
   15. WHATSAPP FLOAT — refined
   ========================================================================== */
#waFloat, .kq-wa-float {
  box-shadow: 0 10px 30px -6px rgba(37,211,102,.5), 0 4px 10px rgba(0,0,0,.2);
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-soft);
}
#waFloat:hover, .kq-wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 40px -8px rgba(37,211,102,.6), 0 6px 14px rgba(0,0,0,.25);
}

/* ==========================================================================
   16. SCROLLBAR & SELECTION — the last 2%
   ========================================================================== */
::selection { background: rgba(164,137,69,.26); color: var(--deep); }

/* A thin custom scrollbar on WebKit that matches the brand, without hiding it
   (which harms usability). */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(164,137,69,.35);
    border: 3px solid var(--cream);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(164,137,69,.55); }
}

/* ==========================================================================
   17. RESPONSIVE — tighten the makeover on small screens
   ========================================================================== */
@media (max-width: 720px) {
  .hero { min-height: auto; }
  .hero-text h1 { font-size: var(--step-5); }
  .section { padding-block: var(--space-xl); }
  body::before { opacity: .35; }   /* grain is heavier per-px on dense phone screens */
  .kq-journey-card::after, .howstart-card::after { display: none; }
}

/* ==========================================================================
   18. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-outline, .srv-card, #waFloat,
  .srv-card::before, .kq-journey-card::after { transition: none !important; }
}
@media print {
  body::before, .hero::after, .cta-section::before { display: none !important; }
  .srv-card, .team-card, .blog-card, .faq-card, .kq-journey-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
  }
}