/* Advange service page — consolidated programmer handoff */
:root {
    --navy: #071b35;
    --navy-2: #0b2c4d;
    --orange: #f47a2a;
    --logo-orange: #f0895e;
    --ink: #17263a;
    --muted: #637487;
    --soft: #f2f6f8;
    --line: #d9e2e7;
    --white: #fff;
    --max: 1160px;
    --ease: cubic-bezier(.2, .75, .25, 1);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: var(--font-family-base);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

.wrap {
    width: min(calc(100% - 48px), var(--max));
    margin: auto
}

[data-optional]:empty, [data-optional]:not(:has(img)) {
    display: none !important
}

.site-header {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    height: 70px;
    color: #fff;
    background: rgba(7, 27, 53, .96);
    box-shadow: 0 1px rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px)
}

.nav {
    display: flex;
    height: 100%;
    align-items: center
}

.brand {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .07em
}

.brand span {
    color: var(--orange)
}

.nav-links {
    display: flex;
    margin-left: auto;
    gap: 25px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em
}

.nav-links a {
    color: #becbd5;
    transition: color .22s ease
}

.nav-links a:hover {
    color: #ff9a59
}

.nav-contact {
    display: inline-flex;
    min-height: 40px;
    margin-left: 25px;
    padding: 0 18px;
    border-radius: 6px;
    background: var(--logo-orange);
    font-size: .72rem;
    font-weight: 850;
    align-items: center
}

.eyebrow {
    display: flex;
    margin: 0 0 11px;
    color: var(--logo-orange);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .18em;
    align-items: center;
    gap: 8px;
    text-transform: uppercase
}

.eyebrow:before {
    display: block;
    width: 15px;
    height: 13px;
    background: url("../img/service/advange-mark.png") center/contain no-repeat;
    content: "";
    flex: 0 0 15px
}

/* Service hero: compact like an inner page, imagery integrated into the field. */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: 70px;
    padding: 60px 0 0;
    color: #fff;
    background: linear-gradient(112deg, var(--navy), var(--navy-2))
}

.hero-image {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(7, 27, 53, 1) 0%, rgba(7, 27, 53, .95) 39%, rgba(7, 27, 53, .5) 70%, rgba(7, 27, 53, .17) 100%), url("../img/service/advange-digital-workplace-hero-enterprise.png");
    background-position: center;
    background-size: cover
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 54px;
    min-height: 350px;
    align-items: center
}

.hero-copy {
    width: 100%
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.15rem, 3.65vw, 3.25rem);
    font-weight: 690;
    line-height: 1.24;
    letter-spacing: -.045em
}

.hero h1 span {
    display: block
}

.hero h1 .accent {
    color: var(--logo-orange)
}

.hero-copy > p:not(.eyebrow) {
    max-width: 720px;
    margin: 19px 0 0;
    color: #c9d5df;
    font-size: .94rem
}

.actions {
    display: flex;
    margin-top: 25px;
    gap: 12px;
    flex-wrap: wrap
}

.button {
    display: inline-flex;
    min-height: 46px;
    padding: 0 21px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    font-size: .79rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    transition: transform .23s ease, background .23s ease
}

.button:after {
    margin-left: 16px;
    content: "→"
}

.button:hover {
    transform: translateY(-2px)
}

.button-primary {
    border-color: var(--logo-orange);
    color: #fff;
    background: var(--logo-orange)
}

.button-primary:hover {
    background: #f6a17e
}

.button-secondary {
    color: #fff;
    background: rgba(255, 255, 255, .035)
}

.hero-model {
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(5, 22, 43, .58);
    backdrop-filter: blur(7px)
}

.hero-model-head {
    display: flex;
    padding: 0 0 15px;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.hero-model-head strong {
    font-size: .83rem
}

.hero-model-head span {
    color: #829bb0;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .11em
}

.hero-model-core {
    margin: 0;
    padding: 13px 15px;
    border-left: 2px solid var(--logo-orange);
    background: rgba(255, 255, 255, .045)
}

.hero-model-core strong, .hero-model-core span {
    display: block
}

.hero-model-core strong {
    color: var(--logo-orange);
    font-size: .66rem;
    letter-spacing: .1em
}

.hero-model-core span {
    margin-top: 5px;
    color: #becbd5;
    font-size: .72rem
}

.hero-model-products {
    display: flex;
    gap: 5px 15px;
    padding: 17px 0 13px;
    flex-wrap: wrap
}

.hero-model-products span {
    color: #b9c8d3;
    font-size: .64rem
}

.hero-model-users {
    display: flex;
    gap: 17px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.hero-model-users span {
    color: #8199ad;
    font-size: .61rem
}

.hero-facts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    margin-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, .14)
}

.hero-facts div {
    min-height: 82px;
    padding: 17px 21px;
    border-right: 1px solid rgba(255, 255, 255, .12)
}

.hero-facts div:first-child {
    padding-left: 0
}

.hero-facts div:last-child {
    border-right: 0
}

.hero-facts strong, .hero-facts span {
    display: block
}

.hero-facts strong {
    font-size: .82rem
}

.hero-facts span {
    margin-top: 2px;
    color: #8ca5ba;
    font-size: .68rem
}

.section {
    padding: 92px 0
}

.section-heading {
    max-width: 1040px;
    margin-bottom: 34px
}

.section-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -.035em;
    white-space: nowrap
}

.section-heading h2 span {
    display: inline
}

.section-heading > p:last-child {
    max-width: 1200px;
    margin: 15px 0 0;
    color: var(--muted);
    font-size: .95rem
}

