.service-card > p,
.service-card .service-detail,
.service-card .service-outcome,
.service-card > .service-button{
    display:none;
}

.service-card.is-expanded > p,
.service-card.is-expanded .service-detail,
.service-card.is-expanded .service-outcome{
    display:block;
}

.service-card.is-expanded > .service-button{
    display:flex;
}
.service-mobile-toggle{
    position:absolute;
    right:14px;
   bottom:12px;
    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:5px 12px;
    border-radius:999px;

    background:rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.22);

    color:#fff;
font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.service-mobile-toggle:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-1px);
}

.service-mobile-toggle svg{
    width:12px;
    height:12px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;

    transform:rotate(90deg);
    transition:transform .3s ease;
}

.service-card.is-expanded .service-mobile-toggle svg{
    transform:rotate(-90deg);
}

.service-mobile-less{
    display:none;
}

.service-card.is-expanded .service-mobile-less{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:100%;
    margin-top:14px;
    padding:0;

    background:none;
    border:none;

    color:#4EF3FF;
    font-weight:800;

    cursor:pointer;
}


.service-card.is-expanded

.service-mobile-less svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;

    transform:rotate(90deg);
}


.services-page{
    position:relative;
    padding:20px 0 24px;
    background:
        radial-gradient(circle at 78% 18%, rgba(47,125,244,.35), transparent 30%),
        linear-gradient(180deg, #031022 0%, #020817 100%);
    overflow:hidden;
}
.service-mobile-less{
    display:none;
}

.services-hero{
    margin-bottom:34px;
}

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

.services-kicker{
    display:inline-flex;
    margin-bottom:16px;
    color:#4EF3FF;
    font-size:.86rem;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.services-hero-content h1{
    color:#fff;
    font-size:2.35rem;
    line-height:1.12;
    letter-spacing:-.8px;
    margin:0 0 18px;
}

.services-lead{
    color:#4EF3FF;
    font-size:1.05rem;
    line-height:1.6;
    font-weight:800;
    margin:0 0 16px;
    max-width:850px;
}

.services-summary{
    max-width:800px;
    color:#c7d4e8;
    font-size:1rem;
    line-height:1.75;
    margin:0;
}

.services-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
}

.service-card{
    position:relative;
    padding:26px;
    border-radius:12px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(109,169,255,.13);
    box-shadow:0 14px 38px rgba(0,0,0,.20);
    transition:.25s ease;
}

.service-card:hover{
    transform:translateY(-5px);
    border-color:rgba(78,243,255,.42);
    background:rgba(255,255,255,.065);
}


.service-card-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
}

.service-card-icon{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(78,243,255,.07);
    border:1px solid rgba(78,243,255,.24);
}

.service-card-icon svg,
.service-button svg{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}

.service-card-icon svg{
    width:24px;
    height:24px;
    stroke:#4EF3FF;
    stroke-width:1.8;
}


.service-card h2{
    margin:0;
    color:#fff;
letter-spacing:-.3px;
}

.service-card > p{
    color:#c5d1e4;
margin:0 0 22px;
}

.service-detail{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid rgba(78,243,255,.16);
}

.service-detail h3,
.service-outcome h3{
    margin:0 0 16px;
    color:#fff;
font-weight:800;
}

