/*
Theme Name: Ocean Point
Theme URI: https://www.3n.design
Description: This is a custom theme for Ocean Point, designed and developed by 3n Design.
Author: 3n Design
Author URI: https://www.3n.design
Version: 1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Variables
	2.	Typography
	3. 	Base Styles
	4. 	UI Elements
	5. 	Site Header
	6. 	Menu Modal
	7.	Archives
	8.	Templates
	9.	Single
	10. Entry Content
	11. Blocks
	12. Site Footer
    13. Transitions
	14. Accessibility

-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 0. CSS Reset
-------------------------------------------------------------- */

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	-webkit-tap-highlight-color: transparent !important;
}
button,
input,
textarea {
	-webkit-appearance: none;
}

/* --------------------------------------------------------------
= 1. Variables
-------------------------------------------------------------- */

:root {
	--opd--color--primary: #221F20;
	--opd--color--secondary: #ffffff;
	--opd--color--menu: #d9ddda; 
	--opd--color--background: #f8f7ee;
    --opd--color--playa: #c7e6e8;
    --opd--color--dragon-fly-light: #e0e2e0;
    --opd--color--full-circle: #eeece7;
    --opd--color--pastor-of-paris: #d8ddda;
    --opd--color--blue-heron: #79919c;
    --opd--color--dragon-fly-dark: #b8c2b9;
    --opd--color--dune-shack: #d9d0cb;
    --opd--color--hope-ranch: #cfcac4;
    --opd--color--cobalt: #234f88;
    --opd--color--rocky-coast: #a8aa94;
    --opd--color--klamath: #68625c;
    --opd--color--rock-store: #767877;
    --opd--color--ghost-tree: #283b43;
    --opd--color--inspiration: #4b514c;
    --opd--color--spill-the-wine: #39332f;
    --opd--color--underground: #575853;
	--opd--margin--sm: clamp(1.25rem, 0.7813rem + 2.3438vw, 3.125rem); /* 20px - 50px (320px - 1600px) */
    --opd--margin--lg: clamp(1.25rem, 0rem + 6.25vw, 6.25rem); /* 20px - 100px (320px - 1600px) */
	--opd--header--gap: clamp(4.6875rem, 2.5938rem + 10.4688vw, 13.0625rem); /* 75px - 209px (320px - 1600px) */
	--opd--section--gap: 1.5em;
	--opd--block--gap: 1.5em;
}

/* --------------------------------------------------------------
= 2. Typography
-------------------------------------------------------------- */

@font-face {
	font-family: 'Hoves';
	font-style: normal;
	font-weight: 300;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Light.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Light.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: italic;
	font-weight: 300;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Light_Italic.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Light_Italic.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: normal;
	font-weight: 400;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Regular.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Regular.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: italic;
	font-weight: 400;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Italic.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Italic.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: normal;
	font-weight: 500;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Medium.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Medium.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: italic;
	font-weight: 500;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Medium_Italic.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Medium_Italic.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: normal;
	font-weight: 700;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Bold.woff2') format('woff2'),
    	  url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Bold.woff') format('woff');
}
@font-face {
	font-family: 'Hoves';
	font-style: italic;
	font-weight: 700;
	src:  url('/wp-content/themes/opd/assets/font/woff2/TT_Hoves_Pro_Expanded_Bold_Italic.woff2') format('woff2'),
          url('/wp-content/themes/opd/assets/font/woff/TT_Hoves_Pro_Expanded_Bold_Italic.woff') format('woff');
}
body {
	background-color: var(--opd--color--background);
	color: var(--opd--color--primary);
    font-family: 'Hoves', sans-serif;
    font-style: normal;
	font-weight: 400;
	min-height: 100vh;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
i, em {
    font-style: italic;
}
b, strong {
    font-weight: 500;
}

/* --------------------------------------------------------------
= 3. Base Styles 
-------------------------------------------------------------- */

.color--playa { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--playa) 
}
.color--dragon-fly-light { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--dragon-fly-light) 
}
.color--full-circle { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--full-circle) 
}
.color--pastor-of-paris { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--pastor-of-paris) 
}	
.color--blue-heron { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--blue-heron) 
}
.color--dragon-fly-dark { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--dragon-fly-dark) 
}
.color--dune-shack { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--dune-shack) 
}
.color--hope-ranch { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--hope-ranch) 
}
.color--cobalt { 
	background: 
	linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--cobalt) 
}
.color--rocky-coast { 
	background: 
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		var(--opd--color--rocky-coast) 
}
.color--klamath { 
	background: 
	linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--klamath) 
}
.color--rock-store { 
	background: 
		linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--rock-store) 
}
.color--ghost-tree { 
	background: 
		linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--ghost-tree) 
}
.color--inspiration { 
	background: 
		linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--inspiration) 
}
.color--spill-the-wine { 
	background: 
	linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--spill-the-wine) 
}
.color--underground { 
	background:
		linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1)),
		var(--opd--color--underground)
}
.color--cobalt,
.color--klamath,
.color--rock-store,
.color--ghost-tree,
.color--inspiration,
.color--spill-the-wine,
.color--underground {
	color: var(--opd--color--secondary);
}
.color--cobalt .entry-detail:before,
.color--klamath .entry-detail:before,
.color--rock-store .entry-detail:before,
.color--ghost-tree .entry-detail:before,
.color--inspiration .entry-detail:before,
.color--spill-the-wine .entry-detail:before,
.color--underground .entry-detail:before {
	background-color: var(--opd--color--secondary);
}
main {
	position: relative;
}
body.home {
	height: 100dvh;
}

