/* ==========================================================
   SERVICE-DETAIL.CSS — Camille Market Insight
   Individual service page styles
   ========================================================== */

/* ── SERVICE DETAIL HERO ── */
.svc-detail-hero {
    background:  var(--navy-dark);
    position:    relative;
    overflow:    hidden;
    padding:     180px 64px 110px;
}
.svc-detail-hero::before {
    content:       '';
    position:      absolute;
    top:           -180px;
    right:         -180px;
    width:         640px;
    height:        640px;
    border-radius: 50%;
    border:        .5px solid rgba(227,24,55,.07);
    pointer-events:none;
}
.svc-detail-hero::after {
    content:       '';
    position:      absolute;
    bottom:        -100px;
    left:          -100px;
    width:         420px;
    height:        420px;
    border-radius: 50%;
    border:        .5px solid rgba(255,255,255,.03);
    pointer-events:none;
}
.svc-dh-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-dh-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    gap:             60px;
    position:        relative;
    z-index:         2;
}
.svc-dh-text { max-width: 680px; }
.svc-breadcrumb {
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: .12em;
    color:          rgba(255,255,255,.32);
    display:        block;
    margin-bottom:  28px;
    text-decoration:none;
}
.svc-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s; }
.svc-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.svc-dh-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(40px, 5.5vw, 74px);
    font-weight:    800;
    color:          #fff;
    line-height:    1.04;
    margin:         18px 0 20px;
    letter-spacing: -.02em;
}
.svc-dh-h1 em { font-style: italic; color: var(--crimson); }
.svc-dh-sub {
    font-family:  var(--font-sans);
    font-size:    16px;
    font-weight:  300;
    color:        rgba(255,255,255,.52);
    line-height:  1.85;
    max-width:    480px;
    margin-bottom:38px;
}

/* ── MAIN CONTENT SECTION ── */
.sd-section {
    background: var(--color-off-white);
    padding:    96px 64px;
    position:   relative;
}
.sd-section .service-detail-grid { max-width: 1200px; margin: 0 auto; }

/* Upgrade sidebar to richer cards */
.sd-sidebar-v2 {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    position:       sticky;
    top:            100px;
}
.sd-methods-card {
    background:    #fff;
    border:        .5px solid rgba(0,0,0,.07);
    border-top:    3px solid var(--crimson);
    padding:       36px 32px;
}
.sd-methods-card h4 {
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--crimson);
    margin-bottom:  20px;
}
.sd-methods-list {
    list-style:     none;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}
.sd-methods-list li {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-family: var(--font-sans);
    font-size:   14px;
    font-weight: 400;
    color:       var(--color-stone);
    line-height: 1.6;
}
.sd-methods-list li::before {
    content:       '';
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--crimson);
    flex-shrink:   0;
}
.sd-stat-card {
    background:  var(--navy-dark);
    padding:     36px 32px;
    border-top:  3px solid var(--crimson);
}
.sd-stat-card .hsc-eye { color: rgba(255,255,255,.45); font-family: var(--font-sans); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 20px; display: block; }
.sd-stat-card .hsc-num { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: #fff; line-height: 1; margin: 0; }
.sd-stat-card .hsc-lbl { font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 4px; }
.sd-stat-card .hsc-row { display: flex; gap: 24px; align-items: center; }
.sd-stat-card .hsc-divider { width: .5px; background: rgba(255,255,255,.15); align-self: stretch; }

/* Related services section — reuse mission-section but tighter */
.svc-related { padding-top: 80px; padding-bottom: 80px; }
.svc-related .mission-grid { grid-template-columns: repeat(3,1fr); margin-bottom: 0; }
.svc-related-foot { text-align: center; margin-top: 48px; }

@media (max-width: 1000px) {
    .svc-detail-hero { padding: 140px 28px 80px; }
    .svc-dh-inner { flex-direction: column; align-items: flex-start; }
    .svc-dh-inner .hero-stats-card { display: none; }
    .sd-section { padding: 72px 28px; }
    .sd-sidebar-v2 { position: static; }
    .svc-related .mission-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .svc-detail-hero { padding: 120px 20px 70px; }
    .sd-section { padding: 60px 20px; }
    .svc-related .mission-grid { grid-template-columns: 1fr; }
}

.service-detail-grid {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   80px;
    align-items:           flex-start;
}

.sd-content h2 { font-family: var(--font-heading); font-size: clamp(28px,4vw,48px); font-weight: 700; color: var(--color-ink); line-height: 1.1; margin: 16px 0 10px; }
.sd-content h2 em { font-style: italic; color: var(--crimson); }
.sd-content p { font-size: 16px; font-weight: 400; color: var(--color-stone); line-height: 1.9; margin-bottom: 18px; }
.sd-content h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--color-ink); margin: 32px 0 16px; }

.sd-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-list li {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    font-family: var(--font-sans);
    font-size:   15px;
    font-weight: 400;
    color:       var(--color-stone);
    line-height: 1.75;
}
.sd-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); flex-shrink: 0; margin-top: 8px; }

/* ── Sidebar ── */
.sd-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }

.sd-box {
    background: var(--color-parchment);
    border:     .5px solid rgba(0,0,0,.07);
    border-top: 3px solid var(--crimson);
    padding:    28px;
}
.sd-box h4 { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--crimson); margin-bottom: 16px; }
.sd-box ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-box ul li { font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--color-stone); display: flex; align-items: center; gap: 10px; }
.sd-box ul li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--crimson); flex-shrink: 0; }

.sd-box--cta { background: var(--navy-dark); border-top-color: var(--crimson); text-align: center; }
.sd-box--cta p { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: rgba(255,255,255,.6); margin-bottom: 20px; line-height: 1.7; }

@media (max-width: 900px) {
    .service-detail-grid { grid-template-columns: 1fr; gap: 48px; }
    .sd-sidebar { position: static; }
}

/* ── Focus Group — side-by-side image pair ── */
.fg-pair {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   4px;
    height:                520px;
}
.fg-pair__item { overflow: hidden; }
.fg-pair__item img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center;
    display:          block;
    transition:       transform .6s ease;
}
.fg-pair__item:hover img { transform: scale(1.04); }

@media (max-width: 680px) {
    .fg-pair { grid-template-columns: 1fr; height: auto; }
    .fg-pair__item { aspect-ratio: 4/3; }
}

/* ── Focus Group — facility gallery ── */
.fg-gallery {
    padding-block: 80px;
    background:    var(--color-off-white, #f8f7f4);
}
.fg-gallery__head {
    margin-bottom: 40px;
}
.fg-gallery__head h2 {
    font-family:  var(--font-heading);
    font-size:    clamp(28px, 4vw, 48px);
    font-weight:  800;
    color:        var(--color-ink);
    line-height:  1.1;
    margin:       10px 0 0;
}
.fg-gallery__head h2 em { font-style: italic; color: var(--crimson); }

.fg-gallery__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   8px;
}
.fg-gallery__item {
    overflow:     hidden;
    aspect-ratio: 4 / 3;
    background:   var(--color-parchment);
}
.fg-gallery__item img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform .5s ease;
}
.fg-gallery__item:hover img { transform: scale(1.05); }

@media (max-width: 768px) {
    .fg-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .fg-gallery { padding-block: 60px; }
}
@media (max-width: 480px) {
    .fg-gallery__grid { grid-template-columns: 1fr; }
}