/* ==========================================================
   SUPERYACHT GUIDE — SERVICES INDEX
   Phase 5B

   /services/ sector-card presentation only.
   ========================================================== */

.syg-sector-card {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        position: relative;
        overflow: hidden;
    }

    .syg-sector-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        opacity: 0.75;
    }

    .syg-sector-card:hover {
        transform: translateY(-2px);
        border-color: rgba(13, 110, 253, 0.16);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
    }

    .syg-sector-card--navy {
        background: linear-gradient(135deg, rgba(241, 245, 249, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--navy::before {
        background: #334155;
    }

    .syg-sector-card--blue {
        background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--blue::before {
        background: #2563eb;
    }

    .syg-sector-card--teal {
        background: linear-gradient(135deg, rgba(240, 253, 250, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--teal::before {
        background: #0f766e;
    }

    .syg-sector-card--green {
        background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--green::before {
        background: #15803d;
    }

    .syg-sector-card--gold {
        background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--gold::before {
        background: #b45309;
    }

    .syg-sector-card--coral {
        background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--coral::before {
        background: #ea580c;
    }

    .syg-sector-card--purple {
        background: linear-gradient(135deg, rgba(250, 245, 255, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--purple::before {
        background: #7e22ce;
    }

    .syg-sector-card--slate {
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96));
    }

    .syg-sector-card--slate::before {
        background: #64748b;
    }

    .syg-sector-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 0.85rem;
    }

    .syg-sector-card-title a {
        color: #005EA8;
        text-decoration: none;
}

    .syg-sector-card-title a:hover,
.syg-sector-card-title a:focus {
        color: #004578;
        text-decoration: none;
}

    .syg-sector-category-count {
        display: inline-block;
        margin-left: 0.35rem;
        color: #6c757d;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .syg-sector-card .syg-service-category-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .syg-sector-card .syg-service-pill {
        margin: 0;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(15, 23, 42, 0.08);
    }

    .syg-sector-card .syg-service-pill:hover,
    .syg-sector-card .syg-service-pill.active {
        border-color: rgba(13, 110, 253, 0.38);
    }