/*
 * Trust AI — Shared site styles.
 * Loaded by every page via <link rel="stylesheet" href="assets/css/site.css">.
 * Edit here once → applies to all pages.
 */

html, body { margin: 0; padding: 0; }
body { font-family: 'Satoshi', sans-serif; background: #fff; }

/* Smooth scroll for in-page anchor links (href="#xxx"). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Account for the fixed nav so anchored targets don't hide underneath it. */
[id] { scroll-margin-top: 80px; }
@media (min-width: 640px) { [id] { scroll-margin-top: 100px; } }

/* Centered content container — caps at 1440px by default, grows to 1660px at viewports ≥1660.
   Section backgrounds remain full-bleed; only the inner content is constrained.
   Below 1440px the wrap gets horizontal padding so content doesn't touch the screen edges. */
.wrap {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px)  { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1440px) { .wrap { padding-left: 0;    padding-right: 0;    } }
@media (min-width: 1660px) { .wrap { max-width: 1660px; } }

/* Locks page scroll when the mobile nav drawer is open (toggled via JS). */
body.no-scroll { overflow: hidden; }

/* Contact-modal entrance animation. Re-triggered on each open by toggling
   .contact-modal-anim off → reflow → on (see components.js ContactModal). */
@keyframes contact-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes contact-modal-bounce-in {
  0%   { opacity: 0; transform: translateY(28px) scale(0.9); }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.025); }
  78%  { transform: translateY(3px) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-modal-anim[data-backdrop] {
  animation: contact-modal-fade-in 180ms ease-out both;
}
.contact-modal-anim [data-modal-card] {
  animation: contact-modal-bounce-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center top;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .contact-modal-anim[data-backdrop],
  .contact-modal-anim [data-modal-card] { animation: none; }
}