/* --------------------------------------------------------------------------
   Process — 2026 design
   --------------------------------------------------------------------------
   default  home comp y 3266–3834: white band, 40px heading, 361×278 white
            cards (hairline border), 60px lime number discs, 24px titles.
   service  service comp y 3100–3513: navy band continuing the checklist
            above; 24px Work Sans heading, 361×215 raised cards, 46px discs. */

.process {
    background-color: var(--color-white);
    background-image: none;
}

.process__inner {
    padding-top: 96px;
    padding-bottom: 50px;
}

.process__kicker { margin-bottom: 14px; }
.process__subheading { margin-top: 16px; }

.process__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.process--n4 .process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.process--n2 .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.process__step {
    min-height: 278px;
    padding: 30px 30px 32px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    background-color: var(--color-white);
}

.process__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-lime);
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

.process__step-title {
    margin: 22px 0 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-navy);
}

.process__step-text {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 24px;
    color: var(--color-slate);
}

.process__cta { margin-top: 40px; }

/* ---------- service ---------- */
.process--service { background-color: var(--color-navy); }
.process--service .process__inner { padding-top: 88px; padding-bottom: 88px; }
/* After the "Why choose" checklist it's its own section, not a continuation
   of it (Volley #65): deeper navy + a hairline divider, full top padding. */
.feature-cards--checklist + .process--service {
    border-top: 1px solid var(--color-navy-border);
    background-color: var(--color-navy-deep);
}

.process--service .process__heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--color-white);
}

.process--service .process__steps { margin-top: 24px; }

.process--service .process__step {
    min-height: 215px;
    padding: 25px 26px 28px;
    border-color: var(--color-navy-border);
    background-color: var(--color-navy-raised);
}

.process--service .process__step-number { width: 46px; height: 46px; font-size: 20px; }
.process--service .process__step-title { margin-top: 18px; font-size: 20px; color: var(--color-white); }
.process--service .process__step-text { margin-top: 12px; font-size: 13px; line-height: 22px; color: var(--color-lavender); }

@media (max-width: 991.98px) {
    .process__steps,
    .process--n4 .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .process__inner { padding-top: var(--section-y); padding-bottom: var(--section-y); }
    .process__step { min-height: 0; }
}

@media (max-width: 575.98px) {
    .process__steps,
    .process--n4 .process__steps { grid-template-columns: minmax(0, 1fr); }
}