html {
  scroll-behavior: smooth;
}

body {
	margin: 0px;
}

a {
	text-decoration: none;
}

/* Content layers */

div.centered_1720 {
	width: 1720px;
	margin: auto;
}

div.centered_1600 {
	width: 1600px;
	margin: auto;
}

div.centered_1480 {
	width: 1480px;
	margin: auto;
}

div.centered_1220 {
	width: 1220px;
	margin: auto;
}

div.centered_1048 {
	width: 1048px;
	margin: auto;
}

div.contained_70_left {
	width: 70%;
}

div.contained_50 {
	width: 50%;
	margin: auto;
}

div.contained_75 {
	width: 75%;
	margin: auto;
}

section.fade-in-section, div.fade-in-section {
	opacity: 0;
	transform: translateY(75px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

section.fade-in-section.visible, div.fade-in-section.visible {
	opacity: 1;
	transform: translateY(0px);
}

/* Spacings */

div.vspace_standard {
	padding: 100px 0px;
}

div.vspace_xsmall {
	/* For Sub Nav */
	padding: 20px 0px;
}

div.vspace_small {
	/* For Sub Nav */
	padding: 50px 0px;
}

div.vspace_standard_nb {
	padding: 100px 0px 0px;
}

div.vspace_standard_nt {
	padding: 0px 0px 100px;
}

div.pad_50 {
	padding: 50px;
}

/* Content alignment */

div.content_centered {
	text-align: center;
}

div.content_left {
	text-align: left;
}

div.content_right {
	text-align: right;
}

/* Margins */

.mt_0 {
	margin-top: 0px !important;
}

.mt_5 {
	margin-top: 5px !important;
}

.mt_10 {
	margin-top: 10px !important;
}

.mt_20 {
	margin-top: 20px !important;
}

.mt_30 {
	margin-top: 30px !important;
}

.mt_50 {
	margin-top: 50px !important;
}

.mt_100 {
	margin-top: 100px !important;
}

.mt_200 {
	margin-top: 200px !important;
}

.mb_0 {
	margin-bottom: 0px !important;
}

.mb_10 {
	margin-bottom: 10px !important;
}

.mb_20 {
	margin-bottom: 20px !important;
}

.mb_30 {
	margin-bottom: 30px !important;
}

.mb_50 {
	margin-bottom: 50px !important;
}

.mb_200 {
	margin-bottom: 200px !important;
}

/* Image Widths */

.width_full {
	width: 100%;
}

.width_50 {
	width: 50%;
}

.width_75 {
	width: 75%;
}

.width_fixed_40 {
	width: 40px;
}

.width_fixed_80 {
	width: 80px;
}

.width_fixed_150 {
	width: 150px;
}

.width_auto {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills box, may crop */
  object-position: center;  /* centered horizontally & vertically */
  display: block;           /* removes inline img gaps */
}

.join_icon {
	vertical-align: middle;
    margin-top: -7px;
}

.negative_margins {
	height: 180%;
    position: absolute;
    margin-top: -20%;
}

.rounded_corners {
	border-radius: var(--standard-radius);
}

.rounded_corners_small {
	border-radius: var(--standard-radius-small);
}

/* Flex */

.flex_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between; /* Adjust as needed */
    align-items: stretch;
}

.flex_row_vc {
	align-items: center;
}

.flex_row .flex_2col_20 {
	flex: 1 1 20%; /* Give it room to shrink/grow and wrap */
    box-sizing: border-box;
}

.flex_row .flex_2col_35 {
	flex: 1 1 35%; /* Give it room to shrink/grow and wrap */
    box-sizing: border-box;
}

.flex_row .flex_2col {
    flex: 1 1 45%; /* Give it room to shrink/grow and wrap */
    box-sizing: border-box;
	position: relative;
}

.flex_row .flex_2col_full {
    flex: 1 1 100%; /* Give it room to shrink/grow and wrap */
}

.flex_row .flex_3col {
    flex: 1 1 30%; /* Give it room to shrink/grow and wrap */
    box-sizing: border-box;
}

.flex_row .flex_4col {
    flex: 1 1 20%; /* Give it room to shrink/grow and wrap */
    box-sizing: border-box;
    position: relative;
}

#final_footer.flex_row {
    align-items: flex-end; /* Aligns items to the bottom */
}

.flex_row_gap_50 {
    gap: 50px;
}

.flex_row_gap_30 {
    gap: 30px;
}

.flex_row_equal > * {
    flex: 1; /* Each item will take up an equal amount of space */
    min-width: 0; /* Ensures proper shrinking */
}

