/* =========================
   TOKENS
========================= */

:root{

    --cream:#faf8f3;
    --ink:#171717;
    --paper:#ffffff;
    --sand:#e9e4d8;
    --line:#e6e6e6;
    --blue:#3867ff;
    --blue-dark:#2650db;

    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;

    --container:1300px;

    /* fluid side padding: grows with viewport, caps out on large screens */
    --pad: clamp(20px, 5vw, 35px);

    --shadow-soft:0 10px 30px rgba(0,0,0,.08);
    --shadow-lift:0 15px 40px rgba(0,0,0,.15);
}


/* =========================
   GLOBAL
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


/* =========================
   PREVENT HORIZONTAL SCROLL
   (applies at every breakpoint,
   not just inside a media query)
========================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}


body{

    font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

    background:var(--cream);

    color:var(--ink);

    -webkit-font-smoothing:antialiased;

}


img{
    display:block;
    max-width:100%;
    height:auto;
}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


/* consistent, visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible{

    outline:3px solid var(--blue);
    outline-offset:3px;
    border-radius:4px;

}


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

    *{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

}




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


header{

    position:sticky;

    top:0;

    z-index:1000;

    background:var(--paper);

    border-bottom:1px solid var(--line);

}



.nav-container{

    max-width:var(--container);

    margin:auto;

    padding:16px var(--pad);

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo{

    font-size:clamp(20px, 2.4vw, 28px);

    font-weight:800;

    letter-spacing:-1px;

    white-space:nowrap;

}




/* =========================
   DESKTOP NAVIGATION
========================= */


.desktop-nav{

    display:flex;

    align-items:center;

    gap:clamp(12px, 2.5vw, 35px);

}



.desktop-nav>a,
.dropdown button{

    font-size:16px;

    padding:10px;

    border-radius:8px;

    transition:color .2s ease, background .2s ease;

}



.desktop-nav>a:hover,
.dropdown button:hover{

    color:var(--blue);

    background:rgba(56,103,255,.06);

}





/* DROPDOWNS */


.dropdown{

    position:relative;

}



.dropdown button{

    display:flex;

    align-items:center;

    gap:4px;

}



.dropdown-content{

    position:absolute;

    top:48px;

    left:0;


    width:230px;


    background:var(--paper);


    border-radius:var(--radius-md);


    padding:10px 0;


    box-shadow:var(--shadow-lift);



    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);



    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;


}



.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.dropdown-content a{

    display:block;

    padding:14px 20px;

    font-size:15px;

}



.dropdown-content a:hover{

    background:#f4f4f4;

}







/* =========================
   HAMBURGER
========================= */


.hamburger{


    display:none;


    width:44px;

    height:44px;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:6px;


    border-radius:10px;


    transition:background .2s ease;


}


.hamburger:hover{

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

}




.hamburger span{


    width:26px;


    height:3px;


    background:var(--ink);


    border-radius:20px;


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


}









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


.mobile-menu{


    position:fixed;


    top:0;

    left:0;


    width:100%;


    height:100dvh;


    background:var(--paper);


    z-index:2000;



    display:flex;


    flex-direction:column;


    overflow:hidden;



    transform:translateX(100%);



    transition:transform .35s cubic-bezier(.4,0,.2,1);


}



.mobile-menu.active{


    transform:translateX(0);


}






.mobile-header{


    display:flex;


    justify-content:space-between;


    align-items:center;



    padding:20px var(--pad);



    border-bottom:1px solid var(--line);


}



.mobile-header h2{


    font-size:20px;


}



.mobile-header button{


    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    border-radius:50%;


}


.mobile-header button:hover{

    background:rgba(0,0,0,.05);

}






.mobile-links{


    display:flex;


    flex-direction:column;


    overflow-y:auto;


}




.mobile-links a,
.mobile-links button{


    width:100%;


    padding:20px var(--pad);


    text-align:left;


    background:var(--paper);


    border-bottom:1px solid #eee;


    font-size:18px;



    display:flex;


    justify-content:space-between;

    align-items:center;


}









/* MOBILE SUB PANELS */


.mobile-panel{


    position:absolute;


    inset:0;


    background:var(--paper);


    display:flex;


    flex-direction:column;


    overflow-y:auto;



    transform:translateX(100%);



    transition:transform .35s cubic-bezier(.4,0,.2,1);


}