/* 01 — Challenges: complete section story on the left, concise points on the right. */
.challenges {
    background: #fff
}

.challenges > .wrap {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns:minmax(0, .43fr) minmax(0, .57fr);
    padding: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 22px 56px rgba(7, 27, 53, .08);
    isolation: isolate
}

.challenge-heading {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: none;
    margin: 0;
    padding: 46px 34px;
    background: #e8f1f4
}

.challenge-heading:after {
    position: absolute;
    right: -38px;
    bottom: -52px;
    width: 210px;
    height: 210px;
    background: url("../img/service/advange-mark.png") center/contain no-repeat;
    content: "";
    opacity: .016;
    pointer-events: none
}

.challenge-heading .eyebrow {
    display: flex
}

.challenge-heading > p:last-child {
    max-width: 470px;
    margin: 22px 0 0;
    font-size: .9rem
}

.challenge-heading h2 {
    font-size: 1.8rem;
    letter-spacing: -.05em;
    white-space: normal
}

.challenge-list {
    display: flex;
    max-width: none;
    padding: 25px 29px;
    border: 0;
    border-radius: 0;
    background: #fff;
    flex-direction: column;
    gap: 0
}

.challenge-list article {
    display: grid;
    grid-template-columns:38px 1fr;
    gap: 0 13px;
    padding: 15px 13px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    align-items: start;
    transition: transform .25s ease, background .25s ease
}

.challenge-list article:hover {
    padding: 15px 13px;
    background: #f4f8fa;
    box-shadow: none;
    transform: translateX(6px)
}

.challenge-list small {
    padding-top: 4px;
    color: var(--logo-orange);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em
}

.challenge-list h3 {
    margin: 0;
    color: var(--navy);
    font-size: .92rem;
    line-height: 1.55
}

.challenge-list p {
    grid-column: 2;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.75
}

/* 02 — Scope: a quiet service framework with optional editorial image. */
.scope {
    background: var(--soft)
}

.scope-frame {
    padding: 24px;
    border-radius: 12px;
    background: #e8f0f3
}

.section-visual {
    overflow: hidden;
    height: 285px;
    margin: 18px 0 0;
    border-radius: 10px;
    background: #edf3f5
}

.section-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .65s var(--ease)
}

.section-visual:hover img {
    transform: scale(1.016)
}

.scope-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 3px 62px;
    padding: 28px 34px 23px;
    border-radius: 10px;
    background: #fff
}

.scope-grid article {
    position: relative;
    min-height: 155px;
    padding: 7px 0 21px 20px;
    border-bottom: 1px solid #e1e8ec
}

.scope-grid article:before {
    position: absolute;
    top: 1.08em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--logo-orange);
    content: ""
}

.scope-grid article:nth-last-child(-n+2) {
    border-bottom: 0
}

.scope-grid small {
    display: block;
    color: var(--logo-orange);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .1em
}

.scope-grid h3 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: .98rem
}

.scope-grid p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.85
}

/* 03 — Operations: an expandable operating rhythm, distinct from the surrounding grids. */
.operations {
    color: var(--ink);
    background: #eef3f5
}

.section-heading-light h2 {
    color: var(--navy)
}

.section-heading-light > p:last-child {
    color: var(--muted)
}

.operations-frame {
    display: block;
    padding: 0;
    color: var(--ink);
    background: transparent
}

.operations-grid {
    display: flex;
    gap: 12px;
    padding: 0;
    background: transparent
}

.operations-grid article {
    --ring: rgba(9, 38, 68, .025);
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-rows:auto 1fr auto;
    min-width: 0;
    min-height: 330px;
    padding: 31px 27px;
    border: 1px solid rgba(9, 38, 68, .035);
    border-radius: 12px;
    color: var(--navy);
    background-color: #f8fafb;
    flex: 1 1 0;
    transition: transform .28s ease, color .28s ease, border-color .28s ease, background-color .28s ease, box-shadow .28s ease
}

.operations-grid article:nth-child(2) {
    --ring: rgba(255, 255, 255, .26);
    background-color: #e5f0f5
}

.operations-grid article:nth-child(3) {
    --ring: rgba(255, 255, 255, .3);
    background-color: #fff0e7
}

.operations-grid article:nth-child(4) {
    --ring: rgba(255, 255, 255, .24);
    background-color: #eaf1f4
}

.operations-grid article:before, .operations-grid article:after {
    position: absolute;
    border: 24px solid var(--ring);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    transition: transform .42s var(--ease), opacity .28s ease
}

.operations-grid article:before {
    right: -68px;
    bottom: -70px;
    width: 185px;
    height: 185px;
    opacity: .46
}

.operations-grid article:after {
    display: none
}

.operations-grid article:hover {
    --ring: rgba(255, 255, 255, .1);
    z-index: 1;
    border-color: var(--navy);
    color: #fff;
    background-color: #0b2e53;
    box-shadow: 0 20px 40px rgba(20, 51, 73, .14);
    transform: translateY(-5px)
}

.operations-grid article:hover:before {
    opacity: .62;
    transform: scale(1.08)
}

.operations-grid small {
    position: relative;
    z-index: 1;
    color: var(--logo-orange);
    font-size: .61rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .07em;
    white-space: nowrap;
    transition: transform .32s var(--ease)
}

.operations-grid h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 30px 0 18px;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 760;
    line-height: 1.28;
    letter-spacing: -.035em;
    align-self: center
}

.operations-grid h3:after {
    display: block;
    width: 28px;
    height: 3px;
    margin-top: 16px;
    border-radius: 3px;
    background: var(--logo-orange);
    content: "";
    transition: width .36s var(--ease)
}

