body{scroll-behavior: smooth; background-color: #fff; font-family: "proxima-nova",sans-serif; font-size: 16px; line-height: normal; color: #211D1E;}
#wrapper, .quiltmotion-page{background: #fff;}
.quiltmotion-page h1, .quiltmotion-page h2, .quiltmotion-page h3, .quiltmotion-page h4{font-family: "futura_md_btbold" !important; color: #211D1E; font-weight: 700; margin: 0; padding: 0;}
.quiltmotion-page h1{font-size: 48px; line-height: 1.25;}
.quiltmotion-page h2{font-size: 40px; line-height: 1.25;}
.font-24{font-size: 24px; line-height: 1.25;}
.font-18{font-size: 18px; line-height: 1.25;}
.font-italic{font-style: italic;}

.quiltmotion-page .btn{padding: 10px 16px; font-family: "proxima-nova",sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;}
.quiltmotion-page .btn-white{background: #fff; border: 1px solid #D3D2D2 !important; color: #211D1E !important;}
.quiltmotion-page .btn-white:hover, .quiltmotion-page .btn-white:focus{background: #E9E8E8; border: 1px solid #D3D2D2 !important; color: #211D1E !important;}
.quiltmotion-page .btn-black{background: #211D1E; border: 1px solid #211D1E !important; color: #fff !important;}
.quiltmotion-page .btn-black:hover, .quiltmotion-page .btn-black:focus{background: #4D4A4B; border: 1px solid #4D4A4B !important; color: #fff !important;}

.pt-240{padding-top: 240px;}
.pt-160{padding-top: 160px;}
.gradient-text{background: linear-gradient(45deg, #2A3790, #66C8CE);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent; }

.hero-bg{background: url("../images/new/quiltmotion/hero-bg.jpg") no-repeat center top; background-size: cover; overflow: hidden;}
.hero-bg .wrap{min-height: calc(100vh - 100px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.hero-content{padding: 200px 0 0; max-width: 808px; text-align: center; color: #fff; flex-grow: 1;}
.hero-title{font-family: 'futura_md_btbold' !important; color: inherit; font-size: 64px; line-height: 1.25; font-weight: 700; margin-bottom: 24px;}
.hero-content p{font-weight: 500; padding: 0;}
.hero-image{max-width: 917px; margin: 0 auto; display: block; margin-top: -24px;}

.make-bg{padding: 240px 0; background: linear-gradient(to bottom, #F0FAFA, #FFFFFF);}
.make-section{max-width: 1496px; margin: 0 auto;}
.make-left{width: 472px;}
.make-description{margin-bottom: 24px;}
.make-right{max-width: 856px; width: 100%;}
.make-right-col{width: 224px;}
.make-right-title{font-size: 32px; line-height: 1.25; font-weight: 300;}
.make-right-description{color: #7A7778;}

.training-bg{background: url("../images/new/quiltmotion/training-bg.png") no-repeat center center; background-attachment: fixed;}
.training-wrap{max-width: 1920px; margin: 0 auto; min-height: 220vh;}
.training-label{color: #66C8CE; padding-right: 40px; position: sticky; top: 100px;}
.training-section{max-width: 570px; margin: 0 auto; text-align: center; font-family: "futura_md_btbold"; font-size: 80px; line-height: 1.25; color: #C0E8EB;}
.training-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
#trainingText { will-change: color, transform; }
#trainingText .char { transition: color .12s linear; }
#trainingText .char.on { color: #66C8CE; }
.training-label { transition: transform .35s ease, opacity .35s ease; will-change: transform, opacity; }
.training-label.up { transform: translateY(-150%); opacity: 0; } /* adjust as you like */


.quilt-video{padding-top: 160px;}
.video-section { position: relative; }
.video-holder { min-height: 220vh; }
.video-sticky { position: sticky; top: 40px; height: 100vh; display: flex; align-items: center; justify-content: center; }
.video-box { width: 100vw; height: calc(100vh - 80px); transform-origin: center center; transform: scale(var(--vScale, .75)); border-radius: calc(24px * (1 - var(--vScale, .75))); overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); will-change: transform, border-radius; }
.video-box iframe { width: 100%; height: 100%; border: 0; display: block; }


.quilt-walkthrough-bg { position: relative; height: calc(var(--step-count,1)*100vh); }
.quilt-walkthrough-bg .wrap { position: sticky; top: 48px; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: url("../images/new/quiltmotion/walkthrough-bg.png") no-repeat center center; background-size: 100% 320px; max-width: 100%; }
.quilt-walkthrough-wrap { max-width: 1630px; margin: 0 auto; padding: 80px 32px; height: 100vh; width: 100%; position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(40px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; box-sizing: border-box; gap: 64px;}
.quilt-walkthrough-wrap.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.quilt-walkthrough-img { max-width: 892px; min-width: 700px; width: 100%; }
.quilt-walkthrough-text { color: #fff; max-width: 600px; width: 100%; position: relative; }
.quilt-walkthrough-text-child { display: flex; min-height: 320px; justify-content: center; flex-direction: column; }
.quilt-walkthrough-text h2 { color: inherit; margin: 8px 0 0; font-size: clamp(32px,4vw,56px); }
.quilt-walkthrough-desc { color: #E9E8E8; }
.quilt-walkthrough-text .btn { position: absolute; left: 0; }
.circle-arrow {position: absolute; bottom: 4px; right: calc(50% - 50px); background: url("../images/new/quiltmotion/arrow-circle-down.png") no-repeat center center; background-size: contain; width: 100px; height: 100px; display: inline-block; animation: bounce 2s ease-in-out infinite;}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.quilt-motion-child{max-width: 1464px; margin: 0 auto;}
.quilt-motion-left{padding-top: 10rem; }
.quilt-motion-1{padding-top: 60px;}
.quilt-motion-right{padding-top: 12rem;}

.quilt-motion-title{font-family: "futura_md_btbold"; font-size: 160px; line-height: 112px; color: #C0E8EB; letter-spacing: 10px;}
.compatibility-bg{background: #C0E8EB; padding-bottom: 180px;}
.compatibility-box{max-width: 1320px;}
.compatibility-box-child{max-width: 640px; width: 100%; margin-top: -70px;}
.compatibility-span{margin-top: 40px;}
.compatibility-span span{color: #C0E8EB; background: #3E7A7E; padding: 4px 12px; display: inline-block; -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px;}
.compatibility-title{color: #211D1E; font-weight: 600;}
.compatibility-text{color: #7A7778; font-weight: 600;}

.quiltmotion-popup{position: fixed; top: 0; left: 0; width:100%; height:100vh; overflow-y: auto; z-index:9999999999; background: url(../images/new/quiltmotion/walkthrough/bg.jpg) center center no-repeat; background-size: cover; background-attachment: fixed;}
.quiltmotion-popup.d-none{display: none;}
.quiltmotion-popup-content{max-width: 1496px; margin: 0 auto; padding: 80px 0;}
.quiltmotion-popup-top{display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid #fff; padding-bottom: 16px;}
.quiltmotion-popup-top{color: #fff;}
.link-text-restart a{color: #fff; border-bottom: 1px solid transparent; font-style: italic; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; padding: 2px 0;}
.link-text-restart a:hover{color: #fff; border-color: #fff;}
.quiltmotion-popup-step{letter-spacing: 2px;}
.quiltmotion-popup-middle{padding-top: 80px; text-align: center;}
.quiltmotion-popup .w-step{display: none;}
.quiltmotion-popup .w-step.active{display: block;}
.is-hidden { display: none !important; }
.w-step-complete{position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease;}
.w-step-complete img{max-width: 100%; height: 100%; object-fit: contain;}
.w-step-complete.hide {opacity: 0; transition: opacity 0.5s ease; pointer-events: none;}

/* Subtle fade-up variant for AOS */
[data-aos="fade-up-sm"] {
opacity: 0;
transform: translateY(50px);      /* smaller movement = “minor” */
transition-property: transform, opacity;
}

[data-aos="fade-up-sm"].aos-animate {
opacity: 1;
transform: translateY(0);
}

.compatibility-bg [data-aos="fade-up"]{
transform: translateY(280px);
opacity: 1 !important;
}

.compatibility-bg [data-aos="fade-up"].aos-animate{
transform: translateY(0);
}


@media screen and (max-height: 1150px) {
.hero-content{padding-top: 9vh;}
.hero-bg{background-size: 120% 100%;}
}

@media screen and (max-height: 1000px) {
.hero-content{padding-top: 64px;}
.hero-title{font-size: 48px; line-height: 1.2; margin-bottom: 16px;}
.hero-image{max-width: 800px;}
}

@media screen and (max-height: 900px) {
.hero-content{padding-top: 48px;}
}

@media screen and (max-height: 800px) {
.hero-image{max-width: 600px;}
.quiltmotion-popup-content{padding: 24px 0;}
.quiltmotion-popup-middle{padding-top: 24px;}
.circle-arrow{height: 50px; width: 50px; right: calc(50% - 25px);}
}

@media screen and (max-width: 1420px) {
.quilt-motion-title{font-size: 120px; line-height: 80px;}
.compatibility-box-child{margin-top: -50px;}
}

@media screen and (max-width: 1280px) {
.make-bg{padding: 120px 0;}
.quilt-motion-left{padding-top: 8rem;}
.quilt-motion-right{padding-top: 10rem;}
.quilt-motion-1{padding-top: 24px;}
.quilt-walkthrough-bg .wrap{background-size: 100% 280px;}
.quilt-walkthrough-wrap{gap: 48px; padding: 40px 24px;}
.quilt-walkthrough-img{min-width: 560px;}
.quilt-walkthrough-text h2{margin-top: 16px;}
.quilt-walkthrough-desc{margin-top: 16px; font-size: 18px;}

.quiltmotion-popup-content{padding: 40px 0;}
.quiltmotion-popup-middle{padding-top: 40px;}
}

@media screen and (max-width: 1152px) {
.hero-content, .pt-160, .pt-240{padding-top: 120px;}
.make-section{flex-direction: column;}
.make-left{text-align: center;}
.compatibility-bg{padding-bottom: 120px;}
.quilt-motion-title{font-size: 90px; line-height: 56px;}
.compatibility-box-child{margin-top: -30px;}
}

@media screen and (max-width: 1024px) {
.pt-160, .pt-240{padding-top: 100px;}
.hero-title{font-size: 48px;}
.training-section{max-width: 420px; font-size: 60px;}
.compatibility-bg{padding-bottom: 100px;}
.quilt-walkthrough-bg .wrap{background-size: cover; background-position: center 25vh; padding-bottom: 60px;}
.quilt-walkthrough-wrap{flex-direction: column; margin-top: 80px; height: auto; justify-content: flex-start; gap: 24px;}
.quilt-walkthrough-img{min-width: auto;}
.quilt-walkthrough-text-child{min-height: auto;}
}

@media screen and (max-width: 991px) {
.m-mt-24{margin-top: 24px;}
.quilt-motion-left{padding-top: 6rem;}
.quilt-motion-right{padding-top: 8rem;}

.quiltmotion-popup-content{padding: 24px 0;}
.quiltmotion-popup-content .font-24{font-size: 18px;}
}

@media screen and (max-width: 850px) {
.quilt-motion-title{font-size: 80px; line-height: 46px; letter-spacing: 5px;}
.compatibility-box-child{margin-top: -20px;}
}

@media screen and (max-width: 768px) {
.quiltmotion-page h1{font-size: 36px;}
.quiltmotion-page h2{font-size: 30px;}
.quiltmotion-page h3{font-size: 24px;}

.hero-content, .pt-160, .pt-240{padding-top: 80px;}
.hero-title{font-size: 32px;}
.hero-image{margin-top: 16px;}
.font-24{font-size: 20px;}
.quiltmotion-page .btn{min-width: 48%;}
.make-bg{padding: 60px 0;}
.training-section{max-width: 340px; font-size: 46px; margin-top: 24px;}
.quilt-motion-title{font-size: 70px; line-height: 46px; letter-spacing: 3px;}
.compatibility-bg{padding-bottom: 60px;}
.compatibility-span{margin-top: 24px;}
.circle-arrow{display: none;}
}

@media screen and (max-width: 650px) {
.make-left{max-width: 472px; width: 100%;}
.make-description{margin-bottom: 16px;}
.make-right{flex-direction: column;}
.make-right-col{max-width: 224px; width: 100%; margin: 0 auto;}
.quilt-motion-child{flex-direction: column; text-align: center;}
.quilt-motion-left, .quilt-motion-right{padding-top: 0;}
.quilt-motion-middle .quilt-motion-img{width: 50%;}
.quilt-motion-img img{width: 100%;}
.quilt-motion-title{font-size: 10vw; line-height: 6.6vw;}
.compatibility-box{flex-direction: column;}
.compatibility-box-child{margin-top: 32px;}

.quiltmotion-popup-top { flex-wrap: wrap; justify-content: space-between; gap: 0; }
.quiltmotion-popup-title, .quiltmotion-popup-close { flex: 1 1 auto; order: 1; }
.quiltmotion-popup-close{justify-content: flex-end;}
.quiltmotion-popup-step { width: 100%; order: 2;  }
}