.service-steps{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.service-step{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:14px;
    padding:16px;
    border-radius:10px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(109,169,255,.12);
}

.service-step span{
    width:34px;
    height:34px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(78,243,255,.08);
    border:1px solid rgba(78,243,255,.22);
    color:#4EF3FF;
font-weight:900;
}

.service-step h4{
    margin:0 0 6px;
    color:#fff;
font-weight:800;
}

.service-step p{
    margin:0;
    color:#c5d1e4;
}

.service-outcome{
    margin-top:22px;
    padding:18px;
    border-radius:10px;
    background:rgba(78,243,255,.055);
    border:1px solid rgba(78,243,255,.18);
}

.service-outcome p{
    margin:0;
    color:#c7d4e8;
}

.service-button{

    align-items:center;
    justify-content:center;
    gap:10px;

    padding:12px 22px;
    border-radius:8px;
    background:#1f5fbf;
    color:#fff;
    text-decoration:none;
font-weight:800;
    transition:
        background .3s ease,
        transform .3s ease;


		   display:flex;
    width:fit-content;
    margin:22px 0 0 auto;
}

.service-button:hover{
    background:#174a96;
    color:#fff;
    transform:translateY(-2px);
}

.service-button svg{
    width:17px;
    height:17px;
    stroke:currentColor;
    stroke-width:2.2;
    transition:transform .3s ease;
}

.service-button:hover svg{
    transform:translateX(3px);
}
.services-banner-wrap{
    margin-bottom:20px;
}


.services-banner-content h1{
    margin:0 0 10px;
    color:#ffffff;
letter-spacing:-.6px;
    font-weight:800;
}

.services-banner-content p{
    margin:0;
    color:#d7e6ff;
    font-size:.95rem;
    line-height:1.5;
}

.services-banner-content p strong{
    color:#4EF3FF;
    font-weight:800;
}

.services-banner-content p span{
    color:#d7e6ff;
    font-size:.9rem;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    margin:0 6px;
}


.service-card-banner-content .service-label{
    margin-bottom:4px;
}


/* laptop */
@media (max-width:1200px) and (min-width:701px){

    .services-page{
        padding:40px 0 24px;
    }

    .services-hero{
        margin-bottom:26px;
    }

    .services-kicker{
        font-size:.76rem;
        margin-bottom:12px;
    }

    .services-hero-content h1{
        font-size:1.75rem;
        line-height:1.18;
        letter-spacing:-.4px;
        margin-bottom:12px;
    }

    .services-lead{
        font-size:.92rem;
        line-height:1.55;
    }

    .services-summary{
        font-size:.9rem;
        line-height:1.65;
        max-width:680px;
    }

    .services-grid{
        gap:18px;
    }

    .service-card{
        padding:20px;
        border-radius:10px;
    }

    .service-card-header{
        gap:12px;
        margin-bottom:16px;
    }

    .service-card-icon{
        width:34px;
        height:34px;
        border-radius:8px;
    }

    .service-card-icon svg{
        width:18px;
        height:18px;
    }

    .service-label{margin-bottom:4px;
    }


    .service-card > p{margin-bottom:18px;
    }

    .service-detail{
        margin-top:18px;
        padding-top:16px;
    }

    .service-detail h3,
    .service-outcome h3{margin-bottom:12px;
    }

    .service-steps{
        gap:12px;
    }

    .service-step{
        grid-template-columns:34px 1fr;
        gap:10px;
        padding:14px;
    }

    .service-step span{
        width:28px;
        height:28px;
        border-radius:7px;
}

    .service-step h4{margin-bottom:5px;
    }


    .service-outcome{
        margin-top:18px;
        padding:14px;
    }


    .service-button{
        padding:10px 18px;
gap:8px;
    }

    .service-button svg{
        width:15px;
        height:15px;
    }


	    .services-banner-wrap{
        margin-bottom:14px;
    }


    .services-banner-content p{
        font-size:.78rem;
    }

	.service-card-banner-content h2{
	margin-bottom:0px;
}

}

/* mobile */
@media (max-width:700px){

    .services-page{
        padding:38px 0 16px;
    }

    .services-hero{
        margin-bottom:24px;
    }

    .services-hero-content{
        max-width:100%;
    }

    .services-kicker{
        font-size:.72rem;
        margin-bottom:12px;
    }

    .services-hero-content h1{
        font-size:1.75rem;
        line-height:1.18;
        letter-spacing:-.4px;
        margin-bottom:14px;
    }

    .services-lead{
        font-size:.95rem;
        line-height:1.6;
        margin-bottom:14px;
    }

    .services-summary{
        font-size:.9rem;
        line-height:1.75;
        max-width:100%;
    }

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

    .service-card{border-radius:10px;
    }

    .service-card:hover{
        transform:none;
    }

    .service-card-header{
        gap:12px;
        margin-bottom:16px;
    }

    .service-card-icon{
        width:34px;
        height:34px;
        border-radius:8px;
    }

    .service-card-icon svg{
        width:18px;
        height:18px;
    }

    .service-label{margin-bottom:4px;
    }


    .service-detail{
        margin-top:18px;
        padding-top:18px;
    }

    .service-detail h3,
    .service-outcome h3{margin-bottom:14px;
    }

    .service-steps{
        gap:14px;
    }

    .service-step{
        grid-template-columns:36px 1fr;
        gap:12px;
        padding:15px;
    }

    .service-step span{
        width:30px;
        height:30px;
        border-radius:8px;
}


    .service-outcome{
        margin-top:18px;
        padding:16px;
    }


    .service-button{

				   display:flex;
    width:fit-content;
    margin:22px 0 0 auto;


        padding:12px 18px;
}

    .service-button svg{
        width:15px;
        height:15px;
    }


	.services-banner-wrap{
        margin-bottom:14px;
        padding:0 6px;
    }


    .services-banner-content p{
    font-size:.74rem;
    line-height:1.45;
    }

.service-card-banner-content .service-label{
    top:16px;
    left:20px;
}

.service-card-banner-content h2{
    top:50%;
    left:20px;
    transform:translateY(-50%);
    font-size:1rem;
    line-height:1.18;
    max-width:68%;
}
.services-banner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(2,8,23,.88) 0%,
            rgba(2,8,23,.78) 28%,
            rgba(2,8,23,.45) 55%,
            rgba(2,8,23,.10) 100%
        );
}


