.navbar {
	background-color: white;
}

.navbar-light .navbar-brand {
	font-family: DM Sans Regular, sans-serif;
	font-style: normal;
	font-weight: bold;
	color: #007CFF;
	font-size: 18px;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:active,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .dropdown .dropdown-item:focus,
.navbar-light .navbar-nav .dropdown .dropdown-item:hover,
.navbar-light .navbar-nav .dropdown .dropdown-item:active,
.navbar-light .navbar-nav .dropdown .dropdown-item.active {
	color: #007CFF;
	background-color: inherit;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .dropdown .dropdown-item {
	font-family: Poppins SemiBold, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	color: #222222;
}

.navbar-light .navbar-nav .nav-item {
	margin-right: 2rem;
}

.dropdown .dropdown-menu {
	transition: all 0.3s;
	max-height: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
}

.dropdown.show .dropdown-menu {
	max-height: 300px;
	opacity: 1;
}

p,
li.check {
	text-align: justify;
	color: #515F7A;
	font-size: 18px;
	font-family: SourceSansPro-Regular, sans-serif;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

p {
	line-height: 22,63px;
	text-align: center;
}

@media screen and (max-width: 992px) {
	.dropdown-toggle::before {
		top: inherit;
		transform: none;
	}

	.navbar-light .navbar-nav .nav-item {
		margin-right: inherit;
	}

	h3 {
		font-size: 26px;
	}
}

.dropdown-toggle::after {
	display: none;
}

.dropdown-menu {
	top: 90%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: SourceSansPro-SemiBold, sans-serif;
	font-style: normal;
	font-weight: 600;
	color: #222222;
	margin-bottom: 0.5em;
}

h1 {
	font-size: 54px;
	overflow-wrap: break-word;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 67,88px;
}

h1 small {
	font-family: SourceSansPro-Regular, sans-serif;
	font-size: 36px;
	line-height: 48px;
	text-align: center;
	letter-spacing: -1px;
}

h2 {
	font-size: 42px;
	color: white;
	overflow-wrap: break-word;
	line-height: 1.3;
	margin-bottom: 3rem;
}

	h2.fc-toolbar-title {
		color: #222222;
	}

h3 {
	font-size: 36px;
	color: #515F7A;
	overflow-wrap: break-word;
	line-height: 1.3;
	margin-bottom: 3rem;
}

h4 {
	font-size: 30px;
	color: #515F7A;
	overflow-wrap: break-word;
	line-height: 37.7px;
}

h5 {
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 0.5rem;
}

h6 {
	font-size: 16px;
	margin-bottom: 1em;
}

.btn.btn-primary {
	font-family: Poppins SemiBold, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	padding: 11px 26px;
	margin-top: 2em;
}

.row > [class*=col-].center {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ellipse-top-right {
	background: white url("../images/Ellipse.svg") 100% -15% no-repeat;
	padding-top: 7rem;
}

	.ellipse-top-right.up {
		background: white url("../images/Ellipse.svg") 100% -50% no-repeat;
	}

	.ellipse-top-right.up2 {
		background: white url("../images/Ellipse2.svg") 100% -10rem no-repeat;
	}

hr {
	border: 1px solid #F1F1F3;
}

.background-light {
	background-color: #F5FAFF;
}

	.background-light.ellipse-top-right {
		background-color: #F5FAFF;
	}

	.background-light hr {
		border-top: 1px solid #DBEDFF;
	}

.ellipse-bottom-right {
	background: white url("../images/Ellipse.svg") 100% 100% no-repeat;
}

.link-1 {
	text-transform: uppercase;
	font-family: Poppins Regular, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 17px;
	color: #007bff;
	margin-bottom: 0.5rem;
}

.reasons {
	margin-top: 7rem;
	margin-bottom: 7rem;
}

	.reasons.no-top {
		margin-top: 0rem;
	}

	.reasons.no-bottom {
		margin-bottom: 0rem;
	}

.reason {
	padding-bottom: 5rem;
}

	.reason img {
		margin-bottom: 2rem;
	}

	.reason p {
		font-size: 14px;
	}

	.reason .circle {
		background-color: white;
		font-size: 0;
	}

	.reason.no-bottom {
		padding-bottom: 0;
	}

.flex-center {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.offer {
	margin-bottom: 0;
	align-items: center;
}

	.offer > [class*=col-] {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.offer .offer-text {
		font-size: 14px;
	}

	.offer a {
		font-family: Poppins SemiBold, sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		color: #007CFF;
	}

	.offer img {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

.collaborate h3,
.collaborate p {
	color: white;
}

.collaborate p {
	text-transform: uppercase;
	font-size: 17px;
	font-family: Poppins Regular, sans-serif;
}

.collaborate h3 {
	line-height: 1.5;
}

.collaborate .btn.btn-primary {
	color: #007CFF;
	background-color: #FFFFFF;
	margin-top: 1em;
}

	.collaborate .btn.btn-primary:active,
	.collaborate .btn.btn-primary:hover {
		background-color: #F5F5F5;
	}

.page-footer {
	background-color: #515F7A;
}

	.page-footer h5 {
		font-size: 15px;
	}

	.page-footer p {
		font-size: 14px;
	}

	.page-footer hr {
		margin-top: 3rem;
		margin-bottom: 0;
	}

	.page-footer li a {
		font-size: 13px;
		color: #555555;
	}

	.page-footer img {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.page-footer a img {
		height: 30px;
		width: 30px;
		margin-right: 1rem;
	}

.footer-copyright {
	font-family: DM Sans Regular, sans-serif;
	font-size: 12px;
	color: #555555;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

	.footer-copyright a {
		color: #555555;
		padding-left: 1rem;
	}

		.footer-copyright a.text {
			padding-left: 2rem;
		}

.reasons-2 {
	margin-top: 3rem;
}

	.reasons-2.no-top {
		margin-top: 0;
	}

	/*.reasons-2 .reason img {
		margin-bottom: 0.5rem;
	}*/

	.reasons-2 .counter {
		font-size: 26px;
		color: #007CFF;
		background-color: #F0F7FF;
		line-height: 4rem;
	}

.background-light .reasons-2 .counter {
	background-color: white;
}

.circle,
.replaced-text p.circle {
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	text-align: center;
	margin-bottom: 2rem;
	line-height: 4rem;
}

	.circle img {
		margin: 0;
	}

	.circle.gro {
		font-family: Poppins Regular, sans-serif;
		font-style: normal;
		font-weight: bold;
		font-size: 24px;
		color: #007CFF;
	}

	.circle.color {
		background-color: #F0F7FF;
	}

.reasons.administration {
	margin-top: 0;
	margin-bottom: 2rem;
}

.administration img {
	padding: 2rem;
	margin-bottom: 0;
}

.administration .flex-center,
.administration .flex-center .offer {
	margin-bottom: 2rem;
}

	.administration .flex-center a {
		text-transform: none;
	}

.administration img {
	width: 100%;
}

.hr-result {
	border-top: 3px solid #007CFF !important;
	width: 15%;
	margin: 2rem 0;
}

	.hr-result.long {
		width: 25%;
	}

ul {
	padding-left: 5em;
	list-style: none;
}

li.check {
	margin-left: 1rem;
	line-height: 1.2;
}

	li.check::before {
		content: "";
		padding: 0rem 1rem 0rem 1rem;
		background: white url("../images/check-mark.svg") center center no-repeat;
		vertical-align: middle;
		margin: 0 .3em 0 -2em;
		font-size: 2.5em;
	}

	li.check span {
		display: inline-block;
		vertical-align: middle;
	}

.section-before {
	padding-top: 3rem;
}

.section-after {
	padding-bottom: 3rem;
}

.list-1 li {
	background-color: #FAFAFA;
	min-height: 5rem;
	margin-bottom: 1rem;
	padding: 1rem 2.5rem 1rem 1.5rem;
}

	.list-1 li h3 {
		font-family: Metropolis Regular, sans-serif;
		font-style: normal;
		font-weight: 500;
		font-size: 48px;
		color: #007CFF;
		float: left;
		margin-bottom: 0;
		margin-right: 1.5rem;
		line-height: 1;
	}

.list-2 li {
	background-color: #F5FAFF;
	min-height: 5rem;
	margin-bottom: 1rem;
	padding: 1rem 3.5rem 1rem 3.5rem;
}

	.list-2 li h2 {
		font-family: Metropolis Regular, sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: 80px;
		color: #007CFF;
		margin-bottom: 0;
		margin-right: 1.5rem;
	}

	.list-2 li p {
		font-size: 14px;
	}

.circle.big {
	border-radius: 50%;
	width: 15rem;
	height: 15rem;
	text-align: center;
	line-height: 15rem;
	background-color: white;
	color: #007CFF;
	font-size: 100px;
}

	.circle.big.color {
		background-color: #F0F7FF;
	}

.adapt {
	height: 100%;
}

	.adapt img {
		margin-bottom: 1rem;
	}

	.adapt ul li {
		margin-bottom: 0.3rem;
	}

		.adapt ul li:before {
			content: "—";
			position: relative;
			left: -5px;
		}

.adapt-1 {
	margin-right: 0.1rem;
	height: 100%;
}

.adapt-2 {
	margin-left: 0.1rem;
	height: 100%;
}

.list-3 {
	margin-top: 5rem;
}

	.list-3 ul {
		background-color: white;
		padding: 2rem;
		border-radius: 3px;
	}

	.list-3 li.check::before {
		border-radius: 50%;
		padding: 0.3rem 0rem 0.3rem 0.6rem;
		margin-top: 0.4rem;
		background: none;
		background-color: #007CFF;
		margin-left: -2rem !important;
	}

.background-light-2 {
	background-color: #FAFAFA;
}

section.header {
	background: url("../images/office.jpg") center;
	background-size: cover;
	min-height: 606px;
	margin-top: 6rem !important
}

	section.header .container {
		min-height: 606px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	section.header h2 {
		color: #ffffff;
		font-family: SourceSansPro-Regular, sans-serif;
		font-weight: normal;
		font-size: 18px;
		line-height: 23px;
	}

	section.header .hero-schedule {
		color: #ffffff;
		font-size: 16px;
		line-height: 1.4;
		margin-bottom: 1.5rem;
	}

section.room {
	background: url("../images/room2.jpg") center;
	background-size: cover;
	min-height: 977px;
}

	section.room .container {
		min-height: 977px;
		align-items: center;
		display: flex;
		justify-content: center;
	}


.contact h4 {
	margin-bottom: 0.3rem;
	margin-top: 2rem;
}

.contact h2 {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.contact .gro {
	font-family: Poppins SemiBold, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
}

.contact p {
	margin-top: 1rem;
	margin-bottom: 0;
}

.contact .sendform {
	/*box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.06);
	border-radius: 3px;
	padding: 1rem 2rem 3rem 2rem;*/
}

.contact .form-control {
	font-size: 14px;
}

.contact #contactModal {
	padding: 5rem 5rem 1rem 5rem;
	background-color: white;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.list-vertical-menu li a {
	text-decoration-color: #007CFF;
}

	.list-vertical-menu li a:hover h4,
	.list-vertical-menu li a.active h4 {
		color: #007CFF;
	}

.replaced-text p,
.replaced-text ul li {
	font-size: 14px;
	margin-bottom: 1rem;
}

.replaced-text ul li {
	margin-left: 1em;
}

	.replaced-text ul li.check.wide {
		margin-left: 2rem;
	}

	.replaced-text ul li:not(.check):before {
		content: "—";
		position: relative;
		left: -5px;
		margin-left: -1em;
	}

.vertical-menu-content {
	display: none;
}

	.vertical-menu-content.active {
		display: flex;
	}

	.vertical-menu-content h4 {
		margin-top: 5rem;
	}

	.vertical-menu-content > [class*=col-] {
		padding-left: 1rem;
		padding-right: 1rem;
	}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='24' transform='rotate(90 25 25)' stroke='%23007CFF' stroke-width='2'/%3E%3Cpath d='M27.5 19L21.5 25L27.5 31' stroke='%23007CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

a:hover > .carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='%23007CFF' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='24' transform='rotate(90 25 25)' stroke='%23007CFF' stroke-width='2'/%3E%3Cpath d='M27.5 19L21.5 25L27.5 31' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='24' transform='rotate(-90 25 25)' stroke='%23007CFF' stroke-width='2'/%3E%3Cpath d='M22.5 31L28.5 25L22.5 19' stroke='%23007CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

a:hover .carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='%23007CFF' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='24' transform='rotate(-90 25 25)' stroke='%23007CFF' stroke-width='2'/%3E%3Cpath d='M22.5 31L28.5 25L22.5 19' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.carousel-control-prev,
.carousel-control-next {
	top: 100%;
	width: 50px;
	height: 50px;
	margin-top: 1rem;
}

.carousel-control-prev {
	left: 1rem;
}

.carousel-control-next {
	right: 1rem;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	width: 50px;
	height: 50px;
}

.carousel p {
	font-size: 14px;
}

.carousel h6 {
	font-size: 11px;
	font-family: Poppins SemiBold, sans-serif;
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
}

.carousel [class*=col-] > div {
	background-color: white;
	padding: 2rem;
	margin: 1rem;
	height: 100%;
}

.carousel .reason {
	padding-bottom: 0;
}

.carousel-indicators {
	top: 100%;
	margin-top: 3rem;
}

	.carousel-indicators li {
		background-color: white;
		border: 1px solid #C8C8D0;
	}

		.carousel-indicators li.active {
			background-color: #007CFF;
			border-color: #007CFF;
		}

	.carousel-indicators li {
		width: 10px;
		height: 10px;
		border-radius: 100%;
	}

.validation-with-outside-label .form-validation {
	top: 5px;
}

.form-wrap {
	position: relative;
}

.form-validation {
	position: absolute;
	top: 2px;
	left: 25px;
	right: 16px;
	z-index: 11;
	text-align: right;
	font-size: 11px;
	line-height: 11px;
	transition: .3s;
	color: #d9534f;
}

#form-output-global {
	/*position: fixed;*/
	margin-top: 1rem;
	bottom: 30px;
	left: 15px;
	transform: translateX(1500px);
	z-index: 9999999;
	font-size: 14px;
	transition: .3s all ease;
	visibility: hidden;
	border-radius: 3px;
}

	#form-output-global.active {
		transform: translateX(0);
		visibility: visible;
	}

	#form-output-global p {
		font-size: 20px;
		margin-top: 0;
		margin-bottom: 0;
		color: #ffffff;
	}

	#form-output-global .fa-check {
		color: greenyellow;
	}

	#form-output-global .fa-times {
		color: indianred;
	}
	
@media (min-width: 480px) {
	#form-output-global {
		left: 30px;
	}
}

/*
*
* Snackbars
* --------------------------------------------------
*/
.snackbars {
	max-width: 280px;
	padding: 9px 16px;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	text-align: left;
	background-color: #515F7A;
	border-radius: 0;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
	font-size: 14px;
}

	.snackbars .icon-xxs {
		font-family: FontAwesome;
		font-size: 18px;
	}

	.snackbars p span:last-child {
		padding-left: 14px;
	}

.snackbars-left {
	display: inline-block;
	margin-bottom: 0;
}

.snackbars-right {
	display: inline-block;
	float: right;
	text-transform: uppercase;
}

	.snackbars-right:hover {
		text-decoration: underline;
	}

@media (min-width: 480px) {
	.snackbars {
		max-width: 380px;
		padding: 12px 15px;
		font-size: 16px;
	}
}

.notes {
	color: #97A9C4;
}

p.small {
	font-size: 14px;
	margin-top: 0;
}

.img-with-h div {
	float: left;
	margin-right: 1rem;
}

.img-with-h h5 {
	line-height: 4rem;
}

.circle.color-2 {
	background-color: white;
	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.06);
}

.list-counter .circle.counter {
	font-weight: 600;
	margin-bottom: 0;
}

.list-counter .vertical-line {
	border-left: 1px solid #D9D9D9;
	height: 4rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.margin-top {
	margin-top: 1rem;
}

a.phone,
.navbar-light .navbar-nav .nav-link.phone {
	font-family: Poppins Regular, sans-serif;
	font-weight: normal;
	color: #555555;
}

	.navbar-light .navbar-nav .nav-link.phone:hover,
	.navbar-light .navbar-nav .nav-link.phone:active {
		color: #007CFF;
	}

.navbar.scrolled {
	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
	background-color: white;
}

#contactModal .modal-header {
	padding: 0.5rem 0.5rem 0rem 0rem;
}

#contactModal .modal-header,
#contactModal .modal-footer {
	border: none;
}

#contactModal .modal-dialog {
	max-width: 100%;
	margin: 0.1rem;
}

.form-check-input,
.form-check-label {
	cursor: pointer;
}


#contactModal .btn.btn-primary {
	margin-top: 0;
}

#contactModal .gro {
	font-family: Poppins SemiBold, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
}

