/* --------------------------------------------------------------------------
   Service detail pages (/services/<slug>)
   Reuses the site hero / pillar / CTA components; adds a hued hero band with
   the matching card shape, plus a capability grid. Per-page hue via a .svc--*
   class on the hero. Class-scoped; safe to load globally.
-------------------------------------------------------------------------- */

.svc { --hue: var(--color-accent); }

.svc-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--surface-border);
    background:
        linear-gradient(135deg, rgba(0,0,0,0) 46%, color-mix(in srgb, var(--hue) 16%, transparent) 100%),
        var(--band-tint);
}
.svc-hero .wrap {
    position: relative;
    z-index: 1;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
    max-width: 760px;
}
.svc-hero .eyebrow { color: var(--color-primary); }
.svc-hero h1 {
    font-size: clamp(32px, 5vw, 46px);
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: var(--space-sm) 0 var(--space-md);
    max-width: 18ch;
}
.svc-hero .svc-lede {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 56ch;
    margin: 0 0 var(--space-xl);
    line-height: 1.55;
}

/* Shape motif — mirrors the home card, tinted to the page hue. */
.svc-hero__art {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.svc-hero__art svg {
    position: absolute;
    right: -4%; bottom: -18%;
    height: 150%; width: auto;
    overflow: visible;
}
.svc-hero__art .s-soft { fill: var(--hue); opacity: .18; filter: blur(14px); }
.svc-hero__art .s-main { fill: var(--hue); opacity: .30; }
.svc-hero__art .s-edge { fill: none; stroke: var(--hue); stroke-width: 1.5; opacity: .5; vector-effect: non-scaling-stroke; }

@media (max-width: 720px) {
    .svc-hero__art { width: 62%; opacity: .6; }
}

/* Capability grid */
.svc-caps { padding: var(--space-4xl) 0; }
.svc-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.svc-cap {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    padding: var(--space-lg);
    border-top: 3px solid var(--hue, var(--color-accent));
}
.svc-cap h3 { font-size: 17px; margin-bottom: var(--space-xs); }
.svc-cap p { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Outcomes list */
.svc-outcomes { padding: 0 0 var(--space-4xl); }
.svc-outcomes ul {
    list-style: none;
    margin: var(--space-lg) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm) var(--space-2xl);
}
.svc-outcomes li {
    position: relative;
    padding-left: var(--space-lg);
    color: var(--text-muted);
    line-height: 1.55;
    padding-block: 6px;
}
.svc-outcomes li::before {
    content: "";
    position: absolute;
    left: 0; top: 13px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hue, var(--color-accent));
}

/* Per-page hues — the six professional services */
.svc--c1 { --hue: #2B6CB0; }
.svc--c2 { --hue: #75A0CC; }
.svc--c3 { --hue: #B06F2B; }
.svc--c4 { --hue: #1E4F8A; }
.svc--c5 { --hue: #C68A4A; }
.svc--c6 { --hue: #5B7FA6; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .svc-hero { background: var(--band-tint); }
}