/* --------------------------------------------------------------
= 4. UI Elements
-------------------------------------------------------------- */

/* SVGs ------------------------------------------------------ */

.logo,
.menu,
.close,
.logo-footer { 
    display: inline-block;
    overflow: visible 
}
.logo .fill,
.menu .fill { 
    transition: all 300ms ease;
    fill: var(--opd--color--secondary) 
}
.logo-footer .fill,
button:hover .menu .fill,
.menu--active .menu .fill { fill: var(--opd--color--primary) }

.close .fill { 
    transition: all 300ms ease;
    fill: var(--opd--color--primary) 
}
button:hover .close .fill { fill: var(--opd--color--rock-store) }

.archive .logo .fill, .archive .menu .fill,
.page-template-page-services .logo .fill, .page-template-page-services .menu .fill,
.page-template-page-management .logo .fill, .page-template-page-management .menu .fill,
.page-template-page-contact .logo .fill, .page-template-page-contact .menu .fill,
.page-template-page-select-work .logo .fill, .page-template-page-select-work .menu .fill,
.page-template-page-map .logo .fill, .page-template-page-map .menu .fill { 
    fill: var(--opd--color--primary) 
}
.archive button:hover .menu .fill,
.page-template-page-services button:hover .menu .fill,
.page-template-page-management button:hover .menu .fill,
.page-template-page-contact button:hover .menu .fill,
.page-template-page-select-work button:hover .menu .fill,
.page-template-page-map button:hover .menu .fill { 
	fill: var(--opd--color--rock-store) 
}

/* Socials --------------------------------------------------- */

.icon { 
    display: inline-block;
    overflow: visible 
}
.icon .fill { 
    transition: all 300ms ease;
    fill: var(--opd--color--rock-store) 
}
a:hover .icon .fill { fill: var(--opd--color--primary) }

/* --------------------------------------------------------------
= 5. Site Header
-------------------------------------------------------------- */

#site-header {
	position: fixed;
	top: clamp(1.5rem, 1.1719rem + 1.6406vw, 2.8125rem); /* 24px - 45px (320px - 1600px) */
	left: var(--opd--margin--sm);
	z-index: 500;
}
#site-header svg {
	height: clamp(1.25rem, 1.2031rem + 0.2344vw, 1.4375rem); /* 20px - 23px (320px - 1600px) */
	width: auto;
}
#menu-toggle {
	position: fixed;
	top: clamp(0.625rem, 0.0781rem + 2.7344vw, 2.8125rem); /* 10px - 45px (320px - 1600px) */
	right: var(--opd--margin--sm);
	z-index: 500;
}
.archive #site-header,
.page-template-page-about #site-header,
.page-template-page-services #site-header,
.page-template-page-management #site-header,
.page-template-page-contact #site-header,
.page-template-page-map #site-header,
.archive #menu-toggle,
.page-template-page-about #menu-toggle,
.page-template-page-services #menu-toggle,
.page-template-page-management #menu-toggle,
.page-template-page-contact #menu-toggle,
.page-template-page-map #menu-toggle { 
	position: absolute;
}
#menu-toggle button {
	background-color: transparent;
}
#menu-toggle svg {
	height: clamp(2.75rem, 2.4375rem + 1.5625vw, 4rem); /* 44px - 64px (320px - 1600px) */
	width: auto;
}
@media ( min-width: 48em ) {
	.home #menu-toggle,
	.single #menu-toggle {
		top: 50%;
		right: auto;
		left: var(--opd--margin--sm);
		transform: translateY(-50%);
	}
}

/* --------------------------------------------------------------
= 6. Menu Modal
-------------------------------------------------------------- */

#site-navigation {
	background-color: var(--opd--color--menu);
	height: 100%;
	max-width: 768px;
	opacity: 0;
	position: fixed;
		top: 0;
		right: 0;
	transition: opacity 300ms ease;
	visibility: hidden;
	width: 100%;
	z-index: 2000;
}
.menu--active #site-navigation {
	opacity: 1;
	visibility: visible;
}
.vertical-scroll {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	padding-block-start: clamp(2.75rem, 1.6563rem + 5.4688vw, 7.125rem); /* 44px - 114px (320px - 1600px) */
	padding-inline-start: var(--opd--margin--sm);
	padding-inline-end: var(--opd--margin--sm);
}
#menu-close {
	position: fixed;
	top: clamp(0.625rem, 0.0781rem + 2.7344vw, 2.8125rem); /* 10px - 45px (320px - 1600px) */
	right: var(--opd--margin--sm);
	z-index: 500;
}
#menu-close button {
	background-color: transparent;
}
#menu-close svg {
	height: clamp(2.75rem, 2.4375rem + 1.5625vw, 4rem); /* 44px - 64px (320px - 1600px) */
	width: auto;
}