#contactModal .form-control,
#contactModal .form-check-label {
	font-family: SourceSansPro-Regular, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 2.5rem;
	border-radius: 0;
	border-color: #515F7A;
	height: inherit;
	color: #515F7A;
}

#contactModal select.form-control {
	height: 3.5rem;
}

#contactModal label.form-control:hover {
	background-color: #efefef;
}


#contactModal .form-control.form-control-hidden,
#contactModal .form-check-label.form-control-hidden {
	border: none;
	color: #FFF;
	font-size: 1px;
	line-height: 1.5rem;
	background-color: #FFF;
	padding: 0;
}

	#contactModal .form-control.form-control-hidden:focus,
	#contactModal .form-check-label.form-control-hidden:focus {
		outline: none;
		box-shadow: none;
	}

#contactModal a.phone {
	color: #007CFF;
}

#contactModal .row > [class*=col-].center {
	display: flex;
	align-items: center;
}

#contactModal p {
	margin-bottom: 0;
}

#contactModal .modal-title {
	margin-bottom: 3rem;
	line-height: 1.1;
	letter-spacing: -1px;
	text-align: center;
	margin-top: 0;
	font-size: 30px;
}

#contactModal .modal-body {
	padding: 0 1rem 1rem 1rem;
}

#divEmail {
	display: none;
}

