/* Products archive: cinematic product bands in the SH Digital Labs design system. */

.products-modern {
    overflow: hidden;
    background: var(--night-950);
}

.products-modern h1,
.products-modern h2,
.products-modern h3 {
    text-wrap: balance;
}

.products-modern-kicker {
    margin: 0;
    color: var(--ice-300);
    font: 500 .75rem/1.5 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.products-modern-button {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 11px;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 24px;
    overflow: hidden;
    border: 1px solid rgba(179, 208, 255, .34);
    border-radius: 999px;
    background: rgba(5, 12, 26, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    color: var(--white);
    font: 500 .9375rem/1.25 var(--font-sans);
    text-decoration: none;
    backdrop-filter: blur(14px);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.products-modern-button:hover,
.products-modern-button:focus-visible {
    border-color: var(--ice-300);
    background: rgba(36, 118, 255, .22);
    color: var(--ice-300);
    transform: translateY(-2px);
}

.products-modern-button .icon,
.products-modern-card__action .icon,
.products-modern-list .nav-links .icon {
    width: 15px;
    height: 15px;
    transition: transform .25s var(--ease);
}

.products-modern-button:hover .icon,
.products-modern-button:focus-visible .icon,
.products-modern-card__link:hover .products-modern-card__action .icon,
.products-modern-card__link:focus-visible .products-modern-card__action .icon,
.products-modern-list .nav-links a:hover .icon,
.products-modern-list .nav-links a:focus-visible .icon {
    transform: translate(3px, -3px);
}

/* 01 - the notched, image-led opening from the reference. */
.products-modern-hero {
    padding: 122px 0 0;
    background: var(--night-950);
}

.products-modern-hero__shell {
    position: relative;
}

.products-modern-hero__clip-defs {
    position: absolute;
}

.products-modern-hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(430px, 39vw, 560px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    clip-path: polygon(7% 0, 100% 0, 100% 70%, 96% 70%, 96% 100%, 19% 100%, 19% 87%, 0 87%, 0 12%, 5% 12%);
    clip-path: url(#products-modern-hero-clip);
    background: #101b38;
    box-shadow: 0 28px 90px rgba(0, 8, 30, .32);
}

.products-modern-hero__visual > img {
    position: absolute;
    inset: -3% 0;
    display: block;
    width: 100%;
    height: 106%;
    object-fit: cover;
    object-position: 50% calc(50% + var(--products-hero-shift, 0px));
    transform: scale(1.02);
    will-change: object-position;
}

.products-modern-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 48% 48%, rgba(92, 105, 255, .08), transparent 33%),
        linear-gradient(90deg, rgba(3, 7, 15, .54), rgba(3, 7, 15, .12) 52%, rgba(3, 7, 15, .34));
}

.products-modern-hero__title-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 18px;
    justify-items: center;
    max-width: min(78%, 1040px);
    text-align: center;
}

.products-modern-hero h1 {
    max-width: 15ch;
    margin: 0;
    color: var(--white);
    font-size: clamp(3.4rem, 6vw, 6.35rem);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .96;
}

.products-modern-hero__vertical {
    position: absolute;
    z-index: 2;
    right: 7%;
    bottom: 7%;
    color: transparent;
    font-size: clamp(2.8rem, 4.6vw, 5rem);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1;
    text-orientation: mixed;
    white-space: nowrap;
    writing-mode: vertical-rl;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .62);
}

.products-modern-hero__breadcrumb {
    position: absolute;
    z-index: 3;
    bottom: 12px;
    left: var(--margin);
    display: inline-flex;
    gap: 8px;
    align-items: center;
    max-width: calc(19% - 22px);
    color: var(--mist-300);
    font-size: .75rem;
    white-space: nowrap;
}

.products-modern-hero__breadcrumb a {
    color: var(--white);
    text-decoration: none;
}

.products-modern-hero__breadcrumb a:hover,
.products-modern-hero__breadcrumb a:focus-visible {
    color: var(--ice-300);
}

.products-modern-hero__breadcrumb > span:not([aria-current]) {
    color: var(--ice-300);
}

/* 02 - wide product bands with full-image links. */
.products-modern-list {
    position: relative;
    padding: 116px 0 142px;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
    background:
        radial-gradient(circle at 88% 32%, rgba(36, 118, 255, .14), transparent 26%),
        radial-gradient(circle at 44% 94%, rgba(112, 73, 255, .16), transparent 30%),
        var(--night-950);
}

.products-modern-list::before {
    position: absolute;
    inset: 12% -10% auto auto;
    width: min(68vw, 1120px);
    aspect-ratio: 16 / 9;
    background: url("../pattern-sh.webp") right center / auto 110% no-repeat;
    content: "";
    opacity: .045;
    pointer-events: none;
    transform: translate3d(0, var(--products-list-shift, 0px), 0);
}

