/*
 * Responsive layer for the public website.
 * Loaded after page-specific styles so desktop composition remains untouched.
 */

@media (max-width: 900px) {
    .site-header .menu,
    .home-menu {
        position: relative;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        overflow: hidden;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0;
        text-indent: -9999px;
        text-shadow: none;
        white-space: nowrap
    }

    .site-header .menu::before,
    .site-header .menu::after,
    .home-menu::before,
    .home-menu::after {
        content: "";
        position: absolute;
        left: 11px;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #10213a;
        text-indent: 0;
        transition: transform .2s ease
    }

    .site-header .menu::before,
    .home-menu::before {
        top: 16px
    }

    .site-header .menu::after,
    .home-menu::after {
        bottom: 16px
    }

    .site-header .menu[aria-expanded="true"]::before,
    .home-menu[aria-expanded="true"]::before {
        transform: translateY(5px) rotate(45deg)
    }

    .site-header .menu[aria-expanded="true"]::after,
    .home-menu[aria-expanded="true"]::after {
        transform: translateY(-5px) rotate(-45deg)
    }

    .site-header .menu > *,
    .home-menu > * {
        display: none !important
    }

    .solution-pagination button,
    .delivery-carousel-arrow,
    .qualification-control,
    .home-case-controls > button,
    .partner-controls button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px
    }

    .solution-tab,
    .about-subnav a,
    .portfolio-subnav a {
        min-height: 44px;
        display: flex;
        align-items: center
    }
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 126px
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%
    }

    .wrap {
        width: calc(100% - 32px)
    }

    .site-header {
        height: 64px
    }

    .site-header .site-nav {
        gap: 12px
    }

    .site-header .brand {
        font-size: 0;
        line-height: 0
    }

    .site-header .brand-mark {
        width: 30px;
        height: 30px;
        font-size: 13px
    }

    .site-header .menu {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0;
        font-size: 0;
        cursor: pointer
    }

    .mobile-menu {
        inset: 64px 0 auto;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding: 12px 16px 18px
    }

    .mobile-menu a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-radius: 10px
    }

    .about-subnav,
    .portfolio-subnav,
    .delivery-v2-subnav {
        top: 64px
    }

    .about-subnav .wrap,
    .delivery-v2-subnav .wrap {
        width: calc(100% - 32px);
        min-height: 52px;
        justify-content: flex-start
    }

    .section,
    .product-doc-section,
    .partner-section,
    .delivery-reference-trusted,
    .delivery-v2-clients {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .page-hero,
    .page-intro-hero,
    .editorial-hero,
    .delivery-v2-hero {
        min-height: 0;
        padding-top: 50px;
        padding-bottom: 52px
    }

    .page-intro-hero .hero-grid,
    .page-intro-hero .editorial-hero-grid,
    .hero-grid,
    .editorial-hero-grid,
    .delivery-v2-hero-grid,
    .content-split,
    .content-split.reverse,
    .contact-layout,
    .solution-detail-head,
    .solution-contact-panel,
    .delivery-v2-platform > .wrap,
    .delivery-v2-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px
    }

    .crumb {
        margin-bottom: 20px;
        gap: 7px;
        font-size: 12px
    }

    .page-intro-hero :is(.hero-copy, .editorial-copy) h1,
    .hero-copy h1,
    .editorial-copy h1,
    .delivery-v2-copy h1,
    .delivery-heading h1,
    .delivery-heading h2 {
        font-size: clamp(34px, 10vw, 42px);
        line-height: 1.13
    }

    .page-intro-hero :is(.hero-copy, .editorial-copy) > p,
    .hero-copy > p,
    .editorial-copy p,
    .delivery-v2-copy > p:not(.eyebrow),
    .delivery-heading > p:last-child {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.75
    }

    .page-intro-hero .hero-product-stage,
    .page-intro-hero .office-frame,
    .hero-product-stage,
    .office-frame,
    .case-hero-media {
        min-height: 240px;
        height: 240px;
        border-radius: 18px
    }

    .hero-actions,
    .article-next,
    .case-detail-body .article-next,
    .delivery-final-cta {
        align-items: stretch;
        flex-direction: column;
        gap: 10px
    }

    .hero-actions .button,
    .article-next .button,
    .case-detail-body .article-next .button,
    .delivery-final-cta .button {
        width: 100%
    }

    .section-heading,
    .culture-career-heading,
    .delivery-reference-head,
    .delivery-reference-trusted-title,
    .product-doc-heading {
        margin-bottom: 30px
    }

    .section-heading h2,
    .product-doc-heading h2,
    .delivery-reference-head h2,
    .delivery-v2-heading h2,
    .delivery-v2-platform-intro h2 {
        font-size: clamp(28px, 8.5vw, 36px)
    }

    .section-heading p,
    .product-doc-heading > p:last-child,
    .delivery-reference-head > p:last-child:not(.eyebrow) {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.72
    }

    .solution-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin-right: 0;
        margin-bottom: 26px;
        padding: 2px 16px 7px 2px;
        overflow-x: auto;
        scrollbar-width: none
    }

    .solution-tabs::-webkit-scrollbar,
    .solution-detail-tabs::-webkit-scrollbar {
        display: none
    }

    .solution-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 9px 14px;
        font-size: 13px
    }

    .solution-grid,
    .product-list-grid,
    .product-card-grid,
    .application-grid,
    .related-grid,
    .pillar-grid,
    .about-service-grid,
    .direction-grid,
    .platform-strip,
    .project-form,
    .product-doc-categories,
    .product-doc-applications,
    .delivery-six-steps,
    .delivery-platform-grid,
    .delivery-platform-reference-grid,
    .delivery-proof-list,
    .delivery-process-rail,
    .delivery-client-grid,
    .solution-points-panel ul,
    .solution-demo-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .solution-card,
    .product-list-card {
        min-height: 0
    }

    main .grid4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    .grid4 .cap {
        min-width: 0;
        padding: 20px 16px
    }

    .grid4 .icon {
        margin-bottom: 24px
    }

    .grid4 .cap h3 {
        font-size: 18px
    }

    .grid4 .cap p {
        font-size: 14px;
        line-height: 1.65
    }

    main .products,
    main .flow,
    main .delivery-process-rail {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc(100% - 28px);
        gap: 12px;
        margin-right: -16px;
        padding: 2px 28px 14px 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 0;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    main .products::-webkit-scrollbar,
    main .flow::-webkit-scrollbar,
    main .delivery-process-rail::-webkit-scrollbar {
        display: none
    }

    main .products .product,
    main .flow .step,
    main .delivery-process-rail article {
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always
    }

    main .flow {
        grid-auto-columns: 70%;
        padding-top: 12px
    }

    main .flow .step {
        min-height: 220px
    }

    main .delivery-process-rail {
        gap: 12px
    }

    main .delivery-process-rail::before {
        display: none
    }

    main .delivery-process-rail article {
        min-height: 220px;
        padding: 25px 18px 22px;
        border-top: 2px solid #cfe4fa;
        border-left: 0;
        text-align: left
    }

    main .delivery-process-rail .delivery-step-dot {
        position: absolute;
        left: 18px;
        top: -8px;
        margin: 0
    }

    main .delivery-process-rail h3 {
        margin-top: 24px
    }

    main .delivery-process-rail p {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none
    }

    main .solution-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px
    }

    main .solution-grid .solution-card .card-art {
        height: 128px
    }

    main .solution-grid .solution-card .card-copy {
        padding: 15px 12px 17px
    }

    main .solution-grid .solution-card h3 {
        font-size: 16px;
        line-height: 1.45
    }

    main .solution-grid .solution-card p {
        min-height: 0;
        margin: 8px 0 12px;
        font-size: 12px;
        line-height: 1.6
    }

    main .solution-grid .solution-card .text-link {
        font-size: 12px
    }

    main .product-doc-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    main .product-doc-categories .product-doc-category {
        min-height: 174px;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-content: start;
        gap: 13px;
        padding: 20px 10px;
        text-align: center
    }

    main .product-doc-categories .category-icon {
        width: 42px;
        height: 42px
    }

    main .product-doc-categories h3 {
        font-size: 16px;
        line-height: 1.4
    }

    main .product-doc-categories p {
        font-size: 12px;
        line-height: 1.55
    }

    main .about-service-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px
    }

    .about-service-grid .about-service {
        min-width: 0;
        padding: 18px 14px
    }

    .about-service-grid .about-service b {
        width: 40px;
        height: 40px
    }

    .about-service-grid .about-service h3 {
        margin-top: 22px;
        font-size: 17px;
        line-height: 1.4
    }

    .about-service-grid .about-service p {
        font-size: 13px;
        line-height: 1.65
    }

    main .direction-grid {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: calc(42.857% - 10.286px);
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    main .direction-grid .direction {
        min-width: 0;
        grid-column: auto !important;
        scroll-snap-align: start
    }

    main .direction-grid .direction:last-child {
        grid-column: auto !important
    }

    main .direction-grid::-webkit-scrollbar {
        display: none
    }

    main .direction-grid .direction img {
        height: 112px
    }

    main .direction-grid .direction div {
        padding: 14px 11px
    }

    main .direction-grid .direction h3 {
        font-size: 15px;
        line-height: 1.4
    }

    main .direction-grid .direction p {
        font-size: 12px;
        line-height: 1.6
    }

    .solution-card .card-art,
    .product-card .card-art,
    .product-list-media {
        min-height: 0;
        height: 210px
    }

    .product-doc-tech-grid,
    .partner-grid,
    .agency-brand-grid,
    .delivery-client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    main .product-doc-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    main .product-doc-applications {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    main .product-doc-applications .product-doc-application {
        min-width: 0;
        min-height: 202px
    }

    main .product-doc-applications .application-figure {
        min-height: 132px
    }

    main .product-doc-applications .product-doc-application h3 {
        padding: 18px 8px 19px;
        font-size: 15px;
        line-height: 1.4
    }

    .product-doc-tech-item {
        padding: 18px 4px
    }

    .product-doc-tech-item b {
        width: 54px;
        height: 54px;
        margin-bottom: 10px;
        font-size: 14px
    }

    .product-doc-tech-item span {
        font-size: 12px;
        line-height: 1.45
    }

    .product-doc-category {
        min-height: 0;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 16px
    }

    .product-doc-category .category-icon {
        width: 46px;
        height: 46px
    }

    .product-doc-tech-item,
    .product-doc-application,
    .about-service,
    .direction {
        min-height: 0
    }

    .product-doc-cta-inner,
    .inquiry-band,
    .contact-cta,
    .about-inquiry-band {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 30px 22px;
        border-radius: 18px
    }

    .contact-cta {
        display: grid
    }

    .contact-cta .button,
    .inquiry-band .button,
    .about-inquiry-band .button {
        width: 100%
    }

    .culture-career-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .culture-career-item,
    .culture-career-item--values {
        min-height: 0;
        padding: 26px 20px
    }

    .culture-career-item + .culture-career-item {
        border-top: 1px solid #cfddeb;
        border-left: 0
    }

    .about-life-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 210px
    }

    .about-life-slot.is-large {
        grid-row: auto
    }

    .article-detail,
    .article-detail.solution-legacy-detail,
    .case-detail {
        width: calc(100% - 32px);
        padding-top: 42px;
        padding-bottom: 64px
    }

    .article-detail h1,
    .case-detail-heading h1 {
        font-size: clamp(30px, 8.5vw, 38px)
    }

    .article-detail .lead,
    .case-detail-heading .lead {
        margin: 20px 0 30px;
        font-size: 16px;
        line-height: 1.75
    }

    .migrated-cover {
        margin: 28px 0;
        border-radius: 16px
    }

    .migrated-content,
    .article-detail p,
    .case-detail-body p {
        font-size: 16px;
        line-height: 1.82
    }

    .migrated-content table {
        font-size: 14px
    }

    .solution-detail-gallery,
    .solution-summary-panel {
        min-height: 0
    }

    .solution-detail-gallery {
        padding: 12px
    }

    .solution-legacy-detail .solution-detail-gallery .migrated-cover {
        min-height: 250px
    }

    .solution-summary-panel {
        padding: 28px 20px
    }

    .solution-detail-tabs {
        display: flex;
        margin-right: 0;
        overflow-x: auto
    }

    .solution-detail-tabs button {
        min-width: 120px;
        min-height: 58px;
        padding: 10px 14px;
        font-size: 14px
    }

    .delivery-process-rail {
        gap: 0
    }

    .delivery-process-rail article {
        min-height: 0;
        padding: 0 0 24px 22px;
        text-align: left
    }

    .delivery-process-rail article + article {
        border-top: 1px solid #d7e5f3
    }

    .delivery-process-rail::before {
        display: none
    }

    .delivery-step-dot {
        left: -8px;
        top: 44px;
        margin: 0
    }

    .delivery-reference-trusted {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .delivery-logo-sequence {
        gap: 36px;
        padding-right: 36px
    }

    .delivery-logo-sequence .client-logo {
        flex-basis: 124px;
        width: 124px;
        height: 46px
    }

    .delivery-v2-subnav .wrap,
    .about-subnav .wrap {
        width: calc(100% - 32px)
    }

    .delivery-chain {
        padding: 16px;
        border-radius: 20px
    }

    .chain-center {
        padding: 18px 12px
    }

    .chain-center ol {
        gap: 4px
    }

    .chain-center li {
        padding: 12px 4px
    }

    .delivery-six-steps li {
        min-height: 260px;
        padding: 22px
    }

    .delivery-platform-grid article {
        min-height: 190px
    }

    .delivery-proof-card,
    .delivery-proof-card:nth-child(even) {
        display: block;
        min-width: 0
    }

    .proof-media {
        min-height: 230px;
        padding: 24px
    }

    .proof-content {
        padding: 24px 20px
    }

    .proof-content h3 {
        font-size: 27px
    }

    .delivery-final-cta {
        margin-top: 28px;
        padding-top: 28px
    }

    main .partner-viewport {
        height: auto;
        max-height: none;
        overflow: hidden;
        border-radius: 14px;
        cursor: default;
        touch-action: auto
    }

    main .partner-track {
        display: grid !important;
        width: 100%;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .partner-column,
    .partner-column:nth-child(4n) {
        height: 88px;
        padding: 16px;
        border-right: 1px solid #e8eef5;
        border-bottom: 1px solid #e8eef5
    }

    .partner-column:nth-child(2n) {
        border-right: 0
    }

    .partner-column:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0
    }

    .partner-column img {
        height: 42px
    }

    main .partner-controls {
        display: none !important
    }

    .home-case-dots,
    .delivery-carousel-dots {
        gap: 0
    }

    .home-case-dots button,
    .home-case-dots button.is-active,
    .delivery-carousel-dots button,
    .delivery-carousel-dots button.is-active {
        position: relative;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        background: transparent
    }

    .home-case-dots button::before,
    .delivery-carousel-dots button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background: #c7d7e6;
        transform: translate(-50%, -50%)
    }

    .home-case-dots button.is-active::before,
    .delivery-carousel-dots button.is-active::before {
        width: 26px;
        background: #0879ee
    }
}