.services-grid{
        gap:10px;
        padding:0 6px;
    }

    .service-card{
        padding:12px;
    }


.service-card-banner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:linear-gradient(
        90deg,
        rgba(2,8,23,.88) 0%,
        rgba(2,8,23,.78) 28%,
        rgba(2,8,23,.45) 55%,
        rgba(2,8,23,.10) 100%
    );
}


	    main:has(.services-page){
        min-height:auto;
        flex:0 0 auto;
    }

    .services-page{
        min-height:0 !important;
        padding-bottom:16px !important;
    }
}


/* =====================================================
   SERVICE CARD BANNERS — SHOW COMPLETE IMAGE
   ===================================================== */

.service-card-banner{
    position:relative;
    width:100%;

    /* Allow the image to determine the correct height */
    aspect-ratio:auto;

    border-radius:10px;
    overflow:hidden;


    background:#020817;
}


/* Show the entire banner without cropping */
.service-card-banner img{
    position:relative;
    width:100%;
    height:auto;

    display:block;

    object-fit:contain;
    object-position:center;

    border-radius:inherit;
}


/* Overlay covering the complete image */
.service-card-banner-content{
    position:absolute;
    inset:0;
    z-index:2;

    padding:0;
    pointer-events:none;
}


/* HTML title positioned at the top-left */
.service-card-banner-content h2{
    position:absolute;

    top:38px;
    left:20px;

    max-width:65%;
    margin:0;

    color:#4EF3FF;
    opacity:1;

    font-size:1.35rem;
    line-height:1.2;
    letter-spacing:-.3px;

    transform:none;
}

/* =====================================================
   SERVICES HERO BANNER
   ===================================================== */

.services-banner{
    position:relative;
    width:100%;
    height:340px;

    border-radius:12px;
    overflow:hidden;

    /* Matches the dark edges of the image */
    background:#06162f;
}

.services-banner > img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    /*
       Keep the important upper and lower portions visible.
       Slightly prioritize the upper area so the lighthouse
       is not cut on wide desktop screens.
    */
    object-position:center 42%;

    display:block;
    border-radius:inherit;
}
@media (min-width:1201px){

    .services-banner{
        height:360px;
    }

    .services-banner > img{
        object-position:center 40%;
    }

}
@media (max-width:700px){

    .services-banner{
        height:200px;
    }

}


/* =====================================================
   SERVICES HERO CONTENT
   ===================================================== */

.services-banner-content{
    position:absolute;
    inset:0 auto 0 0;
    z-index:2;

    width:50%;
    height:100%;

    padding:32px 42px 24px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    color:#fff;
}


/* =====================================================
   TITLE AND SUBTITLE
   ===================================================== */

.services-banner-copy{
    max-width:530px;
}

.services-banner-content h1{
    margin:0 0 12px;

    color:#fff;
letter-spacing:-.6px;
    font-weight:800;
}

.services-banner-subtitle{
    max-width:465px;
    margin:0;

    color:#d6e0ef;
font-weight:500;
}


/* =====================================================
   BENEFIT ICON ROW
   ===================================================== */


/* Professional SVG icon container */


/* Benefit label */

