.nav-backdrop, .mobile-quick-bar, .contact-mobile-switch { display: none; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(3px); }
.scroll-progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--brand), var(--highlight)); box-shadow: 0 0 14px rgba(21, 77, 61, 0.34); }
.reveal { opacity: 1; transform: none; }
.js-enhanced .reveal {
  opacity: 0; transform: translateY(28px) scale(0.975); transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js-enhanced .reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.story-card, .media-story-card, .card, .shop-card, .presence-card, .process-card, .faq-card, .office-card, .contact-info, .rate-card, .metric-card, .timeline-node, .about-service-card, .about-social-card, .about-value-card {
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.story-card:hover, .media-story-card:hover, .card:hover, .shop-card:hover, .presence-card:hover, .process-card:hover, .faq-card:hover, .office-card:hover, .contact-info:hover, .rate-card:hover, .metric-card:hover, .timeline-node:hover, .about-service-card:hover, .about-social-card:hover, .about-value-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(214, 168, 102, 0.5);
}
.process-flow-card:hover .process-index {
  transform: scale(1.06);
  box-shadow: 0 14px 22px rgba(10, 42, 33, 0.24);
}
.quick-order-card:hover .quick-order-step {
  transform: scale(1.06);
  box-shadow: 0 14px 22px rgba(140, 99, 37, 0.18);
}
.process-flow-card .process-index {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.quick-order-card .quick-order-step {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.js-enhanced .process-flow-card {
  opacity: 0;
  transform: translateY(24px);
  animation: processFlowEnter 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--process-delay, 0ms);
}
.js-enhanced .process-flow-card:nth-child(1) { --process-delay: 80ms; }
.js-enhanced .process-flow-card:nth-child(2) { --process-delay: 170ms; }
.js-enhanced .process-flow-card:nth-child(3) { --process-delay: 260ms; }
.js-enhanced .process-flow-card:nth-child(4) { --process-delay: 350ms; }
.js-enhanced .quick-order-card {
  opacity: 0;
  transform: translateY(22px);
  animation: processFlowEnter 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--quick-order-delay, 0ms);
}
.js-enhanced .quick-order-card:nth-child(1) { --quick-order-delay: 90ms; }
.js-enhanced .quick-order-card:nth-child(2) { --quick-order-delay: 190ms; }
.js-enhanced .quick-order-card:nth-child(3) { --quick-order-delay: 290ms; }
@keyframes processFlowEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.story-card img, .media-story-card img, .shop-image, .hero-media img { transform: translateY(var(--parallax-y, 0)); transition: transform 420ms ease, filter 420ms ease; }
.story-card:hover img, .media-story-card:hover img, .shop-card:hover .shop-image { transform: translateY(var(--parallax-y, 0)) scale(1.04); filter: saturate(1.04) contrast(1.02); }
.js-enhanced .hero-cinematic .hero-kicker, .js-enhanced .hero-cinematic h1, .js-enhanced .hero-cinematic .hero-copy, .js-enhanced .hero-cinematic .hero-actions, .js-enhanced .hero-cinematic .hero-trust {
  opacity: 0; transform: translateY(18px); animation: heroStagger 780ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-enhanced .hero-cinematic h1 { animation-delay: 120ms; }
.js-enhanced .hero-cinematic .hero-copy { animation-delay: 210ms; }
.js-enhanced .hero-cinematic .hero-actions { animation-delay: 300ms; }
.js-enhanced .hero-cinematic .hero-trust { animation-delay: 380ms; }
@keyframes heroStagger { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 35; background: rgba(6, 16, 13, 0.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; display: block;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
  .contact-mobile-switch { display: flex; gap: 0.45rem; margin-bottom: 0.7rem; }
  .contact-switch-btn {
    flex: 1; padding: 0.5rem 0.55rem; border: 1px solid #d5c19f; border-radius: var(--radius-pill); background: #f8f2e7; color: #3d352b; font-size: 0.84rem; font-weight: 700; cursor: pointer;
  }
  .contact-switch-btn.is-active { color: #fff; background: linear-gradient(130deg, var(--brand), var(--brand-strong)); border-color: transparent; }
  #contact .contact-panel { display: none; }
  #contact .contact-panel.is-active { display: block; }
  .mobile-quick-bar {
    position: fixed; right: 0.6rem; bottom: 0.6rem; left: 0.6rem; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; padding: 0.45rem; border: 1px solid rgba(214, 168, 102, 0.35); border-radius: 14px; background: rgba(10, 42, 33, 0.92); box-shadow: 0 16px 28px rgba(0, 0, 0, 0.3);
  }
  .mobile-quick-bar a {
    padding: 0.52rem 0.5rem; border-radius: 10px; color: #fff; text-align: center; text-decoration: none; font-size: 0.84rem; font-weight: 700; background: rgba(255, 255, 255, 0.09);
  }
  .mobile-quick-bar a.primary { background: linear-gradient(130deg, var(--brand), var(--brand-strong)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .js-enhanced .reveal { opacity: 1; transform: none; }
  .hero-video { transform: none; }
}