.mobile-panel.show{


    transform:translateX(0);


}



.mobile-panel a,
.mobile-panel .back{


    padding:20px var(--pad);


    background:var(--paper);


    border-bottom:1px solid #eee;


    font-size:18px;


    text-align:left;


}


.mobile-panel .back{

    font-weight:600;

    color:var(--blue);

}









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


.hero{


    max-width:var(--container);


    margin:auto;


    padding:clamp(50px, 9vw, 90px) var(--pad);


    display:grid;


    grid-template-columns:1.1fr 1fr;


    gap:clamp(30px, 5vw, 60px);


    align-items:center;


}





.hero-text h1{


    font-size:clamp(34px, 5.6vw, 64px);


    line-height:1.05;


    letter-spacing:-2px;


    margin-bottom:22px;


}



.hero-text p{


    font-size:clamp(16px, 1.6vw, 20px);


    line-height:1.6;


    max-width:550px;


    margin-bottom:32px;


}






.primary-button{


    display:inline-block;


    background:var(--blue);


    color:white;


    padding:16px 35px;


    border-radius:12px;


    font-size:18px;


    transition:transform .25s ease, background .25s ease;


}



.primary-button:hover{


    transform:translateY(-3px);

    background:var(--blue-dark);


}






.hero-book{


    aspect-ratio:4/3;

    width:100%;

    max-height:450px;


    background:var(--sand);


    border-radius:var(--radius-lg);


    display:flex;


    justify-content:center;


    align-items:center;

    overflow:hidden;


}



.book-placeholder{


    width:clamp(150px, 22vw, 220px);

    aspect-ratio:11/16;


    background:white;


    box-shadow:0 20px 40px rgba(0,0,0,.15);



    display:flex;


    justify-content:center;


    align-items:center;


    text-align:center;

    border-radius:6px;

    padding:16px;

    font-size:14px;

    color:#8a8a8a;


}









/* =========================
   PRODUCTS
========================= */


.featured{


    max-width:var(--container);


    margin:auto;


    padding:clamp(40px, 7vw, 70px) var(--pad);


}



.featured h2{


    font-size:clamp(28px, 4vw, 40px);


    margin-bottom:clamp(24px, 4vw, 40px);


}




.product-grid{


    display:grid;


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


    gap:clamp(18px, 3vw, 30px);


}





.product-card{


    background:var(--paper);


    border-radius:var(--radius-lg);


    padding-bottom:24px;


    overflow:hidden;


    box-shadow:var(--shadow-soft);

    transition:transform .25s ease, box-shadow .25s ease;

    display:flex;

    flex-direction:column;


}


.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}





.product-image{

    /* book-cover proportions, consistent no matter what size png is uploaded */
    aspect-ratio:4/3;

    width:100%;

    background:#ddd;

    object-fit:cover;

    object-position:center;


}



.product-card h3,
.product-card p,
.product-card a{


    margin-left:24px;


    margin-right:24px;


}



.product-card h3{


    margin-top:22px;

    font-size:20px;


}



.product-card p{


    margin-top:8px;


    line-height:1.5;

    color:#4a4a4a;

    flex-grow:1;


}




.product-card a{


    display:inline-block;


    margin-top:18px;


    color:var(--blue);

    font-weight:600;


}


.product-card a:hover{

    text-decoration:underline;

}










/* =========================
   ABOUT
========================= */


.about-preview{


    padding:clamp(50px, 9vw, 90px) var(--pad);


    background:var(--paper);


    text-align:center;


}



.about-preview h2{


    font-size:clamp(26px, 4vw, 42px);


    margin-bottom:18px;


}



.about-preview p{


    max-width:800px;


    margin:auto;


    line-height:1.7;


    font-size:clamp(16px, 1.6vw, 18px);


}









/* =========================
   NEWSLETTER
========================= */


.newsletter{


    max-width:600px;


    margin:clamp(50px, 8vw, 80px) auto;


    text-align:center;


    padding:0 var(--pad);


}


.newsletter h2{

    font-size:clamp(24px, 3.4vw, 32px);

}


.newsletter p{

    margin-top:10px;

    color:#4a4a4a;

}


