/* ============================================================
   ZANCK — SERVICES SYSTEM
   File: /assets/css/services.css

   BRAND PALETTE — LOCKED
   #1e6dbb — ZANCK Blue
   #FFFFFF — White
   #000000 — Black

   IMPORTANT:
   This stylesheet provides the shared service-system language,
   NOT one repeated page design.

   Individual service pages can use different compositions,
   grids, hero structures and content arrangements while
   retaining ZANCK's visual identity.

   Color philosophy:
   - White is the dominant surface.
   - Black is primarily typography / selected structural areas.
   - Blue is the strategic accent and interaction color.
   ============================================================ */


/* ============================================================
   01. SERVICE TOKENS
   ============================================================ */

:root {

    --service-blue: #1e6dbb;
    --service-white: #FFFFFF;
    --service-black: #000000;

    --service-text:
        rgba(0, 0, 0, 0.78);

    --service-muted:
        rgba(0, 0, 0, 0.56);

    --service-soft:
        rgba(0, 0, 0, 0.40);

    --service-border:
        rgba(0, 0, 0, 0.10);

    --service-border-strong:
        rgba(0, 0, 0, 0.18);

    --service-blue-soft:
        rgba(30, 109, 187, 0.055);

    --service-blue-line:
        rgba(30, 109, 187, 0.22);

    --service-max:
        1440px;

    --service-reading:
        820px;

    --service-gutter:
        48px;

    --service-section:
        120px;

    --service-transition:
        220ms ease;

}


/* ============================================================
   02. SERVICE FOUNDATION
   ============================================================ */

.service-page {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    background:
        var(--service-white);

    color:
        var(--service-black);

}


.service-page *,
.service-page *::before,
.service-page *::after {

    box-sizing:
        border-box;

}


.service-page a {

    color:
        inherit;

}


/* ============================================================
   03. SERVICE CONTAINERS
   ============================================================ */

.service-container {

    width:
        min(
            calc(
                100% -
                (var(--service-gutter) * 2)
            ),
            var(--service-max)
        );

    margin-inline:
        auto;

}


.service-reading-container {

    width:
        min(
            calc(
                100% -
                (var(--service-gutter) * 2)
            ),
            var(--service-reading)
        );

    margin-inline:
        auto;

}


/* ============================================================
   04. SERVICE KICKER
   ============================================================ */

.service-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--service-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


.service-kicker::before {

    content:
        "";

    width:
        30px;

    height:
        2px;

    background:
        var(--service-blue);

}


/* ============================================================
   05. SERVICE HERO — DEFAULT
   ============================================================ */

.service-hero {

    position:
        relative;

    min-height:
        620px;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    border-bottom:
        1px solid var(--service-border);

    background:
        var(--service-white);

}


.service-hero-inner {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (var(--service-gutter) * 2)
            ),
            var(--service-max)
        );

    margin-inline:
        auto;

    padding:
        100px 0 82px;

}


.service-hero h1 {

    max-width:
        980px;

    margin:
        25px 0 0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            54px,
            7vw,
            104px
        );

    line-height:
        0.90;

    letter-spacing:
        -0.068em;

    font-weight:
        700;

}


.service-hero h1 span {

    color:
        var(--service-blue);

}


.service-hero-description {

    max-width:
        670px;

    margin:
        30px 0 0;

    color:
        var(--service-muted);

    font-size:
        15px;

    line-height:
        1.8;

}


/* ============================================================
   06. HERO META
   ============================================================ */

.service-hero-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;

    margin-top:
        35px;

}


.service-hero-meta-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.service-hero-meta-label {

    color:
        var(--service-soft);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.service-hero-meta-value {

    color:
        var(--service-black);

    font-size:
        12px;

    font-weight:
        700;

}


/* ============================================================
   07. HERO WATERMARK
   ============================================================ */

.service-hero-watermark {

    position:
        absolute;

    right:
        -35px;

    bottom:
        -55px;

    color:
        rgba(
            30,
            109,
            187,
            0.055
        );

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            180px,
            25vw,
            360px
        );

    line-height:
        0.8;

    letter-spacing:
        -0.10em;

    user-select:
        none;

    pointer-events:
        none;

}