.social-icon {
	background-size: cover;
	width: 20px;
	height: 21px;
	display: inline-block;
}

.footer-facebook {
	background: url("../images/footer/footer-facebook.svg") no-repeat;
}

	.footer-facebook:hover,
	.footer-facebook:active {
		background: url("../images/footer/footer-facebook-hover.svg") no-repeat;
	}

.footer-linkedin {
	background: url("../images/footer/footer-linkedin.svg") no-repeat;
}

	.footer-linkedin:hover,
	.footer-linkedin:active {
		background: url("../images/footer/footer-linkedin-hover.svg") no-repeat;
	}

.footer-twitter {
	background: url("../images/footer/footer-twitter.svg") no-repeat;
}

	.footer-twitter:hover,
	.footer-twitter:active {
		background: url("../images/footer/footer-twitter-hover.svg") no-repeat;
	}

.fc .fc-toolbar.fc-header-toolbar {
	margin-bottom: 1em;
}

input[readonly='readonly'] {
	cursor: pointer;
}

.testimonials p {
	font-size: 18px;
	line-height: 23px;
	text-align: left;
}

.hosts h3,
.hosts h4,
.testimonials h3,
.testimonials h4 {
	text-align: center;
}

.testimonials h3 {
	margin-bottom: 1.5rem;
}

.testimonials h4 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 22px;
	text-align: left;
}

.testimonials .item {
	padding: 52px 65px;
}

.testimonials .owl-stage-outer {
	background-color: #f7f7f7;
}

.testimonials .item p.title {
	margin-bottom: 0;
}

.testimonials .owl-carousel {
	margin-bottom: 2rem;
}

.testimonials .owl-nav {
	margin-top: 20px;
}

.testimonials .owl-dot {
	width: 15px;
	height: 15px;
	background: white;
	border: 1px solid #515F7A;
	box-sizing: border-box;
}

.testimonials .owl-dot.active {
	background: #515F7A;
	transform: none;
}

.testimonials #prev-testimonial,
.testimonials #next-testimonial {
	margin-bottom: 80px;
	cursor: pointer;
}

.nav-testimonial:hover,
.nav-testimonial:active,
.nav-testimonial:focus {
	fill: #959595;
}

.testimonials .flex-center.flex-center-2 {
	flex-direction: row;
}

.testimonials img {
	margin-bottom: 1rem;
}

.hosts .offer-text {
	padding-left: 3rem;
	padding-right: 3rem;
}

.testimonials .about-us-title,
.hosts .about-us-title {
	font-size: 18px;
	font-family: SourceSansPro-SemiBold, sans-serif;
	text-align: center;
	letter-spacing: -0.5px;
	margin-bottom: 3rem;
	line-height: 1.2;
	font-style: normal;
}

.hosts h4 {
	margin-top: 2rem;
	margin-bottom: 0;
	line-height: 0.9;
}

.socials {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sendform ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #B3BAC8 !important;
	opacity: 1; /* Firefox */
}

.placeholderText {
	color: #B3BAC8 !important;
}

.sendform button,
.header button {
	border-radius: 0;
	border: none;
	background-color: #515F7A;
	font-size: 18px;
	font-family: SourceSansPro-Regular, sans-serif;
	color: white;
	padding: 0.5rem 2rem;
}

	.sendform button:hover,
	.sendform button:active,
	.sendform button:focus {
		color: white;
		background-color: #313F5A;
	}

.header button {
	background-color: white;
	color: #515F7A;
}

	.header button:hover,
	.header button:active,
	.header button:focus {
		background-color: #efefef;
	}

.sendform .form-group {
	margin-bottom: 1.5rem;
}

	.sendform .form-group.before-form-control-hidden {
		margin-bottom: 0rem;
	}

	.sendform .form-group.with-form-control-hidden {
		margin-bottom: 0;
	}

