/*==================================================
PRODUCT HERO
==================================================*/

.product-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    padding:120px 24px 80px;

    background:#000;

transform: translateY(-60px);

}


/*==================================================
HERO BACKGROUND
==================================================*/

.product-hero-bg{

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
        rgba(255,255,255,.035) 1px,
        transparent 1px
    );

    background-size:8px 8px;

    opacity:.35;

    pointer-events:none;

}


.product-hero-glow{

    position:absolute;

    top:45%;

    left:50%;

    width:600px;

    height:600px;

    transform:translate(-50%,-50%);

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.08),
        transparent 70%
    );

    filter:blur(90px);

    pointer-events:none;

    animation:glowMove 12s ease-in-out infinite alternate;

}


/*==================================================
HERO CONTENT
==================================================*/

.product-hero-inner{

    position:relative;

    z-index:2;

}


.product-label{

    display:inline-block;

    margin-bottom:28px;

    font-family:"Cormorant Garamond",serif;

    font-size:.75rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    color:#777;

}


.product-hero h1{

    font-size:clamp(3rem,10vw,6rem);

    font-weight:400;

    line-height:1;

    letter-spacing:.08em;

}


.product-lead{

    max-width:620px;

    margin:32px auto 0;

    color:#aaa;

    font-size:.95rem;

    line-height:2;

}


/*==================================================
HERO IMAGE
==================================================*/

.product-hero-image{

    position:relative;

    z-index:2;

    margin-top:70px;

    animation:heroFloat 6s ease-in-out infinite;

}


.product-hero-image img{

    display:block;

    width:min(80vw,420px);

    margin:auto;

}


/*==================================================
SCROLL INDICATOR
==================================================*/

.product-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    animation:scrollPulse 3s ease-in-out infinite;

}


.product-scroll span{

    font-size:.65rem;

    letter-spacing:.35em;

    color:#777;

}


/*==================================================
PRODUCT CONCEPT
==================================================*/

.product-concept{

    padding:180px 20px;
margin-bottom:200px;

    text-align:center;

}


.product-section-label{

    display:inline-block;

    margin-bottom:28px;

    font-family:"Cormorant Garamond",serif;

    font-size:.75rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    color:#777;

}


.product-concept h2{

    margin-bottom:40px;

    font-size:clamp(2.2rem,6vw,4rem);

    font-weight:400;

    line-height:1.25;

    letter-spacing:.04em;

}


.product-concept-text{

    max-width:620px;

    margin:0 auto;

    color:#b5b5b5;

    font-size:.95rem;

    line-height:2.2;

}


/*==================================================
HERO ANIMATION
==================================================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


@keyframes glowMove{

    from{

        transform:translate(-50%,-50%) scale(1);

    }

    to{

        transform:translate(-50%,-52%) scale(1.12);

    }

}


@keyframes scrollPulse{

    0%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.4;

    }

}


/*==================================================
TABLET & MOBILE
==================================================*/

@media(max-width:768px){

    .product-hero{

        padding:100px 24px 70px;

    }

    .product-hero-image{

        margin-top:50px;

    }

    .product-concept{

        padding:120px 24px;

    }

}

/*==================================================
PRODUCT BLEND
==================================================*/




.product-blend{
    position:relative;
margin-bottom:20px;    
height:80vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:80px 20px;
    background:none;

}

/*==================================================
BACKGROUND
==================================================*/

.blend-clear::before{

    background-image:url("images/clear.jpg");

}


.blend-ember::before{

    background-image:url("images/ember.jpg");

}


/*==================================================
OVERLAY
==================================================*/

.blend-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.78)
    );

}


/*==================================================
CONTENT
==================================================*/

.product-blend .container-small{

    position:relative;

    z-index:2;

}

.blend-content{

    max-width:520px;

    transform:translateY(-50px);

}


.blend-number{

    display:inline-block;

    margin-bottom:20px;

    font-family:"Cormorant Garamond",serif;

    font-size:.75rem;

    letter-spacing:.45em;

}


.blend-content h2{

    margin-bottom:30px;

    font-size:clamp(2.5rem,6vw,4.5rem);

    font-weight:300;

    line-height:1;

    letter-spacing:.05em;

}


.blend-copy{

    margin-bottom:15px;

    font-size:1.15rem;

    line-height:1.9;

    color:#efefef;

    letter-spacing:.06em;

}


.blend-description{

    margin-bottom:30px;

    line-height:1.9;

    font-size:.9rem;

}


/*==================================================
INFO
==================================================*/

.blend-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}


.blend-info div{

    padding-bottom:0;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}


.blend-info div:last-child{

    border-bottom:none;

    padding-bottom:0;

}


.blend-info span{

    display:block;

    margin-bottom:0;

    font-size:.72rem;

    letter-spacing:.28em;

    color:#7d7d7d;

}


.blend-info p{

    color:#ececec;

    line-height:1.9;

}


/*==================================================
BACKGROUND MOTION
==================================================*/

.product-blend::before{
    content:"";
    position:absolute;

    top:60px;
    bottom:30px;
    left:24px;
    right:24px;

    background-size:90%;
    background-position:center;

    border-radius:24px;

    z-index:0;

    transition:transform 8s ease;
}

.product-blend:hover::before{
    transform:scale(1.03);
}




/*==================================================
CLEAR
==================================================*/

.blend-clear .blend-overlay{

    background:

    linear-gradient(

        rgba(0,0,0,.40),

        rgba(0,0,0,.72)

    );

}


/*==================================================
EMBER
==================================================*/

