/* ---------------------------------------------------------
   BLOCK: SERVICES SNAPSHOT
   --------------------------------------------------------- */
.services-block {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
}

/* Big ghost text BG (Hidden on mobile by default) */
.services__ghost {
    display: none; 
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(100px, 16vw, 220px);
    color: rgba(8, 24, 50, 0.033);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: -0.04em;
    user-select: none;
}

/* ── TOP ROW ──────────────────────────── */
.services__top {
    display: grid;
    grid-template-columns: 1fr; /* Mobile single column */
    gap: 40px;
    margin-bottom: 56px;
    opacity: 0; /* Hidden until observer triggers */
}

.services__top-left { 
    padding-bottom: 32px; 
    border-bottom: 1.5px solid #e8e8e8; 
}

.services__top-right { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    gap: 24px; 
}

.services__eyebrow {
    display: flex; 
    align-items: center; 
    gap: 12px;
    margin-bottom: 20px;
}

.services__eyebrow-dot {
    width: 10px; height: 10px;
    background: var(--color-yellow);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(253, 211, 44, 0.22);
    flex-shrink: 0;
    animation: services-pulse 2.4s ease-in-out infinite;
}

@keyframes services-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(253, 211, 44, 0.22); }
    50%      { box-shadow: 0 0 0 9px rgba(253, 211, 44, 0.08); }
}

.services__eyebrow-txt {
    font-family: var(--font-tagline);
    font-weight: 600; font-size: 12px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #787878;
}

.services__sub-txt {
    font-family: var(--font-tagline);
    font-weight: 600; font-size: 15px;
    color: #787878;
    line-height: 1.7;
    max-width: 380px;
    margin: 0;
}

.services__cta {
    align-self: flex-start;
}

.services__stat-row { display: flex; gap: 20px; flex-wrap: wrap; } 
.services__stat { display: flex; flex-direction: column; gap: 2px; }
.services__stat-num {
    font-family: var(--font-main);
    font-weight: 800; font-size: 28px;
    color: var(--color-black); letter-spacing: -0.03em;
}
.services__stat-num span { color: var(--color-yellow); }
.services__stat-label {
    font-family: var(--font-tagline);
    font-weight: 600; font-size: 12px;
    color: #787878; text-transform: uppercase; letter-spacing: 0.12em;
}

/* ── SERVICES LIST ─────────────────────── */
.services__list { display: flex; flex-direction: column; }

.services__item {
    display: grid;
    grid-template-columns: 36px 1fr 36px; /* Mobile grid */
    align-items: center;
    gap: 0;
    padding: 0;
    border-top: 1.5px solid #e8e8e8;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    opacity: 0; /* Hidden until observer triggers */
}

.services__item:last-child { border-bottom: 1.5px solid #e8e8e8; }

/* Dark fill on hover */
.services__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s cubic-bezier(.77,0,.18,1);
    z-index: 0;
}

.services__item:hover::before { transform: scaleX(1); }
.services__item > * { position: relative; z-index: 1; }

/* Number */
.services__item-num {
    padding: 16px 0;
    font-family: var(--font-tagline);
    font-weight: 700; font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(8, 24, 50, 0.22);
    transition: color .3s;
    text-align: center;
}

.services__item:hover .services__item-num { color: rgba(253, 211, 44, 0.4); }

/* Middle content */
.services__item-body {
    padding: 16px 12px;
    display: flex; align-items: center; gap: 12px;
    border-left: 1.5px solid #e8e8e8;
    border-right: 1.5px solid #e8e8e8;
    transition: border-color .3s;
}

.services__item:hover .services__item-body { border-color: transparent; }

.services__item-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(253, 211, 44, 0.1);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s, transform .3s;
}

.services__item-icon svg { width: 18px; height: 18px; }
.services__item:hover .services__item-icon { background: rgba(253, 211, 44, 0.18); transform: rotate(-6deg) scale(1.08); }

.services__item-text { 
    flex: 1; 
    min-width: 0; 
}

.services__item-title {
    font-family: var(--font-main);
    font-weight: 700; font-size: 14px;
    color: var(--color-black);
    line-height: 1.3;
    transition: color .3s;
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 6px;
    margin-block: 0;
}