.sendform a {
	font-size: 18px;
	font-family: SourceSansPro-Regular, sans-serif;
	text-decoration: underline;
	color: #515F7A;
}

	.sendform a:hover,
	.sendform a:focus,
	.sendform a:active {
		color: #313F5A;
	}


@media (min-width: 768px) {
	.socials {
		justify-content: flex-end;
	}
}

@media (max-width: 992px) {
	h1 {
		font-size: 60px;
		line-height: 1.2;
	}

		h1 small {
			font-size: 32px;
		}

	h2 {
		font-size: 36px;
	}

	h3 {
		font-size: 30px;
	}

	h4 {
		font-size: 24px;
	}

	.hosts h4 {
		line-height: 1.2;
	}


	h5 {
		font-size: 15px;
	}

	h6 {
		font-size: 13px;
	}

	.ellipse-top-right,
	.ellipse-bottom-right {
		display: none;
	}

	li.check {
		margin-bottom: 1rem;
	}

	.contact #contactModal {
		padding: 3rem;
	}
}

.form_radio_btn input[type=radio] {
	display: none;
}

	.form_radio_btn input[type=radio]:checked + label {
		background: #B3BAC8;
	}

/* FLL-20: heading hierarchy normalized to H1 > H2 > H3 for SEO. These rules
   pin the retagged headings (h3/h4 -> h2/h3) to their original size, colour
   and spacing so the page looks exactly as before. */
.testimonials h2 {
	font-size: 36px;
	color: #515F7A;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 1.5rem;
}

.hosts h2 {
	font-size: 36px;
	color: #515F7A;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 3rem;
}

.offer h2 {
	font-size: 30px;
	color: #515F7A;
	line-height: 37.7px;
	margin-bottom: 0.5em;
}

.hosts .offer-text h3 {
	font-size: 30px;
	color: #515F7A;
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 0;
	line-height: 0.9;
}

@media (max-width: 992px) {
	.testimonials h2 { font-size: 30px; }
	.hosts h2 { font-size: 30px; }
	.offer h2 { font-size: 24px; }
	.hosts .offer-text h3 { font-size: 24px; line-height: 1.2; }
	#contactModal .modal-title { font-size: 24px; }
}

/* ===== FLL-20 (Sep 2026): Natalia content merge, on the flameoffcoatings.com
   brand palette and typefaces (v3). Accent #b40404, #e19b9b for red on dark,
   dark #212529, Roboto 700 headings, Source Sans body. This overrides the
   older slate #515F7A landing look. ===== */

:root {
	--brand-accent: #b40404;
	--brand-accent-hover: #480202;
	--brand-accent-dark: #e19b9b;   /* red text on dark bg, WCAG AA */
	--brand-dark: #212529;
	--brand-dark-2: #354150;        /* input fields on dark */
	--brand-page: #f8f9fa;
	--brand-panel: #f3f3f3;
	--brand-soft: #495057;
	--brand-rule: #dee2e6;
	--brand-head: 'Roboto', 'SourceSansPro-SemiBold', sans-serif;
	/* body text = Source Sans 3 in the mockup; SourceSansPro-Regular is our
	   self-hosted equivalent. The site's base body font is the SemiBold cut,
	   so brand text must set Regular explicitly to match the mockup weight. */
	--brand-body: 'Source Sans 3', 'SourceSansPro-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Brand landing text renders in the Regular body face (headings/eyebrows/facts
   keep their own font-family and override this). */
.hero-copy,
.objectives-col,
.tools-section,
.lunch-hosts,
.register-section {
	font-family: var(--brand-body);
}

/* The site's base `p` rule forces SourceSansPro + letter-spacing:-0.5px, which
   beats container inheritance. Override it explicitly on brand text so it
   renders in Source Sans 3 with normal spacing, like the mockup. */
.hero-copy p:not(.hero-eyebrow),
.objectives-col p:not(.section-eyebrow),
.objectives-col .obj-t,
.tools-section p:not(.section-eyebrow),
.lunch-hosts p:not(.section-eyebrow),
.lunch-hosts .host-meta span,
.register-section p:not(.section-eyebrow) {
	font-family: var(--brand-body);
	letter-spacing: normal;
}

/* Page ground: mockup uses the warm off-white paper, not pure white. */
body {
	background-color: var(--brand-page);
}

/* ---- Hero: brand dark, left-aligned, wordmark + two-column detail (v3) ---- */
section.header {
	background: var(--brand-dark);
	background-size: auto;
	color: #EDF0F2;
	min-height: 0;
	margin-top: 0 !important;   /* no fixed nav to offset any more */
	padding: 34px 0 0;
	text-align: left;
}

	section.header .container {
		min-height: 0;
		display: block;
	}

	.header .hero-brand {
		font-family: var(--brand-head);
		font-weight: 700;
		font-size: 20px;
		letter-spacing: 0.02em;
		color: #ffffff;
		text-align: left;
		margin: 0 0 3.5rem;
	}

	.header .hero-brand span { color: var(--brand-accent-dark); }

	.header .hero-grid { padding-bottom: 4rem; }

	.header .hero-copy,
	.header .hero-copy p,
	.header h1 { text-align: left; }

	.header h1 {
		font-family: var(--brand-head);
		font-weight: 700;
		font-size: clamp(38px, 5.6vw, 60px);
		color: #ffffff;
		letter-spacing: -0.02em;
		line-height: 1.02;
		margin-bottom: 1.4rem;
	}

	.header .hero-eyebrow {
		font-family: SFMono-Regular, Menlo, Consolas, monospace;
		color: var(--brand-accent-dark);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.17em;
		text-transform: uppercase;
		margin-bottom: 1rem;
	}

	.header .hero-lede {
		color: #B9C3CB;
		font-size: 19px;
		line-height: 1.55;
		margin-bottom: 1.9rem;
		max-width: 56ch;
	}

	section.header .hero-schedule {
		color: #B9C3CB;
	}

	/* vertical dividers run the full height up to the top rule (no container
	   padding-top), cells kept tight */
	.header .hero-facts {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 2rem;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		color: #ffffff;
	}

	.header .hero-facts > div {
		padding: 0.7rem 1rem 0.2rem 0;
		margin-right: 1rem;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
	}

		.header .hero-facts > div:last-child {
			border-right: 0;
			margin-right: 0;
			padding-right: 0;
		}

	.header .hero-facts dt {
		font-family: SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 10px;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: #7E8B95;
		margin-bottom: 0.25rem;
	}

	.header .hero-facts dd {
		margin: 0;
		font-family: var(--brand-head);
		font-size: 19px;
		font-weight: 700;
		color: #ffffff;
	}