.operations-grid p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.85;
    transition: color .28s ease
}

.operations-grid article:hover p {
    color: #bdcad5
}

.operations-grid article:hover small {
    transform: translateX(4px)
}

.operations-grid article:hover h3:after {
    width: 54px
}

.operations-proof {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 28px;
    margin: 28px 0 0;
    color: var(--ink);
    background: transparent
}

.operations-proof div {
    position: relative;
    min-height: 0;
    padding: 2px 0 2px 16px;
    border: 0
}

.operations-proof div:before {
    position: absolute;
    top: 7px;
    left: 0;
    width: 4px;
    height: 18px;
    border-radius: 3px;
    background: var(--logo-orange);
    content: ""
}

.operations-proof strong, .operations-proof span {
    display: block
}

.operations-proof strong {
    color: var(--navy);
    font-size: .78rem
}

.operations-proof span {
    margin-top: 6px;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.7
}

/* 04 — Automation: full-width optional image and a compact editorial grid. */
.automation {
    background: #fff
}

.automation-body {
    display: block
}

.automation-visual {
    overflow: hidden;
    height: 300px;
    margin: 0 0 20px;
    border-radius: 12px;
    background: var(--soft)
}

.automation-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .65s var(--ease)
}

.automation-visual:hover img {
    transform: scale(1.016)
}

.automation-list {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 3px 70px;
    padding: 29px 40px 20px;
    border-radius: 12px;
    background: #f2f6f7
}

.automation-list article {
    position: relative;
    min-height: 128px;
    padding: 7px 0 18px 21px
}

.automation-list article:before {
    position: absolute;
    top: 1.08em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--logo-orange);
    content: ""
}

.automation-list small {
    display: none
}

.automation-list h3 {
    margin: 0;
    color: var(--navy);
    font-size: .96rem
}

.automation-list p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .82rem
}

/* 05 — Transition: one continuous implementation register. */
.transition {
    background: #eaf1f4
}

.transition-frame {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    list-style: none;
    isolation: isolate
}

.transition-frame:after {
    position: absolute;
    z-index: 2;
    right: -42px;
    bottom: -48px;
    width: 220px;
    height: 220px;
    background: url("../img/service/advange-mark.png") center/contain no-repeat;
    content: "";
    opacity: .014;
    pointer-events: none
}

.transition-frame li {
    display: grid;
    grid-template-columns:58px minmax(0, 1fr);
    gap: 4px 24px;
    min-height: 112px;
    padding: 24px 31px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
    align-items: center;
    transition: background .25s ease, padding .25s ease
}

.transition-frame li:last-child {
    border-bottom: 0
}

.transition-frame li:hover {
    padding-left: 38px;
    background: #fff7f2;
    transform: none;
    box-shadow: none
}

.transition-frame small {
    display: grid;
    width: 32px;
    height: 32px;
    color: var(--orange);
    border-radius: 50%;
    background: #fff0e7;
    font-size: .65rem;
    font-weight: 850;
    place-items: center
}

.transition-frame small {
    grid-row: 1/3;
    align-self: center;
    justify-self: center
}

.transition-frame h3 {
    grid-column: 2;
    margin: 0;
    color: var(--navy);
    font-size: .98rem;
    align-self: end
}

.transition-frame p {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    align-self: start
}

