/* AJ Services — entry flow (splash/chooser) + AJ Transfer landing v2 (light corporate).
   Recreated from design_handoff_aj_landing/{AJ Services.dc.html, AJ Services Landing v2.dc.html} */

@keyframes bfade { 0%, 6% { opacity: 0; } 12%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ajspin { to { transform: rotate(360deg); } }
@keyframes ajpop { 0% { transform: scale(0.7); opacity: 0; } 55% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ajfadeup { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ajbar { from { width: 0; } to { width: 100%; } }
@keyframes ajring { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ajscreenin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .aj-blink, .aj-banner, .aj-splash-ring, .aj-splash-arc, .aj-splash-logo, .aj-splash-fadeup, .aj-splash-bar, .aj-screenin {
    animation: none !important;
  }
}

[x-cloak] { display: none !important; }

html { overflow-x: hidden; }
.aj-landing-page * { box-sizing: border-box; min-width: 0; }
.aj-landing-page {
  color: #14161a;
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.aj-landing-page a { color: #111418; text-decoration: none; }
.aj-landing-page ::selection { background: rgba(255,198,26,0.4); }
.aj-landing-page input, .aj-landing-page select { font-family: 'Manrope', sans-serif; }
.aj-landing-page input:focus, .aj-landing-page select:focus { outline: none; }

/* ---- hover states (design used a non-standard style-hover attribute) ---- */
.aj-hover-gold:hover { color: #FFC61A !important; }
.aj-nav-link:hover { color: #000 !important; }
.aj-btn-yellow:hover { background: #ffd23f !important; }
.aj-btn-dark:hover { background: #000 !important; }
.aj-btn-glass:hover { background: rgba(255,255,255,0.2) !important; }
.aj-btn-white50:hover { background: rgba(255,255,255,0.8) !important; }
.aj-border-hover-gold:hover { border-color: #FFC61A !important; }
.aj-lift:hover { transform: translateY(-4px); }
.aj-quick-card:hover { box-shadow: 0 18px 40px -20px rgba(0,0,0,0.4); }

/* ---- splash / chooser ---- */
.aj-splash-ring { animation: ajring 2.4s ease-out infinite; }
.aj-splash-arc { animation: ajspin 1.1s linear infinite; }
.aj-splash-logo { animation: ajpop 0.9s cubic-bezier(.2,.9,.3,1.4) both; }
.aj-splash-fadeup { animation: ajfadeup 0.7s ease both; }
.aj-splash-bar { animation: ajbar 2.2s ease forwards; }
.aj-screenin { animation: ajscreenin 0.5s ease both; }

/* Elements toggled by x-show must not carry `display` in an inline style
   attribute: Alpine's x-show restores visibility via
   el.style.removeProperty('display'), which deletes the whole inline
   declaration rather than restoring a prior value, permanently losing any
   display:flex/grid that was hand-authored inline. Keep such display
   declarations in classes instead. */
.aj-splash-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aj-choose-screen { display: flex; flex-direction: column; }

/* ---- hero banner crossfade ---- */
.aj-banner { position: absolute; inset: 0; opacity: 0; animation: bfade 24s ease-in-out infinite; }
.aj-banner img { width: 100%; height: 100%; object-fit: cover; }

/* ---- tabs ---- */
.aj-tab-btn { flex: 1; border: none; cursor: pointer; padding: 11px; border-radius: 9px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; background: transparent; color: #6b7178; transition: background 0.15s, color 0.15s; }
.aj-tab-btn.active { background: #14161a; color: #fff; }

.aj-pill-btn { border: 1px solid #e4e6e9; background: #fff; color: #6b7178; cursor: pointer; padding: 11px 16px; border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; }
.aj-pill-btn.active { background: #FFC61A; border-color: #FFC61A; color: #14161a; }

.aj-svc-tab { white-space: nowrap; border: 1px solid #e7e9ec; cursor: pointer; padding: 12px 20px; border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; background: #fff; color: #3a3f46; flex: none; }
.aj-svc-tab.active { background: #14161a; color: #fff; border-color: #14161a; }

/* ---- mobile nav ---- */
.aj-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e4e6e9;
  background: #fff;
  border-radius: 10px;
  color: #14161a;
  font-size: 18px;
  cursor: pointer;
  flex: none;
}
.aj-mobile-menu {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4px 20px 14px;
  border-top: 1px solid #e7e9ec;
}
.aj-mobile-menu a {
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 600;
  color: #2f343a;
  border-bottom: 1px solid #f0f1f3;
}
.aj-mobile-menu a:last-child { border-bottom: none; }

@media (min-width: 961px) {
  .aj-mobile-menu { display: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 960px) {
  .aj-hero-inner { grid-template-columns: 1fr !important; }
  .aj-hero-copy { order: -1 !important; }
  .aj-svc-body { grid-template-columns: 1fr !important; }
  .aj-offices-grid { grid-template-columns: 1fr 1fr !important; }
  .aj-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .aj-nav-links { display: none !important; }
  .aj-nav-toggle { display: inline-flex !important; }
  .aj-choose-grid { grid-template-columns: 1fr !important; }
  .aj-splash-logo-box { width: 96px !important; height: 96px !important; }
}

@media (max-width: 600px) {
  .aj-util-links { display: none !important; }
  .aj-util-bar { justify-content: center !important; }
  .aj-svc-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .aj-quick-grid { grid-template-columns: 1fr !important; }
  .aj-offices-grid { grid-template-columns: 1fr !important; }
  .aj-footer-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .aj-partners { gap: 12px !important; }
  .aj-ship-row { grid-template-columns: 1fr !important; }
  .aj-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .aj-main-nav { padding: 12px 16px !important; gap: 10px !important; }
}

@media (max-width: 480px) {
  .aj-nav-login { display: none !important; }
  .aj-nav-register { padding: 9px 12px !important; font-size: 13.5px !important; }
}

@media (max-width: 420px) {
  .aj-quick-grid, .aj-stats-grid { grid-template-columns: 1fr !important; }
}

/* ---- offices map ---- */
/* position+z-index establish a stacking context so Leaflet's internal panes
   (which use z-index values up to ~700) stay contained below the sticky
   nav (z-index:50) instead of bleeding above it when scrolled. */
#aj-offices-map { height: 340px; border-radius: 16px; margin-top: 28px; position: relative; z-index: 0; }

/* ---- money-only landing ----
   The hero splits calculator from copy on a laptop and stacks on a phone; the
   three steps go single-column there too. Both grids are declared inline on
   the element, so these rules only have to undo them. */
@media (max-width: 960px) {
  .aj-hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .aj-how-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .aj-how-grid { grid-template-columns: 1fr !important; }
}