@media (max-width: 420px) {
    .wrap,
    .site-footer-complete .site-footer-wrap {
        width: calc(100% - 28px)
    }

    .section,
    .product-doc-section,
    .partner-section,
    .delivery-reference-trusted,
    .delivery-v2-clients {
        padding-top: 54px;
        padding-bottom: 54px
    }

    main .delivery-process-rail {
        margin-right: -14px
    }

    .page-intro-hero,
    .editorial-hero,
    .page-hero,
    .delivery-v2-hero {
        padding-top: 42px;
        padding-bottom: 44px
    }

    .page-intro-hero .hero-product-stage,
    .page-intro-hero .office-frame,
    .hero-product-stage,
    .office-frame,
    .case-hero-media {
        min-height: 210px;
        height: 210px
    }

    .product-doc-tech-grid,
    .partner-grid,
    .agency-brand-grid,
    .delivery-client-grid {
        gap: 10px
    }

    .agency-brand {
        min-height: 96px;
        padding: 14px 10px
    }

    .agency-brand-logo {
        height: 48px
    }

    .article-detail,
    .article-detail.solution-legacy-detail,
    .case-detail {
        width: calc(100% - 28px);
        padding-top: 34px
    }

    .product-list-media,
    .solution-card .card-art,
    .product-card .card-art {
        height: 190px
    }

    .actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px
    }

    .actions .button,
    .actions .btn {
        width: 100%
    }

    .chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .chip {
        min-width: 0;
        padding-inline: 8px;
        text-align: center;
        white-space: nowrap
    }

    .hero-visual {
        background-image:
            linear-gradient(180deg, rgba(246, 250, 255, .98) 0%, rgba(246, 250, 255, .93) 45%, rgba(246, 250, 255, .4) 69%, rgba(246, 250, 255, 0) 100%),
            url("assets/hero-products-user.png")
    }

    .about-subnav .wrap,
    .portfolio-subnav .wrap,
    .solution-tabs {
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%)
    }

    .about-subnav a,
    .portfolio-subnav a,
    .solution-tab {
        scroll-snap-align: start
    }
}

@media (min-width: 561px) and (max-width: 900px) {
    .hero-visual {
        background-image:
            linear-gradient(90deg, rgba(246, 250, 255, .99) 0%, rgba(246, 250, 255, .96) 48%, rgba(246, 250, 255, .44) 68%, rgba(246, 250, 255, 0) 100%),
            url("assets/hero-products-user.png")
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}