/* ============================================================
   JOSEQUAL — Polish layer  (loads LAST, after motion.css)
   Accessibility, typography, scroll behaviour and micro-detail
   refinements. Purely additive & fully reversible — delete this
   file + its <link> tag to revert.
   ============================================================ */

/* ------------------------------------------------------------
   1 · ACCESSIBLE FOCUS STATES
   Keyboard users get a clear, on-brand focus ring; mouse users
   never see it (:focus-visible). Previously there were none.
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 6px;
}
/* The big CTAs get a soft halo instead of a hard ring */
.btn:focus-visible,
.status-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(90, 141, 255, 0.55), 0 10px 30px -10px var(--blue-glow);
}

/* ------------------------------------------------------------
   2 · ANCHOR OFFSET
   Jumping to #services etc. (or loading a deep link) no longer
   hides the heading under the fixed nav.
   ------------------------------------------------------------ */
html { scroll-padding-top: 96px; }
section[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------
   3 · TYPOGRAPHY POLISH
   Balanced headline line-breaks + tidier paragraph rags, and
   crisper rendering. text-wrap degrades gracefully where
   unsupported.
   ------------------------------------------------------------ */
body { text-rendering: optimizeLegibility; }
.sec-head h2,
.why h2,
.cta-box h2,
.tst-main blockquote { text-wrap: balance; }
.sec-head p,
.hero .lead,
.why .sub,
.cta-box p,
.svc .desc,
.feat-item p { text-wrap: pretty; }

/* Stop awkward single-word orphans in long descriptions */
.svc .desc, .feat-item p, .proc p { hyphens: none; }

/* ------------------------------------------------------------
   4 · CUSTOM SCROLLBAR (dark, on-brand)
   ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--blue-deep) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(90, 141, 255, 0.35);
  border: 3px solid var(--navy-950);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(90, 141, 255, 0.6); }

/* ------------------------------------------------------------
   5 · MICRO-DETAILS
   ------------------------------------------------------------ */
/* Kill the grey tap-flash on mobile taps */
* { -webkit-tap-highlight-color: transparent; }

/* Smooth, consistent transition on every interactive surface that
   didn't already declare one */
.nav-links a, .foot-col a, .foot-bot .links a, .mobile-menu a { will-change: auto; }

/* Service-card numbers sit a hair crisper above the gradient */
.svc .num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Stat / counter numbers don't jiggle while counting (fixed-width digits) */
.stat .s-num, .heroC .stat-rail .m-num, .s-num span, .m-num span {
  font-variant-numeric: tabular-nums;
}

/* Slightly richer divider under the logo strip on dark */
.logos:not(.theme-light) { background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent); }

/* Images fade in instead of popping (where the browser supports it) */
img:not(.client-logo) { background-color: rgba(255,255,255,0.02); }

/* Footer links: the accent bar grows from the left on hover for a
   more deliberate feel (keeps existing colour change) */
.foot-col a { position: relative; }

/* Selection stays legible inside light sections */
.theme-light ::selection, .theme-tint ::selection { background: var(--blue); color: #fff; }

/* ------------------------------------------------------------
   6 · REDUCED MOTION — respect it everywhere
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { scroll-behavior: auto !important; }
}