@media (min-width:1201px){

    .services-banner-content{
        width:50%;
        padding:34px 48px 25px;
    }


    .services-banner-subtitle{
        max-width:470px;
}


}

@media (max-width:1200px) and (min-width:701px){

    .services-banner-content{
        width:52%;
        padding:22px 28px 17px;
    }

    .services-banner-content h1{
        margin-bottom:8px;
}

    .services-banner-subtitle{
        max-width:370px;
}


}

@media (max-width:700px){

    .services-banner-content{
        width:74%;
        padding:16px 16px 12px;
        justify-content:center;
    }

    .services-banner-content h1{
        margin-bottom:6px;
}

    .services-banner-subtitle{
        max-width:280px;
}


}

/* =====================================================
   CARD TITLE POSITION — LAPTOP ONLY
   ===================================================== */


@media (min-width:701px) and (max-width:1600px){

    .services-page .service-card-banner-content h2{
        top:22px;
        left:20px;
        transform:none;
    }

}


/* =====================================================
   HERO BENEFIT ICONS — REFINED
   ===================================================== */


/* Identical box dimensions and visual treatment */


/* =====================================================
   HERO BENEFIT ROW WITH CONNECTOR LINES
   ===================================================== */


/* Each icon block */


/* Connector line */


.service-card > p{
    padding-top:12px;
}

.service-card .service-card-banner-content h2{


    width:auto;
    max-width:none;

    padding:7px 16px;

    color:#4EF3FF;
font-weight:800;
    letter-spacing:-0.2px;

    background:rgba(2, 8, 23, .42);

    border:1.5px solid #4EF3FF;
    border-radius:9px;

    box-shadow:
        0 0 10px rgba(78,243,255,.12),
        inset 0 0 8px rgba(78,243,255,.04);

    white-space:nowrap;
    transform:none;
}
/* =====================================================
   SERVICES HERO — IMAGE BENEFITS
   ===================================================== */

.services-banner-benefits{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;

    gap:24px;

    width:auto;
    max-width:none;

    margin-top:60px;
}


/* =====================================================
   EACH BENEFIT
   ===================================================== */

.services-banner-benefit{
    position:relative;

    width:92px;
    flex:0 0 92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:7px;

    text-align:center;
}


/* =====================================================
   ICON HOLDER
   NO BORDER
   NO BACKGROUND
   NO FRAME
   ===================================================== */

.services-banner-benefit-icon{
    width:58px;
    height:58px;

    flex:0 0 58px;

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

    padding:0;
    margin:0;

    background:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:visible;
}


/* =====================================================
   ACTUAL IMAGE
   ===================================================== */

.services-banner-benefit-icon img{
    position:static !important;
    inset:auto !important;

    width:54px !important;
    height:54px !important;

    max-width:none;

    display:block;

    object-fit:contain;
    object-position:center;

    margin:0;
    padding:0;

    border:none !important;
    border-radius:0 !important;

    background:transparent !important;

    filter:none;
}


/* =====================================================
   LABEL
   ===================================================== */

.services-banner-benefit-label{
    color:#f3f8ff;
font-weight:700;

    white-space:nowrap;
}


/* =====================================================
   CONNECTOR LINE
   ===================================================== */

.services-banner-benefit:not(:last-child)::after{
    content:"";

    position:absolute;

    /*
       58px icon height / 2 = 29px
       so the line passes through the icon centre
    */
    top:29px;

    left:calc(100% - 1px);

    width:24px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(78,243,255,.18) 0%,
            rgba(78,243,255,.95) 25%,
            rgba(78,243,255,.95) 75%,
            rgba(78,243,255,.18) 100%
        );

    box-shadow:
        0 0 5px rgba(78,243,255,.55),
        0 0 10px rgba(78,243,255,.18);

    pointer-events:none;
}


/* =====================================================
   LAPTOP / TABLET
   ===================================================== */

