/* =========================================================
   Greatest Interactive — Services
   Mirrors the "Our Services" card treatment already established on
   the home page (icon chip, hover arrow, cycling accent colors), so
   the full services listing feels like the same component rather
   than a different design. Reuses shared tokens from main.css.
   ========================================================= */

.services-hero {
    position: relative;
    padding: 90px 24px 56px;
    background: var(--paper);
    overflow: hidden;
}

.services-hero .hero-decor {
    position: absolute;
    top: 22%;
    right: 12%;
    color: var(--amber);
    opacity: 0.9;
}

.services-hero .hero-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    z-index: 1;
}

.services-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text, var(--ink));
}

.section {
    padding: 40px 40px 80px;
}

.section-inner {
    max-width: var(--container);
    margin: 0 auto;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
    border-color: transparent;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    color: inherit;
    margin-bottom: 18px;
}

.card-icon i {
    display: inline-block;
    color: inherit;
    font-size: 20px;
    line-height: 1;
}

.chip-coral { background: var(--coral); color: #fff; }
.chip-sky { background: var(--sky); color: #10324a; }
.chip-mint { background: var(--mint); color: #0f3d2e; }
.chip-amber { background: var(--amber); color: #4a2c00; }

.card-arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text, var(--ink));
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.card:hover .card-arrow {
    background: var(--violet-500);
    color: #fff;
    transform: rotate(45deg);
}

.card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text, var(--ink));
}

.card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 2.5rem 0;
    color: var(--muted);
    text-align: center;
}

/* ---------------------------------------------------------
   Scroll reveal (progressive enhancement — see services.js)
   --------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 720px) {
    .services-hero { padding: 64px 20px 40px; }
    .section { padding: 24px 20px 56px; }
}