@media(max-width:1020px){
	.header nav{
		position:fixed;
		inset:72px 0 auto;
		background:#100d09;
		flex-direction:column;
		padding:35px;
		transform:translateY(-140%);
		transition:.35s;
		border-bottom:1px solid var(--line)
	}
	.header nav.open{
		transform:none
	}
	.menu{
		display:block
	}
	.hero{
		grid-template-columns:1fr;
		padding-top:135px
	}
	.hero-visual{
		margin-top:35px
	}
	.visual-frame{
		width:min(70vw,540px)
	}
	.about,.purity,.faq,.contact{
		grid-template-columns:1fr
	}
	.service-grid{
		grid-template-columns:repeat(2,1fr)
	}
	.collection-grid{
		grid-template-columns:repeat(2,1fr)
	}
	.section-title{
		grid-template-columns:1fr
	}
	.section-title>p:last-child{
		justify-self:start
	}
	.purity-cards{
		margin-top:10px
	}
	.faq{
		gap:45px
	}
	footer{
		grid-template-columns:1fr 1fr
	}
	.footer-links+ p{
		grid-column:1/-1;
		text-align:left
	}
}
 @media(max-width:640px){
	.header{
		height:72px
	}
	.logo img{
		width:80px
	}
	.hero{
		padding-left:20px;
		padding-right:20px
	}
	.hero h1{
		font-size:54px
	}
	.actions{
		flex-direction:column;
		align-items:flex-start
	}
	.hero-proof{
		gap:22px;
		flex-wrap:wrap
	}
	.visual-frame{
		width:90vw
	}
	.badge{
		right:0;
		width:88px;
		height:88px;
		font-size:13px
	}
	.section,.contact{
		padding:85px 20px
	}
	.about{
		gap:45px
	}
	.values article{
		grid-template-columns:40px 1fr
	}
	.values article p{
		grid-column:2
	}
	.service-grid,.collection-grid,.purity-cards{
		grid-template-columns:1fr
	}
	.collection-head{
		align-items:flex-start;
		flex-direction:column;
		gap:25px
	}
	.filters{
		flex-wrap:wrap
	}
	.purity{
		padding:85px 20px
	}
	.steps article{
		grid-template-columns:60px 1fr
	}
	.quote-slider{
		grid-template-columns:1fr
	}
	.slider-arrow{
		display:none
	}
	.faq h2{
		font-size:52px
	}
	.contact-list,.form-row{
		grid-template-columns:1fr
	}
	.contact-form{
		padding:25px
	}
	.map img{
		height:330px
	}
	footer{
		grid-template-columns:1fr
	}
	.footer-links{
		flex-wrap:wrap
	}
	.footer-links+ p{
		text-align:left
	}
	.ticker>div{
		gap:24px
	}
	.hero-proof strong{
		font-size:26px
	}
}
 @media(max-width:1020px){
	.hero:before{
		background:linear-gradient(180deg,rgba(44,29,17,.94) 0%,rgba(44,29,17,.84) 53%,rgba(44,29,17,.18) 100%)
	}
	.hero-visual{
		justify-self:center
	}
	.visual-frame{
		width:min(82vw,650px)
	}
	.visual-frame img{
		height:auto;
		min-height:520px
	}
}
 @media(max-width:640px){
	.visual-frame{
		width:92vw;
		border-radius:180px 180px 18px 18px
	}
	.visual-frame img{
		min-height:430px
	}
	.hero:before{
		background:linear-gradient(180deg,rgba(44,29,17,.96) 0%,rgba(44,29,17,.89) 57%,rgba(44,29,17,.2) 100%)
	}
}