/* Service Cards — Responsive card hover animations */

.services-section .services-card {
    position: relative;
    background: #fbf5f5;
    overflow: hidden;
    cursor: pointer;
    border: none;
    border-radius: 0;
    padding: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 6px -2px rgba(75, 48, 46, 0.06);
}

.services-section .services-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 48px -20px rgba(75, 48, 46, 0.22);
}

/* SVG border draw */
.services-section .services-card .sc-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.services-section .services-card .sc-line rect {
    fill: none;
    stroke: var(--accent, #e2be98);
    stroke-width: 1.4;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.services-section .services-card:hover .sc-line rect {
    stroke-dashoffset: 0;
}

/* Color overlay */
.services-section .services-card .sc-overlay {
    position: absolute;
    inset: 0;
    background: var(--accent, #e2be98);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.services-section .services-card:hover .sc-overlay {
    opacity: 0.06;
}

/* Card body */
.services-section .services-card .sc-body {
    position: relative;
    padding: 30px 24px 28px;
    z-index: 3;
}

/* Index number */
.services-section .services-card .sc-index {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--accent, #e2be98);
    margin-bottom: 10px;
}

/* Title */
.services-section .services-card .post-prev-title {
    font-family: var(--font-global-alt, 'Spline Sans', sans-serif);
    font-weight: 400;
    font-size: 18px;
    color: #4B302E;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.services-section .services-card .post-prev-title a {
    color: #4B302E;
    text-decoration: none;
}

.services-section .services-card:hover .post-prev-title a {
    color: #4B302E;
}

/* Category label */
.services-section .services-card .services-cat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c1b7a2;
    margin-bottom: 18px;
    font-weight: 300;
}

/* Learn more link + arrow */
.services-section .services-card .sc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.services-section .services-card .sc-link-text {
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #4B302E;
    transition: color 0.35s ease;
}

.services-section .services-card .sc-arrow {
    font-size: 14px;
    color: #4B302E;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}

.services-section .services-card:hover .sc-link-text,
.services-section .services-card:hover .sc-arrow {
    color: var(--accent, #e2be98);
}

.services-section .services-card:hover .sc-arrow {
    transform: translateX(4px);
}

/* Underline animation */
.services-section .services-card .sc-underline {
    margin-top: 6px;
    height: 1px;
    width: 0;
    background: var(--accent, #e2be98);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-section .services-card:hover .sc-underline {
    width: 64px;
}

/* Hide old text-link */
.services-section .services-card > a.text-link {
    display: none;
}

/* Grid items */
.services-section .masonry-item {
    margin-bottom: 30px;
}

/* Accent colors per category */
.services-section .masonry-item.cosmetic .services-card { --accent: #b0714a; }
.services-section .masonry-item.clinical .services-card { --accent: #5f7f96; }
.services-section .masonry-item.hair .services-card { --accent: #6f8f6a; }
.services-section .masonry-item.pediatric .services-card { --accent: #8b6fa8; }
.services-section .masonry-item.plastic .services-card { --accent: #c17c7c; }
.services-section .masonry-item.regenerative .services-card { --accent: #4a8f8f; }
.services-section .masonry-item.signature .services-card { --accent: #e2be98; }
.services-section .masonry-item.aesthetic .services-card { --accent: #7a6f9a; }
.services-section .masonry-item.other .services-card { --accent: #8c8c8c; }

/* Responsive */
@media (max-width: 640px) {
    .services-section .services-card .sc-body {
        padding: 24px 20px 22px;
    }

    .services-section .services-card .post-prev-title {
        font-size: 16px;
    }
}