@charset "utf-8";

.home{
    & > *{ contain: content; }
    .home-more{ display: inline-block; padding: 10rem 30.5rem; border: 1px solid currentColor; font: 14rem var(--font-open); letter-spacing: 0; text-transform: uppercase; }
}

.hero{ position: relative; align-content: center; height: 675rem; padding-bottom: 0.1%; background: var(--black); color: #fff; isolation: isolate;
    .swiper{ position: absolute; inset: 0; z-index: -1; }
    .swiper-slide{ position: relative; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
    .slide-1::before{ background-image: url('/assets/images/home/hero-slide-1.webp'); }
    .slide-2::before{ background-image: url('/assets/images/home/hero-slide-2.webp'); }
    .container{ display: grid; max-width: 1335rem; width: calc(92% - 70rem); }
    .text-block{ justify-self: end; }
    .heading{ margin-bottom: 0.58181818em; font: 700 var(--font-size-55)/1.16363636 var(--font-sans); letter-spacing: -.03em; }
    .subheading{ font: 350 var(--font-size-20)/1.4 var(--font-sans); }
    .home-more{ margin: 40rem 0 0 8rem; }
    .hero-button{ position: absolute; top: 49.5%; translate: 0 -50%; width: 1em; aspect-ratio: 1; font: clamp(45rem, calc(50 / var(--container) * 100vw), 50rem) 'remixicon'; }
    .hero-prev{ left: clamp(0px, calc(44 / var(--container) * 100vw), 44rem); }
    .hero-next{ right: clamp(0px, calc(59 / var(--container) * 100vw), 59rem); }
    .hero-button::before{ position: absolute; inset: 0; margin: auto; }
    .hero-prev::before{ content: '\F494'; }
    .hero-next::before{ content: '\F496'; }
    .hero-pagenation{ position: absolute; inset: auto 0 3%; display: flex; justify-content: center; }
    .swiper-pagination-bullet{ margin-inline: 4rem; width: 10rem; height: 10rem; background: #ccc; box-shadow: 1px 1px 3rem #0000004D; opacity: 1; }
    .swiper-pagination-bullet-active{ background: #fff; }
    @media(width < 768px){
        .hero-prev{ left: 0; }
        .hero-next{ right: 0; }
    }
}

.business-links{ padding-block: clamp(var(--section-padding-block-mobile), calc(100 / var(--container) * 100vw), 100rem); text-align: center;
    .container{ max-width: 1712rem; }
    .list{ display: grid; gap: 3rem; color: #fff; }
    .link{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: clamp(40rem, calc(74.5 / var(--container) * 100vw), 74.5rem) 2ch; background: #545454 no-repeat 50% / cover; }
    .link-coater{ background-image: url('/assets/images/home/business-links-coater.webp'); }
    .link-slitter{ background-image: url('/assets/images/home/business-links-slitter.webp'); }
    .link-laminator{ background-image: url('/assets/images/home/business-links-laminator.webp'); }
    .title{ font: 600 var(--font-size-30)/1.2 var(--font-open); letter-spacing: 0; text-transform: uppercase; }
    .subtitle{ margin-top: 0.88888889em; font: 350 var(--font-size-18)/1.44444444 var(--font-sans); }
    .home-more{ margin-top: 25rem; }
    .info-block{ align-content: center; height: 100%; background: #213864; }
    .info-image{ display: block; width: 100%; height: auto; }
    @media(width >= 768px){
        .list{ grid-template-columns: repeat(2, 1fr); }
    }
    @media(width >= 1280px){
        .list{ grid-template-columns: repeat(4, 1fr); }
    }
}

.product-introduction{ padding-block: clamp(var(--section-padding-block-mobile), calc(80 / var(--container) * 100vw), 80rem) clamp(var(--section-padding-block-mobile), calc(96 / var(--container) * 100vw), 96rem); background: #eee;
    /* .container{ max-width: 1350rem; } */
    .container{ max-width: 1428rem; }
    .heading{ font: 700 var(--font-size-36) var(--font-sans); text-align: center; }
    .swiper{ overflow: clip; margin-top: 30rem; }
    .link{ display: block; background: #fff; border: 1px solid var(--border-color); }
    .image-block{ display: block; width: 100%; aspect-ratio: 1; }
    .text-block{ display: block; padding: 27rem 15rem; }
    .title{ font: var(--font-size-18) var(--font-open); letter-spacing: 0; letter-spacing: 0; color: #000 }
    .description{ margin-top: 1em; font: 300 14rem/1.42857143 var(--font-open); letter-spacing: 0; color: #111; }
    .product-button{ contain: content; position: absolute; top: 53.5%; translate: 0 -50%; width: 25rem; aspect-ratio: 1/2; }
    .product-prev{ left: 0; }
    .product-next{ right: 0; }
    .product-button::before{ content: ''; position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 1; border: solid #000; border-width: 1px 1px 0 0; }
    .product-prev::before{ rotate: -135deg; translate: -19% -50%; }
    .product-next::before{ rotate: 45deg; translate: -86% -50%; }
    .more-block{ margin-top: 45rem; display: flex; justify-content: center; gap: 10rem; }

    figure { overflow: hidden; aspect-ratio: 1; }
    .image-block { transform: scale(1); transition: .3s; }
    .link:hover .image-block { transform: scale(1.1); transition: .3s; }

    @media(width >= 768px){
        .swiper-block{ position: relative; padding-inline: 39rem; }
    }
    @media(width < 768px){
        .swiper{ overflow-clip-margin: 15rem; }
        .product-button{ display: none; }
    }
}

.showcase{ padding-block: clamp(var(--section-padding-block-mobile), calc(100 / var(--container) * 100vw), 100rem);
    .container{ max-width: 1330rem; }
    .video-section{ display: grid; }
    .player{ width: 100%; height: 100%; aspect-ratio: 16/9; border: 0; }
    .text-block{ align-content: center; padding: 40rem clamp(32rem, calc(43 / var(--container) * 100vw), 43rem); background: #F8F8F8; }
    .video-heading{ margin-bottom: 28rem; font: var(--font-size-52) var(--font-open); letter-spacing: 0; }
    .video-description{ font: 350 var(--font-size-18)/1.44444444 var(--font-sans); }
    .home-more{ margin-top: 40rem; }
    .client-section{ margin-top: clamp(var(--section-padding-block-mobile), calc(100 / var(--container) * 100vw), 100rem); }
    .client-heading{ font: 600 var(--font-size-36) var(--font-open); letter-spacing: 0; text-align: center; text-transform: uppercase; }
    .client-list{ margin-top: 35rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 20rem; }
    .client-logo{ display: block; width: clamp(120rem, calc(150 / var(--container) * 100vw), 150rem); height: auto; aspect-ratio: 1; object-fit: contain; }
    @media(width >= 768px){
        .video-section{ grid-template-columns: 1.45fr 1fr; }
        .text-block{ padding-block: 20rem; }
    }
    @media(width >= 1280px){
        .video-section{ grid-template-columns: 798fr 532fr; }
    }
}

.contact{ background: #EEE;
    .container{ display: grid; }
    .accent-visual{ background: #D9D9D9 url('/assets/images/home/contact-visual.webp') no-repeat 80% / cover; }
    form{ padding: clamp(var(--section-padding-block-mobile), calc(104 / var(--container) * 100vw), 104rem) clamp(var(--container-edge-offset), calc(110 / var(--container) * 100vw), 110rem) clamp(var(--section-padding-block-mobile), calc(110 / var(--container) * 100vw), 110rem); }
    .heading{ margin-bottom: 0.58333333em; font: 700 var(--font-size-36) var(--font-sans); }
    .subheading{ font: 350 var(--font-size-20)/1.4 var(--font-sans); }
    fieldset{ margin: clamp(40rem, calc(64 / var(--container) * 100vw), 64rem) 0 0; display: grid; gap: 1.6em; padding: 0; border: 0; font: 350 var(--font-size-20)/1.4 var(--font-sans); }
    .item{ display: grid; gap: .75em 1em; align-items: center; }
    .item:has(textarea) label{ align-self: start; }
    .field{ padding: 12rem; background: #fff; border: 1px solid #00000026; }
    textarea{ height: 4.84lh; box-sizing: content-box; }
    .submit-form{ margin-top: clamp(40rem, calc(64 / var(--container) * 100vw), 64rem); width: 100%; padding: 17.5rem; background: var(--cello); line-height: 1; color: #fff; }
    @media(width >= 768px){
        .container{ grid-template-columns: 800fr 1120fr; }
        .item{ grid-template-columns: 5em 1fr; }
    }
    @media(width < 768px){
        .accent-visual{ aspect-ratio: 4/3; }
        form{ padding-inline: var(--container-edge-offset); }
    }
}