/* Menu: Menus ----------------------------------------------- */

#site-menus {
	flex: 1;
}
.site-menu {
	list-style: none;
	margin: 0;
	margin-block-end: var(--opd--margin--sm);
	padding: 0;
}
.site-menu a {
	color: var(--opd--color--primary);
	font-size: clamp(1.875rem, 1.7969rem + 0.3906vw, 2.1875rem); /* 30px - 35px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.5em;
	text-decoration: none;
	transition: color 300ms ease;
}
.site-menu a:hover {
	color: var(--opd--color--rock-store);
}
#site-menu--desktop {
	display: none;
}
.site-menu .sub-menu {
    list-style: none;
	max-height: 0;
	overflow: hidden;
    transition: max-height 500ms ease;
}
.menu-item-has-children.active .sub-menu {
	max-height: 500px;
}
.menu-item-has-children > a {
	position: relative;
	padding-inline-end: 30px;
}
.menu-item-has-children > a:after,
.menu-item-has-children > a:before {
    content: '';
    position: absolute;
    top: 19px;
    right: 0;
    width: 18px;
    height: 11px;
    background-size: 18px 11px;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all 300ms ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.menu-item-has-children > a:after {
    background-image: url("assets/svg/opd_more.svg");
    opacity: 1;
}
.menu-item-has-children > a:before {
    background-image: url("assets/svg/opd_more_hover.svg");
    opacity: 0;
}
.menu-item-has-children > a:hover:after { opacity: 0 }
.menu-item-has-children > a:hover:before { opacity: 1 }

.menu-item-has-children.active > a:after,
.menu-item-has-children.active > a:before {
	transform: rotate(180deg);
}
.sub-menu {
	display: flex;
	flex-wrap: wrap;
}
.sub-menu::before {
	content: '';
	flex-basis: 100%;
	height: 1em;
}
.sub-menu li {
	padding-inline-end: var(--opd--margin--sm);
	padding-block-end: 0.5em;
	width: calc(100% / 2);
}
.sub-menu li a {
	border-top: 1px solid var(--opd--color--primary);
	display: block;
	font-family: 'HovesRegular', sans-serif;
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.5em;
	padding-block-start: 0.5em;
	transition: all 300ms ease;
}
.sub-menu li a:hover {
	border-color: var(--opd--color--rock-store);
	color: var(--opd--color--rock-store);
}
@media ( min-width: 48em ) {
	#site-menu--desktop {
		display: block;
	}
	#site-menu--mobile {
		display: none;
	}
}

/* Menu: Menus ----------------------------------------------- */

#menu-footer {
	font-family: 'HovesRegular', sans-serif;
	font-size: 1rem;
	line-height: 1.5em;
}
#menu-footer h6 {
	font-family: 'HovesRegular', sans-serif;
	font-weight: normal;
}
#menu-footer a {
	color: var(--opd--color--primary);
	text-decoration: none;
}
.menu-footer--inner {
	flex: 1;
	padding-block-end: var(--opd--margin--sm);
}
.menu-footer--site-title,
.menu-footer--phone-numbers {
	padding-block-end: 0.25em;
}
.menu-footer--phone-numbers {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	justify-content: space-between;
}
.menu-footer--address,
.menu-footer--email {
	border-top: 1px solid var(--opd--color--primary);
	padding-block-start: 0.25em;
}
@media ( min-width: 48em ) {
	.menu-footer--phone-numbers {
		justify-content: flex-start;
	}
}
@media ( min-width: 64em ) {
	#menu-footer {
		display: flex;
		justify-content: space-between;
		gap: var(--opd--margin--sm);
	}
	.menu-footer--phone-numbers {
		justify-content: space-between;
	}
	.menu-footer--address {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------
= 7. Archives
-------------------------------------------------------------- */

.map,
.archives,
.select-work {
	padding-block-start: var(--opd--header--gap);
}
.archive-post {
	margin-block-end: calc(var(--opd--margin--sm) * 3);
}
.archive-post a {
	text-decoration: none;
}
.archive-post figure {
	aspect-ratio: 4 / 3;
	margin: 0!important;
	margin-block-end: 15px!important;
	overflow: hidden;
    position: relative;
}
.archive-post figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 500ms ease, width 500ms ease, height 500ms ease;
}
.archive-post a:hover figure img {
    transform: translate(-50%, -50%) scale(1.02);
}
.archive-post a .entry-title {
	color: var(--opd--color--primary);
	font-size: clamp(0.875rem, 0.7188rem + 0.7813vw, 1.5rem); /* 14px - 24px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.25em;
	text-align: center;
	transition: all 300ms ease;
}
.archive-post a:hover .entry-title {
	color: var(--opd--color--rock-store);
}
@media ( min-width: 64em ) {
	.select-work .posts {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--opd--margin--lg);
		justify-content: space-between;
	}
	.select-work .archive-post {
        flex: 1 1 calc(50% - (var(--opd--margin--lg) / 2));
		margin-block-end: var(--opd--margin--lg);
    }
    .select-work .archive-post:nth-child(3n) {
        flex: 0 10 calc(66% - var(--opd--margin--lg));
        margin-inline-start: auto;
        margin-inline-end: auto;
    }
}

/* --------------------------------------------------------------
= 8. Templates
-------------------------------------------------------------- */

.error404 {
	padding-block-start: var(--opd--header--gap);
}
.page-title {
	font-size: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.5rem); /* 20px - 40px (320px - 1600px) */
	font-weight: 300;
	margin-block-end: var(--opd--margin--sm);
}
.select-work-title {
	font-size: clamp(0.875rem, 0.7188rem + 0.7813vw, 1.5rem); /* 14px - 24px (320px - 1600px) */
	font-weight: 300;
	margin-block-end: var(--opd--margin--sm);
}
.inner {
	margin-inline-start: auto;
	margin-inline-end: auto;
	max-width: 1600px;
	padding-inline: var(--opd--margin--sm);
	padding-block: var(--opd--margin--sm);
}
@media ( min-width: 64em ) {
	.has-max-width {
		max-width: 843px;
		margin-inline-end: auto;
	}
	.select-work-title {
		line-height: 25px;
		position: fixed;
		inset-block-start: clamp(1.5rem, 1.1719rem + 1.6406vw, 2.8125rem); /* 24px - 45px (320px - 1600px) */
		inset-inline-start: 50%;
		margin-block-end: 0;
		transform: translateX(-50%);
		z-index: 500;
	}
}