@media (max-width:1200px) and (min-width:701px){

    .services-banner-benefits{
        max-width:440px;
        margin-top:17px;
        gap:10px;
    }

    .services-banner-benefit{
        width:72px;
        flex:0 0 72px;
        gap:5px;
    }

    .services-banner-benefit-icon{
        width:44px;
        height:44px;

        flex:0 0 44px;
    }

    .services-banner-benefit-icon img{
        width:40px !important;
        height:40px !important;
    }


    .services-banner-benefit:not(:last-child)::after{
        top:22px;
        width:18px;
    }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width:700px){

    .services-banner-benefits{
        display:grid;

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

        width:100%;
        max-width:285px;

        margin-top:11px;

        gap:8px 10px;
    }

    .services-banner-benefit{
        width:auto;
        flex:none;

        flex-direction:row;
        align-items:center;
        justify-content:flex-start;

        gap:7px;

        text-align:left;
    }

    .services-banner-benefit-icon{
        width:34px;
        height:34px;

        flex:0 0 34px;
    }

    .services-banner-benefit-icon img{
        width:32px !important;
        height:32px !important;
    }

    .services-banner-benefit-label{white-space:normal;
    }

    .services-banner-benefit::after{
        display:none;
    }
}

/* =====================================================
   SR&ED ANGLED RIBBON
   ===================================================== */

.sred-ribbon{
    position:absolute;

    top:24px;
    left:28px;

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

    min-width:145px;

    padding:9px 26px 9px 22px;

    color:#031226;

    font-size:1.15rem;
    line-height:1;
    font-weight:900;
    font-style:italic;
    letter-spacing:-0.03em;

    background:
        linear-gradient(
            135deg,
            #40f2ff 0%,
            #18cbea 55%,
            #1595df 100%
        );

    clip-path:polygon(
        10% 0,
        100% 0,
        90% 100%,
        0 100%
    );

    box-shadow:
        0 8px 20px rgba(0,180,255,.22);

    z-index:3;
}
.sred-ribbon::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.34) 0%,
            rgba(255,255,255,.08) 38%,
            rgba(255,255,255,0) 65%
        );

    pointer-events:none;
}
.sred-ribbon::after{
    content:"";

    position:absolute;
    left:10%;
    right:10%;
    bottom:2px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,70,120,.5),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   SERVICES PAGE — FINAL TYPOGRAPHY OVERRIDE
   ========================================================= */


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

.services-page .services-banner-content h1 {
    font-size: clamp(2rem, 2.5vw, 2.5rem) !important;
    line-height: 1.06 !important;
}

.services-page .services-banner-subtitle {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}


/* =========================================================
   HERO BENEFIT LABELS
   ========================================================= */

.services-page .services-banner-benefit-label {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

/* Card titles */
.services-page .service-card h2,
.services-page .service-card .service-card-banner-content h2 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
}

/* Main card description */
.services-page .service-card > p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}


/* =========================================================
   DETAIL / OUTCOME SECTIONS
   ========================================================= */

.services-page .service-detail h3,
.services-page .service-outcome h3 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
}

/* Step titles */
.services-page .service-step h4 {
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
}

/* Step descriptions + outcome text */
.services-page .service-step p,
.services-page .service-outcome p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}


/* =========================================================
   STEP NUMBERS / LABELS
   ========================================================= */

