:root{
    --ink:#171717;
    --paper:#f4f1eb;
    --white:#fff;
    --muted:#77736c;
    --line:#d9d4ca;
    --accent:#b79b68;
    --max:1240px;
    --serif:Georgia,"Times New Roman",serif;
    --shadow:0 24px 70px rgba(20,18,14,.12);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.55;
}

a{
    color:inherit;
    text-decoration:none;
}

.site-header{
    height:82px;
    padding:0 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    background:rgba(244,241,235,.92);
    backdrop-filter:blur(14px);
    z-index:20;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.logo{
    font-weight:800;
    letter-spacing:.16em;
    font-size:16px;
}

.nav{
    display:flex;
    gap:28px;
    align-items:center;
    font-size:13px;
}

.nav a{
    opacity:.78;
}

.nav a:hover{
    opacity:1;
}

.nav-cta{
    background:var(--ink);
    color:#fff!important;
    padding:13px 18px;
    opacity:1!important;
}

.menu-toggle{
    display:none;
    background:none;
    border:0;
    font-size:24px;
}


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

.hero{
    min-height:calc(100vh - 82px);
    display:grid;
    grid-template-columns:48% 52%;
    align-items:stretch;
    background:#e9e5dd;
}

.hero-copy{
    padding:12vw 6vw 8vw 8vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.eyebrow{
    font-size:11px;
    letter-spacing:.2em;
    font-weight:700;
    color:var(--muted);
    display:block;
    margin-bottom:18px;
}

.hero h1{
    font-size:clamp(52px,7vw,100px);
    line-height:.93;
    letter-spacing:-.055em;
    max-width:760px;
    margin:0 0 28px;
}

.hero p{
    font-size:19px;
    max-width:520px;
    color:#5f5b54;
}

.actions{
    display:flex;
    gap:12px;
    margin-top:26px;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:18px;
    padding:16px 22px;
    font-weight:700;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.btn-dark{
    background:var(--ink);
    color:#fff;
}

.btn-light{
    border:1px solid #bbb5aa;
}

.hero-art{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#d2c9b9,#eee9df);
    background-image:url("/assets/hero-home-v52.jpg");
    background-size:cover;
    background-position:center center;
}

.bottle{
    display:none;
}

.hero-label{
    display:none;
}

.hero-art:after{
    display:none;
}


/* =========================================================
   GENERAL
   ========================================================= */

.section{
    max-width:var(--max);
    margin:auto;
    padding:130px 32px;
}

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10vw;
    align-items:center;
}

.split h2,
.section-heading h2,
.quote-banner h2{
    font-size:clamp(42px,5vw,74px);
    line-height:.98;
    letter-spacing:-.045em;
    margin:0;
}

.split h2 em,
.quote-banner em{
    font-family:Georgia,serif;
    font-weight:400;
}

.lead{
    font-size:28px;
    line-height:1.2;
}

.split p{
    max-width:520px;
}

.section-heading{
    margin-bottom:55px;
    max-width:800px;
}

.section-heading p{
    color:var(--muted);
    max-width:620px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
}

.grid-4 article{
    padding:30px 22px 20px 0;
    border-right:1px solid var(--line);
}

.grid-4 article:not(:first-child){
    padding-left:22px;
}

.grid-4 article:last-child{
    border:0;
}

.num{
    font-size:11px;
    color:var(--muted);
}

h3{
    font-size:22px;
    margin:20px 0 10px;
    letter-spacing:-.02em;
}

p{
    color:#68645c;
}


/* =========================================================
   OLD DARK PRODUCT SYSTEM
   ========================================================= */

.dark{
    max-width:none;
    background:#171717;
    color:#fff;
    padding-left:max(32px,calc((100vw - var(--max))/2 + 32px));
    padding-right:max(32px,calc((100vw - var(--max))/2 + 32px));
}

.dark .eyebrow,
.dark p{
    color:#aaa79f;
}

.product-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    grid-template-rows:360px 360px;
    gap:16px;
}

.product-card{
    background:#242424;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
}

.product-card.tall{
    grid-row:span 2;
}

.product-card .visual{
    height:55%;
    min-height:180px;
    background:linear-gradient(135deg,#c9c0b0,#5d574e);
    position:relative;
}

.product-card.tall .visual{
    height:70%;
}

.visual:after{
    content:"";
    position:absolute;
    inset:20% 28%;
    border:1px solid rgba(255,255,255,.5);
    transform:rotate(-8deg);
}

.visual.clear{
    background:linear-gradient(135deg,#d8d5cc,#7f8c89);
}

.visual.roll{
    background:radial-gradient(
        circle at 50% 45%,
        #d2c7b1 0 20%,
        transparent 21%
    ),#6b665e;
}

.visual.foil{
    background:linear-gradient(135deg,#d9c78f,#4c4333);
}

.visual.water{
    background:linear-gradient(135deg,#8ca0a4,#d4d8d1);
}

.product-card>div:last-child{
    padding:24px;
}

.product-card h3{
    margin:0 0 5px;
}

.product-card p{
    margin:0 0 14px;
}

.product-card span{
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
}


/* =========================================================
   PRODUCTS — NEW WIDE VERSION
   ========================================================= */

.products-showcase{
    width:100%;
    max-width:none;

    padding:115px 48px 120px;

    background:var(--paper);

    overflow:hidden;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.products-intro{
    width:100%;
    max-width:1560px;

    margin:0 auto 62px;

    display:grid;
    grid-template-columns:1.05fr .95fr;

    gap:8vw;

    align-items:start;
}

.products-heading{
    min-width:0;
}

.products-heading h2{
    font-size:clamp(58px,5.1vw,82px);
    line-height:.94;
    letter-spacing:-.055em;

    margin:0 0 28px;

    max-width:720px;
}

.products-heading p{
    max-width:650px;

    font-size:16px;
    line-height:1.55;

    color:#68645c;

    margin:0;
}


/* ---------------------------------------------------------
   RIGHT INTRO
   --------------------------------------------------------- */

.products-side-note{
    display:grid;

    grid-template-columns:1px minmax(0,1fr);

    gap:40px;

    padding-top:30px;
}

.products-divider{
    width:1px;

    min-height:175px;

    background:#bcb6aa;
}

.products-side-note h3{
    font-family:var(--serif);

    font-size:27px;
    line-height:1.15;

    font-weight:400;

    margin:0 0 15px;

    letter-spacing:-.02em;
}

.products-side-note p{
    max-width:480px;

    font-size:14px;
    line-height:1.55;

    margin:0 0 27px;
}

.text-link{
    font-size:11px;

    font-weight:700;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.text-link span{
    margin-left:9px;
}


/* ---------------------------------------------------------
   CATEGORY TABS
   --------------------------------------------------------- */

.product-tabs{
    width:100%;
    max-width:1560px;

    margin:0 auto;

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

    display:grid;

    grid-template-columns:
        1fr
        1.35fr
        1.4fr
        1.05fr
        1.4fr
        1.05fr;

    align-items:stretch;
}

.product-tabs a{
    min-height:50px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 10px;

    font-family:var(--serif);

    font-size:14px;

    white-space:nowrap;

    border-top:1px solid transparent;
}

.product-tabs a span{
    font-family:Arial,Helvetica,sans-serif;

    font-size:10px;

    color:#a29d93;
}

.product-tabs a.active{
    background:var(--ink);

    color:#fff;

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

    font-size:12px;

    font-weight:700;
}

.product-tabs a.active span{
    color:#fff;
}


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.product-cards{
    width:100%;
    max-width:1560px;

    margin:20px auto 0;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:14px;

    align-items:stretch;
}


/* ---------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------- */

.showcase-card{
    min-width:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ebe7df;

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

.showcase-card:hover{
    transform:translateY(-4px);

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


/* ---------------------------------------------------------
   THIS IS THE IMPORTANT FIX
   Image has its own clipping container.
   No image can bleed into the next card.
   --------------------------------------------------------- */

.showcase-image{
    position:relative;

    width:100%;

    aspect-ratio:1 / .92;

    overflow:hidden;

    background:#d8d1c5;

    flex:none;
}

.showcase-image img{
    display:block;

    width:100%;
    height:100%;

    max-width:none;

    margin:0;
    padding:0;

    border:0;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.001);

    transition:transform .45s ease;
}

.showcase-card:hover .showcase-image img{
    transform:scale(1.035);
}


/* ---------------------------------------------------------
   CARD TEXT
   --------------------------------------------------------- */

.card-copy{
    min-height:185px;

    padding:19px 18px 23px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.card-kicker{
    display:block;

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

    font-size:9px;

    line-height:1.35;

    letter-spacing:.18em;

    color:#858077;

    font-weight:700;

    margin-bottom:13px;
}

.card-copy h3{
    font-family:var(--serif);

    font-size:20px;

    line-height:1.12;

    font-weight:400;

    margin:0;

    letter-spacing:-.015em;

    color:#171717;
}

.card-link{
    margin-top:auto;

    padding-top:22px;

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

    font-size:10px;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#171717;
}

.card-link b{
    margin-left:8px;

    font-size:13px;

    font-weight:400;
}


/* =========================================================
   SOLUTIONS
   ========================================================= */

.solution-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--line);
}

.solution-grid a{
    padding:38px 20px 40px 0;
    border-bottom:1px solid var(--line);
}

.solution-grid a:nth-child(even){
    padding-left:30px;
    border-left:1px solid var(--line);
}

.solution-grid span{
    font-size:11px;
    color:var(--muted);
}

.solution-grid h3{
    font-size:32px;
}


/* =========================================================
   MATERIALS
   ========================================================= */

.material-section{
    background:#ded9cf;
    max-width:none;

    padding-left:max(
        32px,
        calc((100vw - var(--max))/2 + 32px)
    );

    padding-right:max(
        32px,
        calc((100vw - var(--max))/2 + 32px)
    );
}

.material-list{
    border-top:1px solid #aaa49a;
}

.material-list div{
    display:flex;
    justify-content:space-between;

    padding:22px 0;

    border-bottom:1px solid #aaa49a;
}

.material-list span{
    color:#6c675f;
}


/* =========================================================
   FINISHING
   ========================================================= */

.finish-grid{
    display:grid;

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

    gap:1px;

    background:#454545;
}

.finish-grid div{
    background:#222;

    padding:55px 20px;

    min-height:180px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.finish-grid strong{
    font-size:24px;
}

.finish-grid span{
    color:#aaa;

    margin-top:8px;

    font-size:12px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-line{
    display:grid;

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

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

.process-line>div{
    padding:25px 16px 25px 0;

    border-right:1px solid var(--line);
}

.process-line>div:not(:first-child){
    padding-left:16px;
}

.process-line>div:last-child{
    border:0;
}

.process-line b{
    font-size:11px;
    color:var(--muted);
}

.process-line h3{
    font-size:18px;
}

.process-line p{
    font-size:13px;
}


/* =========================================================
   CASE STUDIES
   ========================================================= */

.case-grid{
    display:grid;

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

    gap:20px;
}

.case-art{
    height:420px;

    background:#bbb;

    background-size:cover;

    background-position:center;
}

.case-one{
    background-image:url("https://images.unsplash.com/photo-1551024506-0bccd828d307?auto=format&fit=crop&w=1200&q=82");
}

.case-two{
    background-image:url("https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?auto=format&fit=crop&w=1200&q=82");
}

.case-three{
    background-image:url("https://images.unsplash.com/photo-1516594915697-87eb3b1c14ea?auto=format&fit=crop&w=1200&q=82");
}

.case-grid article>span{
    font-size:10px;
    letter-spacing:.15em;

    color:var(--muted);

    display:block;

    margin-top:20px;
}

.case-grid h3{
    font-size:25px;
}


/* =========================================================
   QUOTE BANNER
   ========================================================= */

.quote-banner{
    max-width:none;

    text-align:center;

    background:#d7d0c4;

    padding-top:150px;
    padding-bottom:150px;
}

.quote-banner p{
    font-size:18px;
}

.quote-banner .btn{
    margin-top:15px;
}


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

.footer{
    background:#171717;

    color:#fff;

    padding:
        75px
        max(32px,calc((100vw - var(--max))/2 + 32px))
        25px;
}

.footer p,
.footer a{
    color:#aaa;
}

.footer-top{
    display:grid;

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

    gap:50px;
}

.footer-top>div{
    display:flex;

    flex-direction:column;

    gap:8px;
}

.footer h4{
    margin:0 0 12px;

    font-size:11px;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.footer-bottom{
    border-top:1px solid #393939;

    margin-top:60px;

    padding-top:20px;

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:11px;
}


/* =========================================================
   INNER PAGES
   ========================================================= */

.inner-hero{
    padding:140px 32px 100px;

    max-width:var(--max);

    margin:auto;
}

.inner-hero h1{
    font-size:clamp(52px,7vw,90px);

    line-height:.95;

    letter-spacing:-.05em;

    max-width:900px;
}

.content{
    max-width:var(--max);

    margin:auto;

    padding:60px 32px 130px;
}

.content h2{
    font-size:42px;

    letter-spacing:-.03em;
}

.content p{
    max-width:760px;
}

.feature-grid{
    display:grid;

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

    gap:16px;

    margin:50px 0;
}

.feature{
    background:#e5e0d7;

    padding:35px;

    min-height:220px;
}


/* =========================================================
   FORMS
   ========================================================= */

.quote-form{
    max-width:800px;
}

.form-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.quote-form label{
    font-size:12px;

    font-weight:700;

    display:flex;

    flex-direction:column;

    gap:7px;
}

.quote-form input,
.quote-form textarea,
.quote-form select{
    font:inherit;

    padding:14px;

    border:1px solid #c8c2b8;

    background:#fff;
}

.quote-form textarea{
    min-height:150px;
}

.full{
    grid-column:1/-1;
}

.quote-form .btn{
    border:0;

    margin-top:20px;

    cursor:pointer;
}

.notice{
    padding:15px;

    background:#e5e0d7;

    font-size:13px;

    margin-top:20px;
}

.notice strong{
    display:block;

    margin-bottom:5px;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq{
    border-top:1px solid var(--line);
}

.faq details{
    border-bottom:1px solid var(--line);

    padding:24px 0;
}

.faq summary{
    cursor:pointer;

    font-size:19px;

    font-weight:700;

    list-style:none;
}

.faq summary::-webkit-details-marker{
    display:none;
}

.faq summary:after{
    content:"+";

    float:right;

    font-size:24px;

    font-weight:400;
}

.faq details[open] summary:after{
    content:"–";
}

.faq p{
    max-width:760px;

    margin:16px 0 0;
}


/* =========================================================
   TRUST
   ========================================================= */

.trust-strip{
    display:flex;

    justify-content:space-between;

    gap:20px;

    align-items:center;

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

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

    padding:22px 0;

    flex-wrap:wrap;
}

.trust-strip span{
    font-size:11px;

    letter-spacing:.14em;

    color:var(--muted);
}


/* =========================================================
   BLOG
   ========================================================= */

.blog-grid{
    display:grid;

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

    gap:20px;
}

.blog-card{
    background:#e5e0d7;

    padding:0 0 25px;
}

.blog-card .thumb{
    height:240px;

    background:#c6beb0;

    background-size:cover;

    background-position:center;
}

.blog-card:nth-child(1) .thumb{
    background-image:url("https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=900&q=80");
}

.blog-card:nth-child(2) .thumb{
    background-image:url("https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?auto=format&fit=crop&w=900&q=80");
}

.blog-card:nth-child(3) .thumb{
    background-image:url("https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?auto=format&fit=crop&w=900&q=80");
}

.blog-card .body{
    padding:22px;
}

.blog-card span{
    font-size:10px;

    letter-spacing:.15em;

    color:var(--muted);
}

.blog-card h3{
    font-size:25px;
}


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

@media(max-width:1100px){

    .products-intro{
        gap:40px;
    }

    .product-tabs{
        grid-template-columns:repeat(3,1fr);
    }

    .product-tabs a{
        border-bottom:1px solid var(--line);
    }

    .product-cards{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


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

@media(max-width:850px){

    .nav{
        display:none;

        position:absolute;

        top:82px;

        left:0;

        right:0;

        background:var(--paper);

        padding:25px;

        flex-direction:column;

        align-items:flex-start;

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

    .nav.open{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }


    .hero{
        grid-template-columns:1fr;
    }

    .hero-copy{
        padding:90px 24px;
    }

    .hero-art{
        height:520px;
    }


    .section{
        padding:85px 24px;
    }


    .split{
        grid-template-columns:1fr;

        gap:40px;
    }


    .grid-4{
        grid-template-columns:1fr 1fr;
    }

    .grid-4 article{
        border-bottom:1px solid var(--line);
    }


    /* PRODUCTS */

    .products-showcase{
        padding:80px 24px 85px;
    }

    .products-intro{
        grid-template-columns:1fr;

        gap:35px;

        margin-bottom:38px;
    }

    .products-heading h2{
        font-size:58px;
    }

    .products-side-note{
        padding-top:0;
    }

    .products-divider{
        min-height:125px;
    }

    .product-tabs{
        grid-template-columns:repeat(2,1fr);
    }

    .product-tabs a{
        min-height:46px;

        font-size:13px;

        white-space:normal;
    }

    .product-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:12px;
    }

    .showcase-image{
        aspect-ratio:1/.9;
    }

    .card-copy{
        min-height:165px;

        padding:16px 15px 20px;
    }

    .card-copy h3{
        font-size:18px;
    }


    /* OTHER SECTIONS */

    .solution-grid{
        grid-template-columns:1fr;
    }

    .solution-grid a:nth-child(even){
        padding-left:0;

        border-left:0;
    }

    .finish-grid{
        grid-template-columns:1fr 1fr;
    }

    .process-line{
        grid-template-columns:1fr 1fr;
    }

    .case-grid{
        grid-template-columns:1fr;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .full{
        grid-column:auto;
    }

    .blog-grid{
        grid-template-columns:1fr;
    }

    .trust-strip{
        align-items:flex-start;

        flex-direction:column;
    }

}


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

@media(max-width:520px){

    .grid-4{
        grid-template-columns:1fr;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .finish-grid{
        grid-template-columns:1fr;
    }

    .footer-top{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        flex-direction:column;

        gap:10px;
    }

    .hero h1{
        font-size:54px;
    }

    .actions{
        flex-direction:column;

        align-items:flex-start;
    }


    /* PRODUCTS */

    .products-showcase{
        padding:70px 18px;
    }

    .products-heading h2{
        font-size:48px;
    }

    .product-tabs{
        grid-template-columns:1fr;
    }

    .product-tabs a{
        min-height:44px;
    }

    .product-cards{
        grid-template-columns:1fr;
    }

    .showcase-image{
        aspect-ratio:1/.72;
    }

    .card-copy{
        min-height:150px;
    }

}
/* =========================================================
   FINAL RESPONSIVE CONTAINER SYSTEM — 2026-09-30
   Keep page content fluid on large and small desktop screens.
   ========================================================= */
.section,
.inner-hero,
.content{
    width:min(var(--max), calc(100% - 48px));
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
}

@media(max-width:850px){
    .section,
    .inner-hero,
    .content{
        width:calc(100% - 32px);
    }
}