/*
 * Site-wide polish layer: motion, hover states, focus and the "new service"
 * highlights. Loaded on every page, after shared.css.
 *
 * Each page prints its own <style> block later in the document, so rules that
 * must win here are prefixed with "html body". Effects use separate properties
 * (translate, injected spans) rather than transform/::before, which the pages
 * already use for their own reveal and hover animations.
 */

/* ═══ FOUNDATIONS ═══ */
::selection { background: #1E5A9C; color: #fff; }

html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 3px solid #4A9FD4;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ═══ SCROLL PROGRESS ═══ */
.pdvx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000;
  background: linear-gradient(90deg, #0A2540, #1E5A9C 45%, #4A9FD4);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
.admin-bar .pdvx-progress { top: 32px; }
/* Driven by the browser's compositor, so it costs no JavaScript while scrolling.
   enhance.js only takes over in browsers without scroll timelines. */
@supports (animation-timeline: scroll()) {
  .pdvx-progress { animation: pdvxProgress linear both; animation-timeline: scroll(root); }
  @keyframes pdvxProgress { to { transform: scaleX(1); } }
}

/* ═══ NAVIGATION ═══ */
html body .pdv-menu > li > a:not(.pdv-nav-cta) {
  background-image: linear-gradient(90deg, #1E5A9C, #4A9FD4);
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 3px);
  background-size: 0 2px;
  transition: color .25s ease, background-color .25s ease, background-size .3s cubic-bezier(.23,1,.32,1);
}
html body .pdv-menu > li > a:not(.pdv-nav-cta):hover,
html body .pdv-menu > li > a[aria-current="page"]:not(.pdv-nav-cta),
html body .pdv-menu > li.pdv-has-drop:hover > a { background-size: calc(100% - 20px) 2px; }
html body .pdv-menu > li > a[aria-current="page"]:not(.pdv-nav-cta) { color: #1E5A9C; }

html body .pdvx-new {
  display: inline-block; padding: 2px 7px; border-radius: 100px; vertical-align: 1px;
  background: linear-gradient(135deg, #1E5A9C, #2F7DBB); color: #fff !important;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; line-height: 1.4; text-transform: uppercase;
  -webkit-text-fill-color: #fff;
}
.pdvx-nav-dot {
  display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%;
  background: #4A9FD4; vertical-align: 2px;
}

/* Featured services in the mega menu */
.pdv-mega-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
html body a.pdv-mega-feat {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; white-space: normal;
  background: linear-gradient(135deg, #0A2540 0%, #1E5A9C 100%); color: #fff;
  box-shadow: 0 10px 24px rgba(30,90,156,.26); text-decoration: none;
  transition: translate .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
}
html body a.pdv-mega-feat:hover {
  translate: 0 -3px; color: #fff; background-color: transparent;
  background-image: linear-gradient(135deg, #0A2540 0%, #1E5A9C 70%, #4A9FD4 130%);
  box-shadow: 0 16px 34px rgba(30,90,156,.38);
}
.pdv-mega-feat-abbr {
  flex-shrink: 0; min-width: 44px; padding: 9px 7px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  font-size: 11.5px; font-weight: 800; letter-spacing: .4px; color: #fff;
}
.pdv-mega-feat-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pdv-mega-feat-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.pdv-mega-feat-desc { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.76); }
html body .pdv-mega-item:hover .pdv-mega-name { color: #1E5A9C; }

/* Mobile menu */
html body .pdv-mobile-drop a.pdvx-mob-feat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 2px 0; font-weight: 700; color: #1E5A9C !important; background: rgba(74,159,212,.10);
}

/* ═══ FOOTER ═══ */
html body .pdv-foot-col a {
  background: linear-gradient(90deg, #1E5A9C, #4A9FD4) no-repeat 0 100% / 0 1px;
  transition: color .25s ease, background-size .3s ease, padding-left .25s ease;
}
html body .pdv-foot-col a:hover { color: #1E5A9C; background-size: 100% 1px; }
html body .pdv-foot-bottom-links a { transition: color .25s ease; }
html body .pdv-social-link { transition: translate .25s cubic-bezier(.23,1,.32,1), background-color .25s ease, color .25s ease, box-shadow .25s ease; }
html body .pdv-social-link:hover { translate: 0 -3px; background: #1E5A9C; color: #fff; box-shadow: 0 10px 20px rgba(30,90,156,.28); }

/* ═══ CARDS ═══ */
.pdvx-glow {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--pdvx-x, 50%) var(--pdvx-y, 50%), rgba(74,159,212,.17), transparent 70%);
  transition: opacity .35s ease;
}
.pdvx-hovering > .pdvx-glow { opacity: 1; }

/* Cards that had no hover state at all before this layer. */
html body .pdv-expect-card, html body .bos-panel-card, html body .bos-step, html body .bos-compare-box,
html body .pc-card, html body .cs-proc-step, html body .ds-case-card, html body .et-matrix-item,
html body .pm-value-item, html body .pm-process-card, html body .pm-benefit-item, html body .ts-plan-card,
html body .uxs-audit-item, html body .svc-process-item, html body .wdd-service-panel, html body .project-card {
  transition: translate .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .35s ease, opacity .8s ease, transform .8s ease;
}
html body .pdv-expect-card:hover, html body .bos-panel-card:hover, html body .bos-step:hover, html body .bos-compare-box:hover,
html body .pc-card:hover, html body .cs-proc-step:hover, html body .ds-case-card:hover, html body .et-matrix-item:hover,
html body .pm-value-item:hover, html body .pm-process-card:hover, html body .pm-benefit-item:hover, html body .ts-plan-card:hover,
html body .uxs-audit-item:hover, html body .svc-process-item:hover, html body .wdd-service-panel:hover {
  translate: 0 -5px;
  box-shadow: 0 22px 48px rgba(30,90,156,.16);
  border-color: rgba(74,159,212,.45);
}

/* ═══ BUTTONS ═══ */
.pdvx-shine-host { position: relative; overflow: hidden; }
.pdvx-shine {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  opacity: 0; transform: skewX(-18deg); transition: left .7s cubic-bezier(.23,1,.32,1), opacity .2s ease;
}
.pdvx-shine-host:hover > .pdvx-shine { left: 120%; opacity: 1; }

/* The nav button becomes inline-block for the sweep above. Keeping the line box
   equal to its text preserves the height it had as an inline element. */
html body .pdv-menu a.pdv-nav-cta { line-height: 15px; vertical-align: middle; }

/* ═══ SCROLLING PERFORMANCE ═══
 *
 * Measured on 6 Nov 2026 with a 4x CPU throttle: pages carried up to 82 elements
 * with backdrop-filter, sitting over a full-screen blurred background that animated
 * constantly, so the browser recalculated each blur on every frame.
 *
 * These cards sit on an almost plain background, where the blur adds almost nothing
 * visible. It stays on the header only, until scrolling makes the bar near-opaque.
 */
html body [data-elementor-type] *, html body .pdv-footer, html body .pdv-mega, html body .pdv-mobile {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .pdv-nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The same soft shapes as before, as static gradients instead of live blur filters. */
html body .pdv-bg span { filter: none; animation: none; }
html body .pdv-bg span:nth-child(1) { background: radial-gradient(closest-side, #4A9FD4, transparent); }
html body .pdv-bg span:nth-child(2) { background: radial-gradient(closest-side, #1E5A9C, transparent); }
html body .pdv-bg span:nth-child(3) { background: radial-gradient(closest-side, #0A2540, transparent); }
html body .pdv.dark .pdv-bg span:nth-child(3) { background: radial-gradient(closest-side, #1E5A9C, transparent); }

/* Endless animations that repaint a large area on every frame, in the order they
   were found in the trace. Small status dots and anything that only moves with
   transform are kept: those are cheap. */
/* The radius is restated because Elementor's img reset beats the page's own rule;
   only the morph animation was keeping this shape. */
html body .hero-main-image { animation: floating 6s ease-in-out infinite; filter: none; border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; box-shadow: 0 20px 60px rgba(74,159,212,.3); }
html body .hero-image-wrapper::before { animation: none; }
html body .hero-glow-1, html body .hero-glow-2 { animation: none; }
html body .pdi-grid, html body .ai-word-glow, html body .ai-model-emblem, html body .ai-process-num,
html body .ai-cap-num, html body .ai-cta-box, html body .px-grad, html body .dm-eco-line, html body .dm-eco-core,
html body .pdv-cta::before, html body .ts-cta::before, html body .svc-cta::before,
html body .prodev-bos .bos-flow-svg path, html body .pdv-process-svg circle { animation: none; }
html body .ai-cursor-glow { mix-blend-mode: normal; }

/* ═══ CUSTOM CURSOR ═══
 * Moved with transform by enhance.js, and only while the mouse is moving. */
.pdvx-cur { position: fixed; top: 0; left: 0; z-index: 99999; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform; transition: opacity .2s ease; }
.pdvx-cursor-on .pdvx-cur { opacity: 1; }
.pdvx-cur i { display: block; width: 100%; height: 100%; border-radius: inherit; transition: scale .15s ease, background-color .2s ease, border-color .2s ease; }
.pdvx-cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.pdvx-cur-dot i { background: #1E5A9C; }
.pdvx-cur-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 99998; }
.pdvx-cur-ring i { box-sizing: border-box; border: 2px solid rgba(30,90,156,.4); }
.pdvx-cur-glow { width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: 9996; background: radial-gradient(circle, rgba(74,159,212,.12), transparent 70%); }
.pdvx-cursor-hov .pdvx-cur-dot i { scale: 2.5; background: #4A9FD4; }
.pdvx-cursor-hov .pdvx-cur-ring i { scale: 1.5; border-color: #4A9FD4; background: rgba(74,159,212,.08); }
html.pdvx-dark .pdvx-cur-dot i { background: #4A9FD4; }
html.pdvx-dark .pdvx-cur-ring i { border-color: rgba(74,159,212,.5); }
/* shared.css hides the system cursor on every .pdv page, but some have no custom one. */
html body .pdv.pdvx-system-cursor, html body .pdv.pdvx-system-cursor a, html body .pdv.pdvx-system-cursor button { cursor: auto; }
html body .pdv.pdvx-system-cursor a, html body .pdv.pdvx-system-cursor button { cursor: pointer; }

/* ═══ FORMS ═══ */
html body .pdv input:focus, html body .pdv textarea:focus, html body .pdv select:focus {
  border-color: #4A9FD4;
  box-shadow: 0 0 0 4px rgba(74,159,212,.16);
}

/* Enquiry form helpers: spam trap, privacy note and the failure message. */
html body .pdvx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html body .pdvx-form-consent { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--pd-muted); }
html body .pdvx-form-consent a, html body .pdvx-form-error a { color: inherit; font-weight: 600; text-decoration: underline; }
html body .pdvx-form-error { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.55; color: #B91C1C; background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.3); }
html.pdvx-dark body .pdvx-form-error { color: #FCA5A5; }

/* The toast was parked 400px off screen but is wider than that, so a strip showed. */
html body .pdv-toast:not(.show) { transform: translateX(calc(100% + 40px)); }

/* ═══ SCROLL REVEAL ═══ */
.pdvx-pre { opacity: 0; }
.pdvx-rise { animation: pdvxRise .75s cubic-bezier(.23,1,.32,1) both; animation-delay: var(--pdvx-delay, 0s); }
@keyframes pdvxRise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ═══ NEW-SERVICE BAND (Home, Services, AI Solutions) ═══ */
html body .pdvx-band {
  position: relative; z-index: 2; overflow: hidden; margin: 0 0 40px; padding: 34px; border-radius: 24px; text-align: left;
  background: linear-gradient(135deg, #0A2540 0%, #123F73 58%, #1E5A9C 100%);
  box-shadow: 0 26px 60px rgba(10,37,64,.26);
  font-family: 'Inter','Segoe UI',-apple-system,sans-serif;
}
html body .pdvx-band::before {
  content: ""; position: absolute; width: 380px; height: 380px; top: -190px; right: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,159,212,.45), transparent 68%); pointer-events: none;
}
html body .pdvx-band-head { position: relative; margin-bottom: 22px; }
html body .pdvx-band-title { margin: 10px 0 8px; font-size: clamp(22px,2.6vw,30px); font-weight: 800; line-height: 1.2; letter-spacing: -.3px; color: #fff !important; }
html body .pdvx-band-text { max-width: 720px; margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.78) !important; }
html body .pdvx-band-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body a.pdvx-band-card {
  display: block; padding: 22px; border-radius: 16px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  transition: translate .3s cubic-bezier(.23,1,.32,1), background-color .3s ease, border-color .3s ease;
}
html body a.pdvx-band-card:hover { translate: 0 -5px; color: #fff; background: rgba(255,255,255,.15); border-color: rgba(142,202,230,.65); }
html body .pdvx-band-abbr { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: #8ECAE6; }
html body .pdvx-band-name { display: block; margin-bottom: 7px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
html body .pdvx-band-desc { display: block; margin-bottom: 12px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); }
html body .pdvx-band-link { display: inline-flex; gap: 6px; font-size: 13.5px; font-weight: 700; color: #fff; }
.pdvx-band-link i { font-style: normal; transition: translate .25s ease; }
html body a.pdvx-band-card:hover .pdvx-band-link i { translate: 5px 0; }
html body .pdvx-band-wrap { width: min(1200px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 2; }
@media (max-width: 760px) {
  html body .pdvx-band { padding: 24px 20px; }
  html body .pdvx-band-grid, .pdv-mega-feature { grid-template-columns: 1fr; }
}

/* Featured cards in the View All Services grid */
html body .svc-item.pdvx-svc-feat { outline: 2px solid #4A9FD4; outline-offset: -2px; box-shadow: 0 24px 56px rgba(30,90,156,.22); }

/* Thirteen cards leave one alone on the last row; centre it in the 3-column layout. */
@media (min-width: 1025px) {
  html body .svc-grid > .svc-item:last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ═══ DARK MODE FOR THE SHARED HEADER AND FOOTER ═══
 * Both sit outside #pdvRoot, so `.pdv.dark` never reached them. enhance.js
 * mirrors the page's theme state to <html> so they follow the toggle. */
html.pdvx-dark .pdv-nav-wrap, html.pdvx-dark .pdv-footer {
  --pd-navy: #E8F1FA; --pd-text: #E8F1FA; --pd-muted: #8FA5C4; --pd-white: #0A1628;
}
html.pdvx-dark .pdv-nav { background: rgba(20,40,70,.78); border-color: rgba(74,159,212,.18); }
html.pdvx-dark .pdv-nav.scrolled { background: rgba(15,30,55,.92); }
html.pdvx-dark .pdv-mega, html.pdvx-dark .pdv-mobile { background: rgba(15,30,55,.98); border-color: rgba(74,159,212,.22); }
html.pdvx-dark .pdv-theme-btn { background: rgba(30,60,100,.5); border-color: rgba(74,159,212,.25); }
html.pdvx-dark .pdv-burger span { background: #E8F1FA; }
html.pdvx-dark .pdv-footer { background: #0A1628; border-top-color: rgba(74,159,212,.18); }
html.pdvx-dark .pdv-foot-bottom { border-top-color: rgba(74,159,212,.18); }
/* The logo file has a white background, so give it a deliberate plate. */
html.pdvx-dark body .pdv-brand-logo, html.pdvx-dark body .pdv-foot-logo { filter: none; padding: 3px 8px; border-radius: 10px; background: #fff; }
html.pdvx-dark body .pdv-menu > li > a[aria-current="page"]:not(.pdv-nav-cta),
html.pdvx-dark body .pdv-foot-col a:hover,
html.pdvx-dark body .pdv-mega-item:hover .pdv-mega-name { color: #8ECAE6; }
html.pdvx-dark body .pdv-mobile-drop a.pdvx-mob-feat { color: #8ECAE6 !important; }

/* ═══ REDUCED MOTION ═══
 * Applies to every animation on the site, including the per-page ones. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
    transition-delay: 0s !important;
  }
}