@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #232323; font-size: 2vw; width: 100%; overflow-x: hidden;}

.container {padding: 0 5.5vw; margin: 0 auto;}

header {position: absolute; top: 2vw; left: 0; width: 100%; text-align: center; z-index: 1;}
header .logo {display: inline-block; width: 10vw;}
header .logo img {width: 100%;}

.io-banner {position: relative;}
.io-banner::after {content: ''; display: block; clear: both;}
.io-banner img {width: 100%; float: left;}
.io-banner .txt {position: absolute; left: 5.5vw; bottom: 7.3vw; width: 36vw;}
.io-banner .txt h1 {font-size: 8.4vw; color: #ffd638; text-transform: uppercase;}
.io-banner .txt p {font-size: 2.47vw; color: #fff;}
.io-banner .ctas {position: absolute; top: 2vw; right: 5.5vw; z-index: 1; text-align: right;}
.io-banner .ctas a { display: inline-block; padding: .5vw 2vw; background: #ffd638; color: #212121; border: 0; border-radius: 2vw; text-decoration: none; font-size: 1vw; font-weight: 700;}

.io-movement {display: grid; grid-template-columns: 50% 50%;}
.io-movement .pic img {width: 100%; float: left;}
.io-movement .pic::after {content: ''; display: block; clear: both;}
.io-movement .txt {padding: 4vw 5.5vw; background: #ffd638;}
.io-movement .txt h2 {font-size: 4vw; font-weight: 400; margin-bottom: 1.5vw;}
.io-movement .txt h2 strong {font-weight: 900;}
.io-movement .txt p {font-size: 2vw; margin-bottom: 1.5vw;}
.io-movement .txt h3 {font-size: 2.4vw; margin-bottom: 1.5vw; font-weight: 900;}
.io-movement .txt strong {font-weight: 900;}

.io-everyday {display: grid; grid-template-columns: 50% 50%;}
.io-everyday .pic {position: relative;}
.io-everyday .pic img {width: 100%; float: left;}
.io-everyday .pic::after {content: ''; display: block; clear: both;}
.io-everyday .pic .caption {position: absolute; top: 5.5vw; left: 5.5vw; font-size: 4.4vw; color: #fff; display: block; font-weight: 700;}
.io-everyday .pic .caption span {color: #ffd638;}
.io-everyday .txt {padding: 4vw 5.5vw;}
.io-everyday .txt ul {display: block; list-style: none; margin-bottom: 2vw;}
.io-everyday .txt ul li {display: block; font-size: 2.8vw; color: #505050; margin-bottom: .8vw;}
.io-everyday .txt ul li strong {display: inline-block; background: #ffe378; color: #232323; padding: .2vw; font-weight: 900; line-height: 2.8vw;}
.io-everyday .txt h5 {display: block; font-size: 2.8vw; color: #353535; margin-bottom: 4vw; font-style: italic; font-weight: 400;}
.io-everyday .txt p {font-weight: 500;}
.io-everyday .txt h2 {display: block; font-size: 4.4vw; font-weight: 900; text-transform: uppercase;}

.io-mission {text-align: center; padding: 4vw 0; background: #f4f4f4;}
.io-mission p {font-size: 2.6vw; margin-bottom: 2vw;}
.io-mission h3 {font-size: 2.6vw; font-weight: 900;}
.io-mission h2 {font-size: 4vw; font-weight: 900; text-transform: uppercase;}

.io-collage {padding: 4vw 0;}
.collage_wrap {display: grid; grid-template-columns: 29% 30% 36%; gap: .4vw;}
.collage_wrap img {width: 100%;}
.collage_wrap .txt {padding: 2vw; background: #ffd638; text-align: center;}
.collage_wrap .txt h3 {font-size: 2.6vw; text-transform: uppercase; font-weight: 900;}
.collage_wrap .item {border-radius: 2vw; margin-bottom: .4vw; font-weight: 700;}
.collage_wrap .item img {float: left;}
.collage_wrap .item::after {content: ''; display: block; clear: both;}
.collage_wrap .item8 {display: grid; grid-template-columns: 50% 50%; gap: .4vw;}
.collage_wrap .item8 .item1 {padding-top: 3vw;}

.io-challenge {padding: 4vw 0; background: #ffd638;}
.io-challenge .challengeWrap {display: grid; grid-template-columns: 45% 55%; gap: .4vw;}
.io-challenge .challengeWrap .head h3 {margin-bottom: 2vw; font-size: 2.6vw;}
.io-challenge .challengeWrap .head p {margin-bottom: 9vw; font-size: 2.6vw;}
.io-challenge .challengeWrap .head h2 {font-weight: 700; margin-bottom: 2vw; font-size: 4vw;}
.io-challenge .challengeWrap .head .challengebtn {font-weight: 600; font-size: 1.8vw; display: inline-block; padding: 1vw 2vw; background: #060606; color: #fff; text-decoration: none; border-radius: 2vw;}
.io-challenge .challengeWrap .txt {font-size: 4vw; color: #505050; text-align: right;}
.io-challenge .challengeWrap .txt strong {color: #060606; font-weight: 900;}
.io-challenge .challengeWrap .txt p {display: inline-block; border-bottom: 1px solid #e6c133; position: relative; padding: .2vw 0;}
.io-challenge .challengeWrap .txt p::before {content: ''; display: block; width: 5.5vw; height: 1px; background:  linear-gradient(
    to right,
    #ffd638 0%,
    #e6c133 100%
); position: absolute; bottom: -1px; left: 0%;}
.io-challenge .challengeWrap .txt p::after {content: ''; display: block; width: 5.5vw; height: 1px; background: #e6c133; position: absolute; bottom: -1px; left: 100%;}

.io-choose {padding: 4vw 0;}
.io-choose .chooseWrap {display: grid; grid-template-columns: 41.8% 57.8%; gap: .4vw;}
.io-choose .chooseWrap img {width: 100%;}
.io-choose .chooseWrap .col1 {position: relative;}
.io-choose .chooseWrap .col1 .txt {position: absolute; bottom: 5.5vw; left: 4vw; font-size: 2.6vw; color: #fff;}
.io-choose .chooseWrap .col1 .txt p {margin-bottom: 4vw; line-height: 3.6vw;}
.io-choose .chooseWrap .col1 .txt p strong {color: #ffd638;}
.io-choose .chooseWrap .col2 .imageoverlay {position: relative;}
.io-choose .chooseWrap .col2 .imageoverlay img {width: 100%;}
.io-choose .chooseWrap .col2 .imageoverlay .txt {position: absolute; bottom: 3vw; left: 4vw; font-size: 2.6vw; color: #fff;}
.io-choose .chooseWrap .col2 .imageoverlay .txt p {margin-bottom: 4vw;}
.io-choose .chooseWrap .col2 .imageoverlay .txt p:last-child {margin-bottom: 0;}
.io-choose .chooseWrap .col2 .imageoverlay .txt p strong {color: #ffd638;}
.io-choose .chooseWrap .col2 .takeokaypledge {padding: 2vw; background: #ffd638; border-radius: 2vw;}
.io-choose .chooseWrap .col2 .takeokaypledge h3 {margin-bottom: 2vw;}
.io-choose .chooseWrap .col2 .takeokaypledge p {margin-bottom: 2vw; font-size: 1.8vw;}
.io-choose .chooseWrap .col2 .takeokaypledge .fwrap {display: grid; grid-template-columns: 48% 48%; gap: 2vw;}
.io-choose .chooseWrap .col2 .takeokaypledge .fwrap input[type=email] {display: block; width: 100%; padding: 1vw 2vw; border: .2vw solid #fff; border-radius: 2vw; background: none; font-size: 1.2vw;}
.io-choose .chooseWrap .col2 .takeokaypledge .fwrap .btn {display: block; width: 100%; padding: 1vw 2vw; background: #060606; color: #fff; border: 0; border-radius: 2vw; text-decoration: none; border: .2vw solid #060606; font-size: 1.2vw}

.io-wearprotectsprad {padding: 4vw 0;}
.io-wearprotectsprad .container {display: grid; grid-template-columns: 32% 32% 32%; gap: 1.5vw;}
.io-wearprotectsprad .box {background: #ebebeb; border-radius: 2vw; position: relative;}
.io-wearprotectsprad .box .boxInner {padding: 3vw; padding-bottom: calc(3vw + 8vw);}
.io-wearprotectsprad .box h2 {font-size: 3vw; margin-bottom: 2vw;}
.io-wearprotectsprad .box h4 {font-size: 2vw;}
.io-wearprotectsprad .box h4 a {color: #169dd6; text-decoration: none;}
.io-wearprotectsprad .box p {font-size: 2vw; margin-bottom: 1vw;}
.io-wearprotectsprad .box img {width: 100%;}
.io-wearprotectsprad .box .bottxt {position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.5vw;}
.io-wearprotectsprad .box .bottxt p {font-size: 1.7vw; margin-bottom: 1vw;}
.io-wearprotectsprad .box .bottxt .cta a { display: inline-block; padding: 1vw 2vw; background: #ffd638; color: #212121; border: 0; border-radius: 2vw; text-decoration: none; font-size: 1.5vw; font-weight: 700;}
.io-wearprotectsprad .box .bottxt .price {font-size: 2vw;}
.io-wearprotectsprad .box:nth-child(1) {background: linear-gradient(
    to bottom right,
    #e9e9e9 0%,
    #fefefe 50%,
    #e3e3e3 100%
);}
.io-wearprotectsprad .box:nth-child(2) {background: linear-gradient(
    to bottom,
    #e9e9e9 0%,
    #fefefe 50%,
    #e3e3e3 100%
);}
.io-wearprotectsprad .box:nth-child(3) {background: linear-gradient(
    to bottom right,
    #e9e9e9 0%,
    #fefefe 50%,
    #e3e3e3 100%
);}
.io-wearprotectsprad .girlbg .boxInner {background-image: url(../images/SpradTheMovementGirl.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 66% auto;
}

/* ==========================================
   Premium Scroll Animations & Hover Effects
   ========================================== */

/* Base animation setup */
.reveal-init {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Page load animations */
header {
    transform: translateY(-30px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-loaded header {
    transform: translateY(0);
    opacity: 1;
}

/* Banner section */
.io-banner {
    overflow: hidden;
}
.io-banner img {
    transform: scale(1.08);
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.page-loaded .io-banner img {
    transform: scale(1);
}
.io-banner .txt {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.15s;
}
.page-loaded .io-banner .txt {
    transform: translateY(0);
    opacity: 1;
}
.io-banner .ctas {
    transform: translateY(-15px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
}
.page-loaded .io-banner .ctas {
    transform: translateY(0);
    opacity: 1;
}

/* Movement section */
.io-movement.reveal-init {
    opacity: 1; /* parent stays visible, children animate */
}
.io-movement .txt {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-movement.in-view .txt {
    transform: translateX(0);
    opacity: 1;
}
.io-movement .pic {
    transform: translateX(50px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-movement.in-view .pic {
    transform: translateX(0);
    opacity: 1;
}

/* Everyday millions section */
.io-everyday.reveal-init {
    opacity: 1;
}
.io-everyday .pic {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-everyday.in-view .pic {
    transform: scale(1);
    opacity: 1;
}
.io-everyday .pic .caption {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
}
.io-everyday.in-view .pic .caption {
    transform: translateY(0);
    opacity: 1;
}
.io-everyday .txt ul li {
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-everyday.in-view .txt ul li:nth-child(1) { transition-delay: 0.1s; }
.io-everyday.in-view .txt ul li:nth-child(2) { transition-delay: 0.2s; }
.io-everyday.in-view .txt ul li:nth-child(3) { transition-delay: 0.3s; }
.io-everyday.in-view .txt ul li:nth-child(4) { transition-delay: 0.4s; }
.io-everyday.in-view .txt ul li {
    transform: translateY(0);
    opacity: 1;
}
.io-everyday .txt h5,
.io-everyday .txt p,
.io-everyday .txt h2 {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-everyday.in-view .txt h5 { transition-delay: 0.5s; }
.io-everyday.in-view .txt p:nth-of-type(1) { transition-delay: 0.6s; }
.io-everyday.in-view .txt h2 { transition-delay: 0.7s; }
.io-everyday.in-view .txt p:nth-of-type(2) { transition-delay: 0.8s; }
.io-everyday.in-view .txt h5,
.io-everyday.in-view .txt p,
.io-everyday.in-view .txt h2 {
    transform: translateY(0);
    opacity: 1;
}

/* Mission section */
.io-mission.reveal-init {
    transform: translateY(30px);
}
.io-mission.in-view {
    transform: translateY(0);
    opacity: 1;
}

/* Collage section */
.io-collage.reveal-init {
    opacity: 1;
}
.io-collage .collage_wrap .item {
    transform: translateY(35px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-collage.in-view .col:nth-child(1) .item:nth-child(1) { transition-delay: 0.05s; }
.io-collage.in-view .col:nth-child(1) .item:nth-child(2) { transition-delay: 0.15s; }
.io-collage.in-view .col:nth-child(1) .item:nth-child(3) { transition-delay: 0.25s; }
.io-collage.in-view .col:nth-child(2) .item:nth-child(1) { transition-delay: 0.1s; }
.io-collage.in-view .col:nth-child(2) .item:nth-child(2) { transition-delay: 0.2s; }
.io-collage.in-view .col:nth-child(2) .item:nth-child(3) { transition-delay: 0.3s; }
.io-collage.in-view .col:nth-child(3) .item:nth-child(1) { transition-delay: 0.15s; }
.io-collage.in-view .col:nth-child(3) .item:nth-child(2) { transition-delay: 0.25s; }
.io-collage.in-view .col:nth-child(3) .item:nth-child(3) { transition-delay: 0.35s; }
.io-collage.in-view .col:nth-child(3) .item:nth-child(3) .item1 { transition-delay: 0.4s; }
.io-collage.in-view .col:nth-child(3) .item:nth-child(3) .item9 { transition-delay: 0.45s; }

.io-collage.in-view .collage_wrap .item {
    transform: translateY(0);
    opacity: 1;
}

/* Collage Hover zoom effect */
.collage_wrap .item:not(.item8) {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-collage.in-view .collage_wrap .item:not(.item8):hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Challenge section */
.io-challenge.reveal-init {
    opacity: 1;
}
.io-challenge .challengeWrap .head {
    transform: translateX(-35px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-challenge.in-view .head {
    transform: translateX(0);
    opacity: 1;
}
.io-challenge .challengeWrap .txt p {
    transform: translateX(35px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-challenge.in-view .txt p:nth-child(1) { transition-delay: 0.05s; }
.io-challenge.in-view .txt p:nth-child(2) { transition-delay: 0.1s; }
.io-challenge.in-view .txt p:nth-child(3) { transition-delay: 0.15s; }
.io-challenge.in-view .txt p:nth-child(4) { transition-delay: 0.2s; }
.io-challenge.in-view .txt p:nth-child(5) { transition-delay: 0.25s; }
.io-challenge.in-view .txt p:nth-child(6) { transition-delay: 0.3s; }

.io-challenge.in-view .txt p {
    transform: translateX(0);
    opacity: 1;
}

/* Choose section */
.io-choose.reveal-init {
    opacity: 1;
}
.io-choose .col1 {
    transform: translateX(-40px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-choose.in-view .col1 {
    transform: translateX(0);
    opacity: 1;
}
.io-choose .col2 {
    transform: translateX(40px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-choose.in-view .col2 {
    transform: translateX(0);
    opacity: 1;
}
.io-choose .takeokaypledge .fwrap .field {
    transform: scale(0.98);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
}
.io-choose.in-view .takeokaypledge .fwrap .field {
    transform: scale(1);
    opacity: 1;
}
.io-choose .chooseWrap .col2 .takeokaypledge .fwrap input[type=email] {
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.io-choose .chooseWrap .col2 .takeokaypledge .fwrap input[type=email]:focus {
    outline: none;
    border-color: #060606;
    background: rgba(255, 255, 255, 0.15);
}

/* Wear/Protect/Spread Section */
.io-wearprotectsprad.reveal-init {
    opacity: 1;
}
.io-wearprotectsprad .box {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-wearprotectsprad .container .box:nth-child(1) { transition-delay: 0.05s; }
.io-wearprotectsprad .container .box:nth-child(2) { transition-delay: 0.15s; }
.io-wearprotectsprad .container .box:nth-child(3) { transition-delay: 0.25s; }

.io-wearprotectsprad .box.in-view {
    transform: translateY(0);
    opacity: 1;
}
/* Box hover effect */
.io-wearprotectsprad .box {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.io-wearprotectsprad .box.in-view:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

footer {padding: 1.2vw 0; background: #e7e7e8; color: #3b3b3b; font-size: 1.4vw;}
footer .ftiner {display: grid; grid-template-columns: 50% 50%; align-items: center;}
footer .ftiner .gplay {text-align: right;}
footer .ftiner .gplay img {width: 14vw; float: right;}
footer .ftiner .gplay::after {content: ''; display: block; clear: both;}
footer .ftiner .copy .email {font-size: 1.8vw; display: block; margin-bottom: 12px;}
footer .ftiner .copy .email a {text-decoration: none; display: block; margin-bottom: 12px; color: #169dd6;}

/* Button & Link Micro-interactions */
.io-banner .ctas a {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.io-banner .ctas a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 214, 56, 0.4);
    background: #ffe066;
}

.io-challenge .challengeWrap .head .challengebtn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.io-challenge .challengeWrap .head .challengebtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    background: #1c1c1c;
}

.io-choose .chooseWrap .col2 .takeokaypledge .fwrap .btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.io-choose .chooseWrap .col2 .takeokaypledge .fwrap .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    background: #1c1c1c;
}

.io-wearprotectsprad .box .bottxt .cta a {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.io-wearprotectsprad .box .bottxt .cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 214, 56, 0.4);
    background: #ffe066;
}

/* Heading word-by-word reveal transitions */
.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.05em;
    margin-bottom: -0.05em;
}

.word-inner {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.in-view .word-inner,
.page-loaded .io-banner .word-inner,
.page-loaded header .word-inner {
    transform: translateY(0);
    opacity: 1;
}