/* ==========================================================================
   Nirag Infotech — motion layer
   File: wp-content/themes/narang-new/assets/css/motion.css
   Load AFTER the theme stylesheet. Pairs with assets/js/motion.js.

   - Scroll reveals only hide content once motion.js has run (html.nm-ready),
     so no-JS visitors, crawlers and a failed script all get the full page.
   - Movement uses opacity + the individual `translate` / `scale` properties,
     so it never fights the theme's own `transform` rules or hover states.
   - Everything that moves sits behind prefers-reduced-motion.
   - `html` prefixes exist only to out-rank theme selectors without !important.

   v2: word-by-word headings, cross-page transitions, back-to-top progress
   ring, card spotlight, magnetic CTAs, banner scroll-exit, form focus glow.
   ========================================================================== */

:root {
  --nm-ease: cubic-bezier(.16, 1, .3, 1);   /* quick start, long settle */
  --nm-cyan: #2aabe1;
  --nm-indigo: #303399;
  --nm-navy: #0b1c46;
  --nm-blue: #016ecc;
  --nm-sky: #19d2fe;
}


/* --------------------------------------------------------------------------
   1. Keyframes
   -------------------------------------------------------------------------- */
@keyframes nm-rise  { from { opacity: 0; translate: 0 28px; } }
@keyframes nm-fade  { from { opacity: 0; } }
@keyframes nm-scale { from { opacity: 0; scale: .95; } }
@keyframes nm-left  { from { opacity: 0; translate: -40px 0; } }
@keyframes nm-right { from { opacity: 0; translate: 40px 0; } }
@keyframes nm-wipe  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nm-float { to { transform: translateY(-12px); } }
@keyframes nm-ping  { 0% { opacity: .75; scale: .9; } 80%, 100% { opacity: 0; scale: 1.6; } }
@keyframes nm-grow  { to { scale: 1 1; } }
@keyframes nm-word  { from { translate: 0 110%; rotate: 4deg; } }
@keyframes nm-exit  { to { opacity: 0; translate: 0 -56px; } }
@keyframes nm-drift { from { translate: 0 50px; } to { translate: 0 -50px; } }
@keyframes nm-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes nm-vt-in  { from { opacity: 0; transform: translateY(14px); } }
@keyframes nm-slide { from { opacity: 0; translate: -14px 0; } }
@keyframes nm-pop   { from { opacity: 0; scale: .6; } }
@keyframes nm-pan   { to { translate: -50% 0; } }
@keyframes nm-bar   { 50% { scale: .5 1; } }
@keyframes nm-focus { from { opacity: 0; scale: .92; filter: blur(12px) drop-shadow(0 0 0 rgba(48, 51, 153, 0)); } }
@keyframes nm-sheen   { from { background-position: 150% 0; opacity: 1; } to { background-position: -50% 0; opacity: 1; } }
@keyframes nm-sheen-h { from { background-position: 150% 0; opacity: 1; } to { background-position: -50% 0; opacity: 1; } }
@keyframes nm-scan  { 0%, 72% { background-position: 150% 0; opacity: 1; } 100% { background-position: -50% 0; opacity: 1; } }
@keyframes nm-bob   { to { translate: 0 -10px; } }
@keyframes nm-breathe { from { opacity: .65; scale: .94; } to { opacity: 1; scale: 1.04; } }


/* --------------------------------------------------------------------------
   2. Hero — plays on load, pure CSS (no JS wait, nothing hidden for LCP)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .home-banner-wrapper h1.banner-hdng,
  section.bannerHome .banner-title,
  .inner-banner :is(h1, .m-title) {
    animation: nm-rise 1s var(--nm-ease) 60ms backwards;
  }

  .home-banner-wrapper .home-content-wrap p,
  section.bannerHome .banner-description,
  .inner-banner .innner-banner-content p {
    animation: nm-rise 1s var(--nm-ease) 180ms backwards;
  }

  :is(.home-banner-wrapper, section.bannerHome) ul.banner-icon-list > li {
    animation: nm-rise .8s var(--nm-ease) backwards;
  }
  :is(.home-banner-wrapper, section.bannerHome) ul.banner-icon-list > li:nth-child(1) { animation-delay: 300ms; }
  :is(.home-banner-wrapper, section.bannerHome) ul.banner-icon-list > li:nth-child(2) { animation-delay: 380ms; }
  :is(.home-banner-wrapper, section.bannerHome) ul.banner-icon-list > li:nth-child(3) { animation-delay: 460ms; }

  .home-banner-wrapper a.tell-btn,
  section.bannerHome .d-btn {
    animation: nm-rise .8s var(--nm-ease) 580ms backwards;
  }

  /* Hero artwork (class added by JS): idle float on `transform`,
     pointer parallax on `translate` — the two compose, never clash. */
  .nm-float {
    animation: nm-float 6s ease-in-out infinite alternate;
    translate: calc(var(--nm-mx, 0) * var(--nm-depth, 14px))
               calc(var(--nm-my, 0) * var(--nm-depth, 14px));
    transition: translate 1.2s var(--nm-ease);
  }
}