.products-modern-list > .container {
    position: relative;
    z-index: 1;
}

.products-modern-list__stack {
    display: grid;
    gap: clamp(18px, 2vw, 28px);
}

.products-modern-card {
    --products-pointer-x: 0px;
    --products-pointer-y: 0px;
    position: relative;
    min-height: clamp(340px, 27.5vw, 430px);
    overflow: hidden;
    border: 1px solid rgba(177, 208, 255, .2);
    border-radius: clamp(22px, 2.2vw, 34px);
    background: var(--slate-850);
    box-shadow: 0 26px 76px rgba(0, 5, 18, .24);
    isolation: isolate;
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}

.products-modern-card__link {
    position: absolute;
    inset: 0;
    display: block;
    color: var(--white);
    text-decoration: none;
}

.products-modern-card__link:focus-visible {
    outline: 2px solid var(--ice-300);
    outline-offset: -5px;
}

.products-modern-card__media,
.products-modern-card__image,
.products-modern-card__fallback,
.products-modern-card__veil,
.products-modern-card__glow {
    position: absolute;
    inset: 0;
}

.products-modern-card__media {
    overflow: hidden;
}

.products-modern-card--warehouse .products-modern-card__media {
    background: url("../service-hero-bg.webp") 50% 55% / cover no-repeat, #071226;
}

.products-modern-card--warehouse .products-modern-card__image {
    opacity: 0;
}

.products-modern-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center calc(50% + var(--products-card-scroll, 0px));
    filter: saturate(.9) contrast(1.06) brightness(.82);
    transform: translate3d(var(--products-pointer-x), var(--products-pointer-y), 0) scale(1.045);
    will-change: transform;
    transition: filter .55s var(--ease), transform .75s var(--ease);
}

.products-modern-card__fallback {
    background: url("../services-capabilities-bg.webp") center / cover no-repeat, #071226;
}

.products-modern-card--2 .products-modern-card__fallback {
    background-image: url("../pillar-bg-digital-presence.webp");
}

.products-modern-card--3 .products-modern-card__fallback {
    background-image: url("../pillar-bg-growth-engine.webp");
}

.products-modern-card__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2, 7, 18, .94) 0%, rgba(2, 8, 22, .68) 37%, rgba(2, 8, 22, .17) 69%, rgba(2, 8, 22, .48) 100%),
        linear-gradient(180deg, rgba(2, 6, 15, .28), rgba(2, 6, 15, .12) 45%, rgba(2, 6, 15, .74));
    transition: opacity .45s var(--ease);
}

.products-modern-card__glow {
    z-index: 2;
    background: radial-gradient(circle at var(--products-glow-x, 72%) var(--products-glow-y, 48%), rgba(85, 159, 255, .22), transparent 24%);
    opacity: .36;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}