.cta {
    padding: 72px 0;
    color: #fff;
    background: linear-gradient(115deg, var(--navy), #0b3154)
}

.cta-inner {
    display: flex;
    gap: 42px;
    align-items: center;
    justify-content: space-between
}

.challenge-list h3, .scope-grid h3, .automation-list h3, .transition-frame h3 {
    font-size: .98rem
}

.cta h2 {
    margin: 0;
    font-size: 1.8rem
}

.cta p:not(.eyebrow) {
    margin: 10px 0 0;
    color: #a9bbc9
}

.cta .button {
    flex: none
}

footer {
    padding: 28px 0;
    color: #b7c4cf;
    background: #041326
}

.footer-inner {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 20px 42px;
    align-items: center
}

.footer-links {
    display: flex;
    margin-left: auto;
    gap: 22px;
    font-size: .67rem
}

.footer-inner > p {
    grid-column: 1/-1;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .6rem
}

@media (max-width: 980px) {
    .nav-links {
        display: none
    }

    .nav-contact {
        margin-left: auto
    }

    .section-heading h2 {
        white-space: normal
    }

    .hero-inner {
        grid-template-columns:1fr;
        gap: 24px;
        padding-bottom: 28px
    }

    .hero-copy {
        max-width: 760px
    }

    .hero-model {
        max-width: 680px
    }

    .challenges > .wrap {
        grid-template-columns:1fr
    }

    .challenge-heading {
        padding: 40px 34px
    }

    .challenge-heading h2 {
        font-size: 1.8rem;
        white-space: normal
    }

    .challenge-heading > p:last-child {
        max-width: 760px
    }

    .operations-grid {
        display: grid;
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .operations-grid article, .operations-grid article:hover {
        min-height: 245px;
        flex: none;
        transform: none
    }
}

@media (max-width: 680px) {
    .wrap {
        width: min(calc(100% - 30px), var(--max))
    }

    .site-header {
        height: 64px
    }

    .hero {
        margin-top: 64px;
        padding-top: 44px
    }

    .hero-image {
        background-image: linear-gradient(180deg, rgba(7, 27, 53, .94), rgba(7, 27, 53, .8)), url("../img/service/advange-digital-workplace-hero-enterprise.png");
        background-position: 63% center
    }

    .hero-inner {
        min-height: 0;
        padding-bottom: 24px
    }

    .hero-copy {
        width: 100%
    }

    .hero h1 {
        font-size: clamp(2.05rem, 10vw, 2.75rem)
    }

    .hero-copy > p:not(.eyebrow) {
        font-size: .87rem
    }

    .hero-model {
        max-width: none;
        padding: 21px
    }

    .hero-model-products {
        gap: 5px 12px
    }

    .hero-model-users {
        gap: 12px;
        flex-wrap: wrap
    }

    .actions {
        flex-direction: column
    }

    .button {
        width: 100%
    }

    .hero-facts {
        grid-template-columns:1fr 1fr
    }

    .hero-facts div {
        padding: 14px 12px
    }

    .hero-facts div:first-child {
        padding-left: 12px
    }

    .hero-facts div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .12)
    }

    .section {
        padding: 68px 0
    }

    .section-heading {
        margin-bottom: 30px
    }

    .section-heading h2 {
        font-size: 1.8rem;
        white-space: normal
    }

    .section-heading > p:last-child {
        font-size: .9rem
    }

    .challenge-heading {
        padding: 32px 24px
    }

    .challenge-list {
        padding: 15px
    }

    .challenge-list article {
        grid-template-columns:34px 1fr;
        padding: 14px 9px
    }

    .challenge-list article:hover {
        padding: 14px 9px;
        transform: translateX(3px)
    }

    .scope-frame {
        padding: 14px
    }

    .section-visual {
        height: 205px
    }

    .scope-intro {
        padding: 24px 22px
    }

    .scope-grid {
        grid-template-columns:1fr;
        padding: 23px 22px
    }

    .scope-grid article {
        min-height: 0
    }

    .scope-grid article:nth-last-child(-n+2) {
        border-bottom: 1px solid #e1e8ec
    }

    .scope-grid article:last-child {
        border-bottom: 0
    }

    .operations-frame {
        padding: 0
    }

    .operations-grid {
        grid-template-columns:1fr;
        gap: 10px;
        padding: 0
    }

    .operations-grid article, .operations-grid article:hover {
        grid-column: auto;
        min-height: 210px;
        padding: 23px 22px;
        transform: none
    }

    .operations-grid small {
        font-size: 1rem
    }

    .operations-grid h3 {
        margin: 0;
        padding: 24px 0 16px;
        font-size: 1.45rem
    }

    .operations-proof {
        grid-template-columns:1fr;
        gap: 16px
    }

    .operations-proof div {
        min-height: 0
    }

    .automation-visual {
        height: 210px
    }

    .automation-list {
        grid-template-columns:1fr;
        padding: 24px 23px
    }

    .automation-list article {
        min-height: 0
    }

    .transition-frame li {
        grid-template-columns:42px 1fr;
        gap: 5px 12px;
        min-height: 0;
        padding: 21px
    }

    .transition-frame li:hover {
        padding-left: 26px
    }

    .transition-frame p {
        grid-column: 2;
        margin-top: 3px
    }

    .cta-inner {
        align-items: flex-start;
        flex-direction: column
    }

    .footer-inner {
        grid-template-columns:1fr
    }

    .footer-links {
        margin: 0;
        gap: 10px 18px;
        flex-wrap: wrap
    }

    .footer-inner > p {
        grid-column: auto
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

/* Structural adapter: original service content, confirmed digital-workplace design system. */
.service-preview > header {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    height: 70px;
    color: #fff;
    background: rgba(7, 27, 53, .96);
    box-shadow: 0 1px rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px)
}

.service-preview .nav {
    display: flex;
    height: 100%;
    align-items: center
}

.service-preview .brand i {
    color: var(--logo-orange);
    font-style: normal
}

.service-preview .links {
    display: flex;
    margin-left: auto;
    gap: 25px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em
}

.service-preview .links > a {
    color: #becbd5;
    transition: color .22s ease
}

.service-preview .links > a:hover {
    color: #ff9a59
}

.service-preview .links .nav-cta {
    display: inline-flex;
    min-height: 40px;
    margin-left: 0;
    padding: 0 18px;
    border-radius: 6px;
    color: #fff;
    background: var(--logo-orange);
    align-items: center
}

.service-preview .menu {
    display: none
}

.service-preview .hero:before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(7, 27, 53, 1) 0%, rgba(7, 27, 53, .95) 39%, rgba(7, 27, 53, .5) 70%, rgba(7, 27, 53, .17) 100%), var(--hero-bg-image, url("../img/service/advange-digital-workplace-hero-enterprise.png"));
    background-position: center;
    background-size: cover;
    content: ""
}

.service-preview .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 54px;
    min-height: 350px;
    padding-bottom: 0;
    align-items: center
}

.service-preview .hero-content {
    width: 100%
}

.service-preview .hero-copy {
    max-width: 720px;
    margin: 19px 0 0;
    color: #c9d5df;
    font-size: .94rem
}

.service-preview .hero h1 span {
    display: block
}

.service-preview .hero h1 .accent {
    color: var(--logo-orange)
}

.service-preview .actions {
    display: flex;
    margin-top: 25px;
    gap: 12px;
    flex-wrap: wrap
}

.service-preview .btn {
    display: inline-flex;
    min-height: 46px;
    padding: 0 21px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    font-size: .79rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    transition: transform .23s ease, background .23s ease
}

.service-preview .btn:after {
    margin-left: 16px;
    content: "→"
}

.service-preview .btn:hover {
    transform: translateY(-2px)
}

