:root{
  --ink:#0d0d0d; --walnut:#161412; --bone:#f5f5f0; --stone:#b0a898; --brass:#c8a96e;
  --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,5rem); --gap:clamp(4rem,9vw,7.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,8vw,6rem)}
h2{font-size:clamp(2rem,5.2vw,3.75rem)}
h3{font-size:1.4rem;line-height:1.2}
em{font-style:italic;color:var(--brass)}
.tag{display:inline-block;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem;padding-bottom:.55rem;border-bottom:1px solid rgba(200,169,110,.5)}
.lead{color:var(--stone);max-width:34rem;margin-top:1.25rem}
.btn{display:inline-block;margin-top:2rem;padding:.95rem 1.7rem;background:var(--brass);color:var(--ink);font-weight:700;text-decoration:none;border:1px solid var(--brass);border-radius:2px;transition:transform .25s ease,background .25s ease,color .25s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);background:var(--bone);border-color:var(--bone)}
.btn-ghost{background:transparent;color:var(--bone);border-color:rgba(245,245,240,.5);margin-left:.75rem}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--bone);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.6rem var(--pad);background:linear-gradient(rgba(13,13,13,.92),rgba(13,13,13,.0))}
.nav img{height:44px;width:auto}
.nav ul{display:none;list-style:none;gap:2rem}
.nav a.link{text-decoration:none;font-size:.95rem;color:var(--bone);transition:color .2s}
.nav a.link:hover{color:var(--brass)}
.nav .cta{font-size:.85rem;padding:.55rem 1rem;margin:0}
@media(min-width:820px){.nav ul{display:flex}.nav .cta{display:none}}

/* hero */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;padding:7rem var(--pad) 3.5rem;isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,.35) 30%,rgba(13,13,13,.9) 78%,#0d0d0d 100%)}
.hero .inner{max-width:62rem}
.hero .eyebrow{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:1.2rem}
.hero p.sub{max-width:36rem;margin-top:1.4rem;color:var(--bone);font-size:1.1rem}
@media(min-width:900px){.hero{padding-bottom:5rem}}

/* generic section */
section{padding:var(--gap) var(--pad)}
.walnut{background:var(--walnut)}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0)*90ms)}
.js .reveal.in{opacity:1;transform:none}

/* how it works: uneven split */
.how{display:grid;gap:2.5rem;align-items:center}
.how figure{position:relative}
.how figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
figcaption.cap{margin-top:.7rem;font-size:.8rem;letter-spacing:.08em;color:var(--stone)}
.steps{list-style:none;margin-top:2.2rem;border-top:1px solid rgba(245,245,240,.14)}
.steps li{display:grid;grid-template-columns:4.4rem 1fr;gap:1rem;padding:1.4rem 0;border-bottom:1px solid rgba(245,245,240,.14)}
.num{font-family:var(--serif);font-size:3.6rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--brass)}
.steps p{color:var(--stone);margin-top:.4rem}
@media(min-width:900px){.how{grid-template-columns:5fr 7fr;gap:5rem}.num{font-size:4.6rem}.steps li{grid-template-columns:6rem 1fr}}

/* brands: carousel */
.brands-head{display:grid;gap:1.2rem;margin-bottom:2.5rem}
.brands-head p{color:var(--stone);max-width:32rem}
@media(min-width:900px){.brands-head{grid-template-columns:7fr 5fr;align-items:end;gap:4rem}}
.carousel-wrap{position:relative;margin:0 calc(var(--pad)*-1)}
.carousel{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) .5rem;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 88%;scroll-snap-align:center}
.slide img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.slide .frame{overflow:hidden;background:var(--ink)}
.slide:hover img{transform:scale(1.03)}
.slide h3{margin-top:1.1rem;color:var(--bone)}
.slide p{color:var(--stone);margin-top:.4rem;max-width:34rem}
.arrows{display:flex;gap:.6rem;margin-top:1.4rem;padding:0 var(--pad)}
.arrows button{width:48px;height:48px;border:1px solid rgba(245,245,240,.4);background:transparent;color:var(--bone);font-size:1.3rem;cursor:pointer;border-radius:50%;transition:background .2s,color .2s}
.arrows button:hover{background:var(--brass);color:var(--ink);border-color:var(--brass)}
@media(min-width:900px){.slide{flex-basis:64%}}

