/* ============================================================
   ICR EOR PAGE 1112 MOTION
   ============================================================ */

.page-id-1112 .icr-hero-motion {
    position: relative !important;
    overflow: hidden !important;
    min-height: 610px;
    isolation: isolate;
}

/* Keep hero copy readable and leave space for visual */

.page-id-1112 .icr-hero-motion > p,
.page-id-1112 .icr-hero-motion > h1,
.page-id-1112 .icr-hero-motion > a {
    position: relative;
    z-index: 4;
    max-width: 700px;
}

.page-id-1112 .icr-hero-motion > h1 {
    max-width: 610px;
}

.page-id-1112 .icr-hero-motion > p {
    max-width: 710px;
}


/* ============================================================
   SUBTLE HERO BACKGROUND MOVEMENT
   ============================================================ */

.page-id-1112 .icr-hero-motion::before,
.page-id-1112 .icr-hero-motion::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}

.page-id-1112 .icr-hero-motion::before {
    width: 460px;
    height: 460px;
    right: -80px;
    top: -100px;
    background:
        radial-gradient(
            circle,
            rgba(47, 111, 237, 0.19) 0%,
            rgba(47, 111, 237, 0.07) 45%,
            rgba(47, 111, 237, 0) 72%
        );
    animation: icrEorGlow 8s ease-in-out infinite;
}

.page-id-1112 .icr-hero-motion::after {
    width: 280px;
    height: 280px;
    right: 290px;
    bottom: -150px;
    border: 1px solid rgba(104, 156, 240, 0.14);
    animation: icrEorOrb 14s ease-in-out infinite;
}


/* ============================================================
   EOR RELATIONSHIP VISUAL
   ============================================================ */

.page-id-1112 .icr-eor-visual {
    position: absolute;
    z-index: 3;

    width: 470px;
    height: 455px;

    right: 5.5%;
    top: 50%;

    transform: translateY(-50%);
}


/* vertical route */

.page-id-1112 .icr-eor-route {
    position: absolute;
    left: 50%;
    top: 65px;
    bottom: 70px;
    width: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(73, 132, 229, 0.10),
            rgba(83, 147, 247, 0.72),
            rgba(73, 132, 229, 0.10)
        );
}


/* moving light */

.page-id-1112 .icr-eor-flow-dot {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 80px;

    width: 8px;
    height: 8px;

    margin-left: -3px;

    border-radius: 50%;

    background: #6ea2fa;

    box-shadow:
        0 0 10px rgba(110,162,250,.9),
        0 0 24px rgba(110,162,250,.55);

    animation: icrEorFlow 4.2s ease-in-out infinite;
}


/* main cards */

.page-id-1112 .icr-eor-box {
    position: absolute;

    left: 50%;

    width: 235px;
    min-height: 79px;

    padding: 17px 20px;

    transform: translateX(-50%);

    border: 1px solid rgba(136, 175, 235, 0.27);
    border-radius: 13px;

    background: rgba(15, 38, 68, 0.91);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(8px);

    color: #fff;
}

.page-id-1112 .icr-eor-box strong {
    display: block;
    color: #fff;

    font-size: 15px;
    line-height: 1.3;

    margin-bottom: 5px;
}

.page-id-1112 .icr-eor-box span {
    display: block;

    color: #9db3ce;

    font-size: 12px;
    line-height: 1.35;
}

.page-id-1112 .icr-eor-company {
    top: 20px;
    animation: icrFloatA 5.5s ease-in-out infinite;
}

.page-id-1112 .icr-eor-icr {
    top: 177px;

    width: 260px;

    padding: 22px;

    border-color: rgba(101, 157, 246, 0.56);

    background:
        linear-gradient(
            145deg,
            rgba(32, 77, 139, .96),
            rgba(13, 41, 76, .97)
        );

    box-shadow:
        0 20px 65px rgba(0,0,0,.30),
        0 0 35px rgba(44,111,221,.13);

    animation: icrFloatB 6.3s ease-in-out infinite;
}

.page-id-1112 .icr-eor-icr strong {
    font-size: 19px;
}

.page-id-1112 .icr-eor-employee {
    bottom: 10px;
    animation: icrFloatA 5.8s ease-in-out infinite reverse;
}


/* service chips */

.page-id-1112 .icr-eor-chip {
    position: absolute;
    z-index: 5;

    min-width: 115px;

    padding: 12px 15px;

    border: 1px solid rgba(107, 151, 219, 0.23);
    border-radius: 10px;

    background: rgba(9, 29, 55, .92);

    box-shadow: 0 12px 30px rgba(0,0,0,.20);

    color: #cbd9ea;

    font-size: 12px;
    font-weight: 600;

    text-align: center;
}

.page-id-1112 .icr-chip-employment {
    left: 0;
    top: 201px;

    animation: icrChipLeft 6s ease-in-out infinite;
}

.page-id-1112 .icr-chip-payroll {
    right: 0;
    top: 179px;

    animation: icrChipRight 5.4s ease-in-out infinite;
}