.service-preview .btn-primary {
    border-color: var(--logo-orange);
    color: #fff;
    background: var(--logo-orange)
}

.service-preview .btn-outline {
    color: #fff;
    background: rgba(255, 255, 255, .035)
}

.service-preview .hero-model, .service-preview .cloud-model, .service-preview .network-model, .service-preview .security-model {
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(5, 22, 43, .58);
    backdrop-filter: blur(7px)
}

.service-preview .model-heading {
    display: flex;
    padding: 0 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.service-preview .model-heading b {
    font-size: .82rem
}

.service-preview .model-heading span {
    color: #829bb0;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em
}

.service-preview .model-core, .service-preview .model-center {
    margin-top: 14px;
    padding: 13px 15px;
    border-left: 2px solid var(--logo-orange);
    color: var(--logo-orange);
    background: rgba(255, 255, 255, .045);
    font-size: .7rem;
    font-weight: 800
}

.service-preview .model-core span, .service-preview .model-center span {
    display: block;
    margin-top: 4px;
    color: #becbd5;
    font-size: .68rem;
    font-weight: 500
}

.service-preview .model-services, .service-preview .model-domains, .service-preview .model-sites, .service-preview .model-platforms, .service-preview .model-items {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px
}

.service-preview .model-services span, .service-preview .model-domains span, .service-preview .model-sites span, .service-preview .model-platforms span, .service-preview .model-items span {
    padding: 9px 10px;
    border-radius: 6px;
    color: #b9c8d3;
    background: rgba(255, 255, 255, .045);
    font-size: .64rem
}

.service-preview .model-services b, .service-preview .model-domains b, .service-preview .model-sites b, .service-preview .model-platforms b, .service-preview .model-items b {
    display: block;
    color: #fff;
    font-size: .64rem
}

.service-preview .model-foundation {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.service-preview .model-foundation b, .service-preview .model-foundation span {
    display: block
}

.service-preview .model-foundation b {
    color: var(--logo-orange);
    font-size: .61rem
}

.service-preview .model-foundation span {
    margin-top: 3px;
    color: #8199ad;
    font-size: .61rem
}

.service-preview .hero-facts {
    position: relative;
    z-index: 1;
    margin-top: 34px
}

.service-preview .hero-facts > div {
    min-height: 82px;
    border-right: 1px solid rgba(255, 255, 255, .12)
}

.service-preview .split-heading {
    max-width: 1040px;
    margin-bottom: 34px
}

.service-preview .split-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -.035em
}

.service-preview .split-heading h2 span {
    display: inline
}

.service-preview .split-heading > .lead {
    max-width: 920px;
    margin: 15px 0 0;
    color: var(--muted);
    font-size: .95rem
}

.service-preview #challenges {
    display: grid;
    grid-template-columns:minmax(0, .43fr) minmax(0, .57fr);
    width: min(calc(100% - 48px), var(--max));
    margin: auto;
    padding: 92px 0;
    background: #fff
}

.service-preview #challenges > .wrap {
    width: auto;
    margin: 0
}

.service-preview #challenges .split-heading {
    position: relative;
    overflow: hidden;
    max-width: none;
    margin: 0;
    padding: 46px 34px;
    border-radius: 12px 0 0 12px;
    background: #e8f1f4
}

.service-preview #challenges .split-heading:after {
    position: absolute;
    right: -38px;
    bottom: -52px;
    width: 210px;
    height: 210px;
    background: url("../img/service/advange-mark.png") center/contain no-repeat;
    content: "";
    opacity: .016;
    pointer-events: none
}

.service-preview #challenges .split-heading > .lead {
    max-width: 470px;
    margin-top: 22px;
    font-size: .9rem
}

.service-preview #challenges .challenge-list {
    display: flex;
    max-width: none;
    margin: 0;
    padding: 24px 32px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: #fff;
    box-shadow: 0 22px 56px rgba(7, 27, 53, .08);
    flex-direction: column;
    gap: 0
}

.service-preview #challenges .challenge-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0 16px;
    min-height: 0;
    margin: 2px 0;
    padding: 15px 18px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    align-items: start;
    transition: transform .25s ease, background .25s ease;
}

.service-preview #challenges .challenge-list article:hover {
    background: #f4f8fa;
    transform: translateX(6px)
}

.service-preview #challenges .challenge-list article > span {
    grid-row: 1/3;
    padding-top: 4px;
    color: var(--logo-orange);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .1em
}

.service-preview #challenges .challenge-list h3 {
    margin: 0;
    color: var(--navy);
    font-size: .98rem;
    line-height: 1.55
}

.service-preview #challenges .challenge-list p {
    grid-column: 2;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.75
}

.service-preview .soft {
    background: var(--soft)
}

.service-preview .scope-grid {
    gap: 3px 62px;
    padding: 28px 34px 23px;
    border-radius: 10px;
    background: #fff
}

.service-preview .scope-grid article {
    min-height: 150px;
    padding: 7px 0 21px 20px;
    border: 0;
    border-bottom: 1px solid #e1e8ec;
    border-radius: 0;
    background: transparent
}

.service-preview .scope-grid article:before {
    top: 1.08em
}

.service-preview .scope-grid article > small {
    display: block;
    color: var(--logo-orange);
    font-size: .61rem;
    font-weight: 850
}

.service-preview .scope-grid article:nth-last-child(-n+2) {
    border-bottom: 0
}

.service-preview section.dark {
    color: var(--ink);
    background: #eef3f5
}

.service-preview section.dark .split-heading h2, .service-preview section.dark h3 {
    color: var(--navy)
}

.service-preview section.dark .lead {
    color: var(--muted)
}

