/* Bundle: cards-shield-outline · 2026-07-27T11:44Z · Card accent removed; icon badges refactored as transparent shield outlines */
/* --------------------------------------------------------------------------
   Services grid — plain-edged card + transparent shield-outline icon badge.
   Hover behaviour (translateY + surface tint) preserved.
-------------------------------------------------------------------------- */
.services { padding: var(--space-4xl) 0; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}
.card {
    background: var(--surface);
    border: 1px solid var(--surface-border);   /* uniform edge — no top accent */
    border-radius: var(--r-card);
    padding: var(--space-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform    var(--transition),
        border-color var(--transition),
        background   var(--transition);
}
.card:hover {
    transform: translateY(-8px);
    background: var(--surface-hover);
}

/* Icon badge — transparent, shield-shaped outline behind a small centred
   topical glyph. Colour picks up the site's primary accent so the badge
   flips with the theme (copper on dark, muted navy on light).
--------------------------------------------------------------------------- */
.card .icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}
.card .icon .icon-shield {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    opacity: 0.75;
}
.card .icon .icon-glyph {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}
.card .icon svg { display: block; }

.card h3 { font-size: 18px; margin-bottom: var(--space-xs); }
.card p { font-size: 15px; color: var(--text-muted); }


/* --------------------------------------------------------------------------
   Service card shapes + tone wash (from services-cards-concept)
   One bold translucent shape per card bleeds from the lower-right over a soft
   diagonal wash of the card's hue. Scoped to .services so other .card uses are
   untouched. Hue assigned by position; the shape SVG lives in each card.
-------------------------------------------------------------------------- */
:root { --wash: .16; --art-soft: .20; --art-main: .34; --art-edge: .55; }
:root[data-theme="light"] { --wash: .14; --art-soft: .16; --art-main: .30; --art-edge: .45; }

.services .card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 210px;
    --hue: var(--color-accent);
    background:
        linear-gradient(135deg, rgba(0,0,0,0) 42%, color-mix(in srgb, var(--hue) calc(var(--wash) * 100%), transparent) 100%),
        var(--surface);
}
.services .card:hover {
    background:
        linear-gradient(135deg, rgba(0,0,0,0) 42%, color-mix(in srgb, var(--hue) calc(var(--wash) * 100%), transparent) 100%),
        var(--surface-hover);
    border-color: color-mix(in srgb, var(--hue) 45%, var(--surface-border));
}
.services .card:hover .card__art { transform: scale(1.05) translateY(-2%); }
.services .card > *:not(.card__art) { position: relative; z-index: 1; }

.services .card .card__art {
    position: absolute; right: 0; bottom: 0; width: 64%; height: 100%;
    z-index: 0; pointer-events: none; overflow: hidden;
    transition: transform var(--transition);
}
.services .card .card__art svg {
    position: absolute; right: -8%; bottom: -14%; height: 126%; width: auto; overflow: visible;
}
.services .card .s-soft { fill: var(--hue); opacity: var(--art-soft); filter: blur(10px); }
.services .card .s-main { fill: var(--hue); opacity: var(--art-main); }
.services .card .s-edge { fill: none; stroke: var(--hue); stroke-width: 1.5; opacity: var(--art-edge); vector-effect: non-scaling-stroke; }

.services .grid > .card:nth-child(1) { --hue: #2B6CB0; }
.services .grid > .card:nth-child(2) { --hue: #75A0CC; }
.services .grid > .card:nth-child(3) { --hue: #B06F2B; }
.services .grid > .card:nth-child(4) { --hue: #1E4F8A; }
.services .grid > .card:nth-child(5) { --hue: #C68A4A; }
.services .grid > .card:nth-child(6) { --hue: #5B7FA6; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .services .card { background: var(--surface); }
    .services .card:hover { background: var(--surface-hover); border-color: var(--surface-border); }
}
.services .card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--hue, var(--color-accent));
    text-decoration: none;
}
.services .card__more::after {
    content: "\2192";
    transition: transform var(--transition);
}
.services .card:hover .card__more::after { transform: translateX(3px); }
.services .card__more:focus-visible { outline: 2px solid var(--hue, var(--color-accent)); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .services .card__art { transition: none; }
    .services .card:hover .card__art { transform: none; }
    .services .card__more::after { transition: none; }
}