.page-id-1112 .icr-chip-hr {
    right: 17px;
    top: 252px;

    animation: icrChipRight 6.4s ease-in-out infinite reverse;
}


/* little horizontal connectors */

.page-id-1112 .icr-eor-connector {
    position: absolute;

    top: 228px;

    width: 90px;
    height: 1px;

    opacity: .65;

    background:
        linear-gradient(
            90deg,
            rgba(71,137,239,0),
            rgba(87,151,250,.85),
            rgba(71,137,239,0)
        );

    background-size: 200% 100%;

    animation: icrConnector 3s linear infinite;
}

.page-id-1112 .icr-connector-left {
    left: 99px;
}

.page-id-1112 .icr-connector-right {
    right: 103px;
}


/* ============================================================
   SCROLL REVEALS
   ============================================================ */

.page-id-1112 .icr-motion-section {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.page-id-1112 .icr-motion-section.icr-motion-visible {
    opacity: 1;
    transform: translateY(0);
}


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

.page-id-1112 .icr-hero-motion > a {
    transition:
        transform .22s ease,
        box-shadow .22s ease !important;
}

.page-id-1112 .icr-hero-motion > a:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 34px rgba(37, 99, 235, .28);
}


/* ============================================================
   CARD MICRO-INTERACTIONS
   ============================================================ */

.page-id-1112 .icr-motion-card {
    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.page-id-1112 .icr-motion-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 42px rgba(15, 31, 53, .10);
}


/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes icrEorGlow {
    0%, 100% {
        transform: translate3d(0,0,0) scale(.92);
        opacity: .55;
    }

    50% {
        transform: translate3d(-35px,30px,0) scale(1.08);
        opacity: .95;
    }
}

@keyframes icrEorOrb {
    0%,100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .30;
    }

    50% {
        transform: translate3d(35px,-22px,0) scale(1.14);
        opacity: .65;
    }
}

@keyframes icrEorFlow {
    0% {
        transform: translate3d(0,0,0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translate3d(0,280px,0);
        opacity: 0;
    }
}

@keyframes icrFloatA {
    0%,100% {
        transform: translate3d(-50%,0,0);
    }

    50% {
        transform: translate3d(-50%,-7px,0);
    }
}

@keyframes icrFloatB {
    0%,100% {
        transform: translate3d(-50%,0,0);
    }

    50% {
        transform: translate3d(-50%,6px,0);
    }
}

@keyframes icrChipLeft {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(5px,-5px,0);
    }
}

@keyframes icrChipRight {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(-5px,5px,0);
    }
}