.service-preview .delivery-layers, .service-preview .operations-flow {
    display: flex;
    gap: 12px;
    margin: 0 auto;
    padding: 0;
    background: transparent
}

.service-preview .delivery-layers > i, .service-preview .operations-flow > i {
    display: none
}

.service-preview .delivery-layers article, .service-preview .operations-flow article {
    --ring: rgba(9, 38, 68, .025);
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-rows:auto 1fr auto;
    min-width: 0;
    min-height: 310px;
    padding: 31px 27px;
    border: 1px solid rgba(9, 38, 68, .035);
    border-radius: 12px;
    color: var(--navy);
    background: #f8fafb;
    flex: 1 1 0;
    transition: transform .28s ease, color .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease
}

.service-preview .delivery-layers article:after, .service-preview .operations-flow article:after {
    position: absolute;
    right: -72px;
    bottom: -76px;
    width: 190px;
    height: 190px;
    border: 24px solid rgba(9, 38, 68, .018);
    border-radius: 50%;
    content: "";
    pointer-events: none
}

.service-preview .delivery-layers article:nth-of-type(2), .service-preview .operations-flow article:nth-of-type(2) {
    background: #e5f0f5
}

.service-preview .delivery-layers article:nth-of-type(3), .service-preview .operations-flow article:nth-of-type(3) {
    background: #fff0e7
}

.service-preview .delivery-layers article:hover, .service-preview .operations-flow article:hover {
    color: #fff;
    border-color: var(--navy);
    background: #153f68;
    box-shadow: 0 20px 40px rgba(20, 51, 73, .14);
    transform: translateY(-5px)
}

.service-preview .delivery-layers article:hover h3, .service-preview .operations-flow article:hover h3 {
    color: #fff
}

.service-preview .delivery-layers article:hover p, .service-preview .operations-flow article:hover p {
    color: #d5e0e8
}

.service-preview .delivery-layers small, .service-preview .operations-flow small, .service-preview .operations-flow article > span {
    color: var(--logo-orange);
    font-size: .68rem;
    font-weight: 850
}

.service-preview .delivery-layers article > div {
    display: flex;
    height: 100%;
    flex-direction: column
}

.service-preview .delivery-layers h3, .service-preview .operations-flow h3 {
    margin: auto 0 0;
    padding: 28px 0 15px;
    font-size: 1.42rem;
    line-height: 1.3
}

.service-preview .delivery-layers p, .service-preview .operations-flow p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem
}

.service-preview .delivery-base, .service-preview .operations-services, .service-preview .platform-line, .service-preview .response-levels {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 28px auto 0;
    padding: 0;
    color: var(--ink);
    background: transparent
}

.service-preview .delivery-base > *, .service-preview .operations-services > *, .service-preview .platform-line > *, .service-preview .response-levels > * {
    position: relative;
    min-width: 0;
    padding: 2px 0 2px 16px
}

.service-preview .delivery-base > *:before, .service-preview .operations-services > *:before, .service-preview .platform-line > *:before, .service-preview .response-levels > *:before {
    position: absolute;
    top: .62em;
    left: 0;
    width: 4px;
    height: 18px;
    border-radius: 3px;
    background: var(--logo-orange);
    content: ""
}

.service-preview .delivery-base strong, .service-preview .operations-services b, .service-preview .platform-line strong, .service-preview .response-levels b {
    display: block;
    color: var(--navy);
    font-size: .8rem
}

.service-preview .delivery-base span, .service-preview .operations-services span, .service-preview .platform-line span, .service-preview .response-levels span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.65
}

.service-preview .automation-layout, .service-preview .improvement-layout, .service-preview .finops-layout {
    display: block
}

.service-preview .automation-flow, .service-preview .kaizen-flow, .service-preview .improvement-flow, .service-preview .finops-flow, .service-preview .rca-flow {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 auto;
    padding: 24px 30px;
    border-radius: 12px;
    background: #e8f0f3;
    list-style: none
}

.service-preview .automation-flow article, .service-preview .kaizen-flow article, .service-preview .automation-flow li, .service-preview .kaizen-flow li, .service-preview .improvement-flow li, .service-preview .finops-flow li, .service-preview .rca-flow li {
    min-height: 135px;
    padding: 22px 20px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    list-style: none
}

.service-preview .automation-flow article:nth-last-child(-n+2), .service-preview .kaizen-flow article:nth-last-child(-n+2), .service-preview .automation-flow li:nth-last-child(-n+2), .service-preview .kaizen-flow li:nth-last-child(-n+2), .service-preview .improvement-flow li:nth-last-child(-n+2), .service-preview .finops-flow li:nth-last-child(-n+2), .service-preview .rca-flow li:nth-last-child(-n+2) {
    border-bottom: 0
}

.service-preview .automation-flow > i {
    display: none
}

.service-preview .automation-flow small, .service-preview .kaizen-flow span, .service-preview .improvement-flow span, .service-preview .finops-flow span, .service-preview .rca-flow span {
    color: var(--logo-orange);
    font-size: .66rem;
    font-weight: 850
}

.service-preview .automation-flow h3, .service-preview .kaizen-flow h3, .service-preview .improvement-flow h3, .service-preview .finops-flow h3, .service-preview .rca-flow h3, .service-preview .improvement-flow b, .service-preview .finops-flow b, .service-preview .rca-flow b {
    display: block;
    margin: 10px 0 5px;
    color: var(--navy);
    font-size: .98rem
}

.service-preview .automation-flow p, .service-preview .kaizen-flow p, .service-preview .improvement-flow p, .service-preview .finops-flow p, .service-preview .rca-flow p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem
}

