/* ============================================================
   Services (sticky card-stack) — light / white theme.
   The first card pins; each following card scrolls up and
   stacks ON TOP of it (previous cards peek behind at the top).
   Panels are landscape: image left, content right.
   ============================================================ */

.services-scroll {
    position: relative;
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 9vw, 8rem);
    background: #FFFFFF;
    color: var(--color-dark);
}

/* ── Heading (pinned to the top corner) ───────────────────── */
.services-scroll__head {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    padding-block: clamp(.9rem, 2.2vw, 1.6rem);
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
    background: #FFFFFF;
}
.services-scroll__head-text { max-width: 640px; }
.services-scroll__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--color-primary);
    margin-bottom: .85rem;
}
.services-scroll__eyebrow span {
    width: 26px; height: 2px; border-radius: 2px;
    background: var(--color-primary); opacity: .6;
}
.services-scroll__title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
    color: var(--color-dark);
    margin: 0 0 .75rem;
}
.services-scroll__subtitle {
    font-size: 1rem; line-height: 1.7;
    color: var(--color-text-muted); margin: 0; max-width: 52ch;
}
.services-scroll__cta {
    display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0;
    padding: .9rem 1.7rem; border-radius: var(--radius-full);
    background: var(--gradient-brand); color: #fff;
    font-size: .95rem; font-weight: 700; text-decoration: none;
    box-shadow: var(--shadow-blue);
    transition: transform var(--transition), box-shadow var(--transition);
}
.services-scroll__cta svg { transition: transform var(--transition); }
.services-scroll__cta:hover { transform: translateY(-2px); color: #fff; }
.services-scroll__cta:hover svg { transform: translateX(3px); }

/* ── Stack ────────────────────────────────────────────────── */
.services-scroll__list {
    display: flex; flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-panel {
    /* sticky stack — first card pins just below the pinned heading,
       each next one stacks over it. Cards fill the viewport so only
       ONE is visible at a time (next slides up to cover it). */
    position: sticky;
    top: calc(var(--svc-head-h, 108px) + 14px + var(--i, 0) * 7px);
    min-height: clamp(380px, 64vh, 520px);

    display: grid;
    grid-template-columns: 1fr 1.1fr;   /* content | image */
    gap: clamp(1.25rem, 3vw, 2.75rem);
    align-items: stretch;
    padding: clamp(.85rem, 1.4vw, 1.25rem);
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    box-shadow: 0 18px 50px rgba(10,18,53,.12), 0 4px 12px rgba(10,18,53,.06);
    transition: box-shadow .35s ease, border-color .35s ease;
}
.svc-panel:hover {
    border-color: color-mix(in srgb, var(--accent, #0E5FE8) 35%, transparent);
    box-shadow: 0 26px 64px rgba(10,18,53,.16), 0 6px 16px rgba(10,18,53,.07);
}

/* Left: image / placeholder — fills the card height */
.svc-panel__media {
    position: relative;
    height: 100%;
    min-height: 220px;
    border-radius: 16px; overflow: hidden;
    background: color-mix(in srgb, var(--accent, #0E5FE8) 10%, #fff);
}
.svc-panel__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.svc-panel:hover .svc-panel__img { transform: scale(1.04); }
.svc-panel__placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    text-align: center; padding: 1.25rem; color: #fff;
    background:
        radial-gradient(120% 120% at 20% 15%, color-mix(in srgb, var(--accent, #0E5FE8) 92%, #fff) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent, #0E5FE8) 85%, #0A1235) 0%, var(--accent, #0E5FE8) 100%);
}
.svc-panel__placeholder-icon { color: rgba(255,255,255,.9); }
.svc-panel__placeholder-name {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 700;
    color: #fff; line-height: 1.2;
}
.svc-panel__num {
    position: absolute; top: 12px; left: 14px;
    font-family: var(--font-heading);
    font-size: .95rem; font-weight: 800; color: #fff;
    padding: .28rem .58rem; border-radius: 8px;
    background: rgba(10,18,53,.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-variant-numeric: tabular-nums;
}

/* Right: content */
.svc-panel__content {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(.4rem, 1.2vw, 1rem) clamp(.75rem, 2vw, 2rem);
}
.svc-panel__title {
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--color-dark); margin: 0 0 .55rem;
}
.svc-panel__desc {
    font-size: .95rem; line-height: 1.65; color: var(--color-text-muted);
    margin: 0 0 1.1rem; max-width: 46ch;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-panel__link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .9rem; font-weight: 700;
    color: var(--accent, #0E5FE8); text-decoration: none;
}
.svc-panel__link svg { transition: transform var(--transition); }
.svc-panel__link:hover svg { transform: translateX(4px); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
    .services-scroll__head {
        position: static; background: none;
        flex-direction: column; align-items: stretch; gap: 1.25rem;
        padding-block: 0;
    }
    /* Hide the CTA on phones — keep the heading area clean */
    .services-scroll__cta {
        display: none;
    }
    .svc-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: center;   /* centre the image + text group vertically */
        gap: 1.25rem;
        top: calc(clamp(60px, 8vh, 80px) + var(--i, 0) * 6px);
        min-height: clamp(400px, 66vh, 540px);
    }
    .svc-panel__media { height: clamp(170px, 42vw, 230px); min-height: 0; order: -1; } /* image on top */
    .svc-panel__content { padding: .4rem .4rem .8rem; }
    .svc-panel__desc { -webkit-line-clamp: 4; }
}

/* ── Reduced motion (no sticky pinning) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .svc-panel { position: relative; top: auto; }
}