/* ============================================================
   NaviNex — Polish layer (Emil-style design engineering)
   Load AFTER site.css.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --focus-ring:0 0 0 3px rgba(16,181,191,.35);
}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:2000;
  background:linear-gradient(90deg, var(--teal) 0%, #7fe3e8 100%);
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  pointer-events:none;
}

/* ---------- buttons: press feedback + focus ring ---------- */
.btn{
  transition:
    transform 140ms ease-out,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring),0 8px 22px rgba(16,181,191,.32)}
.btn-ghost:focus-visible,
.btn-dark:focus-visible,
.btn-outline:focus-visible{box-shadow:var(--focus-ring)}

/* ---------- navlinks + brand mark rotate ---------- */
.navlink{transition:color 150ms ease, background-color 150ms ease}
.navlink:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.brand:focus-visible{outline:none;border-radius:10px;box-shadow:var(--focus-ring)}
.brand-mark{
  transition:transform 380ms var(--ease-out);
  transform-origin:center;
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark{transform:rotate(22.5deg)}

/* ---------- nav dropdown: origin-aware + bridge + click-open ---------- */
.drop-panel{
  transform-origin:top left;
  transform:translateY(8px) scale(.98);
  transition:
    opacity 180ms ease-out,
    transform 180ms var(--ease-out);
  /* override site.css visibility:hidden — we hide via opacity + pointer-events
     so the ::before bridge can stay interactive across the gap */
  visibility:visible !important;
}
/* Transparent bridge over the 10px gap between the Services button and the
   panel — keeps the cursor "inside" .nav-drop while traversing. */
.drop-panel::before{
  content:"";
  position:absolute;
  top:-14px;
  left:0; right:0;
  height:14px;
  background:transparent;
  pointer-events:auto;
}
/* Open states: hover (mouse), focus-within (keyboard), .open (click/touch) */
.nav-drop:hover .drop-panel,
.nav-drop:focus-within .drop-panel,
.nav-drop.open .drop-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* Caret rotates when the panel is open via click as well */
.nav-drop.open .caret{transform:rotate(225deg);margin-top:2px}
.drop-panel a{transition:background-color 140ms ease}

/* ---------- mobile menu: GPU transform instead of max-height ---------- */
.mobile-menu{
  display:block;
  max-height:none;
  transform:scaleY(0);
  transform-origin:top;
  opacity:0;
  transition:
    transform 280ms var(--ease-drawer),
    opacity 220ms ease-out,
    visibility 280ms;
  visibility:hidden;
  pointer-events:none;
}
.mobile-menu.open{transform:scaleY(1);opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu a{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity 200ms ease-out, transform 200ms var(--ease-out);
}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu.open a:nth-child(1){transition-delay:60ms}
.mobile-menu.open a:nth-child(2){transition-delay:90ms}
.mobile-menu.open a:nth-child(3){transition-delay:120ms}
.mobile-menu.open a:nth-child(4){transition-delay:150ms}
.mobile-menu.open a:nth-child(5){transition-delay:180ms}
.mobile-menu.open a:nth-child(6){transition-delay:210ms}
.mobile-menu.open a:nth-child(7){transition-delay:240ms}

/* ---------- burger ---------- */
.burger{transition:transform 140ms ease-out, background-color 160ms ease, border-color 160ms ease}
.burger:active{transform:scale(.94)}
.burger:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.burger span{transition:transform 240ms var(--ease-out), opacity 200ms ease-out}

/* ---------- service cards (home page) ---------- */
.svc-card{
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    border-color 180ms ease;
  will-change:transform;
}
.svc-card:active{transform:scale(.99) translateY(-4px)}
.svc-card:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--shadow-md);border-color:transparent}
.svc-card .icon-tile{
  transition:transform 300ms var(--ease-out), background-color 200ms ease;
  transform-origin:center;
  will-change:transform;
}
.svc-link{gap:7px;transition:color 160ms ease;font-size:0}
.svc-link span{font-size:14px}
.svc-link::after{content:"→";display:inline-block;font-size:14px;transition:transform 220ms var(--ease-out)}

