/* ─────────────────────────────────────────────
   Tailwind can't express these — everything
   else lives as utility classes in the HTML.
───────────────────────────────────────────── */

/* Global serif: tight tracking + light weight */
.font-serif { letter-spacing: -0.07em; font-weight: 300; }

/* ── Art card gradient backgrounds ───────────── */
/* Shared dot-grid overlay */
.art-hero,
.art-service,
.art-who,
.art-portfolio {
  position: relative;
  overflow: hidden;
}
.art-hero::after,
.art-service::after,
.art-who::after,
.art-portfolio::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.art-hero {
  background:
    radial-gradient(ellipse at 62% 42%, rgba(218,112,60,.75) 0%, transparent 38%),
    radial-gradient(ellipse at 28% 60%, rgba(100,80,170,.45) 0%, transparent 45%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
}
.art-service {
  background:
    radial-gradient(ellipse at 45% 50%, rgba(218,112,60,.75) 0%, transparent 40%),
    radial-gradient(ellipse at 72% 28%, rgba(100,80,170,.45) 0%, transparent 45%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
}
.art-who {
  background:
    radial-gradient(ellipse at 30% 45%, rgba(218,112,60,.75) 0%, transparent 40%),
    radial-gradient(ellipse at 68% 62%, rgba(100,80,170,.45) 0%, transparent 45%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
  min-height: 220px;
}
.art-testimonial {
  background:
    linear-gradient(rgba(18,8,2,.52), rgba(18,8,2,.52)),
    radial-gradient(ellipse at 58% 38%, rgba(218,112,60,.85) 0%, transparent 42%),
    radial-gradient(ellipse at 20% 68%, rgba(100,80,170,.5) 0%, transparent 45%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
}
.art-portfolio {
  background:
    radial-gradient(ellipse at 55% 44%, rgba(218,112,60,.75) 0%, transparent 40%),
    radial-gradient(ellipse at 24% 30%, rgba(100,80,170,.45) 0%, transparent 45%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
}
.art-contact {
  background:
    linear-gradient(rgba(18,8,2,.62), rgba(18,8,2,.62)),
    radial-gradient(ellipse at 40% 36%, rgba(218,112,60,.85) 0%, transparent 42%),
    radial-gradient(ellipse at 68% 68%, rgba(100,80,170,.5) 0%, transparent 45%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
}

/* Team photo placeholders */
.team-photo-1 {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(218,112,60,.65) 0%, transparent 45%),
    radial-gradient(ellipse at 78% 72%, rgba(100,80,170,.4) 0%, transparent 40%),
    linear-gradient(140deg, #4a6f9a 0%, #6a5b9c 35%, #b56050 65%, #7a90b8 100%);
}
.team-photo-2 {
  background:
    radial-gradient(ellipse at 32% 42%, rgba(218,112,60,.65) 0%, transparent 45%),
    radial-gradient(ellipse at 68% 65%, rgba(100,80,170,.4) 0%, transparent 40%),
    linear-gradient(160deg, #6a5b9c 0%, #4a6f9a 35%, #7a90b8 65%, #b56050 100%);
}
.team-photo-3 {
  background:
    radial-gradient(ellipse at 62% 38%, rgba(218,112,60,.65) 0%, transparent 45%),
    radial-gradient(ellipse at 22% 68%, rgba(100,80,170,.4) 0%, transparent 40%),
    linear-gradient(120deg, #7a90b8 0%, #b56050 35%, #6a5b9c 65%, #4a6f9a 100%);
}
.team-photo-4 {
  background:
    radial-gradient(ellipse at 46% 44%, rgba(218,112,60,.65) 0%, transparent 45%),
    radial-gradient(ellipse at 72% 58%, rgba(100,80,170,.4) 0%, transparent 40%),
    linear-gradient(150deg, #b56050 0%, #7a90b8 35%, #4a6f9a 65%, #6a5b9c 100%);
}

/* ── Marquee ──────────────────────────────────── */
.marquee-outer {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── FAQ accordion animation ─────────────────── */
.faq-body {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height 0.35s ease, padding-bottom 0.35s ease;
}
.faq-body.open {
  max-height: 300px;
  padding-bottom: 1.25rem;
}

/* ── Spinner ──────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(246,240,233,.3);
  border-top-color: #f6f0e9;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }