/* =====================================================================
   Altayseer repeating content cards
   - Services and news share one card language: image above, content below.
   - Both rows are truly endless: JS moves by the exact width of one
     repeated group and immediately begins the identical next group.
   - The viewport remains full at all times; no white interval at loop end.
   ===================================================================== */

.home-page .loop-cards-section {
    overflow: hidden;
}

.home-page .loop-services-section {
    background:
        radial-gradient(circle at 3% 10%, rgba(28, 66, 123, .055) 0 1px, transparent 2px) 0 0 / 34px 34px,
        var(--home-section-soft, #f4f7fb);
}

.home-page .loop-news-section {
    background: var(--home-section-blue-soft, #edf3fa);
}

.home-page .loop-section-head {
    width: 100%;
    margin-bottom: clamp(24px, 3vw, 42px);
}

.home-page .loop-marquee {
    --loop-gap: clamp(16px, 1.55vw, 26px);
    width: 100%;
    overflow: hidden;
    padding-block: 8px 34px;
    direction: ltr;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}

.home-page .loop-marquee-track {
    display: flex;
    width: max-content;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.home-page .loop-marquee-group {
    display: flex;
    flex: none;
    gap: var(--loop-gap);
    padding-inline: clamp(16px, 2.3vw, 38px) var(--loop-gap);
}

.home-page .loop-content-card {
    flex: none;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(28, 66, 123, .12);
    border-radius: 27px;
    background: var(--home-surface, #fff);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 20px 54px rgba(28, 66, 123, .105);
    transform: translateZ(0);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.home-page .loop-content-card:hover,
.home-page .loop-content-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(238, 102, 35, .38);
    box-shadow: 0 29px 68px rgba(28, 66, 123, .17);
}

.home-page .loop-service-card {
    width: clamp(330px, 39vw, 590px);
    min-height: 520px;
    grid-template-rows: minmax(292px, 57%) 1fr;
}

.home-page .loop-news-card {
    width: clamp(305px, 31vw, 455px);
    min-height: 490px;
    grid-template-rows: 255px 1fr;
}

.home-page .loop-card-media {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
}

.home-page .loop-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}

.home-page .loop-content-card:hover .loop-card-media img {
    transform: scale(1.035);
}

.home-page .loop-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 35, 70, .55));
}

.home-page .loop-card-index,
.home-page .loop-news-date {
    position: absolute;
    bottom: 19px;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-shadow: 0 2px 12px rgba(0,0,0,.32);
}

.home-page .loop-card-index {
    inset-inline-end: 22px;
}

.home-page .loop-news-date {
    inset-inline-start: 22px;
}

.home-page .loop-card-copy {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 27px 29px 25px;
}

.home-page .loop-service-card .loop-card-copy {
    padding-top: 30px;
}

.home-page .loop-card-icon {
    position: absolute;
    inset-inline-start: 27px;
    top: -33px;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    background: #fff;
    color: #ee6623;
    font-size: 1.28rem;
    box-shadow: 0 11px 30px rgba(10, 35, 70, .18);
}

.home-page .loop-card-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(238, 102, 35, .10);
    color: #ee6623;
    font-size: .78rem;
    font-weight: 900;
}

.home-page .loop-card-copy strong {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    margin: 14px 0 10px;
    color: var(--home-heading, #153968);
    font-size: clamp(1.42rem, 1.9vw, 1.95rem);
    line-height: 1.4;
    -webkit-box-orient: vertical;
line-clamp: 2;
-webkit-line-clamp: 2;
}

.home-page .loop-news-card .loop-card-copy strong {
    margin-top: 0;
    font-size: clamp(1.3rem, 1.65vw, 1.72rem);
}

.home-page .loop-card-summary {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    color: var(--home-muted, #6a7c8f);
    line-height: 1.82;
-webkit-box-orient: vertical;
line-clamp: 2;
-webkit-line-clamp: 2;
}

.home-page .loop-news-card .loop-card-summary {
line-clamp: 3;
-webkit-line-clamp: 3;}

.home-page .loop-card-copy em {
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(28, 66, 123, .12);
    color: var(--home-blue, #1c427b);
    font-style: normal;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-page .loop-card-copy em b {
    color: #ee6623;
    font-size: 1.1rem;
}

/* Dark mode */
html[data-theme="dark"] .home-page .loop-services-section,
html[data-theme="dark"] .home-page .loop-news-section {
    background: #0b2745;
}

html[data-theme="dark"] .home-page .loop-content-card {
    background: #102f52;
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 25px 64px rgba(0,0,0,.24);
}

html[data-theme="dark"] .home-page .loop-card-copy strong,
html[data-theme="dark"] .home-page .loop-card-copy em {
    color: #fff;
}

html[data-theme="dark"] .home-page .loop-card-summary {
    color: #c9d7e6;
}

html[data-theme="dark"] .home-page .loop-card-copy em {
    border-color: rgba(255,255,255,.11);
}

@media (max-width: 900px) {
    .home-page .loop-service-card {
        width: min(78vw, 520px);
        min-height: 495px;
        grid-template-rows: 280px 1fr;
    }

    .home-page .loop-news-card {
        width: min(65vw, 420px);
        min-height: 470px;
        grid-template-rows: 235px 1fr;
    }
}

@media (max-width: 620px) {
    .home-page .loop-marquee {
        --loop-gap: 14px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .home-page .loop-marquee-group {
        padding-inline: 16px var(--loop-gap);
    }

    .home-page .loop-service-card,
    .home-page .loop-news-card {
        width: calc(100vw - 38px);
        border-radius: 22px;
    }

    .home-page .loop-service-card {
        min-height: 470px;
        grid-template-rows: 255px 1fr;
    }

    .home-page .loop-news-card {
        min-height: 455px;
        grid-template-rows: 225px 1fr;
    }

    .home-page .loop-card-copy {
        padding: 23px 21px 21px;
    }

    .home-page .loop-card-icon {
        inset-inline-start: 20px;
        width: 58px;
        height: 58px;
        top: -29px;
        border-radius: 17px;
    }

    .home-page .loop-card-copy strong,
    .home-page .loop-news-card .loop-card-copy strong {
        font-size: 1.4rem;
    }
}
/* =====================================================================
   Companies — same endless presentation language as news
   Official Altayseer identity:
   #182E56 · #1D427B · #E96124 · #FFFFFF
   ===================================================================== */

.home-page .loop-companies-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(72px, 9vw, 120px) 0;

    background: #FFFFFF;
    color: #182E56;
}
/* Companies world map — visible but subtle in light mode */
.home-page
.loop-companies-section
.world-map-watermark {
    opacity: .18;
    z-index: 0;
}

.home-page
.loop-companies-section
> :not(.world-map-watermark) {
    position: relative;
    z-index: 1;
}

.home-page .loop-companies-section .section-kicker {
    color: #E96124;
}

.home-page .loop-companies-section .home-section-head h2 {
    color: #182E56;
}

.home-page .loop-companies-section .home-section-intro {
    color: rgba(24, 46, 86, .76);
}


/* Larger than news cards */
.home-page .loop-company-card {
    width: clamp(360px, 34vw, 520px);
    min-height: 540px;

    grid-template-rows:
        340px
        1fr;

    background: #FFFFFF;

    border-color:
        rgba(255, 255, 255, .15);

    box-shadow:
        0 24px 60px
        rgba(10, 27, 55, .25);
}


/* Logo area */
.home-page .loop-company-media {

        position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: transparent;
}
.home-page .loop-company-media img {
    display: block;

    width: 100%;
    height: 100%;

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

    margin: 0;
    padding: 0;

    background: transparent;

    transform: none;

    transition:
        transform
        .65s
        cubic-bezier(.22, .61, .36, 1);
}

.home-page
.loop-company-card:hover
.loop-company-media img {
    transform: scale(1.035);
}


/* Company status */
.home-page .loop-company-status {
    position: absolute;

    inset-inline-end: 18px;
    top: 18px;

    padding: 7px 12px;

    border-radius: 999px;

    background: #E96124;
    color: #FFFFFF;

    font-size: .75rem;
    font-weight: 800;

    box-shadow:
        0 8px 22px
        rgba(233, 97, 36, .25);
}


/* Company title */
.home-page
.loop-company-card
.loop-card-copy strong {
    color: #182E56;
}


/* Company description */
.home-page
.loop-company-card
.loop-card-summary {
    line-clamp: 3;
    -webkit-line-clamp: 3;

    color: rgba(24, 46, 86, .70);
}


/* Discover more */
.home-page .loop-company-action {
    width: 100%;

    margin-top: auto;
    padding-top: 20px;

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

    gap: 16px;

    border-top:
        1px solid
        rgba(29, 66, 123, .12);

    color: #1D427B;

    text-decoration: none;
    font-weight: 900;
}

.home-page .loop-company-action b {
    color: #E96124;
    font-size: 1.1rem;
}


/* Dark mode keeps official identity */
html[data-theme="dark"]
.home-page
.loop-companies-section {
    background:
        linear-gradient(
            125deg,
            #182E56 0%,
            #1D427B 100%
        );
}

html[data-theme="dark"]
.home-page
.loop-company-card {
    background: #182E56;

    border-color:
        rgba(255, 255, 255, .12);
}

html[data-theme="dark"]
.home-page
.loop-company-media {
    background: #182E56;
}

html[data-theme="dark"]
.home-page
.loop-company-card
.loop-card-copy strong {
    color: #FFFFFF;
}

html[data-theme="dark"]
.home-page
.loop-company-card
.loop-card-summary {
    color: rgba(255, 255, 255, .70);
}

html[data-theme="dark"]
.home-page
.loop-company-action {
    color: #FFFFFF;

    border-color:
        rgba(255, 255, 255, .12);
}


/* Tablet */
@media (max-width: 900px) {

    .home-page .loop-company-card {
        width: min(70vw, 480px);

        min-height: 520px;

        grid-template-rows:
            285px
            1fr;
    }
}


/* Mobile */
@media (max-width: 620px) {

    .home-page .loop-company-card {
        width: calc(100vw - 38px);

        min-height: 490px;

        grid-template-rows:
            260px
            1fr;

        border-radius: 22px;
    }

    .home-page .loop-company-media {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .loop-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: thin;
    }

    .home-page .loop-marquee-track {
        transform: none !important;
    }

    .home-page .loop-content-card,
    .home-page .loop-card-media img {
        transition: none !important;
    }
}