/* --------------------------------------------------------------------------
   3. Scroll reveal — elements tagged [data-nm] by motion.js
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .nm-ready [data-nm]:not(.nm-in)        { opacity: 0; }
  .nm-ready [data-nm="wipe"]:not(.nm-in) { opacity: 1; clip-path: inset(100% 0 0 0); }

  /* `backwards` fill only: once finished, the element's own styles take over again */
  .nm-ready [data-nm].nm-in        { animation: nm-rise .9s var(--nm-ease) var(--nm-d, 0ms) backwards; }
  .nm-ready [data-nm="fade"].nm-in  { animation-name: nm-fade; }
  .nm-ready [data-nm="scale"].nm-in { animation-name: nm-scale; animation-duration: 1s; }
  .nm-ready [data-nm="left"].nm-in  { animation-name: nm-left; }
  .nm-ready [data-nm="right"].nm-in { animation-name: nm-right; }
  .nm-ready [data-nm="wipe"].nm-in  { animation-name: nm-wipe; animation-duration: 1.2s; }
  .nm-ready [data-nm="focus"].nm-in { animation-name: nm-focus; animation-duration: 1.2s; }

  /* The double rule under headings draws outward from the centre once the heading lands */
  .nm-ready :is(.line-bottom, .line_head)[data-nm]::before,
  .nm-ready :is(.line-bottom, .line_head)[data-nm]::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path .8s var(--nm-ease) calc(var(--nm-d, 0ms) + 280ms);
  }
  .nm-ready :is(.line-bottom, .line_head)[data-nm]:not(.nm-in)::before { clip-path: inset(0 0 0 100%); }
  .nm-ready :is(.line-bottom, .line_head)[data-nm]:not(.nm-in)::after,
  .nm-ready .line_left[data-nm]:not(.nm-in)::before                    { clip-path: inset(0 100% 0 0); }

  /* Headings split into words by JS: each word rises out of its own mask */
  .nm-ready [data-nm="words"]:not(.nm-in)      { opacity: 1; }
  .nm-ready [data-nm="words"]:not(.nm-in) .nm-wi { translate: 0 110%; }
  .nm-ready [data-nm="words"].nm-in            { animation: none; }
  .nm-ready [data-nm="words"].nm-in .nm-wi {
    animation: nm-word .95s var(--nm-ease) calc(var(--nm-d, 0ms) + var(--nm-wi, 0) * 55ms) backwards;
  }
}

/* Word masks — padding/negative margin keep ascenders & descenders unclipped
   without changing the heading's line height */
.nm-w  { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.nm-wi { display: inline-block; transform-origin: 0 100%; }

/* Counters keep their width while the digits tick */
ul.counter-lists h2,
.nm-count { font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   4. Header — menu items cascade in, scroll progress on the header edge
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .menu-modal.show-modal .modal-menu > li,
  header.side-header.showed .nav-header-menu ul > li {
    animation: nm-rise .6s var(--nm-ease) calc(120ms + var(--nm-i, 0) * 50ms) backwards;
  }
}

/* Scroll-driven, no JS. Browsers without scroll timelines simply don't show it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    header#site-header::before,
    header.side-header::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 2px;
      background: linear-gradient(180deg, var(--nm-cyan), var(--nm-indigo));
      transform-origin: top;
      scale: 1 0;
      pointer-events: none;
      z-index: 3;
      animation: nm-grow linear both;
      animation-timeline: scroll(root block);
    }

    /* ≤768px the header is a horizontal bar: progress runs along its bottom */
    @media (max-width: 768px) {
      header#site-header::before {
        inset: auto 0 0 0;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--nm-cyan), var(--nm-indigo));
        transform-origin: left;
        scale: 0 1;
      }
    }
  }
}