/* signature SVG detail (coated vs boxed-out column) */
.hero-detail svg { width: 100%; height: auto; display: block; }
.hero-detail .dlabel { font-family: monospace; font-size: 10.5px; letter-spacing: 0.06em; fill: #8D99A3; }
.hero-detail .dlabel-fl { fill: var(--brand-accent-dark); }
.hero-detail .dnum { font-family: monospace; font-size: 12px; font-weight: 600; fill: #ffffff; }
.hero-detail-cap {
	font-family: monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: #8D99A3;
	line-height: 1.7;
	margin-top: 0.9rem;
	text-align: left;
}

/* ---- Uniform vertical rhythm for the brand landing sections (v3 ~82px) ---- */
.landing-pad {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* ---- Section eyebrow + title (shared by content sections, v3) ---- */
.section-eyebrow {
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--brand-accent);
	text-align: left;
	margin: 0 0 16px;
}

.sec-title {
	font-family: var(--brand-head);
	font-weight: 700;
	font-size: clamp(26px, 3.6vw, 36px);
	line-height: 1.14;
	letter-spacing: -0.012em;
	color: var(--brand-dark);
	text-align: left;
	margin: 0 0 1.25rem;
}

.muted-text {
	color: var(--brand-soft);
	text-align: left;
	max-width: 82%;   /* ~80% of the column, matching the mockup's text/block ratio */
	font-family: var(--brand-body);
	font-size: 16.5px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

/* ---- Objectives ---- */
.objectives {
	list-style: none;
	padding: 0;
	margin: 2rem 0 1.5rem;
	border-top: 2px solid var(--brand-dark);
}

.objectives li {
	display: flex;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--brand-rule);
}

.objectives .obj-n {
	flex: none;
	width: 2rem;
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--brand-accent);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	padding-top: 3px;
}

.objectives .obj-t {
	font-family: var(--brand-body);
	font-size: 17.5px;
	line-height: 1.55;
	margin: 0;
	max-width: 79%;   /* ~77% of the column, matching the mockup's text/block ratio */
	text-align: left;
}

.bring-note {
	margin-top: 1.6rem;
	padding: 1.25rem 1.5rem;
	background: var(--brand-dark);
	color: #ffffff;
	font-family: var(--brand-head);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.35;
	text-align: left;
}

/* ---- Tools (v3 connected panel grid) ---- */
.tools-section {
	background: var(--brand-panel);
	border-top: 1px solid var(--brand-rule);
	border-bottom: 1px solid var(--brand-rule);
}

.tools-section .tools-intro {
	text-align: left;
	color: var(--brand-soft);
	margin-bottom: 0;
	max-width: 64ch;
}

.tools-section .tool-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--brand-rule);
	border: 1px solid var(--brand-rule);
	margin-top: 2rem;
}

.tools-section .tool {
	background: var(--brand-panel);
	padding: 26px 26px 24px;
	margin: 0;
	height: auto;
	border: 0;
}

.tools-section .tool h3 {
	font-family: var(--brand-head);
	font-weight: 700;
	font-size: 19px;
	color: var(--brand-dark);
	margin-bottom: 0.5rem;
}

.tools-section .tool p {
	color: var(--brand-soft);
	font-size: 15.5px;
	line-height: 1.62;
	margin-bottom: 0.9rem;
	text-align: left;
}

.tools-section .tool a {
	display: block;
	width: fit-content;
	margin: 0 0 4px;
	color: var(--brand-accent);
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	text-decoration: none;
	border-bottom: 1px solid rgba(180, 4, 4, 0.35);
	word-break: break-word;
}

	.tools-section .tool a:hover { border-bottom-color: var(--brand-accent); }

/* ---- Lunch / who runs it / quotes (v3 split) ---- */
.lunch-hosts .split-col { margin-bottom: 1.5rem; }
.lunch-hosts .split-col .sec-title { font-size: 26px; margin-bottom: 0.9rem; }

.lunch-hosts .host-list {
	margin-top: 1.875rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
}

.lunch-hosts .host {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 0;
}

.lunch-hosts .host-av {
	width: 58px;
	height: 58px;
	object-fit: cover;
	flex: none;
}

.lunch-hosts .host-meta b {
	display: block;
	font-family: var(--brand-head);
	font-weight: 700;
	font-size: 18px;
	color: var(--brand-dark);
}

.lunch-hosts .host-meta span {
	color: var(--brand-soft);
	font-size: 14.5px;
}

.lunch-hosts .quotes-row { margin-top: 2.125rem; }

/* 40px side margins on the quote columns, keeping them two-across on desktop
   (Bootstrap col-md-6 is 50% wide, so shrink it to fit the margins) */
@media (min-width: 768px) {
	.lunch-hosts .quote-col {
		flex: 0 0 calc(50% - 80px);
		max-width: calc(50% - 80px);
		margin-left: 40px;
		margin-right: 40px;
	}

	/* fill the (equal-height) column so both red rules run the full height */
	.lunch-hosts .quote {
		height: 100%;
		margin-bottom: 0;
	}
}

.lunch-hosts .quote {
	border-left: 3px solid var(--brand-accent);
	padding-left: 1.4rem;
	margin: 0 0 1.5rem;
}

.lunch-hosts .quote p {
	text-align: left;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--brand-dark);
	margin-bottom: 0.75rem;
	max-width: none;
}

.lunch-hosts .quote cite {
	font-style: normal;
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	color: var(--brand-soft);
}

/* ---- Register section: brand-dark, real booking form ---- */
.register-section {
	background: var(--brand-dark);
	color: #EDF0F2;
	padding: 4.5rem 0;
}

	.register-section .section-eyebrow.eyebrow-light { color: var(--brand-accent-dark); }
	.register-section .sec-title.title-light { color: #ffffff; }

	.register-section .register-lede {
		color: #B9C3CB;
		text-align: left;
		max-width: 60ch;
		margin-bottom: 2rem;
		font-size: 16.5px;
		line-height: 1.62;
	}

	.register-section p.fineprint-note {
		font-family: SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 11px;
		letter-spacing: 0.03em;
		color: #B9C3CB;
		text-align: left;
		max-width: 52ch;
		margin: 20px 0 0;
	}


/* dark form fields, scoped so the light calendar modal stays untouched */
/* the section already carries its own h2 ("Pick a time…"), so the form's own
   heading is redundant here (mockup has none) */
.register-section #contactModal .modal-title { display: none; }

.register-section #contactModal .form-control,
.register-section #contactModal .form-check-label {
	background-color: var(--brand-dark-2);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.18);
}

.register-section #contactModal select.form-control option {
	color: #212529;
	background: #ffffff;
}

.register-section #contactModal ::placeholder { color: #5E6C78 !important; }
.register-section #contactModal .placeholderText { color: #5E6C78 !important; }
.register-section #contactModal p { color: #C6CFD6; }

/* inline question prompts (colleagues + fire-protection) styled as mono labels, like v3 */
.register-section #contactModal .col-md-11 p {
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #8896A2;
	line-height: 1.5;
}

.register-section .sendform a { color: var(--brand-accent-dark); }
.register-section .sendform a:hover { color: #ffffff; }

/* inline native radios (v3) instead of toggle buttons */
.register-section #contactModal .form-group:has(.form_radio_btn) .row {
	gap: 26px;
	margin: 0;
}

.register-section #contactModal .form_radio_btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	padding: 0;
}

.register-section #contactModal .form_radio_btn input[type=radio] {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--brand-accent);
	flex: none;
}

.register-section #contactModal .form_radio_btn label.form-control {
	display: inline;
	width: auto;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: #C6CFD6;
	font-size: 15.5px;
	font-family: var(--brand-body);
}

	.register-section #contactModal .form_radio_btn input[type=radio]:checked + label {
		background: transparent;
		color: #ffffff;
	}

