:root{--ink:#111;--accent:#e8491d;--grey:#d4d4d4;--font:"Nunito Sans","Avenir Next","Avenir",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:300;color:var(--ink);background:#fff;line-height:1.4}
a{color:inherit}
.nav{display:flex;justify-content:center;gap:34px;padding:34px 16px 28px;max-width:1220px;margin:0 auto}
.nav a{text-decoration:none;font-size:16px;font-weight:400}
.nav a[aria-current="page"],.nav a:hover{color:var(--accent)}
main{max-width:1220px;margin:0 auto}
h1,h2{font-weight:700;margin:0}
.hero{position:relative;text-align:center;padding:60px 16px 120px;background:linear-gradient(#fff 0,#fff 0)}
.hero::before{content:"";position:absolute;inset:0;background:url(skyline.jpg) center top/cover no-repeat;opacity:1;z-index:0}
.hero>*{position:relative;z-index:1}
.hero img.logo{width:min(620px,86vw);height:auto;display:block;margin:0 auto 24px}
.hero h1{font-size:clamp(34px,6vw,66px);line-height:1.1;font-weight:600;max-width:900px;margin:0 auto}
.cocktail{position:relative;text-align:center;padding:50px 16px 54px;min-height:860px;overflow:hidden;background-size:cover;background-position:center}
.cocktail::before{content:"";position:absolute;inset:0;background:var(--ov)}
.cocktail>*{position:relative}
.cocktail .title{display:block;margin:0 auto;max-width:min(560px,86vw);height:auto;padding-bottom:10px;border-bottom:3px solid var(--rule,#111)}
.cocktail p.tag{font-size:clamp(22px,2.4vw,30px);font-weight:700;margin:14px auto 28px;max-width:520px}
.cocktail img.glass{display:block;margin:0 auto 46px;height:340px;width:auto;max-width:80vw}
.cocktail p.how{font-size:clamp(22px,2.4vw,30px);font-weight:300;margin:0 auto 34px;max-width:520px}
.cocktail.light{color:#111;--rule:#111}
.cocktail.dark{color:#fff;--rule:#fff}
.btn{display:inline-block;padding:13px 34px;border-radius:30px;background:#111;color:#fff;text-decoration:none;font-size:15px;letter-spacing:.04em}
.dark .btn{background:#fff;color:#111}
.shop{text-align:center;padding:110px 16px 90px}
.shop h1{font-size:clamp(34px,5vw,60px);font-weight:600}
.shop img{display:block;margin:40px auto;width:min(900px,92vw);height:auto}
.shop p{font-size:clamp(24px,3.4vw,40px);font-weight:600;max-width:900px;margin:0 auto 34px;line-height:1.25}
.shop .btn{border-radius:0;padding:14px 22px;letter-spacing:.12em}
.banner{background:#111 url(southern-cross.png) center/auto 90% repeat-x;text-align:center;padding:50px 16px;position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:rgba(17,17,17,.88)}
.banner h1{position:relative;color:#fff;font-size:clamp(40px,6vw,66px);font-weight:600}
.about{max-width:850px;margin:0 auto;padding:30px 20px 110px;text-align:center}
.about h2{font-size:clamp(36px,5.6vw,64px);line-height:1.02;font-weight:700;margin-bottom:26px}
.about p{font-size:clamp(20px,2.6vw,29px);text-align:left;line-height:1.4;margin:0 0 30px}
.about ul{display:table;margin:0 auto;padding:0 0 0 26px;text-align:left;font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.15}
.foot{background:var(--grey);margin:0 auto;max-width:1220px}
.foot .in{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:26px 120px 18px;align-items:end}
.foot .contact{font-size:15px;line-height:1.3;font-weight:300;align-self:start}
.foot .contact b{display:block;font-size:20px;font-weight:700;margin-bottom:2px}
.foot .contact a{text-decoration:none}
.foot img{width:100%;max-width:600px;height:auto;justify-self:end}
.foot .legal{border-top:1px solid #fff;margin:0 100px;padding:14px 0 22px;text-align:center;font-size:14px;color:#fff;font-weight:300}
@media(max-width:760px){.nav{gap:18px;flex-wrap:wrap}.foot .in{grid-template-columns:1fr;padding:24px 22px}.foot .legal{margin:0 22px}.foot img{justify-self:center}.cocktail{min-height:0}.cocktail img.glass{height:260px}}