/* what you get: band */
.get{padding:0}
.band{position:relative;min-height:70svh;display:flex;align-items:flex-end;padding:var(--gap) var(--pad) 7rem;isolation:isolate}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,13,13,.45),rgba(13,13,13,.85))}
.band h2{max-width:46rem}
.items{position:relative;margin:-4.5rem var(--pad) 0;display:grid;gap:1px;background:rgba(245,245,240,.14);border:1px solid rgba(245,245,240,.14)}
.item{background:var(--walnut);padding:1.6rem}
.item .k{font-size:.8rem;letter-spacing:.18em;color:var(--brass)}
.item h3{margin:.6rem 0 .5rem}
.item p{color:var(--stone);font-size:1rem}
@media(min-width:700px){.items{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.items{grid-template-columns:repeat(4,1fr)}}
.get .after{padding:0 var(--pad) var(--gap)}

/* hosts: split with arch */
.hosts{display:grid;gap:3rem;align-items:center}
.arch{border-radius:999px 999px 0 0;overflow:hidden;max-width:30rem;width:100%;margin:0 auto}
.arch img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lists{display:grid;gap:2rem;margin-top:2rem}
.lists h3{font-family:var(--sans);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:500;margin-bottom:.8rem}
.lists ul{list-style:none}
.lists li{padding:.55rem 0;border-bottom:1px solid rgba(245,245,240,.12);color:var(--bone)}
@media(min-width:900px){.hosts{grid-template-columns:7fr 5fr;gap:5rem}.lists{grid-template-columns:1fr 1fr}.arch{margin:0 0 0 auto}}

/* about */
.about{padding:0}
.strip img{width:100%;height:clamp(14rem,34vw,26rem);object-fit:cover;object-position:35% 50%}
.about .body{display:grid;gap:2.5rem;padding:var(--gap) var(--pad)}
blockquote{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.2;font-style:italic;position:relative;padding-top:1.5rem}
blockquote::before{content:"";display:block;width:3.5rem;height:1px;background:var(--brass);margin-bottom:1.4rem}
.about p{color:var(--stone)}
.about p+p{margin-top:1rem}
@media(min-width:900px){.about .body{grid-template-columns:6fr 5fr;gap:6rem;align-items:start}}

/* contact */
.contact{position:relative;isolation:isolate;min-height:80svh;display:flex;align-items:center;padding:var(--gap) var(--pad)}
.contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.contact::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,13,13,.84)}
.mail{display:inline-block;font-family:var(--serif);font-size:clamp(1.5rem,5.4vw,3.2rem);color:var(--bone);text-decoration:none;border-bottom:1px solid var(--brass);margin-top:1.8rem;word-break:break-word;transition:color .2s}
.mail:hover{color:var(--brass)}
.contact .meta{margin-top:1.6rem;color:var(--stone)}
footer{background:var(--ink);padding:2rem var(--pad) 5rem;color:var(--stone);font-size:.9rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;border-top:1px solid rgba(245,245,240,.12)}

/* badge */
.badge{position:fixed;right:12px;bottom:12px;z-index:30;font-family:var(--sans);font-size:12px;line-height:1;padding:8px 11px;background:var(--walnut);color:var(--bone);border:1px solid rgba(200,169,110,.6);border-radius:2px;text-decoration:none;transition:border-color .2s,color .2s}
.badge:hover{color:var(--brass);border-color:var(--brass)}

@media(max-width:520px){.btn-ghost{margin-left:0;margin-top:.8rem}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}