/* two-column compact form (v3), CSS-only over the real Bootstrap markup */
.register-section .sendform form .row.flex-center:has(.form-group) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	max-width: 680px;
	margin: 0;
}

	.register-section .sendform form .row.flex-center:has(.form-group) > .form-group {
		width: auto;
		max-width: none;
		flex: initial;
		padding: 0;
		margin: 0;
	}

	/* fields that should span the full width */
	.register-section .sendform form .row.flex-center > .col-md-11,
	.register-section .sendform form .row.flex-center > .form-group:has(#inputEvent2),
	.register-section .sendform form .row.flex-center > .form-group:has(#inputEvent),
	.register-section .sendform form .row.flex-center > .form-group:has(#inputColleagues),
	.register-section .sendform form .row.flex-center > .form-group:has(.form_radio_btn) {
		grid-column: 1 / -1;
	}

	/* hidden radio-carrier input: keep in DOM for JS/validation, take no space */
	.register-section .sendform form .row.flex-center > .form-group.with-form-control-hidden { display: none; }

.register-section #contactModal .form-control:not(.form-control-hidden) {
	padding: 12px 14px;
	font-size: 15.5px;
	font-family: var(--brand-body);
	line-height: 1.4;
}

/* selects: match the text-input height and give the arrow room from the edge */
.register-section #contactModal select.form-control:not(.form-control-hidden) {
	height: 48px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 40px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238896A2' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

.register-section #contactModal .form-control:focus {
	outline: 2px solid var(--brand-red-on-dark);
	outline-offset: 1px;
	border-color: transparent;
	box-shadow: none;
}

/* mono field labels above each input (v3) */
.register-section #contactModal .field-label {
	display: block;
	text-align: left;
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #8896A2;
	margin: 0 0 7px;
}

	.register-section #contactModal .field-label .req { color: var(--brand-accent-dark); }

/* left-align the inline question prompts and the submit button */
.register-section .sendform p.text-center { text-align: left !important; }
.register-section .sendform form .row.flex-center:has(button) { align-items: flex-start; margin-top: 1.75rem; }

/* hide the idle submit-status toast so it doesn't reserve space under the button
   (JS adds .active with the message on submit, which reveals it) */
.register-section #form-output-global:not(.active) { display: none; }

/* ---- Brand alignment of the shared landing headings + buttons ---- */
.testimonials h2,
.hosts h2,
.offer h2,
.hosts .offer-text h3 {
	font-family: var(--brand-head);
	font-weight: 700;
	color: var(--brand-dark);
}

.sendform button,
.header button {
	background-color: var(--brand-accent);
	color: #ffffff;
	font-family: var(--brand-head);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.01em;
	padding: 15px 34px;
}

	.sendform button:hover,
	.sendform button:active,
	.sendform button:focus,
	.header button:hover,
	.header button:active,
	.header button:focus {
		background-color: var(--brand-accent-hover);
		color: #ffffff;
	}

@media (max-width: 992px) {
	.tools-section h2 { font-size: 30px; }
	.bring-note { font-size: 16px; }
	.header .hero-facts dd { font-size: 16px; }
	section.header { padding: 3rem 0; }
	.hero-detail { max-width: 360px; margin-top: 2rem; }
	.header .hero-facts { flex-wrap: wrap; }
}

/* single-column on phones for the custom grids (Bootstrap cols already stack) */
@media (max-width: 767px) {
	.tools-section .tool-grid { grid-template-columns: 1fr; }
	.register-section .sendform form .row.flex-center:has(.form-group) { grid-template-columns: 1fr; }
}

/* =====================================================================================
   v5 SITE HEADER + FOOTER — the real flameoffcoatings.com bars, ported from the store
   rewrite (D:/Projects/FlameoffCoatings _StoreHeader/_StoreFooter) and v5 mockup.
   Header nav is the landing's own (section anchors + Book a session), not the store
   mega-nav. Fully scoped under .site-header / .site-footer so it never touches the
   rest of the page. Fonts: Roboto + Open Sans (see css/fonts.css).
   ===================================================================================== */

