*,*::before,*::after {box-sizing: border-box;}
html {-moz-text-size-adjust: none;-webkit-text-size-adjust: none;text-size-adjust: none;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin-block-end: 0; font-family: "Montserrat", sans-serif;font-optical-sizing: auto;}
ul[role='list'],ol[role='list'] {list-style: none;}
body {min-height: 100vh;line-height: 1.5;}
h1,h2,h3,h4,button,input,label {line-height: 1.1;}
h1,h2,h3,h4 {text-wrap: balance;}
a:not([class]) {text-decoration-skip-ink: auto;color: currentColor;}
img,picture {max-width: 100%;display: block;}
input,button,textarea,select {font: inherit;}
textarea:not([rows]) {min-height: 10em;}
:target {scroll-margin-block: 5ex;}

.video {
	position: fixed;
	z-index: 1;
	inset: 0;

	video{
		min-width: 100vw;
		min-height: 100vh;
		object-fit: cover;
		position: fixed;
		inset: 0;
	}

	&::before{
		content: '';
		position: fixed;
		inset: 0;
		background-color: rgba(0,0,0,.6);
		z-index: 1;
	}
}
header{
	position: relative;
	box-sizing: border-box;
	z-index: 1;
	min-height: 100vh;
	padding: 60px;
	display: flex; flex-direction: column; align-items: center;justify-content: center;
	text-align: center;

	h1{
		color: #fff;
		font-size: 36px;
		font-weight: 700;
	}

	h6{
		color: #fff;
		font-size: 24px;
		font-weight: 600;
		max-width: 900px;
	}

}
.ok {
	background: url(/f/ok.webp) 50%;
	background-size: cover;
}

main{
	padding-top: 36px;
	padding-bottom: 72px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	background-color: #fff;
	--padding-inline: 1rem;
	--content-max-width: 900px;
	--breakout-max-width: 1200px;
	--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

	display: grid;
	grid-template-columns:
	[full-width-start]
	minmax(var(--padding-inline), 1fr)
	[breakout-start]
	minmax(0, var(--breakout-size))
	[content-start]
	min(100% - (var(--padding-inline) * 2), var(--content-max-width))
	[content-end]
	minmax(0, var(--breakout-size))
	[breakout-end]
	minmax(var(--padding-inline), 1fr)
	[full-width-end];

	&>:not(.breakout, .full-width), .full-width> :not(.breakout, .full-width) {
		grid-column: content;
	}
	
	&>.breakout {
		grid-column: breakout;
	}
	
	&>.full-width {
		grid-column: full-width;
	
		display: grid;
		grid-template-columns: inherit;
	}

	&>.row{
		margin-top: 24px;
	}

	h2{
		font-weight: 200;
	}

}
img.full-width {
	width: 100%;
	max-height: 45vh;
	object-fit: cover;
}
.row{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px;
}
.form {
	padding: 24px;
	border-radius: 9px;
	border: 1px solid rgba(197, 197, 197, 0.3);
	background-color: rgba(238, 238, 238, 0.3);
	display: flex;
	flex-direction: column;
	gap: 24px;

	h4{
		margin: 0;
	}

	.field {
		display: flex;
		flex-direction: column;
		gap: 8px;
		position: relative;
	}

	.alert{
		position: absolute;
		top: 0;
		right: 0;
		color: red;
		font-size: 12px;
	}


	label {
		font-size: 13px;
		font-weight: 600;
		line-height: 1.1;
	}
	input, textarea {
		outline: none;
		outline: none;
		background-color: #fff;
		border: 1px solid #d9d9d9;
		padding: 7px;
		width: 100%;
	}
	input::placeholder {
		color: #999;
	}

	.btn{
		background-color: #075;
		color: #fff;
	}
	.row_form{
		gap: 24px;
	}
}


@media screen and (max-width: 960px) {

	.row{
		grid-template-columns: repeat(1, 1fr);
	}
	.row_img img{
		aspect-ratio: 3 /1;
		object-fit: cover;
	}
	.row_img>div:nth-child(3){
		order: 3;
	}

}


@media screen and (max-width:768px){
	header{
		h1{
			font-size: 28px;
		}
		h6{
			font-size: 20px;
		}
	}
}


@media screen and (max-width:640px){

}