/* Template: Home -------------------------------------------- */

#carousel {
    height: 100dvh;
    position: relative;
}
.slider {
	display: block;
	list-style: none;
    height: 100%;
	margin: 0;
	position: relative;
	width: 100%;
}
.slider .slide {
	height: 100%;
	inset: 0;
	position: absolute;
    width: 100%;
 }
.slider .slide figure {
	height: 100%;
    overflow: hidden;
    position: relative;
	width: 100%;
}
.slider .slide figure img {
    display: block;
    height: 100%;
	object-fit: cover;
	width: 100%;
	
}
.slider .slide figure figcaption {
	font-size: clamp(1.5rem, 1.375rem + 0.625vw, 2rem); /* 24px - 32px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.25em;
	inset-block-end: var(--opd--margin--sm);
	inset-inline: var(--opd--margin--sm);
	opacity: 0;
	position: absolute;
	transition: opacity 300ms ease;
	z-index: 2;
}
.slider .slide a figure figcaption.text-color-dark {
	color: var(--opd--color--primary);
}
.slider .slide a figure figcaption.text-color-light {
	color: var(--opd--color--secondary);
}
.slider .slide.rslides1_on figure figcaption {
	opacity: 1;
	transition: opacity 500ms ease 600ms;
}

/* Template: About ------------------------------------------- */

.image-banner {
	margin: 0!important;
	height: 100vh;
	inset: 0;
	margin-block-end: var(--opd--margin--sm)!important;
	position: relative;
	z-index: 0;
}
.image-banner img {
	display: block;
	height: 100%;
	object-fit: cover;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.inner-banner {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--opd--margin--lg);
	height: 100%;
	margin-inline: auto;
	max-width: 1600px;
	padding-block-start: var(--opd--header--gap);
	padding-block-end: var(--opd--margin--lg);
	padding-inline: var(--opd--margin--lg);
	position: relative;
	z-index: 2;
}
.about-mission,
.about-content {
	color: var(--opd--color--secondary);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.about-mission {
	font-size: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5rem); /* 20px - 40px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.25em;
}
.about-content {
	font-size: 0.875em;
	line-height: 1.5em;
}
.section-title {
	font-size: clamp(1.5625rem, 1.1719rem + 1.9531vw, 3.125rem); /* 25px - 50px (320px - 1600px) */
	font-weight: 300;
	margin-block-end: var(--opd--margin--sm);
}
.team-members {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opd--margin--lg);
}
.team-member {
	margin-block-end: var(--opd--margin--lg);
}
.team-member--header {
	align-items: center;
	border-bottom: 1px solid var(--opd--color--primary);
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	margin-block-end: var(--opd--margin--sm);
	padding-block-end: 20px;
}
.team-member--portrait {
	margin: 0!important;
	width: 100px;
}
.team-member--portrait img {
	border-radius: 50px;
	display: block;
	height: 100px;
	object-fit: cover;
	width: 100px;
}
.team-member--portrait div {
	background-color: var(--opd--color--rock-store);
	border-radius: 50px;
	display: block;
	height: 100px;
	width: 100px;
}
.team-member--identity h3 {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5em;
}
.team-member--identity h4 {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5em;
}
@media ( min-width: 64em ) {
	.image-banner {
		height: 75vh;
	}
	.inner-banner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.about-mission,
	.about-content {
		flex: 1 1 calc(50% - var(--opd--margin--lg));
	}
	#team-members .team-member:first-child {
		flex: 1 1 100%;
	}
	#team-members .team-member:first-child .team-member--content {
		max-width: 843px;
	}
	.team-member {
		flex: 1 1 calc(50% - var(--opd--margin--lg));
	}
}
@media ( min-width: 80em ) {
	.image-banner {
		height: 50vh;
	}
}