/* --------------------------------------------------------------------------
   5. Buttons — the gradient glides instead of flipping, arrow nudges
   -------------------------------------------------------------------------- */
html :is(a.tell-btn, .d-btn, input[type="submit"], button.join-us-btn, .visit-wrap a, .submit-popup-wrap a) {
  background: linear-gradient(74deg, var(--nm-cyan) 0%, var(--nm-indigo) 50%, var(--nm-cyan) 100%) 0% 50% / 220% 100%;
  transition: background-position .7s var(--nm-ease), box-shadow .4s var(--nm-ease),
              transform .3s var(--nm-ease), translate .45s var(--nm-ease);   /* translate = magnetic pull (JS) */
}
html :is(a.tell-btn, .d-btn, input[type="submit"], button.join-us-btn, .visit-wrap a, .submit-popup-wrap a):is(:hover, :focus-visible) {
  background: linear-gradient(74deg, var(--nm-cyan) 0%, var(--nm-indigo) 50%, var(--nm-cyan) 100%) 100% 50% / 220% 100%;
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(48, 51, 153, .7);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html :is(a.tell-btn, .d-btn, input[type="submit"], button.join-us-btn):hover  { transform: translateY(-2px); }
  html :is(a.tell-btn, .d-btn, input[type="submit"], button.join-us-btn):active { transform: translateY(0) scale(.98); transition-duration: .1s; }

  html :is(a.tell-btn, .d-btn) i       { display: inline-block; transition: translate .4s var(--nm-ease); }
  html :is(a.tell-btn, .d-btn):hover i { translate: 4px 0; }
}

/* Opt-in magnetic pull for any other button (class: nm-magnetic) */
html .nm-magnetic { transition: translate .45s var(--nm-ease); }


/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
html :is(.serach-forhire, .blog-content-wrap, .team-contentdiv, .service-wrap, .many-servicewrapp, .box) {
  transition: transform .5s var(--nm-ease), box-shadow .5s var(--nm-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html :is(.serach-forhire, .blog-content-wrap, .team-contentdiv, .service-wrap, .many-servicewrapp, .box):hover {
    transform: translateY(-6px);
  }
  html :is(.serach-forhire, .team-contentdiv, .service-wrap, .many-servicewrapp, .box.white-box):hover {
    box-shadow: 0 26px 44px -24px rgba(11, 28, 70, .4);
  }
}

/* Service cards: the theme swaps `background` to a gradient on hover, which
   can't transition (hard flip). Keep the card white and cross-fade a gradient
   layer behind the content instead. */
html :is(.service-wrap, .many-servicewrapp) { isolation: isolate; }
html :is(.service-wrap, .many-servicewrapp)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--nm-blue) 0%, var(--nm-sky) 100%);
  opacity: 0;
  transition: opacity .45s var(--nm-ease);
}
html :is(.service-wrap, .many-servicewrapp):hover         { background: #fff !important; }
html :is(.service-wrap, .many-servicewrapp):hover::before { opacity: 1; }

html :is(.service-wrap, .many-servicewrapp) :is(.s-title, .entry-content, .entry-content p, .info-content p) {
  transition: color .35s var(--nm-ease);
}
html :is(.service-wrap, .many-servicewrapp) .img-wrap img,
html :is(.service-wrap, .many-servicewrapp) .img-wrap::before {
  transition: filter .35s var(--nm-ease), opacity .35s var(--nm-ease), translate .45s var(--nm-ease);
}
@media (prefers-reduced-motion: no-preference) {
  html :is(.service-wrap, .many-servicewrapp):hover .img-wrap img { translate: 0 -3px; }
}

/* "Hire" cards: the bottom rule fills with the brand gradient */
html .serach-forhire { position: relative; }
html .serach-forhire::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--nm-cyan), var(--nm-indigo));
  transform-origin: left;
  scale: 0 1;
  transition: scale .55s var(--nm-ease);
}
html .serach-forhire:hover::after { scale: 1 1; }

/* Service image cards on navy: image eases in, frame picks up the sky blue */
html .img-blog     { overflow: hidden; margin-bottom: 10px; }
html .img-blog img { margin-bottom: 0; transition: scale 1s var(--nm-ease); }
html .blog-content { transition: border-color .4s var(--nm-ease); }
html .blog-content-wrap:hover .blog-content { border-color: var(--nm-sky); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html .blog-content-wrap:hover .img-blog img { scale: 1.06; }
}

