/* ==========================================================================
   UTILITIES
   Single-purpose helper classes.
   ========================================================================== */

/* -- Screen Reader Only -------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Scroll Reveal ------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal for children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }

/* -- Text Alignment ------------------------------------------------------ */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* -- Margin Utilities ---------------------------------------------------- */
.mx-auto { margin-inline: auto; }
.mt-sm   { margin-top: var(--sp-sm); }
.mt-md   { margin-top: var(--sp-md); }
.mt-lg   { margin-top: var(--sp-lg); }
.mt-xl   { margin-top: var(--sp-xl); }
.mt-2xl  { margin-top: var(--sp-2xl); }
.mb-md   { margin-bottom: var(--sp-md); }
.mb-lg   { margin-bottom: var(--sp-lg); }

/* -- Primary Color Text -------------------------------------------------- */
.text-primary { color: var(--c-primary); }
.text-accent  { color: var(--c-accent); }
.text-muted   { color: var(--c-text-3); }

/* -- Full-Width ---------------------------------------------------------- */
.w-full { width: 100%; }

/* -- Mobile: center body copy & paragraphs -------------------------------
   Scoped to marketing copy / body-text containers, not form fields, nav
   links, or buttons. Hero and Contact keep their own intentional
   left-aligned layout and are excluded. ------------------------------- */
@media (max-width: 767px) {
  .why-card__body,
  .essential-row-body,
  .card__text,
  .faq-answer-content,
  .faq-answer-content p,
  .faq-accordion p,
  .footer__tagline,
  .contact-form-reassurance,
  .case-card__subtitle,
  .why-card,
  .why-card__title {
    text-align: center;
  }

  .why-card {
    align-items: center;
  }

  .why-card__icon {
    margin: 0 auto;
  }
}

/* -- Responsive Visibility ----------------------------------------------- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}