/* Template: Services ---------------------------------------- */

.services {
	padding-block-start: var(--opd--header--gap);
}
.service {
	margin-block-end: var(--opd--margin--sm);
}
.service--description {
	border-top: 1px solid var(--opd--color--primary);
	padding-block-start: var(--opd--margin--sm);
}
.service--description h3 {
	font-size: clamp(1.5625rem, 1.1719rem + 1.9531vw, 3.125rem); /* 25px - 50px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.125;
	padding-block-end: var(--opd--margin--sm);
}
.service--content,
.service--image {
	padding-block-end: var(--opd--margin--sm);
}
.service--image img {
	display: block;
	height: auto;
	width: 100%;
}
@media ( min-width: 64em ) {
	.service {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--opd--margin--sm);
		margin-block-end: 0;
	}
	.service--description {
		flex: 1;
	}
	.service--image {
		width: calc(100% * 1 / 3);
	}
}

/* Template: Management -------------------------------------- */

.management {
	padding-block-start: var(--opd--header--gap);
}
.accordion {
	border-top: 1px solid var(--opd--color--primary);
}
.accordion--description {
	padding-block-end: var(--opd--margin--sm);
}
.accordion--title {
	background: none;
	border: none;
	color: var(--opd--color--primary);
	font-family: 'Hoves', sans-serif;
	font-size: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.5rem); /* 20px - 40px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.25em;
	padding-block: var(--opd--margin--sm);
	padding-inline-end: calc(var(--opd--margin--sm) + 46px);
	position: relative;
	width: 100%;
}
.accordion--title div {
	border: 1px solid var(--opd--color--primary);
	border-radius: clamp(0.8125rem, 0.6563rem + 0.7813vw, 1.4375rem); /* 13px - 23px (320px - 1600px) */
	height: clamp(1.625rem, 1.3125rem + 1.5625vw, 2.875rem); /* 26px - 46px (320px - 1600px) */
	inset-block-start: 50%;
	inset-inline-end: 0;
	transform: translateY(-50%);
	position: absolute;
	width: clamp(1.625rem, 1.3125rem + 1.5625vw, 2.875rem); /* 26px - 46px (320px - 1600px) */
}
.accordion--title div:before,
.accordion--title div:after {
	background-color: var(--opd--color--primary);
	content: '';
	display: block;
	height: 2px;
	inset-inline-start: clamp(0.375rem, 0.3281rem + 0.2344vw, 0.5625rem); /* 6px - 9px (320px - 1600px) */
	inset-block-start: clamp(0.6875rem, 0.5313rem + 0.7813vw, 1.3125rem); /* 11px - 21px (320px - 1600px) */ 
	position: absolute;
	transition: transform 300ms ease;
	width: clamp(0.75rem, 0.5313rem + 1.0938vw, 1.625rem); /* 12px - 26px (320px - 1600px) */
}
.accordion--title div:after {
	transform: rotate(90deg);
}
.accordion--content {
	max-height: 0;
	overflow: hidden;
    transition: max-height 500ms ease;
}
.accordion.open .accordion--content {
    max-height: 500px;
}
.accordion.open .accordion--title div:after {
	transform: rotate(180deg);
}
.accordion--image {
	margin: 0!important;
}
.accordion--image img {
	display: block;
	height: auto;
	width: 100%;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
@media ( min-width: 64em ) {
	.accordion-flex {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--opd--margin--sm);
		margin-block-end: 0;
	}
	.accordion-container {
		flex: 1;
	}
	.accordion--image {
		width: calc(100% * 1 / 3);
	}
	.accordion--image img {
		height: 100%;
		object-fit: cover;
	}
}
/* Template: Contact ----------------------------------------- */

