/* ==========================================================================
   RiyalMarketing — Utilities
   Small, composable helpers. Used to avoid one-off inline styles —
   never a replacement for real component classes.
   ========================================================================== */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-9 { margin-top: var(--space-9); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.text-center { text-align: center; }
.text-muted { color: var(--color-slate); }
.text-accent { color: var(--color-accent-core); }
.text-sm { font-size: 13.5px; }

.w-full { width: 100%; }

.rounded-full { border-radius: var(--radius-full); }

.divider-v { width: 1px; align-self: stretch; background: var(--color-border); }

/* Reveal-on-scroll hook (GSAP targets this class; CSS provides the
   non-JS fallback so content is never hidden if scripts fail) */
.reveal { opacity: 1; }
.js-enabled .reveal { opacity: 0; transform: translateY(24px); }