/* R42: page-specific service process timelines */
.service-detail-main .sd-process {
    position: relative;
    overflow: hidden;
    background: #f7f5f1;
}

.service-detail-main .sd-process::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    background:
        radial-gradient(circle at 86% 15%, rgba(185,138,61,.26), transparent 24%),
        linear-gradient(135deg, transparent 0 48%, rgba(8,27,42,.07) 48% 49%, transparent 49% 100%);
}

.service-detail-main .sd-process > .wrap {
    position: relative;
    z-index: 1;
}

.service-detail-main .sd-process h2 {
    max-width: 900px;
    margin-bottom: 34px;
}

.service-detail-main .sd-process-grid {
    position: relative;
    gap: 14px;
    border: 0;
}

.service-detail-main .sd-process-grid::before {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: 43px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(183,134,56,.75), transparent);
}

.service-detail-main .sd-process-grid article {
    position: relative;
    min-height: 238px;
    padding: 30px 27px 28px;
    border: 1px solid rgba(9,28,43,.11);
    background: rgba(255,255,255,.78);
    box-shadow: 0 18px 42px rgba(7,24,37,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}


.service-detail-main .sd-process-grid article:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(7,24,37,.12);
}


.service-detail-main .sd-process-grid article > span {
    position: absolute;
    right: 20px;
    top: 20px;
    width: auto;
    height: auto;
    border: 0;
    color: rgba(10,29,44,.32);
    font: 500 11px/1 Manrope,Arial,sans-serif;
    letter-spacing: .12em;
}

.service-detail-main .sd-process-grid h3 {
    margin: 20px 0 12px;
    color: #0a1d2c;
    font-size: 14px;
}

.service-detail-main .sd-process-grid p {
    font-size: 13px;
    line-height: 1.7;
}

.sd-process-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(183,134,56,.45);
    background: rgba(183,134,56,.08);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.65);
    position: relative;
}

.sd-process-icon::before,
.sd-process-icon::after {
    content: "";
    position: absolute;
    background: #b78638;
}

.sd-process-icon::before {
    width: 18px;
    height: 2px;
    left: 13px;
    top: 22px;
}

.sd-process-icon::after {
    width: 2px;
    height: 18px;
    left: 21px;
    top: 14px;
    opacity: .7;
}

/* Page-specific icon language */
.sd-process--audio .sd-process-grid article:nth-child(1) .sd-process-icon::before,
.sd-process--audio .sd-process-grid article:nth-child(3) .sd-process-icon::before {
    height: 12px;
    top: 17px;
    border-radius: 50%;
    background: transparent;
    border-top: 2px solid #b78638;
    border-bottom: 2px solid #b78638;
}
.sd-process--audio .sd-process-icon::after { transform: rotate(35deg); }
.sd-process--networks-connectivity .sd-process-icon::before { transform: rotate(45deg); }
.sd-process--networks-connectivity .sd-process-icon::after { transform: rotate(45deg); }
.sd-process--tv-video .sd-process-icon::before { width: 21px; height: 14px; top: 15px; left: 11px; background: transparent; border: 2px solid #b78638; }
.sd-process--tv-video .sd-process-icon::after { width: 8px; height: 2px; left: 18px; top: 32px; }
.sd-process--design .sd-process-icon::before { width: 20px; height: 20px; top: 12px; left: 12px; background: transparent; border: 1px solid #b78638; }
.sd-process--design .sd-process-icon::after { transform: rotate(45deg); }
.sd-process--supply .sd-process-icon::before { width: 20px; height: 14px; top: 15px; left: 12px; background: transparent; border: 1px solid #b78638; }
.sd-process--supply .sd-process-icon::after { width: 10px; height: 2px; left: 17px; top: 31px; }
.sd-process--consulting .sd-process-icon::before { width: 18px; height: 18px; top: 12px; left: 12px; background: transparent; border: 1px solid #b78638; border-radius: 50%; }
.sd-process--consulting .sd-process-icon::after { height: 10px; top: 28px; transform: rotate(-38deg); }

/* Alternate navy treatments stop repeated pages feeling templated */
.sd-process--audio,
.sd-process--design,
.sd-process--consulting {
    background: #071b2a;
    color: #fff;
}
.sd-process--audio::after,
.sd-process--design::after,
.sd-process--consulting::after {
    opacity: .22;
    background:
        radial-gradient(circle at 86% 15%, rgba(190,143,64,.28), transparent 26%),
        linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.035) 48% 49%, transparent 49% 100%);
}
.sd-process--audio h2,
.sd-process--design h2,
.sd-process--consulting h2 { color: #fff; }
.sd-process--audio .eyebrow,
.sd-process--design .eyebrow,
.sd-process--consulting .eyebrow { color: #d2a45a; }
.sd-process--audio .sd-process-grid article,
.sd-process--design .sd-process-grid article,
.sd-process--consulting .sd-process-grid article {
    background: rgba(10,33,50,.72);
    border-color: rgba(204,160,84,.18);
    box-shadow: 0 18px 42px rgba(0,0,0,.2);
}
.sd-process--audio .sd-process-grid h3,
.sd-process--design .sd-process-grid h3,
.sd-process--consulting .sd-process-grid h3 { color: #fff; }
.sd-process--audio .sd-process-grid p,
.sd-process--design .sd-process-grid p,
.sd-process--consulting .sd-process-grid p { color: rgba(255,255,255,.69); }
.sd-process--audio .sd-process-grid article > span,
.sd-process--design .sd-process-grid article > span,
.sd-process--consulting .sd-process-grid article > span { color: rgba(255,255,255,.35); }
.sd-process--audio .sd-process-icon,
.sd-process--design .sd-process-icon,
.sd-process--consulting .sd-process-icon { box-shadow: inset 0 0 0 5px rgba(5,20,31,.7); }

@media (max-width: 900px) {
    .service-detail-main .sd-process-grid::before { display: none; }
}

@media (max-width: 600px) {
    .service-detail-main .sd-process-grid { gap: 12px; }
    .service-detail-main .sd-process-grid article { min-height: 0; padding: 24px 22px; }
    .service-detail-main .sd-process-grid h3 { margin-top: 16px; }
}