.background-image {
	margin: 0!important;
	inset: 0;
	position: fixed;
	z-index: 0;
}
.background-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	width: 100%;
}
.contact {
	padding-block-start: var(--opd--header--gap);
	z-index: 1;
}
.entry-details {
	font-size: 1rem;
	line-height: 1.5em;
	margin-block-end: var(--opd--margin--sm);
}
.entry-details p {
	margin-block-end: 1.5em;
}
.entry-details h6 {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5em;
}
.entry-details strong {
	font-weight: 500;
}
.entry-details a {
	color: var(--opd--color--primary);
	text-decoration: underline;
	transition: color 300ms ease;
}
.entry-details a:hover {
	color: var(--opd--color--rock-store);
}
.entry-details .no-links a,
.entry-details .no-links a:hover {
	color: var(--opd--color--primary);
	text-decoration: none;
}
.wpcf7-form {
    line-height: normal;
	margin-block-end: var(--opd--margin--sm);
}
.wpcf7-form p,
.wpcf7-form--no-margin {
    margin-bottom: 0 !important;
}
.wpcf7-not-valid-tip {
    font-size: 1.125rem !important;
    margin-top: 0.3rem !important;
    width: 100%;
}
.wpcf7-list-item,
.wpcf7-form-control-wrap {
    display: block !important;
    margin-left: 0 !important;
}
.wpcf7-list-item-label,
.wpcf7-form--field p {
    font-size: 1.125rem;
    line-height: 1.3em;
}
.wpcf7-form--field {
    margin-bottom: 1.25em !important;
}
.wpcf7-form--field label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.3rem;
}
.wpcf7-form--field label span {
    color: var(--opd--color--cobalt);
    margin-left: 3px;
}
.wpcf7-form--field input[type="text"],
.wpcf7-form--field input[type="email"] {
	background-color: transparent;
    border: 1px solid var(--opd--color--primary);
	border-radius: 5px;
    font-size: 1rem;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    width: 100%;
}
.wpcf7-form--field textarea {
	background-color: transparent;
    border: 1px solid var(--opd--color--primary);
	border-radius: 5px;
    font-size: 1rem;
    height: 150px;
    line-height: 40px;
    margin-top: 0.3rem;
    padding: 5px 10px;
    width: 100%;
}
.wpcf7-form--field input[type="text"]:focus,
.wpcf7-form--field input[type="email"]:focus,
.wpcf7-form--field textarea:focus {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	outline: none;
}
.wpcf7-form--submit #mc_signup_submit {
    margin-top: 0;
    padding: 0 !important;
    width: 100% !important;
}
.wpcf7-form--submit input[type="submit"] {
    background-color: var(--opd--color--underground);
    border: none;
	border-radius: 5px;
    color: var(--opd--color--secondary);
    font-size: 1.5rem;
    font-weight: 500;
    height: 40px;
    line-height: 35px;
	padding-block-end: 5px;
    transition: all 300ms ease;
    width: 100%;
}
.wpcf7-form--submit input[type="submit"]:hover {
    background-color: var(--opd--color--primary);
}
.wpcf7-form--submit form.sent .wpcf7-response-output {
    border-color: var(--opd--color--primary);
	border-radius: 5px;
    margin: 2rem 0 1rem;
    padding: 0.2rem 0.5rem 0.1rem;
}
.wpcf7 form .wpcf7-response-output {
	font-weight: 700;
    margin: 2em 0 0 !important;
}
.wpcf7-not-valid-tip {
	font-weight: 700;
}
@media ( min-width: 48em ) {
    .wpcf7-form--name {
        display: flex;
        flex-wrap: nowrap;
        gap: 0 var(--opd--margin--sm);
    }
    .wpcf7-form--name .wpcf7-form--field {
        width: 50%;
    }
    .wpcf7-form--field input[type="text"],
    .wpcf7-form--field input[type="email"] {
        height: 50px;
    }
    .wpcf7-form--submit input[type="submit"] {
        height: 50px;
		line-height: 45px;
        max-width: 300px;
    }
}
@media ( min-width: 64em ) {
    .entry-flex {
        display: flex;
        flex-wrap: nowrap;
        gap: 0 var(--opd--margin--lg);
    }
	.entry-flex .entry-content {
		width: calc(100% * 2 / 3);
	}
	.entry-flex .entry-details {
		width: calc(100% * 1 / 3);
	}
}

/* --------------------------------------------------------------
= 9. Single
-------------------------------------------------------------- */

