/* Add-ons to styles.css for shell + animations */

/* Mobile nav */
.nav-toggle {
  display: none; width: 42px; height: 42px; position: relative;
  border-radius: var(--radius-sm); border: 1px solid var(--c-line);
}
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--c-navy); border-radius: 2px; transition: transform var(--t-fast), opacity var(--t-fast), top var(--t-fast); }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle.is-active span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
.mobile-nav {
  display: none; padding: 16px 24px 24px;
  background: #fff; border-top: 1px solid var(--c-line);
}
.mobile-nav.is-open { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a { padding: 12px 14px; color: var(--c-text); font-weight: 500; border-radius: var(--radius-sm); }
.mobile-nav a:hover { background: var(--c-bg-alt); color: var(--c-navy); }
.mobile-nav a.is-active { color: var(--c-orange-dark); background: var(--c-bg-alt); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  /* Phone stays visible on mobile (icon-only - text hidden via style.css)
     so users can call with one tap. CTA button is hidden, hamburger replaces it. */
  .header-cta .btn { display: none; }
}
@media (min-width: 1081px) {
  .mobile-nav { display: none !important; }
}

.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Subtle entrance for hero */
.hero h1, .hero p.lead, .hero .eyebrow, .hero-cta, .hero-meta, .hero-visual {
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.hero p.lead { animation-delay: .08s; }
.hero-cta    { animation-delay: .16s; }
.hero-meta   { animation-delay: .24s; }
.hero-visual { animation-delay: .12s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal */
[data-r].reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-r].is-in  { opacity: 1; transform: translateY(0); }