/* ============================================================
   SERVICE PAGES + CASE STUDIES — shares the page-hero pattern
   from page.css and the card language from home.css.
   ============================================================ */

.service-hero {
    position: relative;
    padding-block: var(--sp-8);
    background: var(--bg-sunken);
    overflow: hidden;
}
.service-hero .container { position: relative; }
.service-hero h1 { max-width: 22ch; }
.service-hero .section-intro { max-width: 60ch; }
.service-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

/* soft brand glow in the hero corner */
.service-hero::before {
    content: "";
    position: absolute;
    top: -30%; right: -10%;
    width: 46%;
    aspect-ratio: 1;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--c-primary) 16%, transparent),
        transparent 65%);
    filter: blur(30px);
    pointer-events: none;
}

/* ---------- feature checklist ---------- */
.feature-section { padding-block: var(--sp-8) 0; }
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
.feature-item {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-check {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
}
.feature-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.feature-item h3 { font-size: var(--fs-500); margin-bottom: var(--sp-1); }
.feature-item p { color: var(--text-muted); font-size: var(--fs-300); }

/* ---------- process steps ---------- */
.process-section { padding-block: var(--sp-8) 0; }
.process-steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
.process-step {
    counter-increment: step;
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) 4.4rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.process-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: var(--sp-5);
    top: var(--sp-5);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--c-primary);
}
.process-step h3 { font-size: var(--fs-500); margin-bottom: var(--sp-1); }
.process-step p { color: var(--text-muted); font-size: var(--fs-300); }

/* ---------- FAQ ---------- */
.faq-section { padding-block: var(--sp-8) 0; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--c-primary);
    transition: transform var(--speed) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 var(--sp-5) var(--sp-4); color: var(--text-muted); }

/* ---------- cross-links between services ---------- */
.related-section { padding-block: var(--sp-8) 0; }
.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
.related-card {
    display: block;
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none !important;
    transition: transform var(--speed) var(--ease-out), border-color var(--speed) ease, box-shadow var(--speed) var(--ease-out);
}
.related-card:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.related-card h3 { font-size: var(--fs-500); margin-bottom: var(--sp-1); }
.related-card p { color: var(--text-muted); font-size: var(--fs-300); }
.related-card .service-link { margin-top: var(--sp-2); }

@media (min-width: 700px) {
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .process-steps { grid-template-columns: 1fr 1fr; }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
}