/* ══ Services Page Styles ══════════════════════════════════════════════════ */

/* Venue type chips in hero */
.svcs-venue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 1.75rem;
}
.svcs-venue-chips span {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 2rem;
    padding: .35rem .9rem;
    font-size: .8rem;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    backdrop-filter: blur(6px);
}

/* ── Why Specialist section ───────────────────────────────────────────────── */
.svcs-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (max-width: 900px) { .svcs-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .svcs-why-grid { grid-template-columns: 1fr; } }

.svcs-why-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    transition: border-color .25s, transform .25s;
}
.svcs-why-card:hover {
    border-color: rgba(255,165,0,.35);
    transform: translateY(-3px);
}
.svcs-why-card__icon {
    font-size: 2rem;
    margin-bottom: .9rem;
    display: block;
}
.svcs-why-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .65rem;
    line-height: 1.35;
}
.svcs-why-card p {
    font-size: .875rem;
    color: rgba(255,255,255,.7);
    line-height: 1.7;
    margin: 0;
}

/* ── Category headers ─────────────────────────────────────────────────────── */
.svcs-category {
    margin-bottom: 1.75rem;
}
.svcs-category--mt { margin-top: 3.5rem; }

.svcs-category__label {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .5rem;
}
.svcs-category__icon { font-size: 1.4rem; }
.svcs-category__desc {
    font-size: .9rem;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    max-width: 70ch;
    margin: 0;
}

/* ── Impact badge inside service cards ────────────────────────────────────── */
.svcs-impact {
    margin-top: 1rem;
    padding: .55rem .8rem;
    background: rgba(255,165,0,.08);
    border-left: 3px solid rgba(255,165,0,.5);
    border-radius: 0 .5rem .5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    align-items: baseline;
}
.svcs-impact__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,165,0,.8);
    font-weight: 700;
    white-space: nowrap;
}
.svcs-impact__value {
    font-size: .8rem;
    color: rgba(255,255,255,.85);
    font-weight: 600;
}

/* ── 2-column service grid variant ───────────────────────────────────────── */
.db-services-grid--2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 720px) {
    .db-services-grid--2 { grid-template-columns: 1fr !important; }
}

/* ── Marketing Stack ──────────────────────────────────────────────────────── */
.svcs-stack-grid {
    max-width: 680px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.svcs-stack-layer {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1.35rem 1.5rem;
    position: relative;
    transition: border-color .25s, background .25s;
}
.svcs-stack-layer:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,165,0,.4);
}
.svcs-stack-layer--1 { border-left: 3px solid #f97316; }
.svcs-stack-layer--2 { border-left: 3px solid #a855f7; }
.svcs-stack-layer--3 { border-left: 3px solid #3b82f6; }
.svcs-stack-layer--4 { border-left: 3px solid #10b981; }
.svcs-stack-layer--5 { border-left: 3px solid #fbbf24; }

.svcs-stack-layer__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.svcs-stack-layer__body { flex: 1; }
.svcs-stack-layer__body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .2rem;
}
.svcs-stack-layer__body > p {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    margin: 0 0 .5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.svcs-stack-layer__note {
    font-size: .83rem;
    color: rgba(255,255,255,.72);
    line-height: 1.6;
    display: block;
}

.svcs-stack-connector {
    text-align: center;
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    padding: .65rem 0;
    font-style: italic;
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .svcs-stack-layer { flex-direction: column; gap: .75rem; }
    .svcs-stack-layer__num { align-self: flex-start; }
}