/* ========================================
   Service Cards Animation — clip-path reveal ONLY (no cursor/bullet)
   ======================================== */

.service-cards-animation{
    --bg:#0b0b0d;
    --ink:#222;
    --muted:#6f757a;
    --card-r:14px;
    position:relative;
    overflow:hidden;
    padding-bottom:130px;
    color:var(--ink);
    background:#fff;
}

/* ===== header band ===== */
.service-cards-animation > .spc-head{
    position:relative;
    background:var(--bg);
    color:#fff;
    padding:50px 0;
    margin-right:-24px;
}
.service-cards-animation > .spc-head > .container{ position:relative; z-index:2; }

/* ===== dots ===== */
.service-cards-animation .dots{ pointer-events:none; color:currentColor; filter:none; }
.service-cards-animation > .spc-head > .dots.dots-top-right{
    position:relative; z-index:0; color:#fff; transform:scaleX(-1);
}
.service-cards-animation > .spc-cards > .dots.dots-bottom-left{
    position:absolute; left:0; bottom:-50px; width:min(56vw,760px); z-index:1; color:#000;
}

/* ===== headings ===== */
.service-cards-animation .headline{
    margin:14px 0 0;
    text-align:left;
    line-height:1.15;
    text-transform:uppercase;
    font-weight:100;
    letter-spacing:.08em;
    font-size:3rem;
}
.service-cards-animation .headline .accent{ color:#fff; font-style:italic; letter-spacing:.14em; }
.service-cards-animation .headline .sub{ display:inline; margin-top:.35rem; font-style:italic; font-weight:100; color:#fff; }

/* ===== cards ===== */
.service-cards-animation > .spc-cards{
    position:relative;
    z-index:2;
    padding:0 0 clamp(80px,10vw,140px);
    background:#fff;
}
.service-cards-animation .service-card{
    position:relative;
    background:#fff;
    border-radius:var(--card-r);
    box-shadow:0 14px 28px rgba(0,0,0,.16);
    padding:24px 24px 30px;
    min-height:224px;
    margin-top:-54px;
    margin-bottom:54px;
    overflow:hidden;
}
.service-cards-animation .service-icon{
    position:absolute; right:-25px; bottom:0; width:125px; padding:0;
}
.service-cards-animation .service-icon-img{ display:block; width:125px; height:125px; }

.service-cards-animation .service-title{
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:1.05rem;
    margin-bottom:.35rem;
}
.service-cards-animation .service-title > a{ color:inherit; text-decoration:none; }
.service-cards-animation .service-title > a:hover{ text-decoration:underline; }

/* ===== list styling (block items, no bullets) ===== */
.service-cards-animation .service-list{
    margin:0;
    padding-left:0;
    font-size:.94rem;
    list-style:none;
}
.service-cards-animation .service-list li{
    display:block;
    margin:.2rem 0;
    color:var(--muted);
}
.service-cards-animation .service-list a{ color:inherit; text-decoration:none; }
.service-cards-animation .service-list a:hover{ color:#111; text-decoration:underline; }

/* Alternating title colors */
.spc-cards .row > .col:nth-child(4n + 1) .service-title a{ color:#09BFF2; }
.spc-cards .row > .col:nth-child(4n + 2) .service-title a{ color:#EB3273; }
.spc-cards .row > .col:nth-child(4n + 3) .service-title a{ color:#ffdd00; }
.spc-cards .row > .col:nth-child(4n + 4) .service-title a{ color:#0E0E0E; }

.service-cards-animation .spc-cards .row > .col{ will-change:transform; }

/* ===== filter header ===== */
.spc-filter{
    background:#fff;
    padding:clamp(24px,4vw,40px) 0 clamp(28px,5vw,44px);
    text-align:center;
}
.spc-filter .filter-title{
    margin:0 0 .35rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:600;
    font-size:clamp(22px,3vw,32px);
}
.spc-filter .filter-sub{ margin:0 auto 1.25rem; color:#444; max-width:720px; }
.spc-filter .filter-buttons{
    display:flex; flex-wrap:wrap; gap:.9rem 1.25rem; justify-content:center; margin-bottom:1rem;
}
.spc-filter .filter-btn{
    appearance:none; border:1px solid #111; background:#fff; color:#111;
    padding:.6rem 1.5rem; border-radius:999px;
    font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .12s ease;
}
.spc-filter .filter-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.spc-filter .filter-btn.is-active{ background:#000; color:#fff; }
.spc-filter .filter-note{ margin:1rem 0 -2rem; color:#666; font-style:italic; }

/* Filter inside dark header */
.spc-head .spc-filter--inhead{ background:transparent; color:#fff; padding:50px 0; text-align:center; }
.spc-head .spc-filter--inhead .filter-title{
    color:#fff; margin:0 0 .35rem; text-transform:uppercase; letter-spacing:.12em; font-weight:100; font-size:20px;
}
.spc-head .spc-filter--inhead .filter-sub,
.spc-head .spc-filter--inhead .filter-note{ color:rgba(255,255,255,.85); }
.spc-head .spc-filter--inhead .filter-buttons{
    display:flex; flex-wrap:wrap; gap:.9rem 1.25rem; justify-content:center; margin:.75rem 0 0;
}
.spc-head .spc-filter--inhead .filter-btn{
    appearance:none; border:1px solid #fff; background:transparent; color:#fff; border-radius:999px;
    padding:.7rem 1.4rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .12s ease,border-color .25s ease;
}
.spc-head .spc-filter--inhead .filter-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25); border-color:#fff; }
.spc-head .spc-filter--inhead .filter-btn.is-active{ background:#fff; color:#000; border-color:#fff; }

/* no bottom dots mode */
.service-cards-animation.no-bottom-dots{ padding-bottom:0!important; }
.service-cards-animation.no-bottom-dots > .spc-cards{ padding-bottom:0!important; }

/* =========================================================
   Clip-path BULLET-IN reveal ONLY (no ::after cursor)
   ========================================================= */

/* JS wraps each text node as: <span class="sca-row"><span class="sca-clip">…</span></span> */
.sca-row{
    position:relative;
    display:inline-block;
    line-height:1.25;
    overflow:hidden;
}
.sca-row .sca-clip{
    position:relative;
    display:inline-block;
    transform:translateZ(0);
    will-change:clip-path;
}

/* pre-hide state applied by JS before anim */
.service-cards-animation [data-spc-grid].pre-hide .sca-row .sca-clip{
    clip-path:inset(0 100% 0 0);
}

/* animate reveal on button click */
.service-cards-animation [data-spc-grid].is-bulleting-in .sca-row .sca-clip{
    animation:scaReveal var(--dur-in,650ms) cubic-bezier(.25,.85,.25,1) var(--delay,0ms) both;
}

@keyframes scaReveal{
    0%   { clip-path:inset(0 100% 0 0); }
    100% { clip-path:inset(0 0% 0 0);  }
}

/* stagger inside each card (all cards start together) */
.service-cards-animation .service-card{ --step:70ms; }

.service-cards-animation .service-card .service-title .sca-clip{ --delay: calc(0 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(1)  .sca-clip{ --delay: calc(1 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(2)  .sca-clip{ --delay: calc(2 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(3)  .sca-clip{ --delay: calc(3 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(4)  .sca-clip{ --delay: calc(4 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(5)  .sca-clip{ --delay: calc(5 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(6)  .sca-clip{ --delay: calc(6 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(7)  .sca-clip{ --delay: calc(7 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(8)  .sca-clip{ --delay: calc(8 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(9)  .sca-clip{ --delay: calc(9 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(10) .sca-clip{ --delay: calc(10 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(11) .sca-clip{ --delay: calc(11 * var(--step)); }
.service-cards-animation .service-card .service-list li:nth-child(12) .sca-clip{ --delay: calc(12 * var(--step)); }

/* Reduced motion — show immediately */
@media (prefers-reduced-motion: reduce){
    .service-cards-animation [data-spc-grid].pre-hide .sca-row .sca-clip,
    .service-cards-animation [data-spc-grid].is-bulleting-in .sca-row .sca-clip{
        animation:none!important; clip-path:inset(0 0 0 0)!important;
    }
}