.flex_col_equal_height {
    display: flex;
	flex-direction: column;
 	justify-content: center; /* ⬅️ vertical centering */
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
}

.flex_row_symbol {
    display: flex;
    gap: 10px;
    align-items: flex-start; /* Or 'center' depending on your visual layout */
}

.flex_row_symbol > div:first-child {
    flex: 0 0 75px;
}

.flex_row_symbol_smaller > div:first-child {
    flex: 0 0 30px;
}

.flex_row .flex_2col_full .flex_row_symbol > div:first-child {
	flex: 0 0 45px;
}

.flex_row_symbol > div:last-child {
    flex: 1 1 auto;
}

/* inline icon + copy */
.flex_2col.icon_pair {
	display: flex;
	align-items: flex-start;     /* top-align */
	gap: 16px;
	padding: 30px;
}

.flex_2col.icon_pair > img {
	flex: 0 0 70px;             /* fixed width */
	width: 70px;
	height: auto;
	display: block;
	object-fit: contain;         /* keep icon proportions */
}

.flex_2col.icon_pair > .icon_side {
	flex: 1 1 auto;              /* take the remainder */
	min-width: 0;                /* allow text to wrap, no overflow */
}

.flex_2col.icon_pair .icon_side h6 { margin-top: 0; }

.flex_row_shrink {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

.flex_row_shrink .flex_2col_shrink {
  flex: 0 0 auto !important; /* no grow, no shrink, width auto */
  width: auto;               /* override any fixed % widths */
  min-width: 0;              /* avoid overflow from long content */
}

/* Buttons */

div.button_holder a.button {
	margin: 0px 5px 5px;
}

a.button, button {
    font-family: var(--button-font-primary);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    line-height: var(--button-line-height);
    font-size: 18px;
    padding: 14px 28px;
    border-radius: 50px;
    display: inline-block;
    transition:
		  background-color 0.3s ease-in-out,
		  border-color     0.3s ease-in-out,
		  color            0.3s ease-in-out;
    text-decoration: none;
    border: none; /* Removes default button border */
    appearance: none; /* Removes default button styling (Safari) */
    cursor: pointer; 
    text-align: center;
    box-sizing: border-box;
}

a.button.red {
	background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
}

a.button.red:hover {
	background: var(--white);
    border: 1px solid var(--red);
    color: var(--red);
}

a.button.white {
	background: var(--white);
    border: 1px solid var(--white);
    color: var(--black);
}

a.button.white:hover {
	background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
}

a.button.black {
	background: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}

a.button.black:hover {
	background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
}
    
a.button.full_width, button.full_width {
	width: 100%;
}

a.standard_text {
	font-family: var(--body-font-primary);
  	letter-spacing: var(--body-letter-spacing);
  	line-height: var(--body-line-height);
  	font-size: 16px;
  	color: var(--olive-stone);
  	margin-top: 0px;
  	text-decoration: underline;
  	margin-left: 20px;
}

p.tagline_s a {
	color: var(--olive-stone);
	text-decoration: underline;
}

a.button.pale-yellow-1 {
	background: var(--pale-yellow-1);
    color: var(--olive-stone);
}

div.desktop_nav a.button.smaller {
	margin-right: 20px;
}

@media (min-width: 768px) {
	
	div.desktop_nav a.button.smaller {
		display: none;
	}

}

/* Footer */

footer p, footer ul li {
	font-size: 16px;
}

footer ul {
	list-style-type: none;
	padding-left: 0px;
}

footer ul li {
	margin-bottom: 10px;
}

footer ul li a {
	color: var(--black);
}

footer div.bg_red ul li a {
	color: var(--white);
}

.flex_row_footer > *:nth-child(1) {
    flex: 1.2; 
}

.flex_row_footer > *:nth-child(1) form {
   	width: 75%;
}

.flex_row_footer > *:nth-child(2),
.flex_row_footer > *:nth-child(3) {
    flex: 0.7; 
}

/* Video */

div.vimeo_holder {
	padding:56.25% 0 0 0;
	position:relative;
}

div.vimeo_holder iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius: 15px;
}

/* Poster frame shown behind the iframe so there's no blank gap while Vimeo loads.
   The poster is the video's own first frame, so the hand-off to playback is seamless. */
div.vimeo_holder[data-autoplay] {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 15px;
}

.slick-slider {
	width: 90% !important;
	margin: auto;
}

.inner_pad {
	padding: 20px;
}

@media (max-width: 1720px) {

	div.centered_1720, div.centered_1600 {
		width: 96%;
		margin: auto;
	}

}

