/* SERVICE PAGE (builds on home.css shared components) */
.hero-service { padding: clamp(56px,7vw,88px) 0; }
.hero-service .hero-grid { align-items: center; }
.extra-content-section .prose { text-align: left; }
.included-section .section-cta { margin-top: 40px; }
.industries-section .prose { text-align: left; }
.industries-section .section-title { text-align: center; }
.outcomes-section .prose { text-align: left; }

/* Why section 2-column with visual placeholder */
.why-section .why-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
    margin-top: 8px;
}
.why-section .why-grid .prose { text-align: left; }
.why-visual img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.why-visual .media-placeholder {
    aspect-ratio: 4 / 3.4;
    background:
        radial-gradient(520px 300px at 70% 20%, rgba(16,185,129,0.1), transparent 60%),
        linear-gradient(135deg, rgba(4,120,87,0.06), rgba(212,175,55,0.08)),
        var(--color-card);
}
.mp-visual { display: flex; flex-direction: column; gap: 16px; padding: 28px; width: 100%; }
.mp-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); padding: 12px 20px;
    font-size: 15px; font-weight: 600; color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.mp-chip svg { flex-shrink: 0; }
.mp-chip-emerald svg { color: var(--color-accent); }
.mp-chip-gold svg { color: var(--color-gold); }
.mp-chip:nth-child(1) { align-self: flex-start; }
.mp-chip:nth-child(2) { align-self: center; }
.mp-chip:nth-child(3) { align-self: flex-end; }

@media (max-width: 860px) {
    .why-section .why-grid { grid-template-columns: 1fr; }
    .why-visual { max-width: 460px; margin: 0 auto; }
}

/* Per-service hero identity badge */
.hero-service-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: var(--radius-pill);
    padding: 8px 16px 8px 8px;
    margin-bottom: 18px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--color-gold-soft-hex);
}
.hero-service-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gradient-gold); color: #2A2105;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-service-badge svg { width: 18px; height: 18px; }