.blend-ember .blend-overlay{

    background:

    linear-gradient(

        rgba(0,0,0,.65),

        rgba(0,0,0,.88)

    );

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

.product-blend{

    height:auto;

    min-height:100vh;

    padding:100px 24px;

}


.blend-info{

    grid-template-columns:1fr;

}

    .blend-content{

        max-width:100%;

    }

    .blend-content h2{

        font-size:clamp(2.4rem,12vw,4rem);

    }

    .blend-copy{

        font-size:1rem;

    }

    .blend-description{

        font-size:.9rem;

    }

}

/*==================================================
PACKAGE
==================================================*/

.product-package{

    padding:180px 20px;

}


/*==================================================
HEADER
==================================================*/

.package-header{

    text-align:center;

    max-width:720px;

    margin:0 auto 100px;

}


.package-header h2{

    margin-top:24px;

    font-size:clamp(2.2rem,5vw,4rem);

    font-weight:400;

    line-height:1.25;

    letter-spacing:.04em;

}


.package-header p{

    margin-top:24px;

    color:#8d8d8d;

    line-height:2;

}


/*==================================================
GRID
==================================================*/

.package-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:70px;

    align-items:start;

}


/*==================================================
CARD
==================================================*/

.package-card{

    transition:
    transform .45s ease,
    opacity .45s ease;

}


.package-card:hover{

    transform:translateY(-8px);

}


/*==================================================
IMAGE
==================================================*/

.package-image{

    overflow:hidden;

    border-radius:18px;

}


.package-image img{

    width:100%;

    transition:transform 1.2s ease;

}


.package-card:hover img{

    transform:scale(1.04);

}


/*==================================================
CONTENT
==================================================*/

.package-content{

    padding-top:34px;

    text-align:center;

}


.package-content h3{

    margin-bottom:18px;

    font-size:1.45rem;

    font-weight:400;

    letter-spacing:.12em;

}


.package-content p{

    max-width:360px;

    margin:auto;

    color:#9f9f9f;

    line-height:2;

}


/*==================================================
ORDER
==================================================*/

.product-order{

    padding:200px 20px;

    text-align:center;

}


.order-inner{

    max-width:760px;

    margin:auto;

}


.order-inner h2{

    margin-top:28px;

    font-size:clamp(2.5rem,6vw,4.5rem);

    font-weight:300;

    line-height:1.3;

}


.order-lead{

    max-width:540px;

    margin:40px auto 0;

    color:#b7b7b7;

    line-height:2.2;

}


/*==================================================
ORDER LINKS
==================================================*/

.order-methods{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

    margin-top:90px;

}


.order-link{

    padding:34px 20px;

    border:1px solid rgba(255,255,255,.12);

    transition:
    background .35s ease,
    border-color .35s ease,
    transform .35s ease;

}


.order-link:hover{

    background:rgba(255,255,255,.04);

    border-color:rgba(255,255,255,.35);

    transform:translateY(-4px);

}


.order-link span{

    display:block;

    font-size:1rem;

    letter-spacing:.18em;

}


.order-link small{

    display:block;

    margin-top:10px;

    color:#777;

    letter-spacing:.15em;

}


/*==================================================
PAYMENT
==================================================*/

.payment-note{

    max-width:420px;

    margin:90px auto 0;

    padding-top:36px;

    border-top:1px solid rgba(255,255,255,.08);

}


.payment-note p{

    margin-bottom:12px;

    color:#777;

    font-size:.72rem;

    letter-spacing:.3em;

}


.payment-note span{

    color:#ddd;

    letter-spacing:.15em;

}


/*==================================================
TABLET
==================================================*/

@media(max-width:900px){

    .package-grid{

        grid-template-columns:1fr;

        gap:90px;

    }

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

    .product-package{

        padding:120px 24px;

    }

    .product-order{

        padding:140px 24px;

    }

    .package-header{

        margin-bottom:60px;

    }

    .order-methods{

        grid-template-columns:1fr;

        gap:16px;

        margin-top:60px;

    }

    .order-link{

        padding:28px;

    }

}

/*==================================================
NOTICE
==================================================*/


.product-notice{

    padding:140px 20px 120px;

    text-align:center;

}


.notice-inner{

    max-width:700px;

    margin:auto;

}


.notice-inner h2{

    margin-top:28px;

    font-size:clamp(1.8rem,4vw,3rem);

    font-weight:300;

    letter-spacing:.05em;

}



.notice-content{

    margin:60px auto 0;

}


.notice-content p{

    color:#b5b5b5;

    line-height:2.2;

    font-size:.9rem;

    margin-bottom:24px;

}



.notice-list{

text-align:left;

    margin-top:70px;

    padding-top:40px;

    border-top:

    1px solid rgba(255,255,255,.08);

}


.notice-list p{

    color:#777;

    font-size:.75rem;

    line-height:2;

    letter-spacing:.08em;

    margin-bottom:12px;

}



/*==================================================
SCROLL FADE
==================================================*/


.fade,
.product-fade{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity 1.2s ease,

    transform 1.2s cubic-bezier(.22,1,.36,1);

}


.fade.show,
.product-fade.show{

    opacity:1;

    transform:translateY(0);

}



/*==================================================
STAGGER
==================================================*/


.fade:nth-child(2){

    transition-delay:.15s;

}


.fade:nth-child(3){

    transition-delay:.3s;

}


/*==================================================
SMOOTH IMAGE MOTION
==================================================*/


.package-image,
.product-hero-image{

    overflow:hidden;

}


.package-image img{

    transition:

    transform 1.2s ease;

}



/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after{

        animation:none!important;

        transition:none!important;

    }


}



/*==================================================
FINAL MOBILE
==================================================*/

@media(max-width:768px){


    .product-notice{

        padding:100px 24px 90px;

    }


    .notice-content{

        margin-top:45px;

    }


    .notice-content p{

        font-size:.82rem;

    }


}