/* ---------- sector cards ---------- */
.sector{transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 180ms ease}
.sector:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sector .icon-tile{transition:transform 280ms var(--ease-out);will-change:transform}

/* ---------- offer cards (service pages) ---------- */
.ocard{transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 180ms ease}
.ocard .icon-tile{transition:transform 280ms var(--ease-out)}

/* ---------- why grid (service "Why NaviNex" tiles) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.why{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 180ms ease;
}
.why .icon-tile{margin-bottom:20px;transition:transform 280ms var(--ease-out)}
.why h4{font-size:18px;margin-bottom:9px}
.why p{color:var(--ink-soft);font-size:15px}
@media (max-width:860px){.why-grid{grid-template-columns:1fr}}

/* ---------- region (reach grid) ---------- */
.region{transition:background-color 220ms ease;position:relative}

/* ---------- stat cards ---------- */
.stat{transition:transform 200ms var(--ease-out), border-color 180ms ease, box-shadow 200ms var(--ease-out)}

/* ---------- mvv (About) ---------- */
.mvv-card{transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 180ms ease}
.mvv-card .icon-tile{transition:transform 280ms var(--ease-out)}

/* ---------- step cards (service "How It Works") ---------- */
.step{transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 180ms ease}

/* ---------- form inputs ---------- */
.field input,.field select,.field textarea{
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 180ms ease;
}

/* ---------- info blocks (Contact) ---------- */
.info-block{transition:background-color 220ms ease}
.info-ico{transition:transform 280ms var(--ease-out), background-color 200ms ease, border-color 180ms ease}

/* ---------- hover-only (skip touch) ---------- */
@media (hover:hover) and (pointer:fine){
  .svc-card:hover .icon-tile{transform:scale(1.08) rotate(-3deg)}
  .svc-card:hover .svc-link{color:var(--teal-600)}
  .svc-card:hover .svc-link::after{transform:translateX(5px)}
  .sector:hover .icon-tile{transform:scale(1.1)}
  .ocard:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:transparent}
  .ocard:hover .icon-tile{transform:scale(1.08)}
  .why:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:transparent}
  .why:hover .icon-tile{transform:scale(1.08)}
  .mvv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:transparent}
  .mvv-card:hover .icon-tile{transform:scale(1.08)}
  .stat:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:var(--shadow-sm)}
  .region:hover{background-color:var(--bg-soft)}
  .step:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:transparent}
  .info-block:hover .info-ico{transform:scale(1.06);border-color:var(--teal)}
}

/* ---------- entrance reveals (IO-driven) ----------
   Settle to transform:none (not translateY(0)) so the element de-composites
   after animating — a lingering transform keeps each cell on its own GPU
   layer and snaps it to integer device pixels, which can swallow the 1px
   hairline gaps used as dividers in .reach-grid. */
.reveal{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 520ms ease-out, transform 520ms var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}
.reveal-group .reveal.is-in:nth-child(1){transition-delay:0ms}
.reveal-group .reveal.is-in:nth-child(2){transition-delay:60ms}
.reveal-group .reveal.is-in:nth-child(3){transition-delay:120ms}
.reveal-group .reveal.is-in:nth-child(4){transition-delay:180ms}
.reveal-group .reveal.is-in:nth-child(5){transition-delay:240ms}
.reveal-group .reveal.is-in:nth-child(6){transition-delay:300ms}

/* ---------- hero entrance (home + interior heroes) ---------- */
.hero-content > *,
.phero-inner > *{
  opacity:0;
  transform:translateY(10px);
  animation:hero-in 720ms var(--ease-out) forwards;
}
.hero-content > *:nth-child(1),
.phero-inner > *:nth-child(1){animation-delay:80ms}
.hero-content > *:nth-child(2),
.phero-inner > *:nth-child(2){animation-delay:160ms}
.hero-content > *:nth-child(3),
.phero-inner > *:nth-child(3){animation-delay:240ms}
.hero-content > *:nth-child(4),
.phero-inner > *:nth-child(4){animation-delay:320ms}
.hero-content > *:nth-child(5),
.phero-inner > *:nth-child(5){animation-delay:400ms}
@keyframes hero-in{to{opacity:1;transform:translateY(0)}}

