@font-face
	{
	font-family: 'Open Sauce Sans';
	src: 
		url('../fonts/woff/OpenSauceSans-Regular.woff2') format('woff2'),
		url('../fonts/ttf/OpenSauceSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	}
@font-face 
	{
	font-family: 'Open Sauce Sans';
	src: 
		url('../fonts/woff/OpenSauceSans-Bold.woff2') format('woff2'),
		url('../fonts/ttf/OpenSauceSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	}
@font-face 
	{
	font-family: 'Cormorant';
	src: 
		url('../fonts/woff/Cormorant-VariableFont_wght.woff2') format('woff2'),
		url('../fonts/ttf/Cormorant-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	}

:root
	{
	--red: #CC0000;
	--black: #000000;
	--white: #FFFFFF;
	--max-width: 100%;
	--gutter: 70px;
	--nav-affordance: -50px;
	--small-font-size: 16px;
	--body-font-size: 20px;
	--medium-font-size: 23px;
	--large-font-size: 28px;
	--x-large-font-size: 43px;
	}

html, body
	{
	margin: 0;
	}
html
	{
	scroll-behavior: smooth;
	}
body
	{
	font-family: 'Open Sauce Sans', Arial, Verdana, Helvetica, sans-serif;
	font-size: var(--body-font-size);
	color: var(--black);
	background-color: var(--white);
	}
h1
	{
	margin: 0 var(--gutter) 25px var(--gutter);
	}
h1, .anim
	{
	color: var(--black);
	font-family: Cormorant, Garamond, Georgia, serif;
	font-size: 94px;
	line-height: 1.2;
	font-weight: 600;
	}
.home h1
	{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	margin: 0 0 100px 0;
	padding: 0 0 0 0;
	box-sizing: border-box;
	height: 90vh;
	min-height: 220px;
	max-height: 100vh;
	}
.h1_intro
	{
	display: block;
	font-size: 61px;
	margin-bottom: -0.5em;
	}
.h1_name
	{
	color: var(--red);
	font-size: 142px;
	}
h2
	{
	color: var(--red);
	text-transform: uppercase;
	font-size: var(--large-font-size);
	margin: 0 0 0.5em 0;
	}
h3
	{
	font-size: var(--x-large-font-size);
	margin: 0 0 0.5em 0;
	}
p
	{
	margin: 0.5em 0 0 0;
	}
.black
	{
	background-color: var(--black);
	color: var(--white);
	}

#main_menu
	{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: var(--white);
	}
#main_menu ul
	{
	box-sizing: border-box;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 15px var(--gutter) 10px var(--gutter);
	list-style: none;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
	}
#main_menu li
	{
	padding: 0;
	margin: 0;
	}
#main_menu a
	{
	display: inline-block;
	padding-top: 15px;
	color: inherit;
	text-decoration: none;
	font-size: var(--large-font-size);
	transition: padding 500ms, width 500ms;
	}
#main_menu.scrolled a
	{
	padding-top: 10px;
	}
#main_menu a:hover, #main_menu a.active
	{
	color: var(--red);
	}
#main_menu .logo
	{
	display: block;
	width: 100px;
	padding-top: 0;
	aspect-ratio: 1 / 1;
	background: url(../images/DVC_Logo_RedV_WhiteBG.svg) center center no-repeat;
	background-size: contain;
	border-radius: 50%;
	}
#main_menu.scrolled .logo
	{
	padding-top: 0;
	width: 75px;
	}
#main_menu .mobile_control, #main_menu .mobile_icon
	{
	display: none;
	}
.menu_target
	{
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: var(--nav-affordance);
	}

main
	{
	max-width: var(--max-width);
	margin: 0 auto;
	position: relative;
	}
.home main::after
	{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	/* max-width: 52vw; */
	max-width: calc(100vw - 640px);
	height: 100vh;
	aspect-ratio: 648 / 753;
	background: url(../images/DVC_Swoosh_edit.svg) right top no-repeat;
	background-size: contain;
	z-index: 110;
	}

main > section
	{
	padding: 80px var(--gutter);
	position: relative;
	}

#hero
	{
	padding: 0 var(--gutter);
	}
	
#about_wrapper
	{
	padding: 0;
	}
#about
	{
	top: -100px;
	}
#about_hero
	{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	gap: 50px;
	padding: 0 var(--gutter);
	margin: 0 50px;
	}
#about_hero::before
	{
	content: '';
	display: block;
	flex: 0 0 50%;
	aspect-ratio: 265 / 371;
	background: url(../images/dvc_main.png) center center no-repeat;
	background-size: cover;
	}
#about_hero .content
	{
	position: relative;
	flex: 0 1 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 0 0 60px 85px;
	background: url(../images/DVC_AccentBar_vertical.svg) left center no-repeat;
	background-size: 25px auto;
	}
#about_hero .content p
	{
	font-size: var(--large-font-size);
	}

#consulting
	{
	text-align: center;
	padding: 80px var(--gutter);
	}
.subheading
	{
	font-size: var(--x-large-font-size);
	font-weight: 700;
	max-width: 600px;
	margin: 0 auto;
	padding-bottom: 80px;
	background: url(../images/DVC_AccentBar.svg) center bottom 40px no-repeat;
	background-size: 300px auto;
	}
.black .subheading
	{
	background-image: url(../images/DVC_AccentBar_white_highlight.svg);
	}
.features
	{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 50px;
	}
.features li
	{
	max-width: 350px;
	margin: 0;
	padding: 110px 0 0 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 100px;
	}
.features li.bulb
	{
	background-image: url(../images/DVC_Icon_Lightbulb.svg);
	}
.features li.house
	{
	background-image: url(../images/DVC_Icon_Storefront.svg);
	}
.features li.globe
	{
	background-image: url(../images/DVC_Icon_Web.svg);
	}
.features li.graph
	{
	background-image: url(../images/DVC_Icon_Graph.svg);
	}
.features p
	{
	font-size: var(--small-font-size);
	}

#services_wrapper
	{
	text-align: center;
	}
.service_item
	{
	display: block;
	color: var(--black);
	text-decoration: none;
	box-sizing: border-box;
	min-height: 100px;
	max-width: 1550px;
	margin: 0 auto;
	padding: 15px 0 15px 210px;
	background-position: center left var(--gutter);
	background-repeat: no-repeat;
	background-size: auto 80px;
	border-bottom: 1px solid var(--red);
	text-align: left;
	}
.service_item:hover
	{
	color: var(--red);
	}
.service_item.megaphone
	{
	background-image: url(../images/DVC_Icon_Megaphone.svg);
	}
.service_item.notebook
	{
	background-image: url(../images/DVC_Icon_Notepad.svg);
	}
.service_item.glass
	{
	background-image: url(../images/DVC_Icon_MagnifyingGlass.svg);
	}
.service_item.tools
	{
	background-image: url(../images/DVC_Icon_Tools.svg);
	}
.service_item h3
	{
	font-size: var(--medium-font-size);
	}
.service_item p
	{
	padding-right: 200px;
	background: url(../images/DVC_Pitchfork.svg) right top no-repeat;
	background-size: 80px auto;
	}

#faq_wrapper
	{
	padding-top: 65px;
	}
#faq_wrapper .content
	{
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 250px 1fr;
	grid-template-rows: min-content 1fr;
	grid-template-areas:
		'heading accordion'
		'subheading accordion';
	gap: 0 100px;
	}
#faq_wrapper h2
	{
	padding-top: 15px;
	grid-area: heading;
	}
#faq_wrapper .subheading
	{
	grid-area: subheading;
	padding-bottom: 0;
	background: none;
	}
#faq_wrapper .accordion
	{
	grid-area: accordion;
	}
.accordion 
	{
	margin: 0;
	}
.accordion button
	{
	width: 100%;
	color: inherit;
	text-align: left;
	font-size: var(--medium-font-size);
	font-weight: 700;
	cursor: pointer;
	padding: 15px 200px 15px 0;
	background: url(../images/DVC_Pitchfork.svg) right center no-repeat;
	background-size: 80px auto;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #AAAAAA;
	}
.accordion button:hover
	{
	color: var(--red);
	}
.accordion dd
	{
	display: none;
	margin: 0;
	padding: 0 0 15px 50px;
	font-size: var(--body-font-size);
	border-bottom: 1px solid #AAAAAA;
	transition: display 500ms;
	}
.accordion dd[aria-hidden="false"]
	{
	display: block;
	}

#contact_wrapper
	{
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: var(--red);
	}
#contact_wrapper .menu_target
	{
	top: -100px;
	}
#contact_wrapper .content
	{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 120px;
	}
#contact_wrapper h2
	{
	color: var(--white);
	text-transform: none;
	margin: 0;
	}
.box_link
	{
	display: block;
	padding: 10px 110px 10px 10px;
	border: 1px solid var(--white);
	color: var(--white);
	text-decoration: none;
	text-transform: uppercase;
	background: url(../images/DVC_Pitchfork_white.svg) right 10px center no-repeat;
	background-size: 80px auto;
	}
.box_link.left
	{
	padding: 10px 10px 10px 110px;
	background-image: url(../images/DVC_Pitchfork_white_left.svg);
	background-position: left 10px center;
	}
.box_link:hover
	{
	color: var(--red);
	background-color: var(--white);
	background-image: url(../images/DVC_Pitchfork.svg);
	}
.box_link.left:hover
	{
	background-image: url(../images/DVC_Pitchfork_left.svg);
	}

/* Contact */

.contact h1, .thankyou h1, .services h1
	{
	text-align: center;
	background-image: url(../images/DVC_AccentBar.svg), url(../images/DVC_Swoosh_edit.svg);
	background-position: center bottom, right top;
	background-repeat: no-repeat;
	background-size: 300px auto, contain;
	padding: 20px var(--gutter);
	margin: 0 0 60px 0;
	}
.home_link 
	{
	position: absolute;
	top: 15px;
	left: var(--gutter);
    display: block;
    width: 100px;
    padding-top: 0;
    aspect-ratio: 1 / 1;
    background: url(../images/DVC_Logo_RedV_WhiteBG.svg) center center no-repeat;
    background-size: contain;
    border-radius: 50%;
	}	
#contact_page_wrapper
	{
	background-color: var(--black);
	color: var(--white);
	padding: 80px var(--gutter);
	}
#contact_page_wrapper h2
	{
	color: var(--white);
	text-transform: none;
	text-align: center;
	margin: 0;
	padding-bottom: 80px;
	}
#contact_form
	{
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: max-content 1fr max-content max-content;
	gap: 15px 20px;
	}
#contact_form label
	{
	grid-column: 1;
	text-align: right;
	}
#contact_form input, #contact_form textarea
	{
	grid-column: 2;
	grid-column-end: span 3;
	}
#contact_form #per_phone, #contact_form #per_phone_ext
	{
	grid-column-end: span 1;
	}
#contact_form label[for="per_phone_ext"]
	{
	grid-column: 3;
	}
#contact_form #per_phone_ext
	{
	grid-column: 4;
	}
#contact_form input[type="submit"], .link_button
	{
    justify-self: flex-end;
	max-width: max-content;
	padding: 10px 110px 10px 10px;
    border: 1px solid var(--white);
	font-size: var(--body-font-size);
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    background: url(../images/DVC_Pitchfork_white.svg) right 10px center no-repeat;
    background-size: 80px auto;
	grid-column: 4;
	grid-column-end: span 1;
	}
#contact_form input[type="submit"]:hover, .link_button:hover
	{
    color: var(--red);
    background-color: var(--white);
    background-image: url(../images/DVC_Pitchfork.svg);
	}
#contact_form input:required, #contact_form textarea:required, .contact_required
	{
	background-image: url(../images/DVC_Pitchfork.svg);
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 50px auto;
	}
#contact_form textarea:required
	{
	padding: 10px 60px 10px 15px;
	background-position: right 10px top 5px;
	}
.contact_required
	{
	font-size: var(--small-font-size);
	grid-column: 2;
	grid-column-end: span 2;
	margin: 0;
	padding-left: 65px;
	background-position: left center;
	align-self: flex-start;
	}
#contact_page_wrapper .box_link
	{
	width: max-content;
    margin: 40px auto 0 auto;
	}
	
/* Thanks */ 

.thankyou
	{
	height: 100vh;
	max-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	}
.thankyou main
	{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	margin: 0;
	}
#thanks_wrapper
	{
	flex: 1 1 auto;
	background-color: var(--black);
	color: var(--white);
	padding: 80px var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	}
#thanks_wrapper p
	{
	margin: 0 0 40px 0;
	text-align: center;
	}
.thankyou footer
	{
	flex: 0 0 auto;
	margin: 0;
	}
	

/* Footer */

footer
	{
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 20px var(--gutter) 50px var(--gutter);
	}
footer .content
	{
	max-width: 1350px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 75px;
	font-size: var(--small-font-size);
	}
.footer_main
	{
	background: url(../images/DVC_Logo_RedV_White.svg) left top no-repeat;
	background-size: 100px auto;
	padding-top: 110px;
	flex: 0 1 800px;
	}
.footer_menu
	{
	flex: 0 1 max-content;
	}
.footer_menu h2
	{
	font-size: var(--body-font-size);
	white-space: nowrap;
	}
.footer_menu ul
	{
	list-style: none;
	padding: 0;
	margin: 40px 0 0 0;
	}
.footer_menu li
	{
	margin-top: 20px;
	}
.footer_menu li a
	{
	color: var(--white);
	text-decoration: none;
	}
.footer_menu li a:hover
	{
	color: var(--red);
	text-decoration: underline;
	}
.footer_addendum
	{
	padding-top: 50px;
	}
.footer_addendum h2
	{
	font-size: var(--body-font-size);
	margin-bottom: 40px;
	}

@media (max-width: 1300px)
	{
	h1, .anim
		{
		font-size: 70px;
		}
	.home h1
		{
		height: calc(.9 * (100vw - 640px) * 753 / 648);
		}
	.h1_intro
		{
		font-size: 45px;
		}
	.h1_name
		{
		font-size: 106px;
		}	
	#about_hero
		{
		margin: 0;
		}
	}

@media (max-width: 991px)
	{
	:root
		{
		--gutter: 30px;
		--small-font-size: 13px;
		--body-font-size: 16px;
		--medium-font-size: 18px;
		--large-font-size: 22px;
		--x-large-font-size: 28px;
		--nav-affordance: -86px;
		}
	#main_menu
		{
		width: auto;
		background-color: transparent;
		}
	#main_menu ul
		{
		display: block;
		padding: 15px var(--gutter) 10px var(--gutter);
		background-color: var(--white);
		text-align: right;
		}
	#main_menu.scrolled ul, #main_menu .mobile_control:checked ~ ul
		{
		border-width: 0 1px 1px 0;
		border-color: var(--black);
		border-style: solid;
		border-bottom-right-radius: 10px;
		}
	#main_menu .logo
		{
		width: 75px;
		margin: 0 40px 10px 0;
		}
	#main_menu.scrolled .logo
		{
		width: 50px;
		}
	#main_menu .mobile_control, #main_menu .mobile_icon
		{
		display: block;
		width: 22px;
		height: 22px;
		position: absolute;
		top: 40px;
		right: var(--gutter);
		transition: top 500ms;
		}	
	#main_menu .mobile_control
		{
		cursor: pointer;
		margin: 0;
		opacity: 0;
		z-index: 115;
		}
	#main_menu .mobile_icon
		{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 110;
		}
	#main_menu .mobile_icon span
		{
		display: block;
		width: 22px;
		height: 4px;
		background-color: var(--black);
		transition: transform 500ms, background 500ms, width 500ms;
		}
	#main_menu .mobile_icon span:first-child
		{
		transform-origin: 0% 0%;
		}
	#main_menu .mobile_icon span:last-child
		{
		transform-origin: 0% 100%;
		}
	#main_menu.scrolled .mobile_control, #main_menu.scrolled .mobile_icon
		{
		top: 28px;
		}
	#main_menu li:not(.logo_wrapper)
		{
		height: 0;
		transition: height 500ms;
		overflow: hidden;
		}
	#main_menu .mobile_control:checked ~ ul
		{
		padding-bottom: 25px;
		}
	#main_menu .mobile_control:checked ~ ul li:not(.logo_wrapper)
		{
		height: 34px;
		}
	#main_menu .mobile_control:checked ~ .mobile_icon span
		{
		width: 27px;
		background-color: var(--red);
		}
	#main_menu .mobile_control:checked ~ .mobile_icon span:first-child
		{
		transform: rotate(45deg);
		}
	#main_menu .mobile_control:checked ~ .mobile_icon span:nth-child(2)
		{
		transform: scale(0);
		}
	#main_menu .mobile_control:checked ~ .mobile_icon span:last-child
		{
		transform: rotate(-45deg);
		}
	#main_menu a, #main_menu.scrolled a
		{
		padding-top: 5px;
		}
	.home main::after
		{
		max-width: 40vw;
		}
	h1, .anim
		{
		font-size: 7vw;
		}
	.home h1
		{
		height: calc(.9 * 40vw * 753 / 648);
		margin-bottom: 8vh;
		}
	.h1_intro
		{
		font-size: 4.54vw;
		}
	.h1_name
		{
		font-size: 10.57vw;
		}	
	#about
		{
		top: -86px;
		}
	#about_hero
		{
		display: block;
		}
	#about_hero::before
		{
		background-image: url(../images/dvc_main.png);
		background-image: image-set(
			url(../images/dvc_main.avif) type("image/avif"),
			url(../images/dvc_main.webp) type("image/webp"),
			url(../images/dvc_main.png) type("image/png"));
		}
	#about_hero .content
		{
		display: block;
		background: none;
		padding: 30px 0;
		}
	#about_hero h2
		{
		text-align: center;
		padding: 0 0 50px 0;
		background: url(../images/DVC_AccentBar.svg) center bottom 15px no-repeat;
		background-size: 300px auto;
		}
	.features
		{
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 50px;
		}
	#services
		{
		top: -5px;
		}
	#services_wrapper
		{
		padding-bottom: 20px;
		}
	.service_item
		{
		max-width: 600px;
		padding: 100px 0 15px 0;
		margin-bottom: 30px;
		background-position: center top;
		}
	.service_item p
		{
		padding: 0 0 40px 0;
		background-position: center bottom;
		}
	#faq_wrapper 
		{
		padding-top: 0;
		}
	#faq_wrapper .content
		{
		display: block;
		text-align: center;
		}
	#faq_wrapper .subheading
		{
		margin-bottom: 20px;
		}
	.accordion
		{
		max-width: 600px;
		margin: 0 auto;
		}
	.accordion button
		{
		text-align: center;
		padding: 15px 0 40px 0;
		background-position: center bottom 10px;
		}
	.accordion dd
		{
		padding: 0 0 25px 0;
		}
	#contact_wrapper .content
		{
		flex-direction: column;
		gap: 10px;
		}
	footer .content
		{
		max-width: 600px;
		gap: 0 50px;
		}
	
	/* Contact */
	
	.home_link 
		{
		width: 50px;
		}
	.contact h1, .thankyou h1, .services h1
		{
		padding-top: 50px;
		margin-bottom: 30px;
		background-size: 220px auto, contain;
		}
	#contact_form
		{
		grid-template-columns: 1fr max-content;
		gap: 5px 20px;
		}
	#contact_form label
		{
		grid-column: 1;
		grid-column-end: span 2;
		text-align: left;
		}
	#contact_form input, #contact_form textarea
		{
		grid-column: 1;
		grid-column-end: span 2;
		margin-bottom: 5px;
		}
	#contact_form label[for="per_phone"]
		{
		grid-row: 7;
		grid-column-end: span 1;
		}
	#contact_form #per_phone
		{
		grid-row: 8;
		}
	#contact_form label[for="per_phone_ext"]
		{
		grid-row: 7;
		grid-column: 2;
		grid-column-end: span 1;
		}
	#contact_form #per_phone_ext
		{
		grid-row: 8;
		grid-column: 2;
		width: 60px;
		}
	#contact_form input[type="submit"]
		{
		grid-row: 13;
		grid-column: 1;
		grid-column-end: span 2;
		}
	.contact_required
		{
		grid-row: 13;
		grid-column: 1;
		grid-column-end: span 2;
		padding-left: 65px;
		background-position: left center;
		align-self: flex-start;
		margin-top: 10px;
		}

	}

@media (max-width: 360px)
	{
	h1
		{
		font-size: 25px;
		}
	.h1_intro
		{
		font-size: 16px;
		}
	.h1_name
		{
		font-size: 38px;
		}	
	}
	
/* Focal Zones */

.focal_zone
	{
	opacity: 0.0;
	}
.focal_zone.visible
	{
	transition: opacity 1250ms;
	opacity: 1.0;
	}

@media (prefers-reduced-motion: reduce)
	{
	html
		{
		scroll-behavior: auto;
		}
	}