/* ============================================================
   08. HERO GRID VARIANT
   ============================================================ */

.service-hero--split {

    min-height:
        680px;

    align-items:
        center;

}


.service-hero--split
.service-hero-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.95fr);

    gap:
        80px;

    align-items:
        center;

}


.service-hero-visual {

    position:
        relative;

    min-height:
        430px;

}


.service-hero-visual-frame {

    position:
        absolute;

    inset:
        35px 0 0 35px;

    border:
        1px solid var(--service-border);

    background:
        var(--service-blue-soft);

}


.service-hero-visual-frame::before {

    content:
        "";

    position:
        absolute;

    inset:
        24px;

    border:
        1px solid
        var(--service-blue-line);

}


.service-hero-visual-mark {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        125px;

    height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid var(--service-blue);

    border-radius:
        50%;

    color:
        var(--service-blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.10em;

}


/* ============================================================
   09. HERO MINIMAL VARIANT
   ============================================================ */

.service-hero--minimal {

    min-height:
        500px;

    align-items:
        center;

}


.service-hero--minimal
.service-hero-inner {

    padding-block:
        90px;

}


.service-hero--minimal h1 {

    max-width:
        780px;

}


/* ============================================================
   10. HERO DARK VARIANT
   ============================================================ */

.service-hero--dark {

    background:
        var(--service-black);

    color:
        var(--service-white);

    border-bottom:
        0;

}


.service-hero--dark
.service-kicker {

    color:
        var(--service-blue);

}


.service-hero--dark h1 {

    color:
        var(--service-white);

}


.service-hero--dark
.service-hero-description {

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

}


.service-hero--dark
.service-hero-meta-label {

    color:
        rgba(
            255,
            255,
            255,
            0.40
        );

}


.service-hero--dark
.service-hero-meta-value {

    color:
        var(--service-white);

}


/* ============================================================
   11. SERVICE INTRO
   ============================================================ */

.service-intro {

    padding:
        var(--service-section) 0;

}


.service-intro-grid {

    display:
        grid;

    grid-template-columns:
        minmax(250px, 0.65fr)
        minmax(0, 1.35fr);

    gap:
        90px;

    align-items:
        start;

}


.service-intro-label {

    color:
        var(--service-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.service-intro-title {

    margin-top:
        18px;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            28px,
            3.6vw,
            52px
        );

    line-height:
        1;

    letter-spacing:
        -0.05em;

}


.service-intro-copy {

    max-width:
        760px;

    color:
        var(--service-text);

    font-size:
        16px;

    line-height:
        1.9;

}


.service-intro-copy p + p {

    margin-top:
        20px;

}


/* ============================================================
   12. CAPABILITIES
   ============================================================ */

.service-capabilities {

    padding:
        105px 0;

    border-top:
        1px solid var(--service-border);

}


.service-capabilities-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        48px;

}


.service-capabilities-title {

    max-width:
        720px;

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            32px,
            4.5vw,
            62px
        );

    line-height:
        0.96;

    letter-spacing:
        -0.055em;

}


.service-capabilities-description {

    max-width:
        380px;

    color:
        var(--service-muted);

    font-size:
        12px;

    line-height:
        1.75;

}


/* ============================================================
   13. CAPABILITY GRID
   ============================================================ */

.service-capability-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid var(--service-border);

    border-left:
        1px solid var(--service-border);

}


.service-capability-card {

    position:
        relative;

    min-height:
        230px;

    padding:
        28px;

    border-right:
        1px solid var(--service-border);

    border-bottom:
        1px solid var(--service-border);

    background:
        var(--service-white);

    text-decoration:
        none;

    transition:
        background-color var(--service-transition),
        transform var(--service-transition);

}


.service-capability-card:hover {

    background:
        var(--service-blue-soft);

}


