/* ==========================================================
   SERVICES.CSS — Camille Market Insight
   ========================================================== */

/* ── SERVICES HUB HERO ── */
.svc-hero {
    background:  var(--navy-dark);
    position:    relative;
    overflow:    hidden;
    padding:     180px 64px 110px;
}
.svc-hero::before {
    content:       '';
    position:      absolute;
    top:           -200px;
    right:         -200px;
    width:         700px;
    height:        700px;
    border-radius: 50%;
    border:        .5px solid rgba(227,24,55,.07);
    pointer-events:none;
}
.svc-hero::after {
    content:       '';
    position:      absolute;
    bottom:        -120px;
    left:          -120px;
    width:         500px;
    height:        500px;
    border-radius: 50%;
    border:        .5px solid rgba(255,255,255,.03);
    pointer-events:none;
}
.svc-hero-grain {
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(88deg,transparent 0px,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 6px);
    pointer-events:none;
}
.svc-hero-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    gap:             60px;
    position:        relative;
    z-index:         2;
}
.svc-hero-text { max-width: 680px; }
.svc-hero-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(44px, 6vw, 80px);
    font-weight:    800;
    color:          #fff;
    line-height:    1.04;
    margin:         20px 0 22px;
    letter-spacing: -.02em;
}
.svc-hero-h1 em { font-style: italic; color: var(--crimson); display: block; }
.svc-hero-sub {
    font-family:  var(--font-sans);
    font-size:    16px;
    font-weight:  300;
    color:        rgba(255,255,255,.52);
    line-height:  1.85;
    max-width:    500px;
    margin-bottom:40px;
}

@media (max-width: 1000px) {
    .svc-hero { padding: 140px 28px 80px; }
    .svc-hero-inner { flex-direction: column; align-items: flex-start; }
    .svc-hero-inner .hero-stats-card { display: none; }
}
@media (max-width: 600px) {
    .svc-hero { padding: 120px 20px 70px; }
}

.services-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
}

.service-card {
    background:  #fff;
    border:      .5px solid rgba(0,0,0,.06);
    padding:     40px 36px;
    display:     flex;
    flex-direction:column;
    transition:  all .4s cubic-bezier(.165,.84,.44,1);
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,.08); border-color: rgba(227,24,55,.2); }

.service-num {
    font-family:    var(--font-sans);
    font-size:      32px;
    font-weight:    700;
    color:          rgba(227,24,55,.14);
    line-height:    1;
    margin-bottom:  20px;
    display:        block;
}

.service-card h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-ink); line-height: 1.25; margin-bottom: 14px; }
.service-card p { font-family: var(--font-sans); font-size: 15px; font-weight: 300; color: var(--color-stone); line-height: 1.8; margin-bottom: 24px; flex: 1; }

.service-link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--font-sans);
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    color:           var(--color-ink);
    border-bottom:   .5px solid var(--color-ink);
    padding-bottom:  3px;
    text-decoration: none;
    width:           fit-content;
    transition:      color .25s, border-color .25s;
}
.service-card:hover .service-link { color: var(--crimson); border-color: var(--crimson); }

@media (max-width: 900px) {
    .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
}