/* Hero feature chips */
html ul.banner-icon-list li     { transition: background-color .4s var(--nm-ease), box-shadow .4s var(--nm-ease); }
html ul.banner-icon-list li img { transition: translate .5s var(--nm-ease); }
html ul.banner-icon-list li:hover {
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 36px -24px rgba(11, 28, 70, .45);
}
@media (prefers-reduced-motion: no-preference) {
  html ul.banner-icon-list li:hover img { translate: 0 -4px; }
}

/* Testimonials & About-page icon rows */
html .inner-slide       { transition: border-color .4s var(--nm-ease); }
html .inner-slide:hover { border-color: rgba(42, 171, 225, .5); }

html .icon-outer i { transition: background-color .35s var(--nm-ease), color .35s var(--nm-ease); }
html .icon-text-wrapp li:hover .icon-outer i { background-color: #172853; color: #fff; }

/* Spotlight: a soft glow follows the cursor inside cards (JS sets --nm-px / --nm-py).
   Sits on a free pseudo-element at z-index -1 inside an isolated card, so it is
   above the card's background and below its content. */
html :is(.team-contentdiv, .box, .inner-slide, .blog-content, .contact-wrapp, .nm-spot) { position: relative; isolation: isolate; }
html .serach-forhire { isolation: isolate; }

html :is(.serach-forhire, .team-contentdiv, .box, .inner-slide, .blog-content, .contact-wrapp, .nm-spot)::before,
html :is(.service-wrap, .many-servicewrapp)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--nm-px, 50%) var(--nm-py, 50%), rgba(42, 171, 225, .15), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--nm-ease);
}
/* lighter glow where the surface is dark or already blue */
html :is(.service-wrap, .many-servicewrapp)::after,
html .box.gradiant-box::before {
  background: radial-gradient(260px circle at var(--nm-px, 50%) var(--nm-py, 50%), rgba(255, 255, 255, .3), transparent 70%);
}
html .blog-content::before {
  background: radial-gradient(260px circle at var(--nm-px, 50%) var(--nm-py, 50%), rgba(185, 228, 246, .16), transparent 70%);
}
@media (hover: hover) {
  html :is(.serach-forhire, .team-contentdiv, .box, .inner-slide, .contact-wrapp, .nm-spot):hover::before,
  html .blog-content-wrap:hover .blog-content::before,
  html :is(.service-wrap, .many-servicewrapp):hover::after { opacity: 1; }
}


/* --------------------------------------------------------------------------
   7. Links
   -------------------------------------------------------------------------- */
/* Theme animates letter-spacing on hover, which reflows the line.
   Replace it with an underline that sweeps in. */
html :is(.btn-link, .btn-wrap a.btn-link-a) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--nm-ease), color .3s var(--nm-ease);
}
html :is(.btn-link, .btn-wrap a.btn-link-a):hover,
html .service-wrap:hover .btn-link,
html .many-servicewrapp:hover .btn-wrap a.btn-link-a {
  letter-spacing: normal;
  background-size: 100% 1px;
}
html .feachers-content a:hover { letter-spacing: normal; }

/* Footer links and social icons live in section 15 */


/* --------------------------------------------------------------------------
   8. WhatsApp float — one quiet ring every few seconds
   -------------------------------------------------------------------------- */
html a.whatsapp-icon img { transition: scale .35s var(--nm-ease); }
html a.whatsapp-icon:hover img { scale: 1.08; }

@media (prefers-reduced-motion: no-preference) {
  a.whatsapp-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    opacity: 0;
    pointer-events: none;
    animation: nm-ping 3.2s var(--nm-ease) 4s infinite;
  }
}


/* --------------------------------------------------------------------------
   9. Keyboard focus — theme removes outlines on buttons; give them back
   -------------------------------------------------------------------------- */
html :is(a, button, [role="button"], input[type="submit"]):focus-visible {
  outline: 2px solid var(--nm-cyan);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   10. Page transitions — every internal link cross-fades to the next page.
       Chrome/Edge/Safari 18.2+; other browsers just navigate normally.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: nm-vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: nm-vt-in .55s var(--nm-ease) both; }