.service-capability-number {

    display:
        block;

    margin-bottom:
        55px;

    color:
        var(--service-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.10em;

}


.service-capability-card h3 {

    margin:
        0;

    color:
        var(--service-black);

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        18px;

    line-height:
        1.15;

    letter-spacing:
        -0.025em;

}


.service-capability-card p {

    max-width:
        310px;

    margin:
        12px 0 0;

    color:
        var(--service-muted);

    font-size:
        13px;

    line-height:
        1.7;

}


.service-capability-arrow {

    position:
        absolute;

    right:
        25px;

    bottom:
        23px;

    color:
        var(--service-blue);

    font-size:
        17px;

    transition:
        transform var(--service-transition);

}


.service-capability-card:hover
.service-capability-arrow {

    transform:
        translateX(5px);

}


/* ============================================================
   14. CAPABILITIES — HORIZONTAL VARIANT
   ============================================================ */

.service-capability-list {

    border-top:
        1px solid var(--service-border);

}


.service-capability-row {

    display:
        grid;

    grid-template-columns:
        70px
        minmax(230px, 0.75fr)
        minmax(0, 1.25fr)
        30px;

    gap:
        30px;

    align-items:
        center;

    min-height:
        105px;

    padding:
        18px 0;

    border-bottom:
        1px solid var(--service-border);

    text-decoration:
        none;

}


.service-capability-row-number {

    color:
        var(--service-blue);

    font-size:
        10px;

    font-weight:
        700;

}


.service-capability-row-title {

    color:
        var(--service-black);

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        -0.02em;

}


.service-capability-row-description {

    color:
        var(--service-muted);

    font-size:
        12px;

    line-height:
        1.65;

}


.service-capability-row-arrow {

    color:
        var(--service-blue);

    font-size:
        18px;

    transition:
        transform var(--service-transition);

}


.service-capability-row:hover
.service-capability-row-arrow {

    transform:
        translateX(5px);

}


/* ============================================================
   15. OUTCOMES
   ============================================================ */

.service-outcomes {

    padding:
        120px 0;

    background:
        var(--service-black);

    color:
        var(--service-white);

}


.service-outcomes-header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 0.55fr);

    gap:
        80px;

    margin-bottom:
        65px;

}


.service-outcomes h2 {

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            38px,
            5vw,
            70px
        );

    line-height:
        0.94;

    letter-spacing:
        -0.06em;

}


.service-outcomes-description {

    align-self:
        end;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size:
        13px;

    line-height:
        1.8;

}


.service-outcome-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

}


.service-outcome {

    min-height:
        190px;

    padding:
        28px 25px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

}


.service-outcome:last-child {

    border-right:
        0;

}


.service-outcome-value {

    display:
        block;

    color:
        var(--service-blue);

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            30px,
            4vw,
            52px
        );

    font-weight:
        700;

    letter-spacing:
        -0.05em;

}


.service-outcome-label {

    display:
        block;

    margin-top:
        12px;

    color:
        var(--service-white);

    font-size:
        11px;

    font-weight:
        700;

}


.service-outcome-copy {

    margin-top:
        9px;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size:
        10px;

    line-height:
        1.6;

}


/* ============================================================
   16. PROCESS
   ============================================================ */

.service-process {

    padding:
        var(--service-section) 0;

}


.service-process-header {

    max-width:
        760px;

    margin-bottom:
        65px;

}


.service-process-title {

    margin:
        18px 0 0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            34px,
            4.8vw,
            66px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

}