.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.newsletter input{


    margin-top:22px;


    width:100%;


    padding:16px 18px;


    border-radius:var(--radius-sm);


    border:1px solid #ccc;

    font-size:16px;


}



.newsletter button{


    padding:15px 35px;


    background:var(--ink);


    color:white;


    border-radius:var(--radius-sm);

    font-size:16px;

    font-weight:600;

    transition:background .2s ease;


}


.newsletter button:hover{

    background:#000;

}


.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}








/* =========================
   FOOTER
========================= */


footer{


    background:var(--ink);


    color:white;


    text-align:center;


    padding:clamp(28px, 5vw, 40px) var(--pad);


}


footer p{

    font-size:14px;

}


footer div{

    margin-top:12px;

    font-size:14px;

}




footer a{


    opacity:.8;

    transition:opacity .2s ease;


}


footer a:hover{

    opacity:1;

    text-decoration:underline;

}









/* =========================
   ABOUT PAGE
========================= */


.page-hero{


    max-width:var(--container);


    margin:auto;


    padding:clamp(50px, 8vw, 80px) var(--pad) clamp(30px, 5vw, 50px);


    text-align:center;


}



.page-hero .eyebrow{


    display:inline-block;


    font-size:14px;


    font-weight:700;


    letter-spacing:1.5px;


    text-transform:uppercase;


    color:var(--blue);


    margin-bottom:16px;


}



.page-hero h1{


    font-size:clamp(34px, 5.6vw, 58px);


    line-height:1.08;


    letter-spacing:-2px;


    margin-bottom:20px;


}



.page-hero p{


    font-size:clamp(16px, 1.6vw, 20px);


    line-height:1.6;


    max-width:640px;


    margin:auto;


    color:#4a4a4a;


}







/* STORY (image + text, alternating) */


.story{


    max-width:var(--container);


    margin:auto;


    padding:clamp(30px, 6vw, 60px) var(--pad);


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:clamp(30px, 5vw, 70px);


    align-items:center;


}



.story.reverse .story-art{


    order:2;


}



.story-art{


    aspect-ratio:4/3;


    width:100%;


    background:var(--sand);


    border-radius:var(--radius-lg);


    display:flex;


    justify-content:center;


    align-items:center;


    overflow:hidden;


}



.story-art img{


    width:100%;


    height:100%;


    object-fit:cover;


}



.story-text .eyebrow{


    display:block;


    font-size:14px;


    font-weight:700;


    letter-spacing:1.5px;


    text-transform:uppercase;


    color:var(--blue);


    margin-bottom:14px;


}



.story-text h2{


    font-size:clamp(26px, 3.6vw, 38px);


    letter-spacing:-1px;


    margin-bottom:18px;


    line-height:1.15;


}



.story-text p{


    font-size:clamp(16px, 1.4vw, 18px);


    line-height:1.7;


    color:#4a4a4a;


}



.story-text p + p{


    margin-top:16px;


}







/* STATS STRIP */


.stats-strip{


    background:var(--paper);


    border-top:1px solid var(--line);


    border-bottom:1px solid var(--line);


    margin-top:clamp(30px, 6vw, 60px);


}



.stats-inner{


    max-width:var(--container);


    margin:auto;


    padding:clamp(40px, 6vw, 60px) var(--pad);


    display:grid;


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


    gap:24px;


    text-align:center;


}



.stat-number{


    font-size:clamp(32px, 5vw, 48px);


    font-weight:800;


    letter-spacing:-1px;


    color:var(--blue);


}



.stat-label{


    margin-top:6px;


    font-size:15px;


    color:#4a4a4a;


}







/* VALUES GRID */


.values{


    max-width:var(--container);


    margin:auto;


    padding:clamp(50px, 8vw, 90px) var(--pad);


}



.values-head{


    max-width:640px;


    margin:0 auto clamp(30px, 5vw, 48px);


    text-align:center;


}



.values-head h2{


    font-size:clamp(28px, 4vw, 40px);


    letter-spacing:-1px;


    margin-bottom:14px;


}



.values-head p{


    font-size:clamp(16px, 1.4vw, 18px);


    color:#4a4a4a;


    line-height:1.6;


}



.value-grid{


    display:grid;


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


    gap:clamp(18px, 3vw, 30px);


}