@keyframes icrConnector {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


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

@media (max-width: 1120px) {

    .page-id-1112 .icr-eor-visual {
        right: 2%;
        transform: translateY(-50%) scale(.88);
        transform-origin: right center;
    }

    .page-id-1112 .icr-hero-motion > p,
    .page-id-1112 .icr-hero-motion > h1 {
        max-width: 55%;
    }
}


@media (max-width: 850px) {

    .page-id-1112 .icr-hero-motion {
        min-height: auto;
        padding-bottom: 55px !important;
    }

    .page-id-1112 .icr-hero-motion > p,
    .page-id-1112 .icr-hero-motion > h1 {
        max-width: 100%;
    }

    .page-id-1112 .icr-eor-visual {
        position: relative;

        right: auto;
        top: auto;

        margin: 28px auto 0;

        transform: none;

        width: min(470px, 100%);
    }
}


@media (max-width: 520px) {

    .page-id-1112 .icr-eor-visual {
        transform: scale(.82);
        transform-origin: top center;

        margin-bottom: -70px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .page-id-1112 .icr-eor-visual *,
    .page-id-1112 .icr-hero-motion::before,
    .page-id-1112 .icr-hero-motion::after {
        animation: none !important;
    }

    .page-id-1112 .icr-motion-section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .page-id-1112 .icr-motion-card,
    .page-id-1112 .icr-hero-motion > a {
        transition: none !important;
    }
}


/* ============================================================
   EOR SERVICE CARDS
   What IC Recruiting Can Handle
   ============================================================ */

.page-id-1112 .icr-service-color-card {
    position: relative;
    overflow: hidden;

    border: 1px solid transparent !important;
    border-top-width: 4px !important;

    box-shadow:
        0 8px 24px rgba(11, 31, 56, 0.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


/* Decorative glow */

.page-id-1112 .icr-service-color-card::after {
    content: "";

    position: absolute;
    width: 105px;
    height: 105px;

    right: -42px;
    top: -45px;

    border-radius: 50%;

    opacity: .55;

    pointer-events: none;
}


/* 1. Employment */

.page-id-1112 .icr-service-color-1 {
    background:
        linear-gradient(
            180deg,
            #edf5ff 0%,
            #f8fbff 58%,
            #ffffff 100%
        ) !important;

    border-color: #cbdfff !important;
    border-top-color: #2f6fed !important;
}

.page-id-1112 .icr-service-color-1::after {
    background: #bcd5ff;
}


/* 2. Payroll */

.page-id-1112 .icr-service-color-2 {
    background:
        linear-gradient(
            180deg,
            #edfafa 0%,
            #f7fdfc 58%,
            #ffffff 100%
        ) !important;

    border-color: #c5e9e5 !important;
    border-top-color: #218b83 !important;
}

.page-id-1112 .icr-service-color-2::after {
    background: #bce8e2;
}


/* 3. HR */

.page-id-1112 .icr-service-color-3 {
    background:
        linear-gradient(
            180deg,
            #f3f0ff 0%,
            #faf8ff 58%,
            #ffffff 100%
        ) !important;

    border-color: #ddd4ff !important;
    border-top-color: #7357d7 !important;
}

.page-id-1112 .icr-service-color-3::after {
    background: #d9cfff;
}


/* 4. Recruitment */

.page-id-1112 .icr-service-color-4 {
    background:
        linear-gradient(
            180deg,
            #fff6e9 0%,
            #fffaf3 58%,
            #ffffff 100%
        ) !important;

    border-color: #f2ddbc !important;
    border-top-color: #cc842c !important;
}

.page-id-1112 .icr-service-color-4::after {
    background: #f5ddb8;
}


/* Headings remain strong and readable */

.page-id-1112 .icr-service-color-card h3 {
    position: relative;
    z-index: 2;

    color: #0a1628 !important;
}


/* Body text */

.page-id-1112 .icr-service-color-card p {
    position: relative;
    z-index: 2;

    color: #46566b !important;
}


/* Hover */

.page-id-1112 .icr-service-color-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 42px rgba(12, 33, 60, .12);
}


/* Mobile */

@media (max-width: 680px) {

    .page-id-1112 .icr-service-color-card {
        border-top-width: 4px !important;
    }

}


/* Accessibility */

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

    .page-id-1112 .icr-service-color-card {
        transition: none !important;
    }

}



/* ============================================================
   RELATED SERVICES
   ============================================================ */

.page-id-1112 .icr-related-card {
    position: relative;
    overflow: hidden;

    border: 1px solid transparent !important;
    border-top-width: 5px !important;

    min-height: 270px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


/* Soft decorative circle */

.page-id-1112 .icr-related-card::before {
    content: "";

    position: absolute;
    width: 130px;
    height: 130px;

    right: -46px;
    top: -53px;

    border-radius: 50%;

    opacity: .55;

    pointer-events: none;
}


/* Small service marker */

.page-id-1112 .icr-related-card::after {
    position: absolute;

    top: 27px;
    left: 34px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    font-size: 17px;
    font-weight: 800;

    z-index: 2;
}


/* Push existing card content below icon */

.page-id-1112 .icr-related-card strong {
    position: relative;
    z-index: 2;

    display: block !important;

    margin-top: 62px !important;

    color: #0a1628 !important;
}

.page-id-1112 .icr-related-card span {
    position: relative;
    z-index: 2;

    color: #526176 !important;
}


/* --------------------------------------------
   STAFF LEASING
   -------------------------------------------- */

.page-id-1112 .icr-related-staff {
    background:
        linear-gradient(
            145deg,
            #edf5ff 0%,
            #f7fbff 57%,
            #ffffff 100%
        ) !important;

    border-color: #c9dcfb !important;
    border-top-color: #2f6fed !important;
}

.page-id-1112 .icr-related-staff::before {
    background: #c4d9ff;
}

.page-id-1112 .icr-related-staff::after {
    content: "01";

    color: #1f5bc6;
    background: #dbe9ff;
}


/* --------------------------------------------
   RECRUITMENT
   -------------------------------------------- */

.page-id-1112 .icr-related-recruitment {
    background:
        linear-gradient(
            145deg,
            #eaf9f7 0%,
            #f6fcfb 57%,
            #ffffff 100%
        ) !important;

    border-color: #c5e7e2 !important;
    border-top-color: #238b82 !important;
}

.page-id-1112 .icr-related-recruitment::before {
    background: #c0e7e1;
}

.page-id-1112 .icr-related-recruitment::after {
    content: "02";

    color: #176d66;
    background: #d6efec;
}


/* --------------------------------------------
   RPO
   -------------------------------------------- */

.page-id-1112 .icr-related-rpo {
    background:
        linear-gradient(
            145deg,
            #f2efff 0%,
            #faf8ff 57%,
            #ffffff 100%
        ) !important;

    border-color: #dad2fa !important;
    border-top-color: #7256d8 !important;
}

.page-id-1112 .icr-related-rpo::before {
    background: #d9cffd;
}

.page-id-1112 .icr-related-rpo::after {
    content: "03";

    color: #5c45ba;
    background: #e5dffd;
}


/* --------------------------------------------
   HOVER
   -------------------------------------------- */

.page-id-1112 .icr-related-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(11, 32, 60, .12);
}


/* Give heading a little more breathing room */

.page-id-1112 .icr-related-services h2 {
    margin-bottom: 34px !important;
}


/* Mobile */

@media (max-width: 680px) {

    .page-id-1112 .icr-related-card {
        min-height: 235px;
    }

}


/* Reduced motion */

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

    .page-id-1112 .icr-related-card {
        transition: none !important;
    }

}