:root{--g:#061a12;--gold:#e3b65e;--cream:#f4efe4;--ink:#17231c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,Arial,sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.nav{position:absolute;z-index:20;inset:0 0 auto;height:112px;padding:0 clamp(20px,5vw,76px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;border-bottom:1px solid #ffffff26}
.brand{display:flex;align-items:center;gap:18px;width:max-content}
.brand img{width:156px;height:92px;object-fit:contain}
.brand span{font:italic 1.08rem 'Playfair Display';color:var(--gold);white-space:nowrap}
.nav nav{display:flex;gap:42px}
.nav nav a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#ffffffbf}
.nav nav a:hover{color:var(--gold)}
.phone{justify-self:end;text-align:right;font:1.05rem 'Playfair Display';color:var(--gold)}
.phone small,footer small{display:block;font:600 .56rem Manrope;letter-spacing:.21em;color:#ffffff80;margin-bottom:5px}
.hero{height:100svh;min-height:700px;background:var(--g);position:relative;overflow:hidden;color:#fff}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s}
.slide.active{opacity:1;visibility:visible}
.slide:before{content:'';position:absolute;inset:0;background:var(--image) center/cover no-repeat;transform:scale(1.02);transition:transform 7s}
.slide.active:before{transform:scale(1.08)}
.slide:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#03120deb 0%,#03120d9c 34%,transparent 62%),linear-gradient(0deg,#03120d80,transparent 48%)}
.copy{position:absolute;z-index:2;left:clamp(28px,8vw,130px);top:51%;transform:translateY(-43%);max-width:760px}
.eyebrow{margin:0 0 22px;color:var(--gold);font-size:.69rem;font-weight:600;letter-spacing:.25em}
.copy h1,.copy h2,.intro h2,.story h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.045em;margin:0;line-height:.88}
.copy h1,.copy h2{font-size:clamp(4.3rem,8vw,8rem)}
em{font-weight:500;color:var(--gold)}
.copy>p:not(.eyebrow){max-width:550px;font-size:clamp(.98rem,1.25vw,1.16rem);line-height:1.8;color:#ffffffba;margin:30px 0}
.cta{display:inline-flex;gap:34px;align-items:center;border:1px solid var(--gold);padding:16px 22px;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
.cta:hover{background:var(--gold);color:var(--g)}
.tags{position:absolute;z-index:2;right:clamp(24px,5vw,78px);bottom:48px;font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:#ffffffa3}
.since{position:absolute;z-index:4;right:clamp(25px,7vw,110px);top:31%;display:flex;flex-direction:column;text-align:right;color:var(--gold)}
.since span{font-size:.7rem;letter-spacing:.45em}
.since strong{font:500 clamp(4.8rem,7vw,7.2rem)/.9 'Playfair Display'}
.controls{position:absolute;z-index:5;left:clamp(18px,8vw,130px);bottom:39px;display:flex;align-items:center;gap:16px}
.controls button{border:0;background:none;color:#fff;font-size:1.3rem;padding:10px;cursor:pointer}
.controls span{font-size:.65rem;letter-spacing:.2em;color:#ffffff9e}
.controls i{width:100px;height:1px;background:#ffffff38;overflow:hidden}
.controls b{display:block;height:1px;background:var(--gold);animation:fill 6s linear}
@keyframes fill{from{transform:translateX(-100%)}
to{transform:translateX(0)}
}
.intro{padding:110px clamp(24px,8vw,130px) 70px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.eyebrow.dark{color:#906d2e;grid-column:1/-1}
.intro h2{font-size:clamp(3.3rem,5.5vw,6rem)}
.intro-text{max-width:520px;line-height:1.9;color:#626b65;border-left:1px solid #c7b88d;padding-left:28px}
.product-gallery{padding:0 clamp(24px,8vw,130px) 120px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-gallery figure{margin:0;position:relative;overflow:hidden;min-height:280px;background:var(--g)}
.product-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-gallery figure:hover img{transform:scale(1.06)}
.product-gallery figure:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#03120de8)}
.product-gallery figcaption{position:absolute;z-index:2;left:20px;right:16px;bottom:18px;color:#fff;font:1.25rem 'Playfair Display';line-height:1.2}
.story{min-height:660px;padding:100px clamp(24px,8vw,130px);background:var(--g);color:#fff;display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:8vw}
.story h2{font-size:clamp(3.5rem,6vw,6.5rem)}
.story p:not(.eyebrow){max-width:590px;line-height:1.9;color:#ffffffa6;margin-top:34px}
.story img{width:100%;max-height:470px;object-fit:contain;filter:drop-shadow(0 30px 35px #0008)}
footer{background:#03100b;color:#fff;padding:55px clamp(24px,7vw,110px);display:grid;grid-template-columns:1fr auto auto auto;gap:50px;align-items:center;border-top:1px solid #e3b65e40}
footer img{width:180px;height:105px;object-fit:contain}
footer a{font:1.05rem 'Playfair Display';color:var(--gold)}
footer strong{font:1.5rem 'Playfair Display';color:var(--gold);white-space:nowrap}
@media(max-width:900px){.nav{height:94px;grid-template-columns:1fr auto}
.brand img{width:120px;height:76px}
.brand span{font-size:.9rem}
.nav nav{display:none}
.phone{font-size:.9rem}
.since{top:auto;bottom:95px}
.tags{display:none}
.product-gallery{grid-template-columns:repeat(2,1fr)}
.story{grid-template-columns:1fr}
footer{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.nav{padding:0 16px}
.brand{gap:6px}
.brand img{width:92px;height:64px}
.brand span{font-size:.75rem}
.phone{font-size:.78rem}
.hero{min-height:720px}
.slide:after{background:linear-gradient(90deg,#03120dd9 0%,#03120d70 48%,transparent 85%),linear-gradient(0deg,#03120dba,transparent 60%)}
.slide:before{background-position:62% center}
.copy{left:22px;right:20px;top:45%}
.copy h1,.copy h2{font-size:clamp(3.6rem,16vw,5.2rem)}
.copy>p:not(.eyebrow){font-size:.94rem;line-height:1.65}
.since{right:22px;bottom:82px}
.since strong{font-size:3.7rem}
.controls{left:12px;bottom:28px}
.intro{grid-template-columns:1fr;padding:85px 22px 50px}
.intro .eyebrow{grid-column:auto}
.intro h2{font-size:3.4rem}
.product-gallery{grid-template-columns:1fr;padding:0 15px 80px}
.product-gallery figure{min-height:360px}
.story{padding:75px 24px}
.story h2{font-size:3.6rem}
footer{grid-template-columns:1fr;text-align:center;justify-items:center;gap:28px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
}