@media (max-width: 1480px) {

	div.centered_1480, div.centered_1220, div.centered_1048 {
		width: 96%;
		margin: auto;
	}
	
}

@media (max-width: 767px) {

	div.contained_50, div.contained_75 {
		width: 100%;
	}

	.flex_row_footer > * {
		min-width: 100%;
	}
	
	.flex_row .flex_2col, .flex_row .flex_3col {
		flex: 1 1 100%;
	}
	
	div.flex_2col.mob_reverse:nth-child(1), div.flex_row_header_col.mob_reverse:nth-child(1) {
    	order: 2;
  	}

  	div.flex_2col.mob_reverse:nth-child(2), div.flex_row_header_col.mob_reverse:nth-child(2) {
    	order: 1;
  	}
	
	a.button, button {
    	font-size: 14px;
	    padding: 14px 18px;
	}
	
	div.vspace_standard {
		padding: 70px 0;
	}
	
	.flex_row_gap_50 {
		gap: 25px;
	}
	
	.flex_row_footer > *:nth-child(1) form {
		width: 100%;
	}
	
	.flex_row .flex_4col {
		min-width: 100%;
	}
	
}

@media (max-width: 640px) {

	.flex_2col.icon_pair { flex: inherit; }
	.flex_2col.icon_pair > img { flex-basis: 80px; width: 80px; }
}

navigation {
	background: #f4f4f4;
}

navigation .nav_inner {
	display: flex;
	align-items: center;
}

navigation .nav_logo {
	margin-right: auto;
}

/* Logo */
navigation .nav_logo img {
	height: 80px;
	display: block;
}

/* Nav links */
navigation .nav_links {
	display: flex;
	gap: 2.5rem;
	list-style: none;
	margin: 0 30px 0 0;
	padding: 0;
}

navigation .nav_links a {
	text-decoration: none;
	color: #000;
	font-weight: 600;
}

/* Actions */
navigation .nav_actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* CTA */
navigation .nav_cta {
	background: #d32f2f;
	color: #fff;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

/* Burger */
navigation .nav_burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

navigation .nav_burger span {
	width: 22px;
	height: 2px;
	background: #000;
	display: block;
}

navigation a.button {
	padding: 8px 18px;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	navigation .nav_links { display: none; }
	navigation .nav_cta_desktop { display: none; }
	navigation .nav_burger { display: flex; }
	navigation .nav_logo img { height: 50px; }
}

/* Burger → X animation */
navigation .nav_burger span { transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; }
navigation .nav_burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
navigation .nav_burger.is-open span:nth-child(2) { opacity: 0; }
navigation .nav_burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-in menu */
.nav_backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 1000;
}
.nav_backdrop.show { opacity: 1; visibility: visible; }

.nav_panel {
	font-family: var(--body-font-primary);
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 88vw);
	background: #fff;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.4rem 2rem;
	box-shadow: -10px 0 44px rgba(0,0,0,0.18);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.3s;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.nav_panel.open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.nav_panel_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.nav_panel_logo img { height: 46px; display: block; }
.nav_panel_close {
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
	color: #000;
	display: flex;
	line-height: 0;
}
.nav_panel_close svg { width: 26px; height: 26px; }

.nav_panel_links { display: flex; flex-direction: column; }
.nav_panel_links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0.25rem;
	font-family: var(--header-font-primary);
	font-size: 1.2rem;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid #ededed;
}
.nav_panel_links a .chev { width: 18px; height: 18px; color: #c4c4c4; flex: 0 0 auto; }
.nav_panel_links a.active,
.nav_panel_links a[aria-current="page"] { color: var(--red); }
.nav_panel_links a.active .chev { color: var(--red); }

.nav_panel_actions {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: 1.75rem;
}
.nav_panel_actions a.button { font-size: 1.05rem; padding: 1rem 1.25rem; }

.nav_phone_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 1rem 1.25rem;
	border-radius: 50px;
	background: #f6ecec;
	color: var(--red);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.nav_phone_btn:hover { background: #f0e0e0; }
.nav_phone_btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.nav_panel_social {
	margin-top: 1.5rem;
	text-align: center;
	color: #777;
	text-decoration: underline;
	font-size: 0.95rem;
}

/* Contain the off-screen slide-in panel so it can't create a horizontal scrollbar */
html, body { overflow-x: hidden; }
body.nav-open { overflow: hidden; }

/* The slide-in menu is mobile-only; never let it show on desktop */
@media (min-width: 901px) {
	.nav_panel, .nav_backdrop { display: none; }
}


/* Active nav link */
navigation .nav_links a.active,
navigation .nav_links a[aria-current="page"] {
	color: var(--red);
}