/* =============================================================
   intro.css
   Below-hero strip: trust stats row + "What We Handle" chips.
   Bright white/cream, sage accent, warm sand chips.
   ============================================================= */

.intro {
  /* Symmetric padding so the chips have equal breathing room above
     (from the hero image) and below (before the sand section). */
  padding: 18px 0;
  background: var(--color-bg);
}

/* ----- Chips: centered "What We Handle" — label above, ovals below ----- */
.chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  text-align: center;
}

.chips__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.chips__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
}

.chips__chip {
  padding: 8px 16px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
  .intro {
    /* Small top gap so the "What We Handle" title rises into the first
       screen; larger bottom gap for breathing room before the sand
       "Why We Built This" section under the Travel chip. */
    padding: 20px 0 36px;
  }
}