/* ---- header: top-bar #29303c over main-bar #4e5d78, white logo ---- */
.site-header { position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.site-header .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.site-header .top-bar { background: #29303c; }
.site-header .top-bar .container { display: flex; justify-content: flex-end; align-items: center; gap: 24px; height: 35px; }
.site-header .top-bar a { font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: 14px; color: #c7c7c7; text-decoration: none; white-space: nowrap; }
.site-header .top-bar a:hover { color: #fff; }
.site-header .main-bar { background: #4e5d78; }
.site-header .main-bar .container { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.site-header .brand img { display: block; height: 46px; width: auto; }
.site-header .site-nav { display: flex; align-items: center; gap: 26px; }
.site-header .site-nav a.link { font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: 15px; color: #fff; text-decoration: none; opacity: 0.92; }
.site-header .site-nav a.link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; color: #fff; }
.site-header .site-nav .btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #b40404; color: #fff;
	font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
	padding: 10px 20px; border: 0; border-radius: 3px; text-decoration: none; transition: background 0.15s;
}
.site-header .site-nav .btn:hover { background: #480202; color: #fff; }
.site-header .site-nav .btn svg { width: 18px; height: 18px; }

@media (max-width: 960px) {
	.site-header .site-nav a.link { display: none; }
	.site-header .top-bar .container { justify-content: center; }
	.site-header .top-bar a:not(:last-child) { display: none; }
}

/* ---- footer: copied from flameoffcoatings.com .site-footer (subscribe row dropped) ---- */
.site-footer { background-color: #151f2c; color: #bcbcbe; padding-top: 64px; margin-top: 0; font-size: 16px; }
.site-footer .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.site-footer a { text-decoration: none; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.4fr; gap: 2rem 1.5rem; }
.site-footer .footer-logo { display: inline-block; margin-bottom: 1.5rem; }
.site-footer .footer-logo img { display: block; width: 119px; height: auto; }
.site-footer .copyright { font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: 14px; color: #fff; line-height: 16px; }
.site-footer .footer-h { font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #fff; position: relative; margin: 14px 0 24px 0; }
.site-footer .footer-h::before { content: ""; width: 30px; height: 2px; background: #b40404; position: absolute; top: -10px; left: 0; }
.site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-col ul li a { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 16px; display: block; color: #bcbcbe; line-height: 28px; }
.site-footer .footer-col ul li a:hover { color: #fff; }
.site-footer .footer-contact { text-align: right; }
.site-footer .footer-contact .footer-h { margin-top: 10px; }
.site-footer .footer-contact .footer-h::before { display: none; }
.site-footer .footer-contact .footer-phone { font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: 22px; margin: 14px 0 8px; letter-spacing: 1px; }
.site-footer .footer-contact .footer-phone a { color: #fff; }
.site-footer .footer-contact .footer-mail { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 16px; color: #fff; line-height: 28px; }
.site-footer .footer-social { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 14px; justify-content: flex-end; }
.site-footer .footer-social li { line-height: 0; }
.site-footer .footer-social a { display: inline-flex; color: #fff; transition: opacity 0.3s; }
.site-footer .footer-social a:hover { opacity: 0.7; color: #fff; }
.site-footer .footer-estimator-h { margin-top: 2.5rem; }
.site-footer .footer-estimator { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.site-footer .footer-estimator img { display: block; width: 193px; height: auto; }
.site-footer .footer-subscribe { margin-top: 40px; text-align: left; }
/* the old theme's global `p, li.check` rule forces text-align, #515F7A, 18px,
   SourceSansPro and tight tracking onto every <p>; reset the subscribe copy back
   to the footer's own look (left, light, 16px, normal spacing) as in the mockup. */
.site-footer .footer-subscribe p { text-align: left; color: #bcbcbe; font-size: 16px; letter-spacing: normal; font-family: 'Source Sans 3', Arial, sans-serif; }
.site-footer .footer-subscribe > p { margin-bottom: 0.75rem; }
.site-footer .subscribe-form { display: flex; max-width: 420px; }
.site-footer .subscribe-form .subscribe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.site-footer .subscribe-form input[type="email"] { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid #ced4da; border-right: none; border-radius: 4px 0 0 4px; background: #fff; color: #354150; font-family: 'Source Sans 3', Arial, sans-serif; font-size: 16px; }
.site-footer .subscribe-form input[type="email"]::placeholder { color: #6c757d; }
.site-footer .subscribe-form button { font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 14px; line-height: 19px; padding: 8px 25px; border: none; border-radius: 0 4px 4px 0; background: #b40404; color: #fff; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.site-footer .subscribe-form button:hover { background: #990303; }
.site-footer .footer-subscribe .subscribe-success { color: #4bc074; margin-top: 0.75rem; }
.site-footer .footer-subscribe .subscribe-error { color: #e88; margin-top: 0.75rem; }
.site-footer .subscribe-form button[disabled] { opacity: 0.7; cursor: default; }
.site-footer .footer-legal { margin-top: 40px; border-top: 1px solid #373742; padding: 24px 0 22px; }
.site-footer .footer-legal a { font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: 14px; color: #bcbcbe; margin-right: 22px; }
.site-footer .footer-legal a:hover { color: #fff; }

@media (max-width: 960px) {
	.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
	.site-footer .footer-contact { text-align: left; }
	.site-footer .footer-social,
	.site-footer .footer-estimator { justify-content: flex-start; align-items: flex-start; }
}
@media (max-width: 520px) {
	.site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================================================
   v5 BODY — the light FlameOFF landing (Natalia's v5 mockup). Everything is scoped under
   .ll so it wins over the old v3 landing CSS and Bootstrap, and never leaks to blog/gallery.
   The register form is the REAL Jekyll form (contact-form.html) restyled into v5's light
   .form-card; the booking calendar/modal + js/app.js wiring are unchanged.
   ===================================================================================== */

.ll {
	--red: #b40404; --red-hover: #480202; --red-wash: #f0cdcd; --red-pale: #fbf1f1;
	--dark: #212529; --slate: #354150; --soft: #495057; --page: #f8f9fa; --panel: #f3f3f3; --rule: #dee2e6;
	--head: 'Roboto', Arial, sans-serif; --body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; --os: 'Open Sans', Arial, sans-serif;
	--mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	/* Override the old v3 landing vars inside this scope, so any leftover v3 rule that
	   still wins on a reused class name (e.g. font-family:var(--brand-body)) resolves to
	   the v5 faces instead of the old stack. */
	--brand-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
	--brand-head: 'Roboto', Arial, sans-serif;
	background: var(--page); color: var(--dark);
	font-family: var(--body); font-size: 18px; line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.ll *, .ll *::before, .ll *::after { box-sizing: border-box; }
.ll h1, .ll h2, .ll h3 { font-family: var(--head); font-weight: 700; color: var(--slate); margin: 0; line-height: 1.15; letter-spacing: normal; }
/* the old theme sets a global p{text-align:center}; in v5 alignment comes from the
   container (left by default, centered only in .sec-head / the invite band). */
.ll p { margin: 0 0 1em; font-family: var(--body); font-size: 18px; line-height: 1.5; letter-spacing: normal; text-align: inherit; }
.ll a { color: var(--red); }
.ll a:hover { color: var(--red-hover); }
.ll .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; width: 100%; }
.ll section { padding: 80px 0; }
.ll .muted { color: var(--soft); }

.ll .btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--red); color: #fff;
	font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: 0.02em;
	padding: 14px 30px; border: 0; border-radius: 3px; cursor: pointer; text-decoration: none;
	transition: background 0.15s;
}
.ll .btn:hover { background: var(--red-hover); color: #fff; }
.ll .btn svg { width: 18px; height: 18px; }
.ll .btn-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--slate); }
.ll .btn-ghost:hover { background: var(--slate); color: #fff; }

.ll .eyebrow { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 14px; }
.ll .sec-title { font-size: 36px; font-weight: 700; margin: 0 0 18px; color: var(--slate); text-align: inherit; }
.ll .sec-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.ll .sec-head .sec-title:after { content: ""; display: block; width: 56px; height: 3px; background: var(--red); margin: 18px auto 0; }

.ll .ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--red-pale); color: var(--red); }
.ll .ic svg { width: 24px; height: 24px; }
.ll .ic-lg { width: 60px; height: 60px; }
.ll .ic-lg svg { width: 30px; height: 30px; }
.ll .ic-solid { background: var(--red); color: #fff; }

/* ---- hero ---- */
.ll .hero { background: #fff; padding: 72px 0; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.ll .hero:before { content: ""; position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, var(--red-pale), transparent); }
.ll .hero .container { position: relative; }
.ll .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.ll .hero h1 { font-size: 62px; letter-spacing: -0.01em; margin: 0 0 20px; color: var(--slate); }
.ll .hero-lede { font-size: 21px; color: var(--soft); max-width: 560px; margin-bottom: 26px; }
.ll .hero-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 0 30px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; margin: 0 0 30px; justify-content: start; }
.ll .hero-facts > div { display: flex; align-items: center; gap: 10px; }
.ll .hero-facts .fi { color: var(--red); display: inline-flex; }
.ll .hero-facts .fi svg { width: 22px; height: 22px; }
.ll .hero-facts dt { font-family: var(--head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.ll .hero-facts dd { margin: 2px 0 0; font-family: var(--head); font-weight: 700; font-size: 18px; color: var(--dark); }
.ll .hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ll .hero-sub { font-size: 15px; color: var(--soft); margin: 14px 0 0; }
.ll .hero-detail { background: var(--page); border: 1px solid var(--rule); border-radius: 6px; padding: 28px 28px 20px; }
.ll .hero-detail svg { width: 100%; height: auto; display: block; }
.ll .hero-detail .dlabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--soft); }
.ll .hero-detail .dnum { font-family: var(--head); font-weight: 700; font-size: 16px; fill: var(--red); }
.ll .hero-detail-cap { font-size: 14px; color: var(--soft); margin: 18px 0 0; line-height: 1.45; }

/* ---- invitation band ---- */
.ll .invite { background: var(--slate); color: #fff; padding: 64px 0; }
.ll .invite .eyebrow { color: #e19b9b; }
.ll .invite h2 { color: #fff; font-size: 38px; max-width: 820px; margin: 0 auto 12px; text-align: center; }
.ll .invite .lead { text-align: center; color: #cfd5dc; font-size: 19px; font-weight: 400; max-width: 720px; margin: 0 auto 44px; }
.ll .invite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ll .invite-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 28px 28px 24px; display: flex; gap: 18px; align-items: flex-start; }
.ll .invite-card b { display: block; font-family: var(--head); font-size: 20px; color: #fff; margin-bottom: 6px; }
.ll .invite-card p { margin: 0; color: #cfd5dc; font-size: 16px; }
.ll .invite-cta { text-align: center; margin-top: 40px; }

/* ---- objectives ---- */
.ll .objectives-wrap { max-width: 900px; margin: 0 auto; }
.ll .objectives { list-style: none; margin: 36px 0 0; padding: 0; border-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ll .objectives li { display: flex; gap: 18px; background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 24px; }
.ll .obj-n { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--red); display: block; width: auto; white-space: nowrap; padding-top: 0; margin-bottom: 6px; }
.ll .obj-t { font-size: 17.5px; max-width: none; color: var(--dark); }
.ll .bring-note { margin: 28px 0 0; padding: 20px 26px; background: var(--red-pale); border-left: 4px solid var(--red); font-family: var(--head); font-weight: 700; font-size: 19px; color: var(--slate); border-radius: 0 4px 4px 0; display: flex; align-items: center; gap: 14px; }
.ll .bring-note svg { width: 26px; height: 26px; color: var(--red); flex: none; }

/* ---- hosts + quotes ---- */
.ll .hosts-sec { background: var(--panel); }
.ll .split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.ll .host-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ll .host { background: #fff; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.ll .host-av { display: block; width: 100%; height: auto; aspect-ratio: 345 / 445; object-fit: cover; }
.ll .host-meta { padding: 16px 20px 20px; }
.ll .host-meta b { display: block; font-family: var(--head); font-size: 20px; color: var(--slate); }
.ll .host-meta span { color: var(--soft); font-size: 16px; }
.ll .host-blurb { color: var(--soft); margin-top: 18px; }
.ll .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }
.ll .quote { margin: 0; background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--red); padding: 24px 28px; border-radius: 0 6px 6px 0; position: relative; }
.ll .quote:before { content: "\201C"; font-family: Georgia, serif; font-size: 64px; line-height: 1; color: var(--red-wash); position: absolute; right: 20px; top: 8px; }
.ll .quote p { font-size: 18px; color: var(--dark); font-style: italic; }
.ll .quote cite { font-style: normal; font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--slate); }

/* ---- register (left column) ---- */
.ll .register { background: #fff; border-top: 1px solid var(--rule); }
.ll .register-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.ll .register-lede { font-size: 19px; color: var(--soft); }
.ll .steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.ll .steps li { display: flex; gap: 16px; align-items: flex-start; }
.ll .steps b { display: block; font-family: var(--head); font-size: 17px; color: var(--slate); }
.ll .steps span { color: var(--soft); font-size: 16px; }

/* ---- register form-card: the REAL contact-form.html restyled to v5 light ---- */
.ll .form-card { background: var(--page); border: 1px solid var(--rule); border-radius: 6px; padding: 34px 36px; }
.ll .form-card .modal-title { display: flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 700; font-size: 24px; color: var(--slate); margin: 0 0 22px; line-height: 1.2; }
.ll .form-card [hidden] { display: none !important; }
.ll .form-card .with-form-control-hidden { display: none; }

/* two-column grid over the Bootstrap row of form-groups */
.ll .form-card .sendform form .row.flex-center:has(.form-group) {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin: 0; max-width: none; text-align: left;
}
.ll .form-card .sendform form .row.flex-center:has(.form-group) > [class*="col-"] { padding: 0; margin: 0; max-width: none; flex: none; width: auto; }
/* full-width rows */
.ll .form-card .col-md-11,
.ll .form-card .form-group:has(#inputEvent2),
.ll .form-card .form-group:has(#inputEvent),
.ll .form-card .form-group:has(#inputColleagues),
.ll .form-card .form-group:has(.form_radio_btn) { grid-column: 1 / -1; }

.ll .form-card .field-label { display: block; text-align: left; font-family: var(--head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin: 0 0 6px; }
.ll .form-card .field-label .req { color: var(--red); }
.ll .form-card .form-wrap { margin: 0; }

.ll .form-card .form-control:not(.form-control-hidden) {
	width: 100%; font-family: var(--body); font-size: 16px; line-height: 1.4;
	padding: 11px 14px; border: 1px solid #ced4da; border-radius: 3px; background: #fff; color: var(--dark);
	height: auto; box-shadow: none;
}
.ll .form-card select.form-control:not(.form-control-hidden) {
	height: 46px; padding: 0 40px 0 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23495057' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.ll .form-card .form-control:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
.ll .form-card ::placeholder { color: #6c757d !important; opacity: 1; }
.ll .form-card .placeholderText { color: #6c757d !important; }
/* (footer subscribe styles are further down, in the .site-footer block) */

/* the pick-a-time link + the note under it */
.ll .form-card #inputEvent2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700; color: var(--red); text-decoration: underline; }
.ll .form-card #inputEvent2 svg { width: 18px; height: 18px; flex: none; }
.ll .form-card #inputEvent2:hover { color: var(--red-hover); text-decoration: underline; }
.ll .form-card #calendar-validation { margin-top: 4px; }
.ll .form-card .col-md-12 p.small { font-size: 14px; color: var(--soft); font-style: italic; text-align: left; margin: 6px 0 0; }
.ll .form-card .col-md-12 p.small i { font-style: italic; }

/* colleagues + fire-protection prompts, styled like field labels */
.ll .form-card .col-md-11 p { text-align: left; font-family: var(--head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); font-weight: 700; line-height: 1.5; margin: 0; }

/* inline Yes/No radios */
.ll .form-card .form-group:has(.form_radio_btn) .row { display: flex; gap: 26px; margin: 0; }
.ll .form-card .form_radio_btn { display: flex; align-items: center; gap: 8px; width: auto; max-width: none; flex: 0 0 auto; padding: 0; }
.ll .form-card .form_radio_btn input[type="radio"] { display: inline-block; width: 16px; height: 16px; margin: 0; accent-color: var(--red); flex: none; }
.ll .form-card .form_radio_btn label.form-control { display: inline; width: auto; height: auto; background: transparent; border: 0; padding: 0; margin: 0; color: var(--dark); font-family: var(--body); font-size: 16px; box-shadow: none; }

/* submit + idle snackbar (hidden until app.js adds .active) */
.ll .form-card .sendform form .row.flex-center:has(button) { align-items: flex-start; margin: 26px 0 0; }
.ll .form-card button.btn { padding: 14px 30px; }
.ll .form-card #form-output-global:not(.active) { display: none; }
.ll .form-card .reply-note { font-size: 14px; color: var(--soft); margin: 14px 0 0; }

/* ---- tools ---- */
.ll .tools { background: var(--panel); }
.ll .tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ll .tool { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 26px 24px; }
.ll .tool .ic { margin-bottom: 16px; }
.ll .tool h3 { font-size: 19px; margin-bottom: 8px; color: var(--slate); }
.ll .tool p { color: var(--soft); font-size: 15.5px; margin-bottom: 10px; }
.ll .tool a { display: block; font-family: var(--mono); font-size: 13px; word-break: break-word; margin-top: 4px; text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 960px) {
	.ll section { padding: 56px 0; }
	.ll .hero { padding: 48px 0 56px; }
	.ll .hero-grid, .ll .split, .ll .register-grid { grid-template-columns: 1fr; gap: 36px; }
	.ll .hero h1 { font-size: 42px; }
	.ll .hero-facts { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
	.ll .sec-title, .ll .invite h2 { font-size: 30px; }
	.ll .invite-grid, .ll .objectives, .ll .quotes { grid-template-columns: 1fr; }
	.ll .form-card .sendform form .row.flex-center:has(.form-group) { grid-template-columns: 1fr; }
	.ll .tool-grid { grid-template-columns: 1fr 1fr; }
	.ll .host-list { grid-template-columns: 1fr 1fr; gap: 16px; }
	.ll .hero-facts > div { min-width: 0; }
	.ll .tool a { overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
	.ll .host-list, .ll .tool-grid { grid-template-columns: 1fr; }
	.ll .hero-cta .btn { width: 100%; justify-content: center; }
}