/* =========================================================
   SERVICES PAGE
   MSRP
========================================================= */


/* =========================================================
   HERO
========================================================= */

.services-hero {
    position: relative;
    overflow: hidden;
    padding:
        150px
        0
        100px;
    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 55%,
            #eef6fb 100%
        );
}

.services-hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    top: -200px;
    border-radius: 50%;
    background:
        rgba(55, 130, 180, 0.08);
    filter: blur(5px);
}

.services-hero-grid {
    display: grid;
    grid-template-columns:
        1.05fr
        0.75fr;
    gap: 90px;
    align-items: center;
}

.services-hero-content {
    max-width: 680px;
}


/* MAIN HERO HEADING */

.services-hero-content h1 {
    font-family:
        "Playfair Display",
        serif;
    font-size: clamp(
        48px,
        5vw,
        72px
    );
    line-height: 1.05;
    font-weight: 600;
    color: #23445a;
    margin:
        18px
        0
        25px;
}

.services-hero-content h1 span {
    display: block;
    color: #23445a;
    font-style: normal;
}

.services-hero-content p {
    max-width: 590px;
    font-size: 17px;
    line-height: 1.75;
    color: #687887;
    margin-bottom: 35px;
}

.hero-mini-points {
    display: flex;
    gap: 35px;
}

.hero-mini-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #4d6273;
    font-weight: 600;
}

.hero-mini-points span {
    font-size: 11px;
    color: #28658d;
    letter-spacing: 1px;
}


/* HERO IMAGE */

.services-hero-visual {
    position: relative;
}

.hero-image-frame {
    width: 100%;
    max-width: 410px;
    margin-left: auto;
    overflow: hidden;
    border-radius: 22px;
    box-shadow:
        0 25px 60px
        rgba(30, 67, 91, 0.14);
}

.hero-image-frame img {
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    transition:
        transform 0.7s
        cubic-bezier(.2,.7,.2,1);
}

.hero-image-frame:hover img {
    transform: scale(1.05);
}

.hero-floating-note {
    position: absolute;
    left: 0;
    bottom: 30px;
    padding:
        17px
        22px;
    background: #ffffff;
    border:
        1px solid
        rgba(30, 70, 95, 0.1);
    border-radius: 12px;
    box-shadow:
        0 15px 35px
        rgba(25, 55, 75, 0.12);
}

.hero-floating-note span {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #28658d;
    margin-bottom: 5px;
}

.hero-floating-note strong {
    font-size: 13px;
    color: #1d3447;
}


/* =========================================================
   INTRO
========================================================= */

.service-intro {
    background: #ffffff;
}

.service-intro-grid {
    display: grid;
    grid-template-columns:
        0.35fr
        1fr;
    gap: 80px;
    align-items: start;
}

.service-intro-content {
    max-width: 850px;
}


/* INTRO HEADING */

.service-intro-content h2 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 46px;
    line-height: 1.18;
    color: #23445a;
    margin:
        0
        0
        22px;
}

.service-intro-content h2 em {
    color: #23445a;
    font-style: normal;
}

.service-intro-content p {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.75;
    color: #6b7c89;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions-section {
    padding:
        20px
        0
        100px;
    background: #ffffff;
}

.solution-card {
    position: relative;
    display: grid;
    grid-template-columns:
        1.35fr
        0.65fr;
    gap: 70px;
    align-items: center;
    min-height: 430px;
    padding:
        75px
        0;
    border-bottom:
        1px solid
        rgba(25, 65, 90, 0.1);
}

.solution-card.reverse {
    grid-template-columns:
        0.65fr
        1.35fr;
}

.solution-card.reverse
.solution-content {
    order: 2;
}

.solution-card.reverse
.solution-image {
    order: 1;
}

.solution-content {
    max-width: 690px;
}

.solution-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.solution-number {
    font-size: 12px;
    font-weight: 700;
    color: #28658d;
    letter-spacing: 2px;
}

.solution-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #82909b;
}


/* SOLUTION HEADINGS */

.solution-content h2 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 42px;
    line-height: 1.13;
    color: #23445a;
    margin:
        0
        0
        20px;
}

.solution-content h2 em {
    color: #23445a;
    font-style: normal;
}

.solution-content p {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.75;
    color: #687986;
    margin-bottom: 24px;
}


/* =========================================================
   POINTS
========================================================= */

.solution-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
}

