/* ============================================================
   10X WORKFORCE - MOTION LAYER
   Site-wide scroll reveals, count-up stats, nav scroll shadow,
   and smooth in-page scrolling.

   SAFETY: every "hidden" state lives inside
   @media (prefers-reduced-motion: no-preference) AND is keyed to
   the [data-reveal] attribute, which is added by 10x-motion.js.
   So if JS fails to load OR the visitor prefers reduced motion,
   nothing is ever hidden - all content stays fully visible.
   ============================================================ */

/* Anchor jumps clear the sticky utility bar + nav */
html { scroll-padding-top: 112px; }
@media (max-width: 768px) {
  html { scroll-padding-top: 72px; }
}

@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; }

  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, .84, .44, 1),
                transform .7s cubic-bezier(.16, .84, .44, 1);
    will-change: opacity, transform;
  }
  [data-reveal="fade"]  { transform: none; }
  [data-reveal="left"]  { transform: translateX(-30px); }
  [data-reveal="right"] { transform: translateX(30px); }
  [data-reveal="zoom"]  { transform: scale(.95); }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Sticky nav gains a soft shadow once the page is scrolled */
.nav { transition: box-shadow .3s ease, background .3s ease; }
.nav.is-scrolled { box-shadow: 0 8px 30px rgba(8, 27, 51, .14); }

/* ------------------------------------------------------------
   Nav link hover: cyan underline wipe + a small, tasteful hop.
   Primary nav links only (not phone / CTA buttons).
   ------------------------------------------------------------ */
.nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link) { position: relative; }
.nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px; border-radius: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
}
.nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link):hover::after,
.nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link).active::after { transform: scaleX(1); }

@keyframes tenx-nav-hop {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-5px); }
  72%  { transform: translateY(-1px); }
  100% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link) { transition: color .2s ease; }
  .nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link)::after { transition: transform .3s cubic-bezier(.16, .84, .44, 1); }
  .nav-links > a:not(.nav-phone):not(.nav-cta):not(.nav-client-link):hover { animation: tenx-nav-hop .4s cubic-bezier(.22, 1, .36, 1) both; }
  .nav-phone { transition: color .2s ease; }
  .nav-phone:hover { animation: tenx-nav-hop .4s cubic-bezier(.22, 1, .36, 1) both; }
}

/* ============================================================
   SAVINGS CALCULATOR — shared modal + utility-bar trigger
   ============================================================ */
.calc-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,20,38,.72); }
.calc-modal.open { display: flex; }
.calc-modal-dialog { position: relative; width: 100%; max-width: 1040px; height: 90vh; max-height: 920px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.calc-modal-iframe { width: 100%; height: 100%; border: 0; display: block; }
.calc-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(13,42,77,.92); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.calc-modal-close:hover { background: #1FB6E6; }
body.calc-modal-open { overflow: hidden; }
@media (max-width: 600px) { .calc-modal { padding: 0; } .calc-modal-dialog { height: 100vh; max-height: none; border-radius: 0; } }

/* ============================================================
   MOBILE POLISH — sticky bar, nav CTAs, industry cards
   ============================================================ */
@media (max-width: 768px) {
  body { padding-bottom: 88px; }

  /* Mobile drawer must sit ABOVE the sticky Call/Book bar (z=300) */
  .nav-mobile-menu {
    z-index: 400 !important;
    padding-bottom: 32px !important;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .mobile-sticky-bar { display: none !important; visibility: hidden !important; }

  .nav-mobile-menu a.btn,
  .nav-mobile-menu a.btn-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 18px !important;
    border-bottom: none !important;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
  }
  .nav-mobile-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex-shrink: 0;
  }

  .ind-card {
    min-height: 200px;
    aspect-ratio: 4 / 5;
  }
  .ind-grid .ind-card { min-height: 140px; aspect-ratio: 3 / 2; }

  .trades-grid .trade-tile,
  .trades-strip .trade-tile { min-height: 160px; }

  /* Force calculator / compare columns to stack — never side-by-side on phones */
  .comparison-grid,
  .compare-grid,
  .compare-wrap {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
  .comp-card,
  .compare-col {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .calc-cashflow {
    grid-template-columns: 1fr !important;
  }
  .calc-cashflow-col-r {
    border-left: none !important;
    border-top: 1px solid #bbf7d0 !important;
  }

  /* Solutions-page inline calculator (Gianni mobile screenshots) */
  #connect-calculator .sol-calc-inputs,
  #connect-calculator .sol-calc-results,
  #connect-calculator .sol-calc-cashflow,
  #connect-calculator .sol-calc-compare,
  #connect-calculator .sol-calc-guarantee {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
  #connect-calculator .sol-calc-card { padding: 20px 16px !important; }
  #connect-calculator .sol-calc-email {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #connect-calculator .sol-calc-email input,
  #connect-calculator .sol-calc-email button {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  #connect-calculator .sol-calc-cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #connect-calculator .sol-calc-cta .btn,
  .calc-ready-btns .btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  .calc-ready-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .calc-input-card { padding: 20px 16px !important; }
  .calc-section { padding-left: 16px !important; padding-right: 16px !important; }
  .calc-cta-area { padding: 20px 16px !important; gap: 16px !important; }
  .advantage-card { padding: 20px 16px !important; margin-left: 0 !important; margin-right: 0 !important; }

  .ind-card.fallback .ind-overlay,
  .trade-tile.fallback .trade-tile-cap {
    background: linear-gradient(180deg, rgba(13,42,77,0.15) 0%, rgba(13,42,77,0.92) 100%) !important;
  }
  .ind-card.fallback img { display: block; opacity: 0.15; }
}

/* Utility-bar "Calculate Cost Savings" trigger (desktop strip only) */
.ub-calc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff !important; white-space: nowrap; cursor: pointer; transition: color .15s; }
.ub-calc svg { width: 15px; height: 15px; display: block; flex: none; }
.ub-calc:hover { color: #1FB6E6 !important; }
.ub-divider { width: 1px; height: 16px; background: rgba(255,255,255,.18); flex: none; }
@media (min-width: 769px) and (max-width: 980px) { .ub-divider { display: none; } }