/* Fixed chrome stays put while the page content changes underneath */
header#site-header { view-transition-name: nm-site-header; }
header.side-header { view-transition-name: nm-side-header; }
a.whatsapp-icon    { view-transition-name: nm-whatsapp; }
.nm-top            { view-transition-name: nm-top; }


/* --------------------------------------------------------------------------
   11. Back to top — progress ring, injected by JS on every page
   -------------------------------------------------------------------------- */
html .nm-top {
  position: fixed;
  right: 108px;                 /* JS re-aligns it above the WhatsApp button */
  bottom: 150px;
  z-index: 98;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--nm-navy);
  box-shadow: 0 10px 26px -12px rgba(11, 28, 70, .45);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .35s var(--nm-ease), translate .45s var(--nm-ease),
              box-shadow .3s var(--nm-ease), visibility 0s linear .45s;
}
html .nm-top.is-shown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
html .nm-top:hover { box-shadow: 0 16px 32px -12px rgba(11, 28, 70, .55); }
.nm-top svg        { display: block; width: 100%; height: 100%; overflow: visible; }
.nm-top__track     { fill: none; stroke: rgba(11, 28, 70, .08); stroke-width: 2.5; }
.nm-top__ring      { fill: none; stroke-width: 2.5; stroke-linecap: round; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.nm-top__arrow     { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s var(--nm-ease); }
@media (prefers-reduced-motion: no-preference) {
  html .nm-top:hover .nm-top__arrow { translate: 0 -3px; }
}


/* --------------------------------------------------------------------------
   12. Scroll-linked depth (CSS scroll timelines; silently skipped elsewhere)
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Banner content drifts up and fades as you scroll past it — every page */
    :is(.inner-banner, .home-banner-wrapper, section.bannerHome) > :is(.container, .container-fluid) {
      animation: nm-exit linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    /* Decorative background shapes move slower than the page */
    section.home-services::before,
    section.home-services::after {
      animation: nm-drift linear both;
      animation-timeline: view();
    }
  }
}


/* --------------------------------------------------------------------------
   13. Forms, in-content links, menu links
   -------------------------------------------------------------------------- */
html :is(.contact-form-wrap, .wpcf7) :is(input:not([type="submit"]), select, textarea) {
  transition: border-color .3s var(--nm-ease), box-shadow .3s var(--nm-ease);
}
html :is(.contact-form-wrap, .wpcf7) :is(input:not([type="submit"]), select, textarea):focus {
  box-shadow: 0 0 0 4px rgba(42, 171, 225, .14);
}

/* Plain text links inside copy: underline sweeps in on hover */
html #site-content :is(p, li) a:not([class]):not(:has(img)) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--nm-ease), color .25s var(--nm-ease);
}
html #site-content :is(p, li) a:not([class]):not(:has(img)):hover { background-size: 100% 1px; }


/* --------------------------------------------------------------------------
   14. Header
   -------------------------------------------------------------------------- */
/* Hamburger (Twenty Twenty toggle): bars step down on hover … */
html .nav-toggle .toggle-icon,
html .nav-toggle .toggle-icon::before,
html .nav-toggle .toggle-icon::after {
  transform-origin: right center;
  transition: scale .45s var(--nm-ease);
}
@media (hover: hover) {
  html .nav-toggle:hover .toggle-icon::before { scale: .72 1; }
  html .nav-toggle:hover .toggle-icon::after  { scale: .46 1; }
  /* renew header (.hamburger): middle bar shortens, X state untouched */
  html .hamburger:not(.active-btn):hover .line:nth-child(2) { scale: .6 1; }
}
/* … and wave once on the first page of a visit, as a hint that it opens */
@media (prefers-reduced-motion: no-preference) {
  html.nm-first .nav-toggle .toggle-icon         { animation: nm-bar .7s var(--nm-ease) 1.2s; }
  html.nm-first .nav-toggle .toggle-icon::before { animation: nm-bar .7s var(--nm-ease) 1.1s; }
  html.nm-first .nav-toggle .toggle-icon::after  { animation: nm-bar .7s var(--nm-ease) 1.3s; }
}

/* Logo */
html :is(.logo-wrap-home, .logo-wrap) img { transition: scale .5s var(--nm-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html :is(.logo-wrap-home, .logo-wrap) a:hover img { scale: 1.04; }
}

/* Contact button at the foot of the rail: brand gradient fills it from the bottom */
html button.contact-btn { overflow: hidden; isolation: isolate; }
@media (min-width: 769px) { html button.contact-btn { position: relative; } }   /* ≤768 it is already absolute */
html button.contact-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--nm-indigo), var(--nm-cyan));
  transform-origin: bottom;
  scale: 1 0;
  transition: scale .5s var(--nm-ease);
}
html button.contact-btn:is(:hover, :focus-within)::before { scale: 1 1; }