.value-card{


    background:var(--paper);


    border-radius:var(--radius-lg);


    padding:30px 26px;


    box-shadow:var(--shadow-soft);


    transition:transform .25s ease, box-shadow .25s ease;


}



.value-card:hover{


    transform:translateY(-6px);


    box-shadow:0 18px 40px rgba(0,0,0,.12);


}



.value-icon{


    width:52px;


    height:52px;


    border-radius:14px;


    background:rgba(56,103,255,.1);


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:24px;


    margin-bottom:18px;


}



.value-card h3{


    font-size:20px;


    margin-bottom:10px;


}



.value-card p{


    font-size:15px;


    line-height:1.6;


    color:#4a4a4a;


}







/* ABOUT CTA */


.about-cta{


    background:var(--ink);


    color:white;


    text-align:center;


    padding:clamp(50px, 8vw, 90px) var(--pad);


}



.about-cta h2{


    font-size:clamp(26px, 4vw, 38px);


    letter-spacing:-1px;


    margin-bottom:16px;


}



.about-cta p{


    max-width:520px;


    margin:0 auto 30px;


    color:rgba(255,255,255,.75);


    font-size:clamp(16px, 1.4vw, 18px);


}



.about-cta .primary-button{


    background:var(--blue);


}



.about-cta .primary-button:hover{


    background:var(--blue-dark);


}




/* =========================
   RESPONSIVE
========================= */

/* Large tablet / small desktop: keep 3-column but tighten gaps a touch earlier
   than the nav breakpoint so cards never feel cramped */
@media(max-width:1100px){

    .product-grid{

        gap:20px;

    }

}


/* Tablet: nav collapses, product grid drops to 2 columns instead of
   jumping straight to 1, so mid-size screens don't waste horizontal space */
@media(max-width:900px){


    .desktop-nav{


        display:none;


    }


    .hamburger{


        display:flex;


    }



    .hero{


        grid-template-columns:1fr;


        text-align:center;


    }



    .hero-text p{


        margin-left:auto;

        margin-right:auto;


    }



    .hero-book{


        max-height:360px;

        order:-1;


    }



    .product-grid{


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


    }



    .story,
    .story.reverse{


        grid-template-columns:1fr;


        text-align:center;


    }



    .story.reverse .story-art{


        order:0;


    }



    .story-art{


        max-width:480px;


        margin:0 auto;


    }



    .value-grid{


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


    }



}


/* Small tablet / large phone: single column products, tighter hero */
@media(max-width:640px){


    .product-grid{


        grid-template-columns:1fr;


    }



    .stats-inner{


        grid-template-columns:1fr;


        gap:28px;


    }



    .value-grid{


        grid-template-columns:1fr;


    }


    .nav-container{

        padding:14px var(--pad);

    }


    .primary-button{

        width:100%;

        text-align:center;

    }


}


/* Small phones: trim spacing further */
@media(max-width:400px){


    .hero-text h1{

        letter-spacing:-1px;

    }


    .book-placeholder{

        font-size:13px;

    }


}

/* =========================
   TEAM SECTION
========================= */


.team{

    max-width:var(--container);

    margin:auto;

    padding:clamp(50px,8vw,90px) var(--pad);

}



.team-head{

    text-align:center;

    max-width:650px;

    margin:0 auto clamp(30px,5vw,50px);

}



.team-head h2{

    font-size:clamp(28px,4vw,40px);

    letter-spacing:-1px;

    margin-bottom:14px;

}



.team-head p{

    color:#4a4a4a;

    font-size:clamp(16px,1.4vw,18px);

    line-height:1.6;

}





.team-grid{

    display:grid;

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

    gap:clamp(18px,3vw,30px);

}





.team-card{

    background:var(--paper);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-soft);

    transition:transform .25s ease, box-shadow .25s ease;

}



.team-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}



.team-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

}



.team-info{

    padding:24px;

}



.team-info h3{

    font-size:22px;

    margin-bottom:8px;

}



.team-info p{

    color:#4a4a4a;

    font-size:15px;

}





@media(max-width:900px){

    .team-grid{

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

    }

}



@media(max-width:640px){

    .team-grid{

        grid-template-columns:1fr;

    }

}


/* TESTIMONIALS */


.testimonials {
    padding: 120px 0;
    overflow: hidden;
}



.testimonials-head {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
    padding: 0 20px;
}