.solution-points span {
    padding:
        8px
        13px;
    border:
        1px solid
        rgba(32, 76, 103, 0.13);
    border-radius: 30px;
    font-size: 11px;
    color: #506674;
    background: #fbfdff;
    transition:
        all 0.3s ease;
}

.solution-points span:hover {
    transform:
        translateY(-3px);
    border-color:
        rgba(40, 101, 141, 0.35);
    box-shadow:
        0 8px 20px
        rgba(40, 101, 141, 0.08);
}


/* =========================================================
   SOLUTION LINK
========================================================= */

.solution-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1e577b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    position: relative;
}

.solution-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 28px;
    height: 1px;
    background: #28658d;
    transition:
        width 0.35s ease;
}

.solution-link span {
    transition:
        transform 0.35s ease;
}

.solution-link:hover::after {
    width: 100%;
}

.solution-link:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   SOLUTION IMAGE
========================================================= */

.solution-image {
    position: relative;
    width: 100%;
    max-width: 330px;
    justify-self: end;
    overflow: visible;
    border-radius: 18px;
}

.solution-card.reverse
.solution-image {
    justify-self: start;
}

.solution-image img {
    display: block;
    width: 100%;
    height: 265px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow:
        0 20px 45px
        rgba(25, 60, 80, 0.13);
    transition:
        transform 0.5s
        cubic-bezier(.2,.7,.2,1),
        box-shadow 0.5s ease;
}

.solution-image:hover img {
    box-shadow:
        0 28px 60px
        rgba(25, 60, 80, 0.19);
}

.image-number {
    position: absolute;
    z-index: 2;
    top: -15px;
    right: -15px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border:
        1px solid
        rgba(40, 101, 141, 0.15);
    color: #28658d;
    font-size: 11px;
    font-weight: 700;
    box-shadow:
        0 10px 25px
        rgba(20, 50, 70, 0.1);
    transition:
        transform 0.4s ease;
}

.solution-image:hover
.image-number {
    transform:
        rotate(360deg);
}


/* =========================================================
   QUESTIONS
========================================================= */

.questions-section {
    background:
        #f5f9fc;
}

.questions-heading {
    max-width: 750px;
    margin-bottom: 50px;
}


/* QUESTIONS HEADING */

.questions-heading h2 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 45px;
    line-height: 1.15;
    color: #23445a;
    margin-top: 15px;
}

.questions-heading h2 em {
    color: #23445a;
    font-style: normal;
}

.questions-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 15px;
}

.question-card {
    position: relative;
    min-height: 230px;
    padding: 28px;
    background: #ffffff;
    border:
        1px solid
        rgba(30, 70, 95, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.question-card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #28658d;
    transform:
        scaleX(0);
    transform-origin: left;
    transition:
        transform 0.4s ease;
}

.question-card:hover {
    transform:
        translateY(-8px);
    border-color:
        rgba(40, 101, 141, 0.2);
    box-shadow:
        0 20px 45px
        rgba(25, 65, 90, 0.1);
}

.question-card:hover::before {
    transform:
        scaleX(1);
}

.question-card span {
    font-size: 11px;
    color: #28658d;
    letter-spacing: 2px;
    font-weight: 700;
}

.question-card h3 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 22px;
    line-height: 1.2;
    color: #23445a;
    margin:
        30px
        0
        12px;
}

.question-card p {
    font-size: 13px;
    line-height: 1.65;
    color: #70808d;
}

.question-card b {
    position: absolute;
    right: 25px;
    bottom: 23px;
    color: #28658d;
    transition:
        transform 0.3s ease;
}

.question-card:hover b {
    transform:
        translateX(5px);
}


/* =========================================================
   PROCESS
========================================================= */

.service-process {
    padding:
        110px
        0;
    background: #ffffff;
}

.process-heading {
    text-align: center;
    margin-bottom: 70px;
}


/* PROCESS HEADING */

.process-heading h2 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 46px;
    color: #23445a;
    margin-top: 15px;
}

.process-heading h2 em {
    color: #23445a;
    font-style: normal;
}

.process-track {
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
    position: relative;
}

.process-track::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 1px;
    background:
        rgba(40, 101, 141, 0.18);
}

.process-step {
    position: relative;
    text-align: center;
    z-index: 1;
}

.process-circle {
    width: 55px;
    height: 55px;
    margin:
        0
        auto
        22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border:
        1px solid
        rgba(40, 101, 141, 0.25);
    color: #28658d;
    font-size: 11px;
    font-weight: 700;
    transition:
        all 0.4s ease;
}

