:root{
    --navy:#071725;
    --gold:#d8c09a;
    --ink:#101a23;
    --muted:#657485;
    --line:#e4e9ed;
    --soft:#f5f7f9
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink);
    background:#fff
}
a{
    text-decoration:none;
    color:inherit
}
.nav{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(7,23,37,.97);
    color:#fff;
    border-bottom:1px solid #20394e
}
.navin{
    max-width:1180px;
    margin:auto;
    padding:14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.logo{
    font-weight:900;
    letter-spacing:.04em
}
.logo small{
    display:block;
    font-size:7px;
    letter-spacing:.18em;
    font-weight:500;
    opacity:.7
}
.links{
    display:flex;
    gap:22px;
    font-size:12px
}
.links a:hover{
    color:var(--gold)
}
.quote{
    background:var(--gold);
    color:#111;
    padding:12px 16px;
    border-radius:8px;
    font-size:11px;
    font-weight:900
}
.hero{
    background:var(--navy);
    color:#fff
}
.hero-in{
    max-width:1180px;
    margin:auto;
    min-height:570px;
    display:grid;
    grid-template-columns:.9fr 1.1fr
}
.copy{
    padding:75px 30px;
    align-self:center
}
.eyebrow,.kicker{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:900;
    color:var(--gold)
}
h1{
    font-size:clamp(44px,6vw,76px);
    line-height:.94;
    letter-spacing:-.05em;
    margin:15px 0
}
h1 span{
    color:var(--gold)
}
.lead{
    font-size:18px;
    line-height:1.6;
    color:#d5dfe8;
    max-width:570px
}
.heroimg{
    background-size:cover;
    background-position:center
}
.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:25px
}
.ghost{
    border:1px solid #71808e;
    color:#fff;
    border-radius:8px;
    padding:12px 16px;
    font-size:11px;
    font-weight:900
}
section{
    padding:68px 20px
}
.wrap{
    max-width:1180px;
    margin:auto
}
h2{
    font-size:42px;
    line-height:1.05;
    letter-spacing:-.04em;
    margin:8px 0 12px
}
.sub{
    color:var(--muted);
    line-height:1.6;
    max-width:700px
}
.cats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-top:30px
}
.cat{
    height:275px;
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#111;
    color:#fff
}
.cat img{
    width:100%;
    height:100%;
    object-fit:cover
}
.shade{
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 20%,rgba(2,12,20,.95))
}
.ct{
    position:absolute;
    left:17px;
    right:14px;
    bottom:17px;
    display:grid;
    gap:5px
}
.ct small{
    color:var(--gold);
    font-weight:900
}
.ct b{
    font-size:16px
}
.ct span{
    font-size:10px;
    color:#d4dee7;
    line-height:1.4
}
.ct em{
    font-style:normal;
    color:var(--gold);
    font-size:10px;
    font-weight:900;
    margin-top:3px
}
.featured{
    background:var(--soft)
}
.featured-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    margin-top:26px
}
.featured-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px;
    overflow:hidden
}
.featured-card img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    display:block
}
.featured-card b{
    display:block;
    padding:10px;
    font-size:11px
}
.category-strip{
    position:sticky;
    top:59px;
    z-index:9;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 2px 10px rgba(7,23,37,.04)
}
.strip-in{
    max-width:1180px;
    margin:auto;
    padding:10px 20px;
    display:flex;
    gap:10px;
    overflow:auto
}
.strip-in a{
    white-space:nowrap;
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 13px;
    font-size:10px;
    font-weight:800;
    color:#405064;
    background:#fff
}
.strip-in a:hover,.strip-in a.active{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy)
}
.catsection{
    border-top:1px solid var(--line)
}
.back{
    display:inline-block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:18px
}
.catbanner{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--navy);
    color:#fff;
    border-radius:17px;
    overflow:hidden;
    margin-bottom:18px
}
.catbanner>div{
    padding:30px
}
.catbanner small{
    color:var(--gold);
    font-weight:900;
    letter-spacing:.14em
}
.catbanner p{
    color:#c7d4df;
    line-height:1.5
}
.catbanner img{
    width:100%;
    height:250px;
    object-fit:cover
}
.count{
    font-size:11px;
    color:var(--muted);
    margin:8px 0 14px
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
}
.product{
    border:1px solid var(--line);
    border-radius:13px;
    overflow:hidden;
    background:#fff
}
.product img{
    display:block;
    width:100%;
    aspect-ratio:1.25;
    object-fit:cover
}
.pb{
    padding:13px
}
.pb>span{
    font-size:9px;
    color:#748395;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:900
}
.pb h3{
    font-size:16px;
    margin:5px 0
}
.pb p{
    font-size:10px;
    color:var(--muted);
    line-height:1.45;
    margin:0 0 10px
}
.pb a{
    display:inline-block;
    background:var(--navy);
    color:#fff;
    border-radius:7px;
    padding:8px 10px;
    font-size:9px;
    font-weight:900
}
.process{
    background:var(--navy);
    color:#fff
}
.steps{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:9px;
    margin-top:28px
}
.step{
    border:1px solid #294257;
    border-radius:12px;
    padding:16px;
    min-height:115px
}
.step b{
    color:var(--gold);
    font-size:10px
}
.step h4{
    margin:17px 0 5px
}
.step p{
    color:#afbfcc;
    font-size:10px;
    margin:0
}
.cta{
    background:#0a2033;
    color:#fff
}
.ctain{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}
.ctain p{
    color:#bdcbd7;
    max-width:680px;
    line-height:1.6
}
.contact{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.contact a{
    border:1px solid #617688;
    padding:11px 14px;
    border-radius:8px;
    font-size:10px;
    font-weight:900
}
footer{
    background:#06121d;
    color:#8493a0;
    padding:22px 20px;
    font-size:10px
}
.foot{
    max-width:1180px;
    margin:auto;
    display:flex;
    justify-content:space-between
}


@media(max-width:900px){
    .links{
        display:none
    }
    .hero-in{
        grid-template-columns:1fr
    }
    .copy{
        padding:60px 20px
    }
    .heroimg{
        height:330px
    }
    .cats{
        grid-template-columns:repeat(2,1fr)
    }
    .featured-grid{
        grid-template-columns:repeat(3,1fr)
    }
    .catbanner{
        grid-template-columns:1fr
    }
    .catbanner img{
        height:230px
    }
    .product-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .steps{
        grid-template-columns:repeat(3,1fr)
    }
}

@media(max-width:560px){
    section{
        padding:54px 16px
    }
    h1{
        font-size:47px
    }
    h2{
        font-size:34px
    }
    .cats{
        grid-template-columns:1fr
    }
    .cat{
        height:225px
    }
    .featured-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .product-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .steps{
        grid-template-columns:repeat(2,1fr)
    }
    .ctain{
        display:block
    }
    .contact{
        margin-top:18px
    }
}