.services__item:hover .services__item-title { color: var(--color-white); }

.services__item-desc {
    display: none; /* Hidden on mobile */
    font-family: var(--font-tagline);
    font-weight: 600; font-size: 13.5px;
    color: #787878; margin-top: 5px;
    line-height: 1.55;
    transition: color .3s;
}

.services__item:hover .services__item-desc { color: rgba(255, 255, 255, 0.58); }

.services__item-badge {
    display: inline-block;
    background: var(--color-yellow); color: var(--color-black);
    font-family: var(--font-tagline);
    font-weight: 700; font-size: 8.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 3px 6px; border-radius: 2px;
}

/* Arrow side */
.services__item-arrow {
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; /* Changed from 0 */
    transform: translateX(0); /* Changed from -8px */
    transition: opacity .3s .05s, transform .3s .05s;
}

.services__item:hover .services__item-arrow { opacity: 1; transform: translateX(0); }
.services__item-arrow svg { 
    color: rgba(8, 24, 50, 0.25); /* Faint navy so it's visible on white */
    width: 16px; height: 16px; 
    transition: color .3s;
}
.services__item:hover .services__item-arrow svg {
    color: var(--color-yellow);
}

.services__chip {
    font-family: var(--font-tagline); font-weight: 700;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 20px;
    border: 1.5px solid #e8e8e8; color: #787878;
    background: transparent;
    transition: border-color .22s, color .22s, background .22s;
    cursor: pointer;
}

.services__chip:hover { border-color: var(--color-black); color: var(--color-black); background: rgba(8, 24, 50, 0.04); }
.services__chip.active { border-color: var(--color-yellow); background: var(--color-yellow); color: var(--color-black); }

/* ══════════════════════════════════════════════
   INTERSECTION OBSERVER ANIMATIONS 
══════════════════════════════════════════════ */
@keyframes srvFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.services-block.is-visible .services__top { animation: srvFadeUp .6s ease forwards; }
.services-block.is-visible .services__item { animation: srvFadeUp .5s ease forwards; }
.services-block.is-visible .services__item:nth-child(1) { animation-delay: .15s; }
.services-block.is-visible .services__item:nth-child(2) { animation-delay: .23s; }
.services-block.is-visible .services__item:nth-child(3) { animation-delay: .31s; }
.services-block.is-visible .services__item:nth-child(4) { animation-delay: .39s; }
.services-block.is-visible .services__item:nth-child(5) { animation-delay: .47s; }
.services-block.is-visible .services__item:nth-child(6) { animation-delay: .55s; }

/* ══════════════════════════════════════════════
   SCALING UP (Tablet & Desktop) 
══════════════════════════════════════════════ */
@media (min-width: 561px) {
    .services__ghost { display: block; }
    
    .services__top { grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 72px;}
    .services__top-left { padding-right: 60px; border-right: 1.5px solid #e8e8e8; border-bottom: none; padding-bottom: 0; }
    .services__top-right { padding-left: 60px; }
    
    /* Restore large grid */
    .services__item { grid-template-columns: 72px 1fr 72px; }
    .services__item-num { padding: 32px 0; font-size: 12px; }
    .services__item-body { padding: 32px 28px; gap: 24px; }
    .services__item-icon { width: 52px; height: 52px; }
    .services__item-icon svg { width: 26px; height: 26px; }
    
    /* Restore title size & layout */
    .services__item-title { font-size: 19px; display: block; }
    .services__item-badge { margin-left: 10px; font-size: 9.5px; padding: 3px 9px; vertical-align: middle; }
    .services__item-desc { display: block; }
    .services__item-arrow { 
        opacity: 0; 
        transform: translateX(-12px); 
        padding: 32px 36px 32px 24px; 
        justify-content: flex-start; 
    }
    .services__item:hover .services__item-arrow { 
        opacity: 1; 
        transform: translateX(0); 
    }
    .services__item-arrow svg { width: 22px; height: 22px; }
    .services__stat-row { gap: 36px; }
}