/* Index */
.hero{position:relative;height:470px;overflow:hidden;background:#8aa595}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s;background-size:cover;background-position:center}
.slide.on{opacity:1}
.slide::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,50,40,.75),rgba(7,50,40,.15) 65%)}
.hero .wrap{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.hero-t{color:#fff;max-width:500px;animation:up 1s both}
.hero-t small{font-size:12px;letter-spacing:3px;opacity:.85}
.hero-t h1{font-size:50px;font-weight:500;margin:10px 0 12px;line-height:1.15}
.hero-t p{font-size:16px;opacity:.9;margin-bottom:26px}
.prods{position:absolute;right:6%;bottom:14px;z-index:2;display:flex;align-items:flex-end;gap:10px}
.prods div{background:linear-gradient(#0e6b57,#07382d);color:#fff;font:600 13px 'Playfair Display';text-align:center;padding:12px 6px;border-radius:8px 8px 4px 4px;box-shadow:0 10px 25px rgba(0,0,0,.35);animation:float 4s ease-in-out infinite;letter-spacing:1px}
.prods div:nth-child(1){width:92px;height:190px}
.prods div:nth-child(2){width:116px;height:96px;animation-delay:.5s}
.prods div:nth-child(3){width:92px;height:270px;animation-delay:1s}
.prods div:nth-child(4){width:80px;height:230px;animation-delay:1.5s}
.arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.15);border:0;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;transition:.3s}
.arr:hover{background:#fff;color:var(--g)}
.arr.p{left:14px}
.arr.n{right:14px}
.dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.3s}
.dots i.on{background:var(--g);box-shadow:0 0 0 2px #fff}
.ritual{padding:30px 0 34px;text-align:center}
.eyebrow{font-size:11px;letter-spacing:3px;color:var(--mut)}
.title{font-size:24px;color:var(--g);margin:2px 0 18px;display:flex;align-items:center;justify-content:center;gap:16px}
.title::before,.title::after{content:'';width:50px;height:1px;background:#9bb5a9}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{position:relative;display:block;height:180px;border-radius:var(--r);overflow:hidden;text-align:left;isolation:isolate;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.cat::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(5,50,38,.75),rgba(5,50,38,0) 60%);transition:opacity .5s,background .5s}
.cat::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;z-index:2;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.cat div{position:absolute;z-index:3;left:16px;bottom:14px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cat h3{font-size:21px;font-weight:600}
.cat small{font-size:13px;display:inline-flex;align-items:center;gap:4px;opacity:.9;transition:.4s}
.cat small::after{content:'';display:block;height:1px;width:0;background:#fff;transition:width .4s}
.cat:hover,.cat:focus-visible{transform:translateY(-8px);box-shadow:0 18px 32px rgba(11,93,75,.35);outline:0}
.cat:hover img,.cat:focus-visible img{transform:scale(1.15) rotate(1.5deg);filter:saturate(1.15) brightness(.95)}
.cat:hover::before,.cat:focus-visible::before{background:linear-gradient(to top,rgba(5,50,38,.9),rgba(5,50,38,.15) 75%)}
.cat:hover::after,.cat:focus-visible::after{left:130%;transition:left .9s ease}
.cat:hover div,.cat:focus-visible div{transform:translateY(-6px)}
.cat:hover small,.cat:focus-visible small{opacity:1;letter-spacing:.6px}
.cat:hover small::after,.cat:focus-visible small::after{width:22px}
.cat:active{transform:translateY(-3px) scale(.98)}
.best{padding:22px 0 28px}
.story{display:grid;grid-template-columns:1fr 1fr;min-height:300px}
.story .a{position:relative;overflow:hidden;isolation:isolate;background:#0a3d2e;color:#fff;padding:64px 6vw 64px 14%;cursor:default}
.story .a>*{position:relative;z-index:2}
.story .a::before{content:'';position:absolute;inset:0;z-index:0;background:var(--sb,none) center/cover no-repeat;transform:scale(1.02);transition:transform 1.6s cubic-bezier(.2,.8,.2,1),filter .8s}
.story .a::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,45,32,.85),rgba(4,45,32,.35));transition:opacity .8s}
.story .a:hover::before{transform:scale(1.14) translateX(-1.5%);filter:saturate(1.2)}
.story .a:hover::after{opacity:.75}
.story .a h2,.story .a p{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.story .a:hover h2{transform:translateX(8px)}
.story .a:hover p{transform:translateX(12px)}
.story .a h2{font-size:28px;font-style:italic;font-weight:500}
.story .a p{font-size:13px;margin:10px 0 18px;max-width:340px;opacity:.9}
.story .a .btn{background:var(--g);padding:9px 18px;font-size:12px}
.story .b{background:var(--gl);padding:64px 5%;text-align:center;position:relative}
.story .b h2{font-size:26px;margin-bottom:24px!important;font-style:italic;color:var(--gd);font-weight:500;margin-bottom:14px}
.offer{margin:6px auto 0;border-radius:4px;background:linear-gradient(90deg,#e4eee8 40%,#cfe0d5);display:flex;align-items:center;justify-content:space-between;padding:34px 40px;overflow:hidden}
.offer small{font-size:10px;letter-spacing:2px;color:var(--mut)}
.offer h2{font-size:26px;color:var(--g);font-weight:500}
.offer p{font-size:12px;margin:2px 0 10px}
.offer p b{color:var(--g)}
.offer .btn{padding:8px 16px;font-size:12px}
.gift{width:320px;height:160px;border-radius:8px;background:url('https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=500') center/cover;animation:float 4s ease-in-out infinite}
.rev{padding:30px 0 10px;text-align:center}
.rev h2{font-size:20px;color:var(--g)}
.rev>.wrap>p{font-size:12px;color:var(--mut);margin-bottom:14px}
.rv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative}
.rc{display:flex;gap:14px;text-align:left;padding:24px 20px;border:1px solid #eee;border-radius:var(--r);transition:.35s;background:#fff}
.rc:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.08)}
.av{flex:0 0 46px;height:46px;border-radius:50%;background:url('https://i.pravatar.cc/100') center/cover;background-color:#cfd9d3}
.rc .s{color:var(--g);font-size:12px;letter-spacing:2px}
.rc p{font-size:11px;color:#444;margin:3px 0 6px;font-style:italic}
.rc b{font-size:11px;display:block}
.rc small{font-size:10px;color:var(--mut)}
.jr{padding:20px 0 24px}
.hero .btn:hover,.story .a .btn:hover{background:#fff;color:var(--g)}
.offer .btn:hover{background:var(--gd)}
.arr{transition:background .3s,color .3s,transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.arr:hover{transform:translateY(-50%) scale(1.2);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.dots i:hover{transform:scale(1.5)}
.na{padding:30px 0 26px;background:var(--cream)}
.na .card .im{height:230px}
.grid5.grid4{grid-template-columns:repeat(4,1fr)}
.na .card h4{font-size:13px}
.na .price{font-size:13px}
@media(max-width:900px){
.grid5.grid4{grid-template-columns:repeat(4,1fr);gap:10px}
.na .card .im{height:180px}
.na .card h4{font-size:12px}
.na .price{font-size:13px}
.na .card .btn{font-size:10px;padding:12px 2px}
}
@media(max-width:640px){
.grid5.grid4{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 2px 16px;margin:-12px -2px -4px;-webkit-overflow-scrolling:touch}
.grid4 .card{flex:0 0 62%;scroll-snap-align:start}
.na .card .im{height:220px}
.na .card h4{font-size:13px}
.na .price{font-size:13px}
.na .card .btn{font-size:13px;padding:15px}
.grid5.grid4::-webkit-scrollbar{height:4px}
.grid5.grid4::-webkit-scrollbar-thumb{background:#b9cfc4;border-radius:4px}
}
.brand{position:relative;overflow:hidden;padding:44px 0 52px;background:radial-gradient(circle at 8% 15%,rgba(159,211,191,.4),transparent 38%),radial-gradient(circle at 94% 85%,rgba(217,162,27,.13),transparent 36%),linear-gradient(#f2f8f4,#fff)}
.brand::before{content:'';position:absolute;top:18px;right:4%;width:150px;height:110px;background:radial-gradient(var(--g) 1.3px,transparent 1.5px) 0 0/16px 16px;opacity:.16;pointer-events:none}
.brand::after{content:'';position:absolute;bottom:-70px;left:-50px;width:200px;height:200px;border:2px dashed rgba(11,93,75,.18);border-radius:50%;animation:spin 40s linear infinite;pointer-events:none}
.brand .wrap{position:relative;z-index:1}
.brand h2{font-size:30px;color:var(--gd);text-align:center;font-weight:600;line-height:1.25}
.brand .ttl{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:2px}
.brand .ttl::before,.brand .ttl::after{content:'';flex:0 1 70px;height:1px;background:linear-gradient(90deg,transparent,#8fb5a4)}
.brand .ttl::after{transform:scaleX(-1)}
.brand .ttl svg{width:22px;height:22px;color:var(--g);flex:none;animation:sway 3s ease-in-out infinite}
.brand .sub{font-size:13px;color:var(--mut);text-align:center;margin:8px 0 38px}
.circles{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.circ{display:block;text-align:center}
.circ:nth-child(even){margin-top:22px}
.ci{position:relative;display:block;width:100%;max-width:158px;aspect-ratio:1;margin:0 auto 16px;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.ci::before{content:'';position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(var(--g),#9fd3bf,#e8c46a,var(--g));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));opacity:.4;transition:opacity .4s,inset .4s}
.pic{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 12px 26px rgba(11,93,75,.16);transition:box-shadow .4s;background:#dcebe3}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s}
.pic::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(7,68,55,.55),transparent 55%);opacity:0;transition:opacity .45s}
.go{position:absolute;right:-2px;bottom:6px;z-index:3;width:34px;height:34px;border-radius:50%;background:var(--g);color:#fff;font-style:normal;font-size:16px;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 6px 14px rgba(11,93,75,.4);transform:scale(0) rotate(-90deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s}
.circ b{display:block;font:600 18px 'Playfair Display',serif;color:var(--ink);transition:color .3s}
.circ small{display:block;font-size:12px;color:var(--mut);margin-top:2px;transition:color .3s,transform .4s}
.circ:hover .ci,.circ:focus-visible .ci{transform:translateY(-12px) scale(1.04)}
.circ:hover .ci::before,.circ:focus-visible .ci::before{opacity:1;inset:-9px;animation:spin 6s linear infinite}
.circ:hover .pic{box-shadow:0 22px 38px rgba(11,93,75,.34)}
.circ:hover .pic img{transform:scale(1.2);filter:saturate(1.2)}
.circ:hover .pic::after{opacity:1}
.circ:hover .go,.circ:focus-visible .go{transform:none}
.go:hover{background:var(--gd)}
.circ:hover b{color:var(--g)}
.circ:hover small{color:var(--g);transform:translateY(2px)}
.circ:focus-visible{outline:0}
@keyframes pop{from{opacity:0;transform:translateY(34px) scale(.8)}to{opacity:1;transform:none}}
.js .brand .circ{opacity:0}
.js .brand .rv-in.show .circ{animation:pop .75s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*.1s)}
@media(prefers-reduced-motion:reduce){
.js .brand .circ{opacity:1}
}
@media(max-width:900px){
.circles{grid-template-columns:repeat(3,1fr);row-gap:30px}
.circ:nth-child(even){margin-top:0}
.ci{max-width:136px}
.brand h2{font-size:24px}
}
@media(hover:none){
.go{transform:none;width:28px;height:28px;font-size:13px}
}
@media(max-width:640px){
.circles{gap:12px;row-gap:26px}
.ci{max-width:104px}
.circ b{font-size:15px}
.circ small{font-size:11px}
.brand h2{font-size:20px}
.brand .ttl{gap:8px}
.brand .ttl::before,.brand .ttl::after{flex-basis:20px}
.brand .ttl svg{display:none}
.go{width:26px;height:26px;font-size:13px}
}
.offer2{position:relative;overflow:hidden;margin-top:6px;padding:56px 0;color:#fff;background:linear-gradient(110deg,#053a2e,#0b5d4b 55%,#14876c)}
.offer2::before{content:'';position:absolute;top:-120px;left:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.06)}
.offer2::after{content:'';position:absolute;right:-90px;bottom:-140px;width:420px;height:420px;border-radius:50%;border:2px dashed rgba(255,255,255,.18);animation:spin 50s linear infinite}
.o2{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px}
.o2s{font-size:13px;letter-spacing:2px;color:#9fd3bf}
.o2t h2{font-size:38px;font-weight:600;line-height:1.2;margin:8px 0 12px}
.o2t p{font-size:13px;opacity:.85;max-width:430px;margin-bottom:22px}
.cpn{display:inline-flex;align-items:center;gap:10px;border:2px dashed rgba(255,255,255,.55);border-radius:6px;padding:8px 8px 8px 14px;margin:0 14px 14px 0;background:rgba(255,255,255,.08);transition:.3s}
.cpn:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}
.cpn svg{width:18px;height:18px;color:#e8c46a}
.cpn span{font:600 17px 'Poppins';letter-spacing:3px}
.cpn button{border:0;background:var(--gold);color:#fff;font:500 13px 'Poppins';padding:8px 14px;border-radius:4px;cursor:pointer;transition:.3s}
.cpn button:hover{background:#fff;color:var(--g);transform:scale(1.05)}
.offer2 .btn{background:#fff;color:var(--g);padding:14px 30px;margin-bottom:14px}
.offer2 .btn:hover{background:var(--gold);color:#fff}
.o2i{position:relative;justify-self:end;width:100%;max-width:440px}
.o2p{height:280px;border-radius:200px 200px 16px 16px;overflow:hidden;border:6px solid rgba(255,255,255,.9);box-shadow:0 24px 50px rgba(0,0,0,.35);background:linear-gradient(135deg,#7fb39d,#cfe6da);transform:rotate(3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.o2p img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.o2i:hover .o2p{transform:rotate(0) scale(1.03)}
.o2i:hover .o2p img{transform:scale(1.12)}
.o2b{position:absolute;left:-18px;top:30px;width:104px;height:104px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-content:center;text-align:center;border:4px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.3);animation:float 3.5s ease-in-out infinite}
.o2b b{font:700 30px 'Playfair Display',serif;line-height:1}
.o2b small{font:600 13px 'Poppins';letter-spacing:3px}
@media(max-width:900px){
.o2{grid-template-columns:1fr;gap:30px}
.o2i{justify-self:center;max-width:380px}
.o2t h2{font-size:30px}
}
@media(max-width:640px){
.offer2{padding:40px 0}
.o2t h2{font-size:25px}
.o2p{height:230px}
.o2b{left:-6px;width:84px;height:84px}
.o2b b{font-size:24px}
.cpn span{font-size:15px}
.cpn{margin-right:0}
}
.tc{position:relative;padding:0 26px}
.tv{overflow:hidden;padding:12px 0 16px;margin:0 -7px}
.tt{display:flex;transition:transform .7s cubic-bezier(.3,.8,.2,1)}
.rs{padding:0 7px}
.rs .rc{height:100%;position:relative;overflow:hidden}
.rs .rc::after{content:'\201C';position:absolute;right:14px;top:-6px;font:700 70px 'Playfair Display',serif;color:var(--gl);line-height:1;pointer-events:none}
.tt .rc p{font-size:13px;line-height:1.6}
.tt .rc b{font-size:13px}
.tt .rc small{font-size:11px}
.tt .av{flex:0 0 54px;height:54px}
.tarr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid #d6e3dc;background:#fff;color:var(--g);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:.3s}
.tarr:hover{background:var(--g);color:#fff;transform:translateY(-50%) scale(1.12);box-shadow:0 8px 18px rgba(11,93,75,.35)}
.tl{left:-6px}
.tr{right:-6px}
.tdots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.tdots button{width:8px;height:8px;border-radius:8px;border:0;background:#c7d8cf;cursor:pointer;padding:0;transition:.4s}
.tdots button.on{width:26px;background:var(--g)}
@media(max-width:640px){
.tc{padding:0}
.tarr{display:none}
.tv{margin:0 -4px}
.rs{padding:0 4px}
}
@media(max-width:900px){
.rv{grid-template-columns:1fr}
.prods{transform:scale(.8);transform-origin:bottom right;right:2%}
}
@media(max-width:640px){
.hero{height:500px}
.hero .wrap{align-items:flex-start;padding-top:36px}
.hero-t h1{font-size:32px}
.prods{right:50%;transform:translateX(50%) scale(.72);transform-origin:bottom center}
.arr{display:none}
.cats{grid-template-columns:repeat(2,1fr)}
.cat{height:160px}
.story{grid-template-columns:1fr}
.story .a{padding:56px 20px;min-height:260px}
.story .b{padding:44px 16px}
.offer{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
.gift{width:100%;height:170px}
.title::before,.title::after{width:22px}
.title{font-size:20px}
}
.slide:nth-child(1){background-image:url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1600')}
.slide:nth-child(2){background-image:url('https://images.unsplash.com/photo-1498842812179-c81beecf902c?w=1600')}
.slide:nth-child(3){background-image:url('https://images.unsplash.com/photo-1470058869958-2a77ade41c02?w=1600')}
.slide:nth-child(4){background-image:url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1600')}
.circ:nth-child(1){--i:0}
.circ:nth-child(2){--i:1}
.circ:nth-child(3){--i:2}
.circ:nth-child(4){--i:3}
.circ:nth-child(5){--i:4}
.circ:nth-child(6){--i:5}
.rs:nth-child(1) .av{background-image:url('https://i.pravatar.cc/100?img=47')}
.rs:nth-child(2) .av{background-image:url('https://i.pravatar.cc/100?img=45')}
.rs:nth-child(3) .av{background-image:url('https://i.pravatar.cc/100?img=44')}
.rs:nth-child(4) .av{background-image:url('https://i.pravatar.cc/100?img=32')}
.rs:nth-child(5) .av{background-image:url('https://i.pravatar.cc/100?img=49')}
.rs:nth-child(6) .av{background-image:url('https://i.pravatar.cc/100?img=41')}
.jr .sec-h h2{font-size:18px}