/* Mobile bar: tucks away while scrolling down, returns on scroll up (classes set by JS) */
@media (max-width: 768px) {
  html header#site-header { transition: translate .45s var(--nm-ease), box-shadow .3s var(--nm-ease); }
  html.nm-scrolled header#site-header   { box-shadow: 0 10px 28px -18px rgba(11, 28, 70, .45); }
  html.nm-head-hidden header#site-header { translate: 0 -100%; }
}

/* Menu panel: navy-tinted backdrop, longer settle on the slide */
@media (min-width: 1000px) {
  html .menu-modal.cover-modal.active { background-color: rgba(11, 28, 70, .32); }
}
html .menu-modal .menu-modal-inner { transition: transform .45s var(--nm-ease), opacity .3s var(--nm-ease); }

/* Menu links: a gradient accent grows in front of the hovered / current item */
html :is(.modal-menu > li > .ancestor-wrapper > a, .nav-header-menu > ul > li > a):not(.custom-link-career)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 2px;
  margin-right: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nm-cyan), var(--nm-indigo));
  transition: width .4s var(--nm-ease), margin-right .4s var(--nm-ease);
}
html :is(.modal-menu > li > .ancestor-wrapper > a, .nav-header-menu > ul > li > a):not(.custom-link-career):is(:hover, :focus-visible)::before,
html .modal-menu > li:is(.current-menu-item, .current_page_parent, .current-menu-ancestor) > .ancestor-wrapper > a::before,
html .nav-header-menu > ul > li:is(.current-menu-item, .current_page_parent) > a::before {
  width: 18px;
  margin-right: 10px;
}
html .modal-menu a { transition: color .25s var(--nm-ease); }

/* Sub-menu chevron turns smoothly; close icon quarter-turns on hover */
html .menu-modal :is(.sub-menu-toggle, .close-nav-toggle) svg { transition: transform .4s var(--nm-ease), rotate .4s var(--nm-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html .menu-modal .close-nav-toggle:hover svg { rotate: 90deg; }
}


/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
/* Columns cascade (JS tags them); their links and icons follow one by one */
@media (prefers-reduced-motion: no-preference) {
  .nm-ready :is(footer, .bottomwrap-futr) [data-nm].nm-in li {
    animation: nm-slide .6s var(--nm-ease) calc(var(--nm-d, 0ms) + 160ms + var(--nm-li, 0) * 45ms) backwards;
  }
  .nm-ready :is(footer, .bottomwrap-futr) [data-nm].nm-in :is(.twitter-wrap a, .social-icons a) {
    animation: nm-pop .55s var(--nm-ease) calc(var(--nm-d, 0ms) + 240ms + var(--nm-li, 0) * 70ms) backwards;
  }
}

/* Column headings get a short gradient rule that draws in with the column */
html :is(.footer-linkswrap, .reservwrapp) h5::after,
html .bottomwrap-futr h6::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nm-cyan), var(--nm-indigo));
  transform-origin: left;
  transition: scale .7s var(--nm-ease) calc(var(--nm-d, 0ms) + 300ms);
}
@media (prefers-reduced-motion: no-preference) {
  .nm-ready :is(footer, .bottomwrap-futr) [data-nm]:not(.nm-in) :is(h5, h6)::after { scale: 0 1; }
}

/* "Let's work together" band: the gradient slowly breathes, glow follows the cursor */
html .topwrapfutr { overflow: hidden; isolation: isolate; }
html .topwrapfutr::before {
  content: "";
  position: absolute;
  inset: 0 -100% 0 0;          /* twice as wide, panned left and back */
  z-index: -1;
  background: linear-gradient(100deg, var(--nm-blue) 0%, var(--nm-sky) 50%, var(--nm-blue) 100%);
  pointer-events: none;
}
html .topwrapfutr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--nm-px, 50%) var(--nm-py, 50%), rgba(255, 255, 255, .22), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--nm-ease);
}
@media (hover: hover) { html .topwrapfutr:hover::after { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html .topwrapfutr::before { animation: nm-pan 9s ease-in-out infinite alternate; }
}

/* Footer links: same accent rule as the menu, no jump in the text block */
html :is(.footer-top .footer-linkswrap ul li a, .links-menu ul li a) { transition: color .25s var(--nm-ease); }
html :is(.footer-top .footer-linkswrap ul li a, .links-menu ul li a)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 1.5px;
  margin-right: 0;
  background: currentColor;
  transition: width .35s var(--nm-ease), margin-right .35s var(--nm-ease);
}
html :is(.footer-top .footer-linkswrap ul li a, .links-menu ul li a):is(:hover, :focus-visible)::before {
  width: 12px;
  margin-right: 8px;
}