/* ---------- hero ambient ----------
   GPU-stable Ken Burns zoom. Overrides site.css's `slowzoom` with a 3D
   transform (translateZ(0) + scale) plus backface-visibility:hidden and
   will-change, so the layer is promoted once and the GPU scales a single
   raster. Animating a plain 2D `scale()` on a large cover image makes
   Chrome/Safari re-rasterize every frame → the flicker. transform-origin
   (60% 40%) is inherited from site.css. */
.hero-bg{
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  animation:hero-zoom 26s ease-in-out infinite alternate;
}
@keyframes hero-zoom{
  from{transform:translateZ(0) scale(1)}
  to{transform:translateZ(0) scale(1.12)}
}
.hero-glow{animation:glow-breathe 8s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes glow-breathe{
  0%{opacity:.6;transform:scale(.96)}
  100%{opacity:1;transform:scale(1.04)}
}

/* ---------- stat clip-path wipe ---------- */
.stat-v{
  clip-path:inset(0 0 100% 0);
  -webkit-clip-path:inset(0 0 100% 0);
  transition:clip-path 600ms var(--ease-out);
  will-change:clip-path;
}
.stat.is-in .stat-v{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}

/* ---------- magnetic CTAs ---------- */
[data-magnetic]{
  transform:translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition:
    transform 300ms var(--ease-out),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
[data-magnetic]:active{
  transform:translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.97);
}

/* ---------- contact thanks state ----------
   NOTE: no always-on animation here — an animation's fill state would
   override the display/opacity hiding and leak the panel onto the form.
   The entrance animation is applied in contact.html only when shown. */
.thanks{text-align:center;padding:30px 10px}
.thanks .icon-tile{margin:0 auto 22px;width:64px;height:64px}
.thanks h3{font-size:26px;margin-bottom:12px}
.thanks p{color:var(--ink-soft);max-width:42ch;margin:0 auto}
@keyframes bounce-in{
  0%  {opacity:0;transform:scale(.85)}
  60% {opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}

/* ---------- responsive hardening ----------
   Fixes mobile horizontal overflow: the .stats grid's 1fr tracks would not
   shrink below the min-content width of a long unbreakable value word
   ("Worldwide") + padding, forcing the row wider than the viewport. Shrink
   the value + padding on phones, let tracks shrink (min-width:0), and add a
   wrap safety net so it can never push the page wide. */
@media (max-width:560px){
  .stats{gap:14px}
  .stat{padding:20px 16px;min-width:0}
  .stat-v{font-size:21px;overflow-wrap:anywhere}
  .stat-l{overflow-wrap:anywhere}
}
/* Stack 4-up step cards to a single column on small phones so their
   content has room (they were locked at 2 columns below 860px). */
@media (max-width:480px){
  .steps{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:160ms !important;
    transition-timing-function:ease !important;
  }
  .reveal{transform:none}
  .hero-content > *,.phero-inner > *{transform:none;animation:none;opacity:1}
  .btn:active,.svc-card:active,.burger:active{transform:none}
  .hero-bg{transform:none !important}
  .hero-glow{animation:none}
  .scroll-progress{display:none}
  [data-magnetic]{transform:none !important}
  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark{transform:none}
  .svc-card:hover .icon-tile,
  .sector:hover .icon-tile,
  .ocard:hover .icon-tile,
  .why:hover .icon-tile,
  .mvv-card:hover .icon-tile{transform:none}
  .stat-v{clip-path:none;-webkit-clip-path:none}
  .thanks,.thanks .icon-tile{animation:none;opacity:1;transform:none}
}