.service-process-description {

    margin-top:
        22px;

    color:
        var(--service-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.service-process-list {

    border-top:
        1px solid var(--service-border);

}


.service-process-item {

    display:
        grid;

    grid-template-columns:
        85px
        minmax(230px, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        30px;

    align-items:
        start;

    padding:
        32px 0;

    border-bottom:
        1px solid var(--service-border);

}


.service-process-number {

    color:
        var(--service-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


.service-process-item h3 {

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        19px;

    line-height:
        1.15;

    letter-spacing:
        -0.025em;

}


.service-process-item p {

    max-width:
        520px;

    margin:
        0;

    color:
        var(--service-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* ============================================================
   17. ARCHITECTURE / SYSTEM VISUAL
   ============================================================ */

.service-architecture {

    padding:
        110px 0;

    background:
        var(--service-blue-soft);

}


.service-architecture-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        55px;

}


.service-architecture-title {

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            32px,
            4vw,
            58px
        );

    line-height:
        0.96;

    letter-spacing:
        -0.05em;

}


.service-architecture-description {

    max-width:
        390px;

    color:
        var(--service-muted);

    font-size:
        12px;

    line-height:
        1.75;

}


.service-architecture-map {

    position:
        relative;

    min-height:
        470px;

    border:
        1px solid var(--service-blue-line);

    background:
        var(--service-white);

    overflow:
        hidden;

}


.service-architecture-map::before,
.service-architecture-map::after {

    content:
        "";

    position:
        absolute;

    background:
        var(--service-blue-line);

}


.service-architecture-map::before {

    left:
        12%;

    right:
        12%;

    top:
        50%;

    height:
        1px;

}


.service-architecture-map::after {

    top:
        12%;

    bottom:
        12%;

    left:
        50%;

    width:
        1px;

}


.service-architecture-node {

    position:
        absolute;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        145px;

    min-height:
        75px;

    padding:
        12px;

    border:
        1px solid var(--service-blue-line);

    background:
        var(--service-white);

    color:
        var(--service-black);

    font-size:
        10px;

    font-weight:
        700;

    text-align:
        center;

}


.service-architecture-node.is-core {

    width:
        170px;

    min-height:
        100px;

    border:
        2px solid var(--service-blue);

    background:
        var(--service-blue);

    color:
        var(--service-white);

}


.service-architecture-node.node-top {

    top:
        12%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.service-architecture-node.node-right {

    top:
        50%;

    right:
        8%;

    transform:
        translateY(-50%);

}


.service-architecture-node.node-bottom {

    bottom:
        12%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.service-architecture-node.node-left {

    top:
        50%;

    left:
        8%;

    transform:
        translateY(-50%);

}


.service-architecture-node.node-core {

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


/* ============================================================
   18. FEATURED SERVICE PANEL
   ============================================================ */

.service-feature-panel {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.7fr);

    min-height:
        430px;

    background:
        var(--service-black);

    color:
        var(--service-white);

}


.service-feature-panel-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        60px;

}


.service-feature-panel-label {

    color:
        var(--service-blue);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.service-feature-panel h2 {

    max-width:
        600px;

    margin:
        22px 0 0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            34px,
            4.5vw,
            60px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

}


.service-feature-panel p {

    max-width:
        560px;

    margin:
        22px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.63
        );

    font-size:
        13px;

    line-height:
        1.8;

}


.service-feature-panel-visual {

    position:
        relative;

    min-height:
        100%;

    background:
        var(--service-blue);

    overflow:
        hidden;

}


.service-feature-panel-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    top:
        50%;

    left:
        50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.40
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


.service-feature-panel-visual::after {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    top:
        50%;

    left:
        50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.60
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


/* ============================================================
   19. SERVICE RELATED LINKS
   ============================================================ */

.service-related {

    padding:
        100px 0;

}


.service-related-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        40px;

}


.service-related-title {

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            30px,
            4vw,
            52px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.05em;

}


.service-related-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;

}


.service-related-card {

    min-height:
        200px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        25px;

    border:
        1px solid var(--service-border);

    text-decoration:
        none;

    transition:
        border-color var(--service-transition),
        background-color var(--service-transition),
        transform var(--service-transition);

}


.service-related-card:hover {

    border-color:
        var(--service-blue-line);

    background:
        var(--service-blue-soft);

    transform:
        translateY(-3px);

}


.service-related-card-number {

    color:
        var(--service-blue);

    font-size:
        9px;

    font-weight:
        700;

}


.service-related-card h3 {

    margin:
        35px 0 0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        17px;

    line-height:
        1.15;

    letter-spacing:
        -0.025em;

}


.service-related-card p {

    margin:
        10px 0 0;

    color:
        var(--service-muted);

    font-size:
        13px;

    line-height:
        1.65;

}


.service-related-arrow {

    margin-top:
        20px;

    color:
        var(--service-blue);

    font-size:
        17px;

}


/* ============================================================
   20. SERVICE CTA
   ============================================================ */

.service-cta {

    padding:
        110px 0;

    background:
        var(--service-blue);

    color:
        var(--service-white);

}


.service-cta-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 0.45fr);

    gap:
        80px;

    align-items:
        end;

}


.service-cta h2 {

    max-width:
        850px;

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            40px,
            5.5vw,
            78px
        );

    line-height:
        0.92;

    letter-spacing:
        -0.065em;

}


.service-cta-copy {

    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

    font-size:
        13px;

    line-height:
        1.75;

}


.service-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        25px;

}


.service-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 22px;

    background:
        var(--service-white);

    color:
        var(--service-black);

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform var(--service-transition);

}