.service-preview .security-model .cycle-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 13px 0 0;
    padding: 16px;
    border-radius: 8px;
    background: #f8fbfc
}

.service-preview .security-model .cycle-grid > div {
    display: flex;
    min-width: 0;
    align-items: baseline
}

.service-preview .security-model .cycle-grid small {
    color: #d4dde4;
    font-size: .6rem
}

.service-preview .security-model .cycle-grid b {
    color: #fff;
    font-size: .66rem
}

.service-preview .security-model .cycle-grid span {
    margin-left: 4px;
    color: var(--logo-orange);
    font-size: .58rem;
    font-weight: 700
}

.service-preview .knowledge-note, .service-preview .security-line {
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: 9px;
    color: #fff;
    background: var(--navy)
}

.service-preview .knowledge-note strong, .service-preview .security-line strong {
    color: var(--logo-orange)
}

.service-preview .text-link {
    display: inline-flex;
    margin-top: 14px;
    color: var(--logo-orange);
    font-size: .76rem;
    font-weight: 800;
    align-items: center;
    gap: 8px
}

.service-preview .text-link:after {
    content: "→"
}

.service-preview .transition-list, .service-preview .asset-lifecycle {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    list-style: none
}

.service-preview .transition-list:after, .service-preview .asset-lifecycle:after {
    position: absolute;
    right: -42px;
    bottom: -48px;
    width: 220px;
    height: 220px;
    background: url("../img/service/advange-mark.png") center/contain no-repeat;
    content: "";
    opacity: .014;
    pointer-events: none
}

.service-preview .transition-list li {
    display: grid;
    grid-template-columns:48px 1fr;
    gap: 4px 18px;
    min-height: 105px;
    padding: 23px 28px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    align-items: center
}

.service-preview .transition-list li:last-child {
    border-bottom: 0
}

.service-preview .transition-list li:hover {
    background: #fff7f2
}

.service-preview .transition-list li > span {
    grid-row: 1/3;
    display: grid;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--logo-orange);
    background: #fff0e7;
    font-size: .65rem;
    font-weight: 850;
    place-items: center
}

.service-preview .transition-list h3 {
    margin: 0;
    color: var(--navy);
    font-size: .98rem;
    align-self: end
}

.service-preview .transition-list p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    align-self: start
}

.service-preview .asset-lifecycle {
    margin: 30px auto 0;
    padding: 28px
}

.service-preview .asset-heading h3 {
    margin: 8px 0 20px;
    color: var(--navy);
    font-size: 1.15rem
}

.service-preview .asset-lifecycle ol {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--line);
    list-style: none
}

.service-preview .asset-lifecycle li {
    min-height: 82px;
    padding: 18px 12px;
    border: 0;
    background: #fff;
    font-size: .75rem
}

.service-preview .asset-lifecycle li span {
    display: block;
    color: var(--logo-orange);
    font-size: .62rem;
    font-weight: 850
}

.service-preview .cta .btn {
    flex: none
}

.service-preview footer .brand i {
    color: var(--logo-orange)
}

.service-preview .foot {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between
}

.service-preview .foot-links {
    display: flex;
    gap: 20px;
    color: #d7e0e9;
    font-size: .72rem
}

.service-preview .copy {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .64rem
}

@media (max-width: 980px) {
    .service-preview .links {
        display: none
    }

    .service-preview .hero-grid {
        grid-template-columns:1fr;
        gap: 24px;
        padding-bottom: 28px
    }

    .service-preview .hero-model, .service-preview .cloud-model, .service-preview .network-model, .service-preview .security-model {
        max-width: 700px
    }

    .service-preview #challenges {
        grid-template-columns:1fr
    }

    .service-preview #challenges .split-heading {
        border-radius: 12px 12px 0 0
    }

    .service-preview #challenges .challenge-list {
        border-radius: 0 0 12px 12px
    }

    .service-preview .delivery-layers, .service-preview .operations-flow, .service-preview .response-levels {
        display: grid;
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 680px) {
    .service-preview .wrap {
        width: min(calc(100% - 30px), var(--max))
    }

    .service-preview .hero:before {
        background-image: linear-gradient(180deg, rgba(7, 27, 53, .94), rgba(7, 27, 53, .8)), var(--hero-bg-image, url("../img/service/advange-digital-workplace-hero-enterprise.png"));
        background-position: 63% center
    }

    .service-preview .hero-grid {
        min-height: 0
    }

    .service-preview .hero h1 {
        font-size: clamp(2.05rem, 10vw, 2.75rem)
    }

    .service-preview .actions {
        flex-direction: column
    }

    .service-preview .btn {
        width: 100%
    }

    .service-preview #challenges {
        width: min(calc(100% - 30px), var(--max));
        padding: 68px 0
    }

    .service-preview #challenges .split-heading {
        padding: 32px 24px
    }

    .service-preview #challenges .challenge-list {
        padding: 15px
    }

    .service-preview .scope-grid, .service-preview .automation-flow, .service-preview .kaizen-flow, .service-preview .cycle-grid, .service-preview .improvement-flow, .service-preview .finops-flow, .service-preview .rca-flow, .service-preview .delivery-layers, .service-preview .operations-flow, .service-preview .response-levels, .service-preview .delivery-base, .service-preview .operations-services, .service-preview .platform-line {
        grid-template-columns:1fr
    }

    .service-preview .scope-grid {
        padding: 23px 22px
    }

    .service-preview .scope-grid article:nth-last-child(2) {
        border-bottom: 1px solid var(--line)
    }

    .service-preview .delivery-layers article, .service-preview .operations-flow article, .service-preview .response-levels article {
        min-height: 210px
    }

    .service-preview .automation-flow article:nth-last-child(2), .service-preview .kaizen-flow article:nth-last-child(2), .service-preview .cycle-grid article:nth-last-child(2), .service-preview .improvement-flow article:nth-last-child(2), .service-preview .finops-flow article:nth-last-child(2), .service-preview .rca-flow article:nth-last-child(2) {
        border-bottom: 1px solid var(--line)
    }

    .service-preview .asset-lifecycle ol {
        grid-template-columns:repeat(2, 1fr)
    }

    .service-preview .foot {
        align-items: flex-start;
        flex-direction: column
    }

    .service-preview .foot-links {
        flex-wrap: wrap
    }
}