.services-page .service-step span,
.services-page .service-label {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.services-page .service-button,
.services-page .service-mobile-less {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.services-page .service-mobile-toggle {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .services-page .services-banner-content h1 {
        font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
    }

    .services-page .services-banner-subtitle {
        font-size: 0.9375rem !important;
    }

    .services-page .services-banner-benefit-label {
        font-size: 0.6875rem !important;
    }

    .services-page .service-card h2,
    .services-page .service-card .service-card-banner-content h2 {
        font-size: 1.0625rem !important;
    }

    .services-page .service-card > p {
        font-size: 0.9375rem !important;
    }

    .services-page .service-step p,
    .services-page .service-outcome p {
        font-size: 0.875rem !important;
    }
}
.services-page .services-banner-benefits {
    margin-top: 28px !important;
}

/* =========================================================
   DEEP-LINK ARRIVAL HIGHLIGHT
   Audit Readiness → SR&ED Step 06
========================================================= */

.service-step.is-arrival-highlight {
    position: relative;
    z-index: 3;

    animation:
        serviceStepArrivalBlink 1.45s ease-in-out;
}


@keyframes serviceStepArrivalBlink {

    0%,
    100% {
        filter: brightness(1);

        box-shadow:
            0 0 0 rgba(44, 225, 255, 0);
    }


    15% {
        filter: brightness(1.22);

        box-shadow:
            0 0 0 3px rgba(44, 225, 255, 0.90),
            0 0 22px rgba(44, 225, 255, 0.65),
            0 0 45px rgba(44, 225, 255, 0.32);
    }


    30% {
        filter: brightness(1);

        box-shadow:
            0 0 0 1px rgba(44, 225, 255, 0.10);
    }


    48% {
        filter: brightness(1.20);

        box-shadow:
            0 0 0 3px rgba(44, 225, 255, 0.82),
            0 0 20px rgba(44, 225, 255, 0.58),
            0 0 40px rgba(44, 225, 255, 0.28);
    }


    63% {
        filter: brightness(1);

        box-shadow:
            0 0 0 1px rgba(44, 225, 255, 0.10);
    }


    80% {
        filter: brightness(1.15);

        box-shadow:
            0 0 0 2px rgba(44, 225, 255, 0.68),
            0 0 16px rgba(44, 225, 255, 0.45),
            0 0 32px rgba(44, 225, 255, 0.22);
    }

}


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

    .service-step.is-arrival-highlight {
        animation: none;
    }

}

/* =========================================================
   SERVICE CARD ARRIVAL HIGHLIGHT
========================================================= */

.service-card.is-arrival-highlight {
    position: relative;
    z-index: 3;

    animation:
        serviceCardArrivalBlink 1.45s ease-in-out;
}


@keyframes serviceCardArrivalBlink {

    0%,
    100% {
        filter: brightness(1);

        box-shadow:
            0 0 0 rgba(44, 225, 255, 0);
    }

    15% {
        filter: brightness(1.12);

        box-shadow:
            0 0 0 3px rgba(44, 225, 255, 0.85),
            0 0 24px rgba(44, 225, 255, 0.55),
            0 0 48px rgba(44, 225, 255, 0.28);
    }

    30% {
        filter: brightness(1);

        box-shadow:
            0 0 0 1px rgba(44, 225, 255, 0.10);
    }

    48% {
        filter: brightness(1.10);

        box-shadow:
            0 0 0 3px rgba(44, 225, 255, 0.75),
            0 0 20px rgba(44, 225, 255, 0.48);
    }

    63% {
        filter: brightness(1);

        box-shadow:
            0 0 0 1px rgba(44, 225, 255, 0.10);
    }

    80% {
        filter: brightness(1.07);

        box-shadow:
            0 0 0 2px rgba(44, 225, 255, 0.55),
            0 0 16px rgba(44, 225, 255, 0.35);
    }

}


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

    .service-card.is-arrival-highlight {
        animation: none;
    }

}

/* =========================================================
   SERVICES HERO — KEN BURNS ANIMATION
   Same effect as Process page
========================================================= */

.services-banner > img {
    animation: servicesKenBurns 5s ease-in-out infinite alternate;
}

@keyframes servicesKenBurns {

    0% {
        transform: scale(1.00);
    }

    100% {
        transform: scale(1.10) translateX(-3%);
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .services-banner > img {
        animation: none !important;
        transform: none !important;
    }

}

/* ==========================================================
   SERVICES MOBILE — HERO WITHOUT IMAGE
   ========================================================== */

@media (max-width: 700px) {

    /* Remove hero background image */
    .services-page .services-banner > img {
        display: none !important;
    }


    /* Let the hero grow naturally with the text */
    .services-page .services-banner {
        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;

        background: #06162f !important;
    }


    /* Remove old image overlay */
    .services-page .services-banner::before {
        content: none !important;
        display: none !important;
    }


    /* Put hero content back into normal flow */
    .services-page .services-banner-content {
        position: relative !important;
        inset: auto !important;

        width: 100% !important;
        height: auto !important;

        padding: 34px 24px 28px !important;

        display: block !important;
    }


    /* Give title clear space at the top */
    .services-page .services-banner-content h1 {
        margin: 0 0 14px !important;

        font-size: clamp(1.9rem, 8vw, 2.3rem) !important;
        line-height: 1.08 !important;

        overflow: visible !important;
    }


    /* Full-width subtitle */
    .services-page .services-banner-subtitle {
        width: 100% !important;
        max-width: none !important;
    }


    /* Keep benefit icons below the text */
    .services-page .services-banner-benefits {
        width: 100% !important;
        max-width: none !important;

        margin-top: 24px !important;
    }
}