.service-cta-button:hover {

    transform:
        translateY(-2px);

}


.service-cta-button--outline {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

    background:
        transparent;

    color:
        var(--service-white);

}


.service-cta-button--outline:hover {

    border-color:
        var(--service-white);

}


/* ============================================================
   21. SERVICE BREADCRUMBS
   ============================================================ */

.service-breadcrumbs {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        20px;

}


.service-breadcrumbs a {

    color:
        var(--service-muted);

    font-size:
        10px;

    font-weight:
        600;

    text-decoration:
        none;

}


.service-breadcrumbs a:hover {

    color:
        var(--service-blue);

}


.service-breadcrumb-separator {

    color:
        var(--service-soft);

    font-size:
        10px;

}


.service-breadcrumb-current {

    color:
        var(--service-black);

    font-size:
        10px;

    font-weight:
        700;

}


/* ============================================================
   22. SERVICE STATEMENT
   ============================================================ */

.service-statement {

    padding:
        120px 0;

}


.service-statement-inner {

    max-width:
        1120px;

}


.service-statement p {

    margin:
        0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            32px,
            5vw,
            72px
        );

    line-height:
        1.02;

    letter-spacing:
        -0.06em;

}


.service-statement p strong {

    color:
        var(--service-blue);

    font-weight:
        700;

}


/* ============================================================
   23. SERVICE DIVIDER
   ============================================================ */

.service-divider {

    width:
        100%;

    height:
        1px;

    background:
        var(--service-border);

}


.service-divider--blue {

    background:
        var(--service-blue);

}


/* ============================================================
   24. SERVICE ACCESSIBILITY
   ============================================================ */

.service-page a:focus-visible,
.service-page button:focus-visible {

    outline:
        3px solid
        rgba(
            30,
            109,
            187,
            0.30
        );

    outline-offset:
        4px;

}


/* ============================================================
   25. TABLET — <= 1100px
   ============================================================ */

@media (max-width: 1100px) {

    :root {

        --service-gutter:
            32px;

        --service-section:
            90px;

    }


    .service-hero--split
    .service-hero-inner {

        gap:
            50px;

    }


    .service-intro-grid {

        gap:
            55px;

    }


    .service-capability-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .service-outcome-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .service-outcome {

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.16
            );

    }


    .service-outcome:nth-child(2) {

        border-right:
            0;

    }


    .service-related-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* ============================================================
   26. TABLET — <= 900px
   ============================================================ */

@media (max-width: 900px) {

    .service-hero {

        min-height:
            540px;

    }


    .service-hero--split {

        min-height:
            auto;

    }


    .service-hero--split
    .service-hero-inner {

        grid-template-columns:
            1fr;

        padding-block:
            90px;

    }


    .service-hero-visual {

        min-height:
            340px;

    }


    .service-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .service-capabilities-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

    }


    .service-capability-row {

        grid-template-columns:
            55px
            minmax(190px, 0.75fr)
            minmax(0, 1.25fr)
            25px;

        gap:
            18px;

    }


    .service-outcomes-header {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


    .service-process-item {

        grid-template-columns:
            55px
            1fr;

    }


    .service-process-item p {

        grid-column:
            2;

    }


    .service-architecture-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

    }


    .service-feature-panel {

        grid-template-columns:
            1fr;

    }


    .service-feature-panel-visual {

        min-height:
            300px;

    }


    .service-cta-inner {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }

}


/* ============================================================
   27. MOBILE — <= 700px
   ============================================================ */