.service-detail-page .section-heading {
    max-width: 1200px;
    margin-bottom: 34px;
}

.service-detail-page .section-heading h2 span {
    display: inline;
}

.service-detail-page .section-heading .text-link {
    display: inline-flex;
    margin-top: 18px;
}

.service-detail-page .operations-proof {
    margin-top: 40px;
}

.service-detail-page .operations-proof div {
    padding-left: 17px;
}

.service-detail-page .operations-proof div:before {
    top: .86em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.service-detail-page .cloud-operations-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding: 0;
    background: transparent;
}

.service-detail-page .support-band {
    display: grid;
    grid-template-columns: minmax(230px, .32fr) minmax(0, .68fr);
    gap: 30px;
    margin-top: 20px;
    padding: 24px 28px;
    border-left: 3px solid var(--logo-orange);
    background: #fff9f5;
    align-items: center;
}

.service-detail-page .support-band strong {
    color: var(--navy);
    font-size: .88rem;
}

.service-detail-page .support-band-items {
    display: flex;
    gap: 9px 20px;
    flex-wrap: wrap;
}

.service-detail-page .support-band-items span {
    position: relative;
    padding-left: 12px;
    color: var(--muted);
    font-size: .76rem;
}

.service-detail-page .support-band-items span:before {
    position: absolute;
    top: .58em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--logo-orange);
    content: "";
}

.service-detail-page .cloud-scope-note ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-detail-page .cloud-scope-note {
    display: block;
    margin-top: 34px;
    padding: 28px 0 2px;
    border-top: 1px solid var(--line);
    background: transparent;
}

.service-detail-page .cloud-scope-note > strong {
    display: block;
    margin-bottom: 24px;
    color: var(--navy);
    font-size: .88rem;
}

.service-detail-page .cloud-scope-note li {
    position: relative;
    padding-left: 17px;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.7;
}

.service-detail-page .cloud-scope-note li:before {
    position: absolute;
    top: .68em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--logo-orange);
    content: "";
}

.service-detail-page .knowledge-note {
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    gap: 28px;
    margin: 20px 0 0;
    padding: 24px 30px;
    border-radius: 10px;
    background: #0b2e53;
    align-items: center;
}

.service-detail-page .knowledge-note strong {
    color: var(--logo-orange);
    font-size: 16px;
}

.service-detail-page .knowledge-note span {
    color: #c2d0db;
    font-size: .8rem;
    line-height: 1.8;
}

.service-detail-page .optional-visual {
    display: grid;
    min-height: 260px;
    margin: 20px 0 0;
    border-radius: 10px;
    color: #7b8f9e;
    background: linear-gradient(135deg, #e3eef2, #f8fafb);
    font-size: .82rem;
    font-weight: 700;
    place-items: center;
}

.service-detail-page .optional-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-detail-page .asset-feature {
    display: block;
    margin-top: 32px;
    padding: 34px 36px 30px;
    border-left: 3px solid var(--logo-orange);
    background: #fff9f5;
}

.service-detail-page .asset-feature-heading h3 {
    margin: 13px 0 0;
    color: var(--navy);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.45;
}

.service-detail-page .asset-feature-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0 28px;
    margin: 25px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(245, 134, 91, .13);
    list-style: none;
}

.service-detail-page .asset-feature-flow li {
    padding: 0 0 4px;
}

.service-detail-page .asset-feature-flow small,
.service-detail-page .asset-feature-flow span {
    display: block;
}

.service-detail-page .asset-feature-flow small {
    color: var(--logo-orange);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.service-detail-page .asset-feature-flow span {
    margin-top: 5px;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 700;
}

.service-detail-page .asset-feature-flow li:hover span {
    color: var(--logo-orange);
}

.service-detail-page .template-additional-content {
    margin-top: 0;
    background: #fff9f5;
}

.service-detail-page .template-additional-section {
    padding-top: 0;
    background: #eaf1f4;
}

.service-detail-page .template-additional-content .asset-feature-flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .service-detail-page .support-band,
    .service-detail-page .knowledge-note {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-detail-page .asset-feature {
        padding: 30px 28px 27px;
    }

    .service-detail-page .asset-feature-flow {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px 24px;
    }

    .service-detail-page .template-additional-content .asset-feature-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-detail-page .cloud-scope-note ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 24px;
    }
}

@media (max-width: 640px) {
    .service-detail-page .support-band,
    .service-detail-page .knowledge-note {
        padding: 22px;
    }

    .service-detail-page .asset-feature-flow {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 18px;
    }

    .service-detail-page .cloud-scope-note ul {
        grid-template-columns: 1fr;
    }

    .service-detail-page .cloud-operations-proof {
        grid-template-columns: 1fr;
    }

    .service-detail-page .template-additional-content .asset-feature-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}