/* Phone / email: underline sweeps; contact icons pick up the brand cyan */
html span.contacts-wrap a { width: fit-content; }
html :is(ul.link-socials li span a, span.contacts-wrap a, a.mail-sale, .link-texted li a) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--nm-ease), color .25s var(--nm-ease);
}
html :is(ul.link-socials li span a, span.contacts-wrap a, a.mail-sale, .link-texted li a):hover { background-size: 100% 1px; }
html :is(ul.link-socials, .link-texted ul) li i { transition: color .3s var(--nm-ease), translate .35s var(--nm-ease); }
html :is(ul.link-socials, .link-texted ul) li:hover i { color: var(--nm-cyan); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html :is(ul.link-socials, .link-texted ul) li:hover i { translate: 0 -2px; }
}

/* Social circles: each network's own colour sweeps up from the bottom */
html :is(.twitter-wrap a, .social-icons a) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --nm-brand: var(--nm-navy);
  transition: border-color .3s var(--nm-ease), color .3s var(--nm-ease), translate .35s var(--nm-ease);
}
html :is(.twitter-wrap a, .social-icons a)[href*="facebook"]  { --nm-brand: #1877f2; }
html :is(.twitter-wrap a, .social-icons a)[href*="linkedin"]  { --nm-brand: #0a66c2; }
html :is(.twitter-wrap a, .social-icons a)[href*="youtube"]   { --nm-brand: #ff0033; }
html :is(.twitter-wrap a, .social-icons a):is([href*="twitter"], [href*="x.com"]) { --nm-brand: #000; }
html :is(.twitter-wrap a, .social-icons a)[href*="instagram"] { --nm-brand: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
html :is(.twitter-wrap a, .social-icons a)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--nm-brand);
  transform-origin: bottom;
  scale: 1 0;
  transition: scale .4s var(--nm-ease);
}
html :is(.twitter-wrap a, .social-icons a):hover::before { scale: 1 1; }
html :is(.twitter-wrap a, .social-icons a):hover,
html :is(.twitter-wrap a, .social-icons a):hover i { color: #fff; border-color: transparent; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html :is(.twitter-wrap a, .social-icons a):hover { translate: 0 -3px; }
}

/* "Tag us" pill */
html button.tag-btn { transition: background-color .3s var(--nm-ease), color .3s var(--nm-ease); }
html button.tag-btn:hover { background-color: var(--nm-navy) !important; color: #fff !important; }

/* Copyright bar: a hairline of light draws across as it scrolls into view */
html :is(.footer-copyright, .footercopyright) { position: relative; }
html :is(.footer-copyright, .footercopyright)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nm-cyan), transparent);
  opacity: .7;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html :is(.footer-copyright, .footercopyright)::before {
      scale: 0 1;
      animation: nm-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}


/* --------------------------------------------------------------------------
   16. Ambient dot fields — <canvas> injected by JS behind header, footer, hero
   -------------------------------------------------------------------------- */
.nm-dots-host { isolation: isolate; }   /* canvas at z-index -1: above the host's background, below its content */
canvas.nm-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
/* Keep the logo zone of the rail clean */
canvas.nm-dots--header {
  -webkit-mask-image: linear-gradient(180deg, #000 0 24%, transparent 38% 62%, #000 76% 100%);
          mask-image: linear-gradient(180deg, #000 0 24%, transparent 38% 62%, #000 76% 100%);
}
@media (max-width: 768px) {
  canvas.nm-dots--header {
    -webkit-mask-image: linear-gradient(90deg, #000 0 22%, transparent 36% 64%, #000 78% 100%);
            mask-image: linear-gradient(90deg, #000 0 22%, transparent 36% 64%, #000 78% 100%);
  }
}
/* Hero: field softens behind the headline (centre measured by JS) */
canvas.nm-dots--hero {
  -webkit-mask-image: radial-gradient(ellipse 34% 42% at var(--nm-cx, 50%) var(--nm-cy, 50%), rgba(0, 0, 0, .25), #000 100%);
          mask-image: radial-gradient(ellipse 34% 42% at var(--nm-cx, 50%) var(--nm-cy, 50%), rgba(0, 0, 0, .25), #000 100%);
}


/* --------------------------------------------------------------------------
   17. Image highlights — classes added by JS once each image has loaded
       .nm-img--photo / .nm-img--art   on the <img>
       .nm-media(--photo|--art|--aura|--tilt)   on its wrapper, when it wraps only that image
   -------------------------------------------------------------------------- */
/* Photos: settle-in zoom and a brighter, richer frame on hover */
.nm-img { transition: scale .9s var(--nm-ease), translate .6s var(--nm-ease), filter .6s var(--nm-ease); }
@media (hover: hover) {
  img.nm-img--photo:hover,
  .nm-media--photo:hover > :is(img, picture > img) { filter: saturate(1.08) brightness(1.04); }
  img.nm-img--photo:not(.nm-media > img):hover { scale: 1.02; }
  .nm-media--photo:hover > :is(img, picture > img) { scale: 1.05; }
}
.nm-media        { isolation: isolate; }   /* keeps the glow layer behind the image, above the section */
.nm-media--photo { overflow: hidden; }

/* Illustrations: brand-tinted shadow that deepens as the art lifts */
img.nm-img--art { filter: blur(0) drop-shadow(0 16px 24px rgba(48, 51, 153, .16)); }
@media (hover: hover) {
  img.nm-img--art:hover,
  .nm-media--art:hover > :is(img, picture > img) {
    filter: blur(0) drop-shadow(0 28px 32px rgba(48, 51, 153, .28));
    translate: 0 -6px;
  }
}

/* Light sweep: a diagonal glint across photos; masked to the drawing on illustrations */
.nm-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .42) 50%, transparent 64%) 150% 0 / 250% 100% no-repeat;
  opacity: 0;
}
.nm-media--art::after {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%);
  -webkit-mask: var(--nm-src) var(--nm-mask-pos, 0 0) / var(--nm-mask-size, 100% 100%) no-repeat;
          mask: var(--nm-src) var(--nm-mask-pos, 0 0) / var(--nm-mask-size, 100% 100%) no-repeat;
}
.nm-media.nm-glint::after { animation: nm-sheen 1.3s var(--nm-ease) .7s both; }

/* Large illustrations: breathing glow behind, slow float, light scans across every few seconds */
.nm-media--aura { overflow: visible; }
.nm-media--aura::before {
  content: "";
  position: absolute;
  inset: -14% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side at var(--nm-gx, 50%) var(--nm-gy, 55%),
              rgba(42, 171, 225, .30), rgba(48, 51, 153, .12) 55%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .nm-media--aura         { animation: nm-bob 7s ease-in-out infinite alternate; }
  .nm-media--aura::before { animation: nm-breathe 8s ease-in-out infinite alternate; }
  .nm-media--aura::after  { animation: nm-scan 7s cubic-bezier(.45, 0, .2, 1) 2.5s infinite; }
}

/* Tilt toward the cursor (JS feeds --nm-rx / --nm-ry); glow follows too */
.nm-media--tilt {
  transform: perspective(1000px) rotateX(var(--nm-rx, 0deg)) rotateY(var(--nm-ry, 0deg));
  transition: transform .7s var(--nm-ease);
}

/* Hover sweep goes last so it wins over the reveal glint and the idle scan */
@media (hover: hover) {
  .nm-media:hover::after { animation: nm-sheen-h 1s var(--nm-ease) both; }
}


/* --------------------------------------------------------------------------
   18. Reduced motion — also stills the theme's own looping animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cloud,
  .rocket-image,
  .rocket-small-image,
  .animated-shape-wrap .animated-shape-item,
  .cross-popup h4,
  nav.mobile-menu a.custom-link-career {
    animation: none !important;
  }
}

@media print {
  [data-nm], .nm-wi { opacity: 1 !important; clip-path: none !important; animation: none !important; translate: none !important; }
  .nm-top, canvas.nm-dots, .nm-media::before, .nm-media::after { display: none !important; }
}