.pin-spacer {
	pointer-events: auto;
}
.pin-spacer * {
	pointer-events: auto;
}
.single {
	overflow-x: hidden;
}
.horizontal-scroll {
	height: 100%;
	position: relative;
}
.normal-scroll {
	height: 100%;
}
.scroll-panel {
	display: flex;
	flex-basis: auto;
	flex-wrap: wrap;
	/* min-width: 0; */
}
.panel {
	height: 100%;
	width: auto;
}
.hero-panel {
	height: 100vh;
	margin: 0!important;
	position: relative;
	width: 100vw;
}
.hero-panel img {
    display: block;
    height: 100vh;
	inset: 0;
	min-width: 100vw;
	object-fit: cover;
	position: absolute;
	width: 100vw;
	z-index: 1;
}
.hero-panel figcaption {
	font-size: clamp(1.5rem, 1.375rem + 0.625vw, 2rem); /* 24px - 32px (320px - 1600px) */
	font-weight: 300;
	line-height: 1.25em;
	inset-block-end: var(--opd--margin--sm);
	inset-inline: var(--opd--margin--sm);
	opacity: 0;
	position: absolute;
	transition: opacity 500ms ease 400ms;
	z-index: 2;
}
.hero-panel figcaption.text-color-dark {
	color: var(--opd--color--primary);
}
.hero-panel figcaption.text-color-light {
	color: var(--opd--color--secondary);
}
.page--loaded .hero-panel figcaption {
	opacity: 1;
}
.content-panel {
	padding-inline: var(--opd--margin--sm);
	padding-block-start: calc(var(--opd--margin--sm) * 2);
	padding-block-end: var(--opd--margin--sm);
}
.image-panel {
	padding-inline: var(--opd--margin--sm);
	padding-block: var(--opd--margin--sm);
}
.image-panel:nth-last-child(2) {
	padding-block-end: calc(var(--opd--margin--sm) * 2);
}
.image-panel img {
	height: auto;
	margin: 0!important;
	width: 100%;
}
@media (min-width: 48em) {
	html,
	.single {
		margin: 0;
		height: 100%;
		overscroll-behavior: none;
	}
	.single {
		overscroll-behavior: contain;
	}
	.horizontal-scroll {
		display: flex;
		flex-wrap: nowrap;
		height: 100vh;
		overscroll-behavior: contain;
	}
	.scroll-panel {
		flex-wrap: nowrap;
		height: 100vh;
		overscroll-behavior: contain;
	}
	.panel {
		flex: 0 0 auto; /* Mobile fix */
	}
	.hero-panel figcaption {
		width: calc(100% / 2);
	}
	.content-panel {
		padding-inline-start: var(--opd--margin--lg);
		padding-inline-end: 0;
		padding-block: var(--opd--margin--lg);
		width: 50vw;
	}
	.image-panel {
		padding-inline-start: var(--opd--margin--lg);
		padding-inline-end: 0;
		padding-block: var(--opd--margin--lg);
	}
	.image-panel:nth-last-child(2) {
		padding-inline-end: var(--opd--margin--lg);
		padding-block-end: var(--opd--margin--lg);
	}
	.image-panel img {
		width: auto;
		height: 100%;
	}
	.menu-panel {
		width: 75vw;
	}
}
@media (min-width: 64em) {
	.menu-panel {
		width: 100vw;
	}
}
@media (min-width: 80em) {
	.content-panel {
		width: 33vw;
	}
	.hero-panel figcaption {
		width: calc(100% / 3);
	}
}

/* Single: Entry Details ------------------------------------- */

.entry-detail {
	margin-block-end: 0.75em;
}
.entry-detail:before {
	background-color: var(--opd--color--primary);
	content: '';
	display: block;
	height: 1px;
	width: 10em;
}
.entry-detail h3 {
	font-size: 0.75em;
	line-height: 1.25em;
	padding-block-start: 0.5em;
	text-transform: uppercase;
}
.entry-meta {
	font-size: 0.8125em;
	line-height: 1.5em;
}
.content-panel .entry-content {
	font-size: 0.8125em;
	margin-block-start: calc(var(--opd--margin--sm) / 2);
}
.margin-top {
	margin-block-start: calc(var(--opd--margin--sm) / 2);
	margin-block-end: 0 !important;
}

/* --------------------------------------------------------------
= 10. Entry Content
-------------------------------------------------------------- */

.entry-content {
	line-height: 1.5em;
}
.entry-content a {
	color: var(--opd--color--primary);
	text-decoration: underline;
	transition: color 300ms ease;
}
.entry-content a:hover {
	color: var(--opd--color--secondary);
}
.entry-content p,
.entry-content ul,
.entry-content dl,
.entry-content ol,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-bottom: var(--opd--block--gap);
}
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    padding-bottom: 1.2em;
    position: relative;
}
.entry-content > *:last-child {
    margin-bottom: 0;
}
.entry-content ul {
	list-style: disc outside;
	padding-left: var(--opd--block--gap);
}
.entry-content ul ul {
	list-style: circle outside;
	margin-bottom: 0;
	padding-left: var(--opd--block--gap);
}
.has-text-align-center {
	text-align: center;
}
.has-text-align-right {
	text-align: right;
}
.has-small-font-size {
	font-size: 0.75em;
	line-height: 1.5em;
}
.has-large-font-size {
	font-size: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem); /* 16px - 20px (320px - 1600px) */
	line-height: 1.5em;
}
.has-x-large-font-size {
	font-size: clamp(0.875rem, 0.7188rem + 0.7813vw, 1.5rem); /* 14px - 24px (320px - 1600px) */
	line-height: 1.5em;
}

/* --------------------------------------------------------------
= 11. Blocks
-------------------------------------------------------------- */

.entry-content .alignfull {
    max-width: calc(100% + var(--opd--gutter) * 2);
}
@media ( min-width: 48em ) {
    .entry-content > .alignwide,
    .entry-content > .alignleft,
    .entry-content > .alignright {
        max-width: 100%;
    }
    .entry-content > .aligncenter {
        max-width: 50%;
    }
}
@media ( min-width: 64em ) {
    .entry-content > .aligncenter > * {
        max-width: calc(100% / 3);
    }
    .entry-content > .alignleft,
    .entry-content > .alignright {
        max-width: 75%;
    }
    .entry-content > .alignleft {
        margin-right: 25% !important;
    }
    .entry-content > .alignright {
        margin-left: 25% !important;
    }
}