.testimonials-head h2 {
    font-size: 48px;
    margin: 15px 0;
}



.testimonials-head p {
    color: #777;
    font-size: 18px;
}



.testimonial-wrapper {
    width: 100%;
    overflow: hidden;
}



.testimonial-track {

    display: flex;
    gap: 30px;
    width: max-content;

}



.testimonial-card {

    width: 360px;
    min-height: 230px;

    background: #ffffff;

    border: 1px solid #e8e8e8;
    border-radius: 20px;

    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: 0 20px 50px rgba(0,0,0,0.06);

}



.testimonial-card p {

    font-size: 18px;
    line-height: 1.7;

    color: #333;

}



.testimonial-card h3 {

    margin-top: 25px;
    margin-bottom: 5px;

    font-size: 18px;

}



.testimonial-card span {

    color: #888;
    font-size: 14px;

}



@media(max-width:700px){

    .testimonials-head h2{
        font-size:34px;
    }


    .testimonial-card{

        width:300px;
        padding:25px;

    }

}

/* CUSTOMER GALLERY */


.customer-gallery{

    padding:120px 40px;

}



.gallery-head{

    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:60px;

}



.gallery-head h2{

    font-size:48px;

}



.gallery-head p{

    color:#777;
    font-size:18px;

}




.gallery-grid{


    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:25px;


}




.gallery-image{


    width:100%;
    height:350px;

    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    transition:
    transform .35s ease,
    box-shadow .35s ease;


}



.gallery-image:hover{

    transform:scale(1.03);

    box-shadow:
    0 20px 50px rgba(0,0,0,.15);

}





/* LIGHTBOX */


.gallery-lightbox{


    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.85);


    display:none;

    align-items:center;
    justify-content:center;


    z-index:9999;


}



.gallery-lightbox.active{

    display:flex;

}



.gallery-lightbox img{


    max-width:90%;

    max-height:90%;

    border-radius:20px;


}



#closeGallery{


    position:absolute;

    top:30px;

    right:40px;


    font-size:35px;

    color:white;

    background:none;

    border:none;

    cursor:pointer;

}




@media(max-width:800px){


.gallery-grid{

grid-template-columns:1fr;

}


.gallery-image{

height:300px;

}


}

/* REWARDS */


.rewards{


padding:120px 40px;

background:#f7f5f0;


}



.rewards-content{


text-align:center;

max-width:750px;

margin:auto;

}



.rewards-content h2{

font-size:48px;

margin:20px 0;

}



.rewards-content p{

font-size:18px;

color:#666;

line-height:1.7;

}




.reward-cards{


display:grid;

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

gap:25px;


max-width:1100px;

margin:70px auto 0;


}



.reward-card{


background:white;

padding:40px;

border-radius:25px;

text-align:center;


box-shadow:
0 15px 40px rgba(0,0,0,.05);


}



.reward-card div{


font-size:40px;

margin-bottom:20px;


}



.reward-card h3{

font-size:24px;

}



.reward-card p{

color:#777;

}




@media(max-width:800px){

.reward-cards{

grid-template-columns:1fr;

}

}

/* AWARDS */


.awards{

padding:120px 40px;

}



.awards-head{

text-align:center;

max-width:750px;

margin:0 auto 70px;

}



.awards-head h2{

font-size:48px;

margin:20px 0;

}



.awards-head p{

font-size:18px;

color:#777;

}





.awards-grid{


max-width:1200px;

margin:auto;


display:grid;

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


gap:25px;


}





.award-card{


background:white;

border:1px solid #e8e8e8;


border-radius:25px;


padding:40px 25px;


text-align:center;


transition:
transform .3s ease,
box-shadow .3s ease;


}




.award-card:hover{


transform:translateY(-8px);


box-shadow:
0 20px 50px rgba(0,0,0,.1);


}




.award-icon{


font-size:45px;

margin-bottom:25px;


}




.award-card h3{


font-size:22px;

margin-bottom:15px;


}




.award-org{


color:#555;

font-weight:600;


}



.award-card span{


display:inline-block;


margin-top:15px;


font-size:14px;


color:#888;


}





@media(max-width:1000px){


.awards-grid{

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

}


}



@media(max-width:600px){


.awards-grid{

grid-template-columns:
1fr;

}


}