@media (max-width: 700px) {

    :root {

        --service-gutter:
            20px;

        --service-section:
            68px;

    }


    .service-container,
    .service-reading-container {

        width:
            calc(
                100% -
                (var(--service-gutter) * 2)
            );

    }


    .service-hero {

        min-height:
            460px;

    }


    .service-hero-inner {

        padding:
            80px 0 55px;

    }


    .service-hero h1 {

        font-size:
            clamp(
                44px,
                12vw,
                66px
            );

    }


    .service-hero-description {

        font-size:
            13px;

    }


    .service-hero-meta {

        gap:
            18px;

    }


    .service-hero--split
    .service-hero-inner {

        padding-block:
            70px;

    }


    .service-hero-visual {

        min-height:
            270px;

    }


    .service-hero-visual-frame {

        inset:
            20px 0 0 20px;

    }


    .service-intro {

        padding-block:
            var(--service-section);

    }


    .service-intro-copy {

        font-size:
            14px;

    }


    .service-capabilities {

        padding-block:
            70px;

    }


    .service-capability-grid {

        grid-template-columns:
            1fr;

    }


    .service-capability-card {

        min-height:
            200px;

        padding:
            24px;

    }


    .service-capability-number {

        margin-bottom:
            40px;

    }


    .service-capability-list {

        border-top:
            1px solid var(--service-border);

    }


    .service-capability-row {

        grid-template-columns:
            38px
            minmax(0, 1fr)
            22px;

        gap:
            12px;

        min-height:
            auto;

        padding:
            20px 0;

    }


    .service-capability-row-description {

        grid-column:
            2;

    }


    .service-capability-row-arrow {

        grid-column:
            3;

        grid-row:
            1;

    }


    .service-outcomes {

        padding-block:
            75px;

    }


    .service-outcome-grid {

        grid-template-columns:
            1fr;

    }


    .service-outcome {

        min-height:
            150px;

        border-right:
            0;

    }


    .service-process {

        padding-block:
            70px;

    }


    .service-process-item {

        grid-template-columns:
            40px
            1fr;

        gap:
            15px;

        padding:
            25px 0;

    }


    .service-process-item p {

        grid-column:
            2;

    }


    .service-architecture {

        padding-block:
            70px;

    }


    .service-architecture-map {

        min-height:
            370px;

    }


    .service-architecture-node {

        width:
            105px;

        min-height:
            60px;

        font-size:
            9px;

    }


    .service-architecture-node.is-core {

        width:
            125px;

        min-height:
            78px;

    }


    .service-feature-panel-content {

        padding:
            42px 25px;

    }


    .service-feature-panel-visual {

        min-height:
            240px;

    }


    .service-feature-panel-visual::before {

        width:
            260px;

        height:
            260px;

    }


    .service-feature-panel-visual::after {

        width:
            135px;

        height:
            135px;

    }


    .service-related {

        padding-block:
            70px;

    }


    .service-related-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .service-related-grid {

        grid-template-columns:
            1fr;

    }


    .service-cta {

        padding-block:
            75px;

    }


    .service-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .service-cta-button {

        width:
            100%;

    }


    .service-statement {

        padding-block:
            75px;

    }

}


/* ============================================================
   28. SMALL MOBILE — <= 480px
   ============================================================ */

@media (max-width: 480px) {

    .service-hero-watermark {

        right:
            -20px;

        bottom:
            -20px;

        font-size:
            150px;

    }


    .service-hero h1 {

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

    }


    .service-capability-card {

        min-height:
            185px;

    }


    .service-architecture-node {

        width:
            92px;

        padding:
            8px;

        font-size:
            8px;

    }


    .service-architecture-node.is-core {

        width:
            110px;

    }


    .service-architecture-node.node-left {

        left:
            3%;

    }


    .service-architecture-node.node-right {

        right:
            3%;

    }


    .service-feature-panel-content {

        padding:
            35px 20px;

    }

}


/* ============================================================
   29. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .service-capability-card,
    .service-capability-arrow,
    .service-capability-row-arrow,
    .service-related-card,
    .service-cta-button {

        transition:
            none !important;

    }

}


/* ============================================================
   30. PRINT
   ============================================================ */

@media print {

    .service-hero,
    .service-intro,
    .service-capabilities,
    .service-outcomes,
    .service-process,
    .service-architecture,
    .service-related,
    .service-cta {

        break-inside:
            avoid;

    }


    .service-cta,
    .service-outcomes {

        background:
            #FFFFFF !important;

        color:
            #000000 !important;

    }

}