/* =================== SPA Transitions =================== */
.wrap {
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.wrap--leaving {
  opacity: 0;
  transform: translateX(-20px);
}
.wrap--entering {
  animation: wrapIn var(--dur-slow) var(--ease-out) forwards;
}
@keyframes wrapIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* =================== Scroll Reveal =================== */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.rv.visible {
  opacity: 1;
  transform: translateY(0);
}
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }
.rv-d5 { transition-delay: 0.40s; }
.rv-d6 { transition-delay: 0.48s; }
.rv-d7 { transition-delay: 0.56s; }
.rv-d8 { transition-delay: 0.64s; }

/* =================== Loading bar =================== */
.spa-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 999;
  transition: width 0.3s var(--ease);
  border-radius: 0 2px 2px 0;
}

/* =================== Responsive =================== */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .zone-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    z-index: 90;
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
  }
  .nav-toggle { display: flex; }
  .header-cta .phone-pill span.full { display: none; }
  .logo-text small { display: none; }
  .logo { font-size: 1rem; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .diag-card { grid-template-columns: 1fr; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-strip { flex-direction: column; }
  .cta-band { padding: 30px 20px; }
  .hero { padding: 48px 0 40px; }
  section { padding: 46px 0; }
}