.process-step:hover
.process-circle {
    background: #28658d;
    color: #ffffff;
    transform:
        scale(1.1);
    box-shadow:
        0 10px 25px
        rgba(40, 101, 141, 0.2);
}

.process-step h3 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 20px;
    color: #23445a;
    margin-bottom: 7px;
}

.process-step p {
    font-size: 12px;
    color: #7a8892;
}


/* =========================================================
   CTA
========================================================= */

.services-cta {
    padding:
        90px
        0;
    background:
        linear-gradient(
            135deg,
            #173b55,
            #235d7d
        );
}

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

.cta-content {
    max-width: 700px;
}

.services-cta
.small-label {
    color: rgba(255,255,255,0.65);
}

.cta-content h2 {
    font-family:
        "Playfair Display",
        serif;
    font-size: 48px;
    line-height: 1.1;
    color: #ffffff;
    margin:
        14px
        0
        18px;
}

.cta-content h2 em {
    color: #ffffff;
    font-style: normal;
}

.cta-content p {
    max-width: 580px;
    color:
        rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.7;
}

.cta-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding:
        15px
        23px;
    background: #ffffff;
    color: #1c4e6d;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition:
        all 0.35s ease;
}

.cta-button span {
    transition:
        transform 0.35s ease;
}

.cta-button:hover {
    transform:
        translateY(-4px);
    box-shadow:
        0 15px 30px
        rgba(0,0,0,0.15);
}

.cta-button:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;
    transform:
        translateY(35px);
    transition:
        opacity 0.7s ease,
        transform 0.7s
        cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
    opacity: 1;
    transform:
        translateY(0);
}


/* =========================================================
   STAGGERED CARDS
========================================================= */

.solution-card:nth-child(2) {
    transition-delay: 0.05s;
}

.solution-card:nth-child(3) {
    transition-delay: 0.1s;
}

.solution-card:nth-child(4) {
    transition-delay: 0.15s;
}

.solution-card:nth-child(5) {
    transition-delay: 0.2s;
}

.solution-card:nth-child(6) {
    transition-delay: 0.25s;
}


/* =========================================================
   HEADER SCROLL
========================================================= */

.site-header.scrolled {
    box-shadow:
        0 8px 25px
        rgba(20, 50, 70, 0.08);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .services-hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .services-hero-visual {
        max-width: 500px;
    }

    .hero-image-frame {
        margin-left: 0;
    }

    .service-intro-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .solution-card,
    .solution-card.reverse {
        grid-template-columns:
            1fr
            0.7fr;
        gap: 45px;
    }

    .solution-content h2 {
        font-size: 35px;
    }

    .questions-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 700px) {

    .services-hero {
        padding:
            120px
            0
            70px;
    }

    .services-hero-content h1 {
        font-size: 45px;
    }

    .hero-mini-points {
        gap: 18px;
        flex-wrap: wrap;
    }

    .hero-image-frame img {
        height: 300px;
    }

    .hero-floating-note {
        left: 15px;
        bottom: 15px;
    }

    .service-intro-content h2 {
        font-size: 36px;
    }

    .solution-card,
    .solution-card.reverse {
        grid-template-columns: 1fr;
        gap: 35px;
        padding:
            60px
            0;
    }

    .solution-card.reverse
    .solution-content {
        order: 1;
    }

    .solution-card.reverse
    .solution-image {
        order: 2;
    }

    .solution-image,
    .solution-card.reverse
    .solution-image {
        max-width: 100%;
        justify-self: stretch;
    }

    .solution-image img {
        height: 260px;
    }

    .solution-content h2 {
        font-size: 34px;
    }

    .questions-heading h2 {
        font-size: 36px;
    }

    .questions-grid {
        grid-template-columns: 1fr;
    }

    .process-track {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .process-track::before {
        display: none;
    }

    .process-heading h2 {
        font-size: 38px;
    }

    .services-cta {
        padding:
            70px
            0;
    }

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

    .cta-content h2 {
        font-size: 39px;
    }
}

/* =========================================================
   OUR SERVICES — DISTINCT HERO LABEL
========================================================= */

.services-hero-content .small-label {
    display: block !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 5px !important;
    line-height: 1 !important;

    color: #28868dca !important;

    margin: 0 0 30px 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
}

.services-hero-content .small-label::before,
.services-hero-content .small-label::after {
    display: none !important;
    content: none !important;
}