/* ==========================================================================
   BASE/GLOBAL.CSS
   Reset, base typography and global helpers. Loaded on every page.
   ========================================================================== */

/* ==========================================================================
   RESET & BASE TYPOGRAPHY
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 1rem;
}

::selection {
  background: var(--coral);
  color: var(--white);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

/* [UNUSED] Not referenced by any page or script — safe to delete after review.

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}
*/

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */

/* [UNUSED] Not referenced by any page or script — safe to delete after review.

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, .8, .24, 1), transform .7s cubic-bezier(.16, .8, .24, 1);
}

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

.reveal-stagger>* {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16, .8, .24, 1), transform .6s cubic-bezier(.16, .8, .24, 1);
}

.reveal-stagger.in>* {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.in>*:nth-child(1) {
  transition-delay: 0s;
}

.reveal-stagger.in>*:nth-child(2) {
  transition-delay: .07s;
}

.reveal-stagger.in>*:nth-child(3) {
  transition-delay: .14s;
}

.reveal-stagger.in>*:nth-child(4) {
  transition-delay: .21s;
}

.reveal-stagger.in>*:nth-child(5) {
  transition-delay: .28s;
}

.reveal-stagger.in>*:nth-child(6) {
  transition-delay: .35s;
}

.reveal-stagger.in>*:nth-child(7) {
  transition-delay: .42s;
}

.reveal-stagger.in>*:nth-child(8) {
  transition-delay: .49s;
}

.reveal-stagger.in>*:nth-child(9) {
  transition-delay: .56s;
}

.reveal-stagger.in>*:nth-child(10) {
  transition-delay: .63s;
}

.reveal-stagger.in>*:nth-child(11) {
  transition-delay: .70s;
}

.reveal-stagger.in>*:nth-child(12) {
  transition-delay: .77s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger>* {
    opacity: 1;
    transform: none;
  }
}
*/

/* Visitors who ask their device for less motion: no animations, instant transitions,
   no hover lifts / zooms, no smooth scrolling (the WhatsApp button no longer pulses at all). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn-coral:hover,
  .qm-submit-btn:hover,
  .cat-card:hover .cat-icon,
  .cat-card:hover .cat-icon-img,
  .pricing-table-new tbody tr:hover,
  .fcc-card:hover,
  .gal-tile:hover,
  .gal-tile:hover img,
  .process-step:hover,
  .process-step:hover .process-icon-wrap,
  .process-step:hover .process-icon-img,
  .who-card:hover,
  .sgs-card:hover .sgs-icon,
  .bng-card:hover,
  .bng-card:hover .bng-img-wrap img,
  .bng-btn:hover,
  .bng-btn:hover svg,
  .bento-mini-tile:hover img,
  .lp-service-card:hover,
  .lp-contact-card:hover,
  .lp-btn-primary:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   SMALL MOBILE (≤575px)
   ========================================================================== */

@media (max-width: 575px) {
  .row.g-4 {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
  }

  /* Reduce row gutters on smallest screens */
  .row.g-4 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
}