/* Block: Image  --------------------------------------------- */

.entry-content img {
	display: block;
	height: auto;
	max-width: 100%;
}
.entry-content > .wp-block-image {
    margin-bottom: var(--opd--block--gap) !important;
}
.entry-content .wp-block-image figcaption {
	line-height: 1.5em;
	padding: 5px 0 0;
}
@media ( min-width: 48em ) {
    .entry-content .wp-block-image figcaption {
        font-size: 0.75em;
    }	
}
@media ( min-width: 64em ) {
	.alignright figcaption {
		text-align: right;
	}
}

/* Block: Button --------------------------------------------- */

.wp-block-button {
    margin-bottom: var(--opd--block--gap);
}

/* Block: Columns -------------------------------------------- */

.entry-content > .wp-block-columns {
    padding-right: 0;
    padding-left: 0;
}
.entry-content > .wp-block-columns > .wp-block-column {
    margin-bottom: var(--opd--block--gap);
    padding: 0 var(--opd--margin--sm);
}
@media ( min-width: 48em ) {
    .entry-content > .wp-block-columns {
        margin-bottom: var(--opd--block--gap);
    }
    .entry-content > .wp-block-columns > .wp-block-column {
        margin-bottom: 0;
    }
}

/* Block: Embed ---------------------------------------------- */

.wp-block-embed,
.wp-block-video {
    margin-bottom: var(--opd--block--gap) !important;
}
.wp-block-video audio,
.wp-block-video video,
.wp-block-embed iframe {
	width: 100%;
}
.wp-block-embed .wp-block-embed__wrapper {
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
}
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper {
	padding-bottom: 75%; /* 4:3 */
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	padding-bottom: 56.25%; /* 16:9 */
}
.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
	padding-bottom:  41.5625%; /* 21:9 */
}
.wp-block-embed .wp-block-embed__wrapper iframe {
	inset: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}
@media ( min-width: 48em ) {
	.wp-block-embed,
	.wp-block-video {
		width: 75%;
	}
}
@media ( min-width: 64em ) {
	.wp-block-embed,
	.wp-block-video {
		width: 50%;
	}
}

/* --------------------------------------------------------------
= 12. Site Footer
-------------------------------------------------------------- */

/* Footer: Page ---------------------------------------------- */

#page-footer {
	position: relative;
	z-index: 2;
}
#page-footer .logo .fill {
	fill: var(--opd--color--primary)!important;
}
.footer--inner {
	border-top: 1px solid var(--opd--color--primary);
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	gap: var(--opd--margin--sm);
	padding-block: var(--opd--margin--sm);
}
.footer--site-title img,
.footer--site-title .logo-footer {
	height: auto;
	max-width: 250px;
	width: 100%;
}
.footer--social {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: .8em;
	justify-content: center;
	margin-block-end: var(--opd--margin--sm);
}
.footer--social .icon.email {
	height: 17px;
	width: auto;
}
.footer--social .icon.linkedin,
.footer--social .icon.instagram,
.footer--social .icon.facebook,
.footer--social .icon.pinterest {
	height: 20px;
	width: auto;
}
.footer--copyright {
	font-size: 0.75em;
	font-weight: 400;
}
@media ( min-width: 48em ) {
	.footer--inner {
		align-items: initial;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-between;
	}
	.footer--site-meta {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.footer--copyright {
		text-align: right;
	}
	.footer--social {
		justify-content: flex-end;
	}
}

/* Footer: Single -------------------------------------------- */

#entry-footer {
	background-color: var(--opd--color--menu);
	max-width: 768px;
	overflow-y: auto;
	padding-inline: var(--opd--margin--sm);
	padding-block-start: calc(var(--opd--margin--sm) * 2);
	padding-block-end: var(--opd--margin--sm);
	width: 100vh
}
@media ( min-width: 48em ) {
	#entry-footer {
		padding-inline-start: var(--opd--margin--lg);
	}
}

/* --------------------------------------------------------------
= 13. Transitions
-------------------------------------------------------------- */

html {
	background-color: var(--opd--color--secondary);
}
body {
	opacity: 0;
	transition: opacity 500ms ease;
}
body.page--loaded {
	opacity: 1;
}
.fade {
	opacity: 0;
	transition: opacity 500ms ease;
}
.fade.in {
	opacity: 1;
}
.dly-1 { transition-delay: 200ms }
.dly-2 { transition-delay: 400ms }
.dly-3 { transition-delay: 600ms }
.dly-4 { transition-delay: 800ms }
.dly-5 { transition-delay: 1000ms }
.dly-6 { transition-delay: 1200ms }
.dly-7 { transition-delay: 1400ms }
.dly-8 { transition-delay: 1600ms }
.dly-9 { transition-delay: 1800ms }
.dly-10 { transition-delay: 2000ms }

/* --------------------------------------------------------------
= 14. Accessibility
-------------------------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}