/* Layer Declarations */
@layer fonts, bootstrap, ronstrap, components;



/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap') layer(fonts);



/* Bootstrap */
@import url('//cdn2.hubspot.net/hub/7816541/hub_generated/template_assets/166301309489/1718721126141/Boyd/css/bootstrap.min.css') layer(bootstrap);



/* Bootstrap */
@import url('//cdn2.hubspot.net/hub/7816541/hub_generated/template_assets/166302475645/1718721124213/Boyd/css/ronstrap.min.css') layer(ronstrap);



/* Main Styles */
@layer components {

	/* Variables
	----------------------------------------------------
	*/

	:root {

		/* - - Fonts - - */

		--tahoma: Tahoma, Verdana, Segoe, sans-serif;
		--open: "Open Sans", Helvetica, Arial, sans-serif;

		--weight-regular: 400;
		--weight-semibold: 600;


		/* - - Colors - - */

		--black-rgb: 0 0 0; /* #000 */
		--black: rgba(var(--black-rgb) / 100%);

		--white-rgb: 255 255 255; /* #FFF */
		--white: rgba(var(--white-rgb) / 100%);
		
		--grey-rgb: 105 105 105; /* #696969 */
		--grey: rgba(var(--grey-rgb) / 100%);

		--navy-rgb: 0 48 89; /* #003059 */
		--navy: rgba(var(--navy-rgb) / 100%);

		--royal-rgb: 0 105 168; /* #0069A8 */
		--royal: rgba(var(--royal-rgb) / 100%);

		--stone-rgb: 153 175 193; /* #99AFC1 */
		--stone: rgba(var(--stone-rgb) / 100%);

		--slate-rgb: 223 227 234; /* #DFE3EA */
		--slate: rgba(var(--slate-rgb) / 100%);

		--orange-rgb: 224 102 61; /* #E0663D */
		--orange: rgba(var(--orange-rgb) / 100%);

		--rust-rgb: 182 65 26; /* #B6411A */
		--rust: rgba(var(--rust-rgb) / 100%);
		

		/* - - Color Assignments - - */

		--placeholder: var(--grey);

		--focus: var(--orange);

		--skip-background: var(--navy);
		--skip-border: var(--navy);
		--skip-color: var(--white);

		--selection-background: var(--orange);
		--selection-color: var(--white);

		--body-color: var(--black);
		--body-font: var(--open);
		--body-weight: var(--weight-regular);

		--heading-color: inherit;
		--heading-font: var(--tahoma);
		--heading-weight: var(--weight-regular);

		--transition: .25s all;

		
		/* - - Spacing - - */

		--col-1: 8.3333333333%;
		--col-2: 16.6666666667%;
		--col-3: 25%;
		--col-4: 33.3333333333%;
		--col-5: 41.6666666667%;
		--col-6: 50%;
		--col-7: 58.3333333333%;
		--col-8: 66.6666666667%;
		--col-9: 75%;
		--col-10: 83.3333333333%;
		--col-11: 91.6666666667%;
	
		--container-col-1: calc(var(--container-width) * (1 / 12));
		--container-col-2: calc(var(--container-width) * (2 / 12));
		--container-col-3: calc(var(--container-width) * (3 / 12));
		--container-col-4: calc(var(--container-width) * (4 / 12));
		--container-col-5: calc(var(--container-width) * (5 / 12));
		--container-col-6: calc(var(--container-width) * (6 / 12));
		--container-col-7: calc(var(--container-width) * (7 / 12));
		--container-col-8: calc(var(--container-width) * (8 / 12));
		--container-col-9: calc(var(--container-width) * (9 / 12));
		--container-col-10: calc(var(--container-width) * (10 / 12));
		--container-col-11: calc(var(--container-width) * (11 / 12));
	
		--container-width: 100%;
		--container-padding: 2rem;
	
		--page-gutters: calc(100vw - (var(--container-padding) * 2));
		--single-gutter: var(--container-padding);
		--padded-gutter: var(--container-padding);
	
		--align-items: normal;
		--flex-direction: row;
		--justify-content: normal;
		--row-x: 1.5rem;
		--row-y: 0;

		--spacer: 4rem;
		--negative-spacer: calc(var(--spacer) * -1);

		--subspacer: calc(var(--spacer) / 2);
		--negative-subspacer: calc(var(--subspacer) * -1);

		--gutter: 2rem;
		--negative-gutter: calc(var(--gutter) * -1);

		--content-margin: 2rem;
		--heading-margin: 1rem;

		--header: 4.875rem;

	}

	@media (min-width: 576px) {
		:root {
			--container-padding: calc(var(--row-x) * .5);
			--container-width: 540px;
			
			--page-gutters: calc(100vw - var(--container-width));
			--single-gutter: calc(var(--page-gutters) / 2);
			--padded-gutter: calc(var(--single-gutter) + var(--container-padding));

			--header: 5.8125rem;
		}
	}

	@media (min-width: 768px) {
		:root {
			--container-width: 720px;

			--spacer: 5.5rem;

			--header: 7.8125rem;
		}
	}

	@media (min-width: 992px) {
		:root {
			--container-width: 960px;
		}
	}

	@media (min-width: 1200px) {
		:root {
			--container-width: 1140px;

			--spacer: 7rem;
		}
	}

	@media (min-width: 1400px) {
		:root {
			--container-width: 1320px;
		}
	}



	/* Icons
	----------------------------------------------------
	*/

	@font-face {
		font-family: 'icons';
		src:	url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/css/icomoon.ttf');
				url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/css/icomoon.ttf') format('truetype'),
				url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/css/icomoon.woff') format('woff'),
				url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/css/icomoon.svg') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: block;
	}

	:root {
		--icons: 'icons';

		--arrow-down: "\e900";
		--arrow-left: "\e901";
		--arrow-right: "\e902";
		--arrow-up: "\e903";

		--chevron-down: "\e904";
		--chevron-left: "\e905";
		--chevron-right: "\e906";
		--chevron-up: "\e907";

		--facebook: "\e908";
		--instagram: "\e909";
		--linkedin: "\e90a";
		--pinterest: "\e90f";
		--tiktok: "\e90b";
		--twitter: "\e90c";
		--vimeo: "\e90d";
		--x: "\e910";
		--youtube: "\e90e";
	}

	[class*="icon"] {
		text-decoration: none;
	}

	[class*="icon"]:before {
		font-family: var(--icons);
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		line-height: 1;
		text-decoration: none;
		text-transform: none;
	}

	.icon.arrow-down:before {
		content: var(--arrow-down);
	}
	.icon.arrow-left:before {
		content: var(--arrow-left);
	}
	.icon.arrow-right:before {
		content: var(--arrow-right);
	}
	.icon.arrow-up:before {
		content: var(--arrow-up);
	}

	.icon.chevron-down:before {
		content: var(--chevron-down);
	}
	.icon.chevron-left:before {
		content: var(--chevron-left);
	}
	.icon.chevron-right:before {
		content: var(--chevron-right);
	}
	.icon.chevron-up:before {
		content: var(--chevron-up);
	}

	.icon.facebook:before {
		content: var(--facebook);
	}
	.icon.instagram:before {
		content: var(--instagram);
	}
	.icon.linkedin:before {
		content: var(--linkedin);
	}
	.icon.pinterest:before {
		content: var(--pinterest);
	}
	.icon.tiktok:before {
		content: var(--tiktok);
	}
	.icon.twitter:before {
		content: var(--twitter);
	}
	.icon.vimeo:before {
		content: var(--vimeo);
	}
	.icon.x:before {
		content: var(--x);
	}
	.icon.youtube:before {
		content: var(--youtube);
	}



	/* Resets & Structure
	----------------------------------------------------
	*/

	main {
		padding-top: var(--header);
	}



	/* Forms
	----------------------------------------------------
	*/

	input:not([type="submit"]) {
		background-color: var(--white);
		padding: 1rem;
	}

	input[type="submit"] {
		color: var(--white);
		background: var(--orange);
		border: 0;
		border-radius: 0;
		display: inline-block;
		font-weight: var(--weight-semibold);
		padding: .625rem 1.5rem;
		text-decoration: none;
		white-space: nowrap;
		width: fit-content;
	}

	input[type="submit"]:hover {
		color: var(--white);
		background-color: var(--rust);
	}
	
	label:has(input[type="checkbox"]) {
		display: block;
		font-size: .875rem;
		padding-left: 1.5rem;
		position: relative;
	}
	
	input[type="checkbox"] {
		border: .0625rem solid var(--stone);
		height: 1rem;
		inset: .1875rem auto auto 0;
		padding: 0;
		position: absolute;
		width: 1rem;
	}
	
	input[type="checkbox"]:hover {
		border-color: var(--royal);
		pointer: cursor;
	}
	
	input[type=checkbox]:checked {
		background: 0;
		border: 0;
		border-bottom: .125rem solid var(--royal);
		border-right: .125rem solid var(--royal);
		height: .75rem;
		width: .375rem;
		transform: rotate(45deg) translate(-50%, -50%);
	}

	select,
	textarea {
		padding: 1rem;
		position: relative;
	}
	
	select {
		background-image: url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/images/chevron-down.svg');
		background-repeat: no-repeat, repeat;
		background-position: calc(100% - 1rem) 50%;
		background-size: .75rem auto;
	}
	
    .form form > * {
		position: relative;
		width: 100%;
	}
	
	.form form > :is(
	    .hs-message,
	    div:has(.hs-richtext)
	) {
		width: 100%;
	}
	
	.form form .field label {
		margin-bottom: .5rem;
	}
	
	.form form > .hs-submit {
		margin-top: var(--gutter);
		text-align: center;
		width: 100%;
	}
	
	.form form .hs-error-msgs {
		color: var(--rust);
		font-size: .75rem;
		inset: auto var(--gutter) 0;
		position: absolute;
	}
	
	.form form ul li {
		margin: 0;
		padding: 0;
	}
	
	.form form .hs-richtext {
		font-size: .875rem;
	}
	
	.form form .hs_error_rollup {
		display: none;
	}
	
	@media (min-width: 576px) {
		input[type="submit"] {
			font-size: 1.125rem;
			padding: 1rem 3rem;
		}
	}
	
	@media (min-width: 768px) {
		.form form {
			--gutter: 1rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0 var(--negative-gutter);
		}
		.form form > * {
			padding: 0 var(--gutter);
			width: var(--col-6);
		}		
	}
	
	@media (min-width: 992px) {
		.form form > * {
			width: var(--col-4);
		}
		.form form > .hs-fieldtype-booleancheckbox {
			--gutter: 1rem;
			max-width: var(--col-6);
			width: auto;
		}	
	}
	
	@media (min-width: 1200px) {
		.form form {
			--gutter: 2rem;
		}
	}


	/* Typography
	----------------------------------------------------
	*/

	h1, .h1 {
		font-size: 2.5rem;
		line-height: 1;
	}

	h2, .h2 {
		font-size: 1.75rem;
	}

	h3, .h3 {
		font-size: 1.5rem;
	}

	h4, .h4 {
		font-size: 1.25rem;
	}

	h5, .h5 {
		font-size: 1.125rem;
	}

	h6, .h6 {
		font-size: 1rem;
		text-transform: uppercase;
	}

	@media (min-width: 992px) {
		h1, .h1 {
			font-size: 3.5rem;
		}
		h2, .h2 {
			font-size: 2.125rem;
		}
		h3, .h3 {
			font-size: 1.75rem;
		}
		h4, .h4 {
			font-size: 1.5rem;
		}
		h5, .h5 {
			font-size: 1.25rem;
		}
	}

	a {
		color: var(--orange);
	}

	a:hover {
		color: var(--rust);
	}

	.btn {
		color: var(--white);
		background: var(--orange);
		border: 0;
		border-radius: 0;
		display: block;
		font-weight: var(--weight-semibold);
		padding: .625rem 1.5rem;
		text-decoration: none;
		white-space: nowrap;
		width: fit-content;
	}

	.btn.center {
		margin-left: auto;
		margin-right: auto;
	}

	.btn.right {
		margin-left: auto;
	}

	.btn:hover,
	.btn:focus,
	.btn:active {
		color: var(--white);
		background-color: var(--rust);
	}

	@media (min-width: 576px) {
		.btn {
			font-size: 1.125rem;
			padding: 1rem 3rem;
		}
	}



	/* Global Styles
	----------------------------------------------------
	*/

	main > .section.wrapper:last-child {
		margin-bottom: 0;
	}

	.logo,
	.logo img {
		display: inline-block;
		max-width: 10rem;
	}

	@media (min-width: 576px) {
		.logo,
		.logo img {
			max-width: 16.875rem;
		}
	}



	/* Content
	----------------------------------------------------
	*/

	.content ul li {
		--item-margin: 1rem;
		background: linear-gradient(to bottom, var(--orange), var(--orange)) no-repeat bottom;
		background-position: 0 .625rem;
		background-size: .375rem .375rem;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	
	@media (min-width: 768px) {
		.content ul {
			column-count: 2;
			column-gap: var(--gutter);
		}
	}



	/* Navigation
	----------------------------------------------------
	*/

	header {
		--gutter: 1rem;
		background-color: var(--white);
		inset: 0 0 auto;
		padding: var(--gutter) 0;
		position: fixed;
		width: 100%;
		z-index: 9997;
	}

	header .inner {
		align-items: center;
		display: flex;
		gap: var(--gutter);
		justify-content: space-between;
	}

	header .btn {
		background-color: transparent;
		border: .0625rem solid var(--orange);
		color: var(--navy);
	}

	header .btn:hover {
		background-color: var(--orange);
		color: var(--white);
	}

	@media (min-width: 768px) {
		header {
			--gutter: 2rem;
		}
	}



	/* Hero
	----------------------------------------------------
	*/
	
	.hero {
		overflow: hidden;
	}
	
	.hero .inner {
		background-color: var(--navy);
	}

	.hero .content {
		align-self: center;
		color: var(--white);
		height: min-content;
		padding: var(--spacer) var(--padded-gutter) var(--spacer) calc(var(--padded-gutter) + var(--gutter));
		position: relative;
	}

	.hero .content:before {
		background-color: var(--royal);
		content: '';
		inset: var(--spacer) auto var(--spacer) var(--padded-gutter);
		position: absolute;
		width: .375rem;
	}

	.hero .image {
		background-color: var(--royal);
	}

	.hero .image > :is(img, button) {
		aspect-ratio: 16 / 9;
	}

	.hero .image a {
		align-items: center;
		background-color: var(--orange);
		color: var(--white);
		display: block;
		font-size: 1.25rem;
		font-weight: var(--weight-semibold);
		line-height: 1.25;
		margin-top: auto;
		padding: var(--subspacer) var(--padded-gutter);
		position: relative;
		text-decoration: none;
	}

	.hero .image a:before {
		aspect-ratio: 1;
		background-color: var(--rust);
		background-image: url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/images/arrow.svg');
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: 1.25rem 1.25rem;
		content: '';
		display: block;
		height: 3.875rem;
		min-width: 3.875rem;
		margin: 0 0 var(--content-margin);
		width: 3.875rem;
	}

	.hero .image a:hover:before {
		background-position: 75% 75%;
	}

	.hero .image a:after {
		background-color: var(--rust);
		content: '';
		height: 0;
		inset: auto 0 0;
		position: absolute;
	}

	.hero .image a:hover:after {
		height: .5rem;
	}
	
	.hero .image a img {
		--bottom: calc(100% - (var(--subspacer) + 3.875rem));
		box-shadow: .25rem .25rem .5rem 0 rgba(var(--black-rgb) / 25%);
		inset: auto var(--padded-gutter) var(--bottom) auto;
		position: absolute;
		width: var(--col-5);
	}
	
	.hero .image button {
		background: 0;
		border: 0;
		padding: 0;
		position: relative;
	}
	
	.hero .image button img {
		height: 100%;
		inset: 0;
		position: absolute;
	}
	
	.hero .image button:before {
		background-image: url('//7816541.fs1.hubspotusercontent-na1.net/hubfs/7816541/raw_assets/public/Boyd/images/play.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: var(--spacer);
		content: '';
		inset: 0;
		opacity: 75%;
		position: absolute;
		z-index: 1;
	}
	
	.hero .modal {
		--bs-modal-zindex: 9999;
		border: 0;
		border-radius: 0;
	}

	.modal-backdrop {
		--bs-backdrop-zindex: 9998;
		--bs-backdrop-opacity: 85%;
	}

	.hero .modal-content .close {
		background: 0;
		border: 0;
		color: transparent;
		font-size: 0;
		height: 2rem;
		inset: -2.5rem 0 auto auto;
		line-height: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		width: 2rem;
	}

	.hero .modal-content .close:before,
	.hero .modal-content .close:after {
		background-color: var(--white);
		border-radius: 1rem;
		content: '';
		height: .125rem;
		inset: calc(50% - (.125rem / 2)) .25rem auto;
		position: absolute;
		width: 1.5rem;
	}

	.hero .modal-content .close:hover:before,
	.hero .modal-content .close:hover:after {
		background-color: var(--orange);
	}

	.hero .modal-content .close:before {
		transform: rotate(-45deg);
	}

	.hero .modal-content .close:after {
		transform: rotate(45deg);
	}
	
	@media (min-width: 576px) {
		.hero .image a {
			display: flex;
			font-size: 1.375rem;
			margin-right: var(--padded-gutter);
		}
		.hero .image a:has(img) {
			padding-right: calc(var(--content-margin) + 10rem);
		}
		.hero .image a:before {
			margin: 0 var(--content-margin) 0 0;
		}
		.hero .image a img {
			inset: auto var(--negative-gutter) var(--subspacer) auto;
			width: 12rem;
		}
		.hero .modal-content .close {
			inset: -2rem -2rem auto auto;
		}
	}
	
	@media (min-width: 768px) {
		.hero .image a:has(img) {
			padding-right: calc(var(--content-margin) + 14rem);
		}
		.hero .image a img {
			width: 14rem;
		}
	}

	@media (min-width: 992px) {
		.hero .inner {
			display: flex;
		}
		.hero .inner > * {
			width: var(--col-6);
		}
		.hero .content {
			padding-right: var(--spacer);
		}
		.hero .image {
			display: flex;
			flex-direction: column;
		}
		.hero .image > :is(img, button) {
			height: 100%;
		}
		.hero .image a {
			padding: var(--subspacer);
		}
	}
	
	@media (min-width: 992px) and (max-width: 1399.98px) {
		.hero .image a:has(img) {
			padding-right: var(--subspacer);
		}
		.hero .image a img {
			inset: auto var(--negative-gutter) calc(100% - var(--gutter)) auto;
		}
	}

	@media (min-width: 1200px) {
		.hero .content {
			padding-bottom: calc(var(--spacer) * 1.5);
			padding-top: calc(var(--spacer) * 1.5);
		}
		.hero .content:before {
			bottom: calc(var(--spacer) * 1.5);
			top: calc(var(--spacer) * 1.5);
		}
	}



	/* Image Content
	----------------------------------------------------
	*/

	.image-content {
		--align-items: center;
		--row-x: var(--subspacer);
		--row-y: var(--gutter);
	}

	.image-content h2 {
		margin-bottom: var(--subspacer);
		text-align: center;
	}



	/* Image Card
	----------------------------------------------------
	*/

	.image-card .inner {
		background-color: var(--royal);
		color: var(--white);
	}

	.image-card .inner .content {
		padding: var(--subspacer) var(--padded-gutter);
	}

	.image-card .inner .image {
		flex: 1 0 0%;
		position: relative;
	}

	@media (min-width: 768px) {
		.image-card .inner .content {
			padding: var(--spacer) var(--padded-gutter);
		}
	}

	@media (min-width: 992px) {
		.image-card .inner {
			display: flex;
		}
		.image-card .inner .content {
			padding: var(--spacer) var(--spacer) var(--spacer) var(--col-1);
			width: var(--col-6);
		}
		.image-card .inner .image img {
			height: 100%;
			inset: 0;
			position: absolute;
		}
	}

	@media (min-width: 1200px) {
		.image-card .inner .content {
			width: var(--col-5);
		}
		.image-card h2 {
			font-size: 3rem;
		}
	}



	/* Form
	----------------------------------------------------
	*/

	.form {
		margin-top: var(--negative-spacer);
		position: relative;
	}

	.form:before {
		background-color: var(--navy);
		content: '';
		inset: 35% 0 0;
		position: absolute;
	}

	.form .inner {
		background-color: var(--slate);
		border-bottom: 1rem solid var(--stone);
		padding: var(--spacer) var(--col-1);
		position: relative;
	}

	.form .inner h2 {
		margin-bottom: var(--subspacer);
		text-align: center;
	}



	/* Content List
	----------------------------------------------------
	*/

	.form.wrapper + .content-list.wrapper {
		margin-top: calc(var(--negative-spacer) * 2);
	}

	.content-list.wrapper {
		background-color: var(--navy);
		color: var(--white);
	}

	.content-list .grid {
		display: grid;
		gap: var(--gutter);
		grid-template-columns: 1fr;
	}

	.content-list .grid .item {
		border-left: .0625rem solid var(--royal);
		padding-left: 1.25rem;
	}

	@media (min-width: 768px) {
		.content-list .grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}



	/* Footer
	----------------------------------------------------
	*/

	footer {
		background-color: var(--navy);
		color: var(--white);
		padding-top: var(--subspacer);
		position: relative;
	}

	main:has(.section.wrapper:last-child) + footer {
		padding-top: 0;
	}

	footer .logo {
		display: block;
		margin: 0 0 var(--subspacer) auto;
		width: fit-content;
	}

	footer .legal {
		background-color: var(--royal);
		font-size: .75rem;
		padding: var(--gutter) 0;
	}

}



/* END
----------------------------------------------------
*/