:root{
	--blue:#08449b;
	--blue-deep:#062b68;
	--blue-soft:#edf5ff;
	--red:#ef161e;
	--ink:#10213f;
	--body:#405270;
	--line:#d9e3f1;
	--white:#fff;
	--pale:#f6f9fd;
	--shadow:0 18px 48px rgba(8,48,105,.13)
}
*{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	min-width:320px;
	color:var(--body);
	font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
	background:var(--pale);
	line-height:1.58
	}
a{
	color:inherit
}
.wrap{
	width:min(1240px,calc(100% - 48px))
	;margin:auto
}
.skip{
	position:absolute;
	left:-9999px;
	top:8px;
	z-index:99;
	color:#fff;
	background:var(--blue-deep);
	padding:10px 14px;
	border-radius:6px
}
.skip:focus{
	left:8px
}
.utility{
	background:var(--blue-deep);
	color:#fff
}
.utility .wrap{
	min-height:38px;
	display:flex;
	justify-content:flex-end;
	align-items:center
}
.utility a{
	font-size:.82rem;
	font-weight:700;
	text-decoration:none
}
.header{
	background:#fff;
	border-bottom:1px solid var(--line)
}
.header-row{
	min-height:100px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:34px
}
.logo img{
	display:block;
	width:205px;
	height:auto
}
.nav{
	display:flex;
	align-items:center;
	gap:27px
}
.nav-link{
	color:var(--blue-deep);
	font-weight:700;
	font-size:.94rem;
	text-decoration:none
}
.nav-link:hover{
	color:var(--red)
}
.button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	padding:0 22px;
	border:1px solid transparent;
	border-radius:5px;
	font-size:.93rem;
	font-weight:800;
	text-decoration:none;
	transition:background .18s ease,transform .18s ease,box-shadow .18s ease
}
.button:hover{
	transform:translateY(-1px)
}
.button-blue{
	color:#fff;
	background:var(--blue);
	box-shadow:0 5px 14px rgba(8,68,155,.22)
}
.button-blue:hover{
	background:var(--blue-deep)
}
.button-white{
	color:var(--blue-deep);
	background:#fff
}
.hero{
	position:relative;
	overflow:hidden;
	background:var(--blue-deep);
	color:#fff
}
.hero-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) 46%;
	min-height:555px
}
.hero-copy{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:68px 56px 70px 0
}
.kicker{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 17px;
	color:#fff;
	font-size:1.56rem;
	font-weight:900;
	letter-spacing:.13em;
	text-transform:uppercase
}
.kicker::before{
	content:"";
	width:29px;
	height:4px;
	background:var(--red)
}
h1,h2,h3,p{
	margin-top:0
}
h1{
	max-width:670px;
	margin-bottom:23px;
	font-size:clamp(3.2rem,5.8vw,5.7rem);
	line-height:.94;
	letter-spacing:-.066em;
	color:#fff
}
h1 .red{
	color:var(--red)
}
h1 .blue-light{
	color:#fff
}
.hero-copy>p:not(.kicker){
	max-width:530px;
	margin-bottom:32px;
	font-size:clamp(1.16rem,1.8vw,1.48rem);
	color:#ecf4ff
}
.hero-actions{
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	align-items:center
}
.hero .outline{
	color:#fff;
	background:transparent;
	border-color:rgba(255,255,255,.65)
}
.hero .outline:hover{
	background:rgba(255,255,255,.12)
}
.hero-media{
	position:relative;
	min-height:410px;
	background:#dce7f2
}
.hero-media::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(6,43,104,.42),rgba(6,43,104,.04) 55%,rgba(6,43,104,.1))
}
.building{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center bottom;
	filter:sepia(20%) saturate(60%) contrast(.95)
}
.info-card{
	position:absolute;
	z-index:3;
	left:-120px;
	bottom:44px;
	width:365px;
	background:#fff;
	color:var(--body);
	box-shadow:var(--shadow);
	border-radius:4px;
	overflow:hidden
}
.price{
	padding:25px 28px 22px;
	color:#fff;
	background:var(--blue)
}
.price p{
	margin:0
}
.price-label{
	font-size:.91rem;
	font-weight:760
}
.amount{
	margin-top:4px!important;
	font-size:3rem;
	line-height:1;
	font-weight:900;
	letter-spacing:-.07em
}
.month{
	margin-top:9px!important;
	font-size:.9rem;
	font-weight:700
}
a.month {
	letter-spacing: 0;
	padding-left: 6px
}
.arag-row{
	display:grid;
	grid-template-columns:74px 1fr;
	gap:17px;
	align-items:center;
	padding:20px 24px
}
.arag-row img{
	display:block;
	width:69px;
	height:69px;
	border-radius:50%;
	object-fit:cover
}
.arag-row p{
	margin:0;
	font-size:.91rem;
	line-height:1.45
}
.statement{
	background:#fff;
	padding:30px 0;
	border-bottom:1px solid var(--line)
}
.statement-inner{
	display:grid;
	grid-template-columns:44px 1fr;
	gap:19px;
	align-items:start
}
.statement-mark{
	width:32px;
	height:32px;
	border-left:5px solid var(--red);
	border-top:5px solid var(--red)
}
.statement p{
	margin:0;
	color:var(--blue-deep);
	font-size:1.12rem;
	font-weight:750
}
.commitment{
	padding:86px 0 92px
}
.section-head{
	display:grid;
	grid-template-columns:minmax(0,1fr) 360px;
	gap:45px;
	align-items:end;
	margin-bottom:38px
}
.section-label{
	margin:0 0 14px;
	color:var(--red);
	font-size:.79rem;
	font-weight:900;
	letter-spacing:.13em;
	text-transform:uppercase
}
h2{
	margin-bottom:0;
	color:var(--ink);
	font-size:clamp(2.2rem,4vw,3.7rem);
	line-height:1.04;
	letter-spacing:-.055em
}
.section-note{
	margin:0;
	padding:0 0 11px;
	border-bottom:3px solid var(--blue);
	color:#60728d;
	font-size:1rem
}
.cards{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px
}
.card{
	padding:28px 25px 29px;
	border:1px solid var(--line);
	border-radius:3px;
	background:#fff;
	box-shadow:0 6px 17px rgba(10,44,92,.04);
	transition:transform .2s ease,box-shadow .2s ease
}
.card:hover{
	transform:translateY(-5px);
	box-shadow:0 18px 35px rgba(10,44,92,.11)
}
.card::before{
	content:"";
	display:block;
	width:32px;
	height:4px;
	margin-bottom:22px;
	background:var(--red)
}
.card h3{
	margin-bottom:13px;
	color:var(--blue-deep);
	font-size:1.28rem;
	line-height:1.15;
	letter-spacing:-.025em
}
.card p{
	margin:0;
	font-size:.955rem;
	color:#50617f;
	line-height:1.57
}
.join-area{
	padding:0 0 86px
}
.join{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:42px;
	align-items:center;
	padding:47px 54px;
	background:var(--blue-soft);
	border-left:7px solid var(--red);
	border-radius:3px
}
.join h2{
	color:var(--blue-deep);
	font-size:clamp(2rem,3.5vw,3.13rem)
}
.join p{
	margin:16px 0 0;
	color:#405574;
	font-size:1rem
}
.join p a{
	color:var(--blue-deep);
	font-weight:800
}
footer{
	padding:26px 0 34px;
	background:var(--blue-deep);
	color:#c9dcf8;
	text-align:center;
	font-size:.87rem
}
@media(max-width:980px){
	.hero-grid{
		grid-template-columns:1fr;
		min-height:0
	}
	.hero-copy{
		padding:65px 0 56px
	}
	.hero-media{
		min-height:370px
	}
	.info-card{
		left:0;
		bottom:28px
	}
	.section-head{
		grid-template-columns:1fr;
		gap:21px
	}
	.section-note{
		max-width:500px
	}
	.cards{
		grid-template-columns:repeat(2,1fr)
	}
}
@media(max-width:650px){
	.wrap{
		width:min(100% - 30px,1240px)
	}
	.utility{
		display:none
	}
	.header-row{
		min-height:73px
	}
	.logo img{
		width:146px
	}
	.nav-link{
		display:none
	}
	.nav{
		gap:0
	}
	.button{
		min-height:43px;
		padding:0 16px;
		font-size:.87rem
	}
	.hero-copy{
		padding:51px 0 42px
	}
	h1{
		font-size:clamp(3.15rem,16vw,4.75rem)
	}
	.hero-copy>p:not(.kicker){
		font-size:1.13rem;
		margin-bottom:27px
	}
	.hero-media{
		min-height:379px;
		margin:0 -15px
	}
	.info-card{
		left:15px;
		right:15px;
		bottom:20px;
		width:auto
	}
	.price{
		padding:23px 23px 20px
	}
	.arag-row{
		grid-template-columns:64px 1fr;
		padding:18px 20px
	}
	.arag-row img{
		width:60px;
		height:60px
	}
	.statement{
		padding:26px 0
	}
	.statement-inner{
		grid-template-columns:32px 1fr;
		gap:13px
	}
	.statement-mark{
		width:26px;
		height:26px
	}
	.statement p{
		font-size:1rem
	}
	.commitment{
		padding:62px 0
	}
	.cards{
		grid-template-columns:1fr;
		gap:14px
	}
	.card{
		padding:25px 22px
	}
	.join-area{
		padding-bottom:59px
	}
	.join{
		grid-template-columns:1fr;
		gap:25px;
		padding:34px 26px;
		border-left-width:6px
	}
}