.products-modern-card__topline {
    position: absolute;
    z-index: 3;
    top: clamp(24px, 2.6vw, 38px);
    right: clamp(24px, 3.4vw, 52px);
    left: clamp(24px, 3.4vw, 52px);
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.products-modern-card__type {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid rgba(140, 215, 255, .5);
    border-radius: 999px;
    background: rgba(3, 10, 24, .36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    color: var(--ice-100);
    font: 500 .7rem/1.3 var(--font-mono);
    letter-spacing: .03em;
    backdrop-filter: blur(14px);
}

.products-modern-card__index {
    color: rgba(255, 255, 255, .76);
    font: 500 .75rem/1 var(--font-mono);
}

.products-modern-card__content {
    position: absolute;
    z-index: 3;
    right: clamp(24px, 3.4vw, 52px);
    bottom: clamp(26px, 3.4vw, 50px);
    left: clamp(24px, 3.4vw, 52px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 44px;
    align-items: end;
}

.products-modern-card__content > div {
    display: grid;
    gap: 13px;
    max-width: 810px;
}

.products-modern-card__content p {
    margin: 0;
    color: var(--ice-300);
    font: 500 .72rem/1.5 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.products-modern-card__content h3 {
    max-width: 19ch;
    margin: 0;
    color: var(--white);
    font-size: clamp(2rem, 3.15vw, 3.65rem);
    font-weight: 500;
    letter-spacing: -.052em;
    line-height: 1.02;
}

.products-modern-card__excerpt {
    display: -webkit-box;
    max-width: 62ch;
    max-height: 0;
    overflow: hidden;
    color: rgba(226, 235, 249, .82);
    font-size: .9375rem;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(8px);
    transition: max-height .4s var(--ease), opacity .35s var(--ease), transform .4s var(--ease);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.products-modern-card__action {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 10px 0 10px 20px;
    color: var(--white);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}

.products-modern-card:hover,
.products-modern-card:focus-within {
    border-color: rgba(140, 215, 255, .58);
    box-shadow: 0 34px 90px rgba(0, 12, 44, .4), var(--edge-glow);
    transform: translateY(-4px);
}

.products-modern-card:hover .products-modern-card__image,
.products-modern-card:focus-within .products-modern-card__image {
    filter: saturate(1.05) contrast(1.06) brightness(.9);
    transform: translate3d(var(--products-pointer-x), var(--products-pointer-y), 0) scale(1.085);
}

.products-modern-card:hover .products-modern-card__veil,
.products-modern-card:focus-within .products-modern-card__veil {
    opacity: .9;
}

.products-modern-card:hover .products-modern-card__glow,
.products-modern-card:focus-within .products-modern-card__glow {
    opacity: .8;
}

.products-modern-card:hover .products-modern-card__excerpt,
.products-modern-card:focus-within .products-modern-card__excerpt {
    max-height: 52px;
    opacity: 1;
    transform: translateY(0);
}

.products-modern-card:nth-child(even) .products-modern-card__veil {
    background:
        linear-gradient(90deg, rgba(2, 7, 18, .91), rgba(2, 8, 22, .56) 42%, rgba(2, 8, 22, .14) 72%, rgba(2, 8, 22, .46)),
        linear-gradient(180deg, rgba(2, 6, 15, .32), rgba(2, 6, 15, .12) 45%, rgba(2, 6, 15, .72));
}

.products-modern-card:nth-child(3n + 2) .products-modern-card__image {
    object-position: 58% calc(50% + var(--products-card-scroll, 0px));
}

.products-modern-card:nth-child(3n) .products-modern-card__image {
    object-position: 42% calc(50% + var(--products-card-scroll, 0px));
}

/* Compact pagination, used only when the product collection grows. */
.products-modern-list .pagination {
    margin-top: 58px;
}

.products-modern-list .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.products-modern-list .nav-links .page-numbers {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border: 1px solid rgba(169, 199, 255, .2);
    border-radius: 10px;
    background: rgba(10, 18, 34, .64);
    color: var(--mist-300);
    font: 500 .75rem/1 var(--font-mono);
    text-decoration: none;
    backdrop-filter: blur(12px);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.products-modern-list .nav-links .page-numbers.current,
.products-modern-list .nav-links a:hover,
.products-modern-list .nav-links a:focus-visible {
    border-color: rgba(140, 215, 255, .54);
    background: rgba(36, 118, 255, .18);
    color: var(--ice-300);
}

.products-modern-list .nav-links .prev,
.products-modern-list .nav-links .next {
    padding-inline: 17px;
}

.products-modern-pagination__prev-icon {
    transform: rotate(180deg);
}

.products-modern-list .nav-links .prev:hover .products-modern-pagination__prev-icon,
.products-modern-list .nav-links .prev:focus-visible .products-modern-pagination__prev-icon {
    transform: translate(-3px, 3px) rotate(180deg);
}

/* 03 - final contact route only; the reference inquiry form is intentionally omitted. */
.products-modern-cta {
    position: relative;
    padding: 122px 0 132px;
    overflow: hidden;
    background:
        radial-gradient(circle at 83% 42%, rgba(36, 118, 255, .18), transparent 30%),
        radial-gradient(circle at 58% 100%, rgba(107, 70, 255, .12), transparent 38%),
        var(--night-950);
}

.products-modern-cta::before {
    position: absolute;
    right: -9%;
    bottom: -22%;
    width: min(56vw, 940px);
    aspect-ratio: 1.9;
    background: url("../services-capabilities-bg.webp") center / cover no-repeat;
    border-radius: 50%;
    content: "";
    filter: blur(2px);
    opacity: .09;
    pointer-events: none;
    transform: translate3d(0, var(--products-cta-shift, 0px), 0) rotate(-5deg);
}

.products-modern-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 54px;
    align-items: flex-end;
    justify-content: space-between;
}

.products-modern-cta__inner h2 {
    width: fit-content;
    max-width: 11ch;
    margin: 22px 0 20px;
    background: linear-gradient(95deg, var(--ice-300), var(--signal-500) 64%, var(--white));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: clamp(3.4rem, 5.6vw, 6.1rem);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .96;
}

.products-modern-cta__inner p:not(.products-modern-kicker) {
    max-width: 58ch;
    margin: 0;
    color: var(--mist-300);
    font-size: 1rem;
    line-height: 1.7;
}

/* Progressive motion: content stays visible when JavaScript is unavailable. */
.products-modern-motion-word {
    display: inline-block;
    white-space: nowrap;
}

.products-modern-motion-character {
    display: inline-block;
}

.products-modern-motion-ready .products-modern-motion-title:not(.is-motion-visible) .products-modern-motion-character {
    opacity: 0;
    transform: translateX(20px);
}

.products-modern-motion-ready .products-modern-motion-title.is-motion-visible .products-modern-motion-character {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(100ms + var(--products-character-index, 0) * 30ms);
}

.products-modern-motion-ready .products-modern-motion-item:not(.is-motion-visible) {
    opacity: 0;
    transform: translateY(34px);
}

.products-modern-motion-ready .products-modern-motion-item.is-motion-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .75s var(--ease), transform .9s var(--ease);
    transition-delay: var(--products-delay, 0ms);
}

.products-modern-motion-ready .products-modern-card.products-modern-motion-item.is-motion-visible:hover,
.products-modern-motion-ready .products-modern-card.products-modern-motion-item.is-motion-visible:focus-within {
    transform: translateY(-4px);
}

@media (max-width: 900px) {
    .products-modern-hero {
        padding-top: 104px;
    }

    .products-modern-hero__visual {
        min-height: 500px;
    }

    .products-modern-hero h1 {
        font-size: clamp(3rem, 8.5vw, 5rem);
    }

    .products-modern-list {
        padding: 96px 0 112px;
    }

    .products-modern-card {
        min-height: 390px;
    }

    .products-modern-card__content {
        gap: 26px;
    }

    .products-modern-cta__inner {
        display: grid;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .products-modern-hero {
        padding: 94px 0 0;
    }

    .products-modern-hero__visual {
        min-height: 510px;
        clip-path: polygon(10% 0, 100% 0, 100% 78%, 96% 78%, 96% 100%, 42% 100%, 42% 88%, 0 88%, 0 11%, 7% 11%);
        clip-path: url(#products-modern-hero-clip-mobile);
    }

    .products-modern-hero__visual > img {
        object-position: 58% calc(50% + var(--products-hero-shift, 0px));
    }

    .products-modern-hero__veil {
        background: linear-gradient(180deg, rgba(3, 7, 15, .3), rgba(3, 7, 15, .62));
    }

    .products-modern-hero__title-wrap {
        max-width: 84%;
        transform: translateY(-8%);
    }

    .products-modern-hero h1 {
        max-width: 9ch;
        font-size: clamp(2.8rem, 13vw, 4.1rem);
    }

    .products-modern-hero__vertical {
        right: 5%;
        bottom: 6%;
        font-size: 2.75rem;
    }

    .products-modern-hero__breadcrumb {
        bottom: 15px;
        left: 18px;
        max-width: calc(42% - 28px);
        font-size: .7rem;
    }

    .products-modern-list {
        padding: 78px 0 88px;
    }

    .products-modern-list__stack {
        gap: 16px;
    }

    .products-modern-card {
        min-height: 500px;
        border-radius: 22px;
    }

    .products-modern-card__veil,
    .products-modern-card:nth-child(even) .products-modern-card__veil {
        background:
            linear-gradient(180deg, rgba(2, 7, 18, .48), rgba(2, 7, 18, .12) 34%, rgba(2, 7, 18, .92) 82%),
            linear-gradient(90deg, rgba(2, 7, 18, .5), transparent 78%);
    }

    .products-modern-card__content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .products-modern-card__content h3 {
        max-width: 14ch;
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .products-modern-card__excerpt {
        max-height: 54px;
        opacity: 1;
        transform: none;
    }

    .products-modern-card__action {
        justify-self: start;
        padding: 0;
    }

    .products-modern-list .nav-links {
        justify-content: flex-start;
    }

    .products-modern-list .nav-links .prev,
    .products-modern-list .nav-links .next {
        font-size: 0;
    }

    .products-modern-list .nav-links .prev .icon,
    .products-modern-list .nav-links .next .icon {
        width: 16px;
        height: 16px;
    }

    .products-modern-cta {
        padding: 88px 0 96px;
    }

    .products-modern-cta__inner {
        gap: 36px;
    }

    .products-modern-cta__inner h2 {
        font-size: clamp(3rem, 14vw, 4.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-modern *,
    .products-modern *::before,
    .products-modern *::after {
        scroll-behavior: auto !important;
    }

    .products-modern-card,
    .products-modern-card__image,
    .products-modern-card__veil,
    .products-modern-card__glow,
    .products-modern-card__excerpt,
    .products-modern-button,
    .products-modern-button .icon,
    .products-modern-card__action .icon,
    .products-modern-list .nav-links .icon {
        transition: none;
    }

    .products-modern-motion-ready .products-modern-motion-character,
    .products-modern-motion-ready .products-modern-motion-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .products-modern-card:hover,
    .products-modern-card:focus-within,
    .products-modern-button:hover,
    .products-modern-button:focus-visible {
        transform: none;
    }

    .products-modern-card:hover .products-modern-card__image,
    .products-modern-card:focus-within .products-modern-card__image {
        transform: scale(1.045);
    }
}