/* ============================================================
   СТРАНИЦА УСЛУГИ — каркас
   ============================================================ */

.service-page {
    background: #fff;
}

/* ============================================================
   HERO С ВИДЕО
   ============================================================ */

.service-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    height: 610px;
    padding: 40px var(--space-inline) 0;
    color: #fff;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.service-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(5, 28, 56, .94),
        rgba(5, 28, 56, .55),
        rgba(5, 28, 56, .2));
}

.service-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-hero--prosthetics .service-hero__video {
    object-position: center 48%;
}

.service-hero__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.service-hero__content h1 {
    margin: 16px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.service-hero__content p {
    max-width: 580px;
    margin: 0 0 22px;
    color: var(--text-on-dark);
    font-size: var(--fs-body-lg);
    line-height: 1.65;
}

.service-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 56px;
    padding: 0 28px;
    color: #fff;
    font-size: var(--fs-caption);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--blue, var(--accent));
    box-shadow: 0 12px 30px var(--accent-glow);
    transition: background .25s, transform .2s;
}

.service-hero__btn span {
    font-size: 17px;
    transition: transform .25s;
}

.service-hero__btn:hover {
    background: var(--blue-hover, var(--accent-hover));
    transform: translateY(-3px);
}

.service-hero__btn:hover span {
    transform: translateX(5px);
}

/* ============================================================
   ПОЛОСА С ЦИФРАМИ
   ============================================================ */

.benefit-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(1160px, 100% - 48px);
    margin: -48px auto 0;
    background: #fff;
    box-shadow: 0 20px 55px rgba(8, 37, 67, .12);
}

.benefit-strip > div {
    padding: 32px;
    border-right: 1px solid var(--line, var(--border));
}

.benefit-strip > div:last-child {
    border-right: 0;
}

.benefit-strip b {
    display: block;
    color: var(--blue, var(--accent));
    font-size: var(--fs-nano);
    font-weight: 800;
    letter-spacing: .12em;
}

.benefit-strip span {
    display: block;
    margin-top: 8px;
    color: var(--ink, var(--text-primary));
    font-size: var(--fs-small);
    font-weight: 700;
}

/* ============================================================
   О ПРОЦЕДУРЕ
   ============================================================ */

.service-guide {
    background: linear-gradient(135deg, #fff 0%, var(--surface-soft) 100%);
    padding: var(--space-section) var(--space-inline);
}

.service-guide__head {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: end;
    column-gap: 80px;
    margin-bottom: 42px;
}

.service-guide__head .kicker {
    grid-column: 1 / -1;
    margin-bottom: 14px;
}

.service-guide__head h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--ink, var(--text-primary));
}

.service-guide__head h2 em {
    color: var(--blue, var(--accent));
    font-style: normal;
    font-weight: 400;
}

.service-guide__head > p {
    max-width: 680px;
    margin: 0;
    color: var(--muted, var(--text-muted));
    font-size: var(--fs-body);
    line-height: 1.82;
}

.service-guide__body {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    min-height: 490px;
    background: #fff;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 24px 65px rgba(7, 35, 63, .09);
}

.service-guide__visual {
    position: relative;
    min-height: 490px;
    background: var(--dark-bg);
    overflow: hidden;
}

.service-guide__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, .76, .25, 1);
}

.service-guide__body:hover .service-guide__visual img {
    transform: scale(1.035);
}

.service-guide__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0) 28%, rgba(4, 28, 53, .95) 100%);
}

.service-guide__chips {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 27px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-guide__chips small {
    width: 100%;
    margin-bottom: 7px;
    color: var(--accent-on-dark-soft);
    font-size: var(--fs-nano);
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.service-guide__chips span {
    padding: 9px 12px;
    color: #fff;
    font-size: var(--fs-micro);
    background: rgba(7, 35, 63, .48);
    border: 1px solid rgba(255, 255, 255, .27);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.service-journey {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 27px 34px;
}

.service-journey article {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 13px;
    min-height: 150px;
    padding: 24px 22px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background .28s, transform .28s;
}

.service-journey article:nth-child(2n) {
    border-right: 0;
}

.service-journey article:hover {
    position: relative;
    z-index: 1;
    background: #eef7ff;
    transform: translateY(-3px);
}

.service-journey article > b {
    padding-top: 5px;
    color: var(--blue, var(--accent));
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .1em;
}

.service-journey article h3 {
    margin: 0 0 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: var(--fs-h4);
    line-height: 1.18;
    color: var(--ink, var(--text-primary));
}

.service-journey article p {
    margin: 0;
    color: var(--muted, var(--text-muted));
    font-size: var(--fs-caption);
    line-height: 1.68;
}

.service-journey aside {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 75px 1fr;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 18px;
    color: #fff;
    background: var(--dark-bg);
}

.service-journey aside strong {
    color: var(--accent-on-dark-soft);
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.service-journey aside p {
    margin: 0;
    color: var(--text-on-dark);
    font-size: var(--fs-caption);
    line-height: 1.65;
}

/* ============================================================
   ПОЧЕМУ НАМ ДОВЕРЯЮТ
   ============================================================ */

.why-service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: #fff;
    background: var(--dark-bg);
}

.why-service__photo {
    min-height: 610px;
    background-position: center;
    background-size: cover;
}

.why-service__text {
    padding: 100px 9vw;
}

.why-service__text .kicker {
    margin-bottom: 13px;
}

.why-service__text h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.why-service__text ul {
    margin: 35px 0 0;
    padding: 0;
    list-style: none;
}

.why-service__text li {
    padding: 16px 0;
    border-bottom: 1px solid #294663;
    font-size: var(--fs-small);
}

.why-service__text li:last-child {
    border-bottom: 0;
}

.why-service__text li::before {
    content: "✓";
    margin-right: 14px;
    color: var(--accent-on-dark);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width: 900px) {
    .service-hero {
        height: 540px;
    }

    .service-guide__head {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-guide__head .kicker {
        grid-column: auto;
    }

    .service-guide__body {
        grid-template-columns: 1fr;
    }

    .service-guide__visual {
        min-height: 420px;
    }

    .service-journey {
        padding: 24px;
    }

    .why-service {
        grid-template-columns: 1fr;
    }

    .why-service__photo {
        min-height: 400px;
    }

    .why-service__text {
        padding: 70px 25px;
    }
}

@media (max-width: 760px) {
    .service-hero {
        height: 620px;
        padding: 40px var(--space-inline) 0;
    }

    .service-hero__video {
        object-position: 58% center;
    }

    .benefit-strip {
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 24px);
    }

    .benefit-strip > div {
        padding: 22px 18px;
        border-bottom: 1px solid var(--line, var(--border));
    }

    .benefit-strip > div:nth-child(2) {
        border-right: 0;
    }

    .benefit-strip > div:nth-child(3),
    .benefit-strip > div:nth-child(4) {
        border-bottom: 0;
    }

    .service-guide__visual {
        min-height: 370px;
    }

    .service-guide__chips {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .service-journey {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .service-journey article {
        grid-column: 1;
        min-height: 0;
        padding: 21px 10px;
        border-right: 0;
    }

    .service-journey article:nth-child(4) {
        border-bottom: 0;
    }

    .service-journey aside {
        display: block;
        margin-top: 12px;
    }

    .service-journey aside strong {
        display: block;
        margin-bottom: 8px;
    }

    .why-service__text li {
        padding: 13px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__video,
    .service-hero__btn,
    .service-guide__visual img,
    .service-journey article {
        animation: none !important;
        transition: none !important;
    }
}