/*
 Theme Name:   BEJS 2026
 Theme URI:    https://bejs.com
 Description:  Genesis child theme for Barry, Evans, Josephs & Snipes. Converted from the legacy static export of the Stockholm/qode + WPBakery site.
 Author:       Lawton Marketing Group
 Author URI:   https://lawtonmg.com
 Template:     genesis
 Version:      1.0.0
 License:      GPL-2.0-or-later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  bejs-2026
*/

/* ==========================================================================
   ABOUT THIS STYLESHEET

   Hand-authored replacement for ~850KB of Stockholm/qode + WPBakery vendor
   CSS. Every value below was read out of the original theme's generated
   stylesheets (style_dynamic.php, custom_css.php, stylesheet.min.css,
   responsive.min.css, js_composer.min.css) rather than eyeballed, so the
   rendering matches while the file stays readable.

   Page content keeps the original qode/WPBakery class names, so those are
   the selectors used here.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Typography
     4.  Layout: wrapper, containers, sections, grid
     5.  Header
     6.  Side drawer navigation
     7.  Banner
     8.  Content components
     9.  In-content sidebar
     10. Tabs
     11. Accordion
     12. Back to top
     13. Footer
     14. Icon fonts
     15. Responsive
     16. Accessibility & print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Brand — sage green primary, amber accent */
	--bejs-primary: #7e876d;
	--bejs-accent: #faaf3f;
	--bejs-h5: #838ea2;
	--bejs-body-text: #444444;
	--bejs-selection: #666666;
	--bejs-footer-bottom-bg: #434937;
	--bejs-drawer-bg: #393939;
	--bejs-drawer-muted: #8d8d8d;
	--bejs-title-border: #cccccc;
	--bejs-separator: #bababa;
	--bejs-button-blue: #004890;
	--bejs-back-to-top-bg: #d1d1d1;
	--bejs-back-to-top-bg-hover: #585858;
	--bejs-white: #ffffff;

	/* Type */
	--bejs-font-body: 'Rosario', sans-serif;
	--bejs-font-alt: 'Raleway', sans-serif;
	--bejs-font-accent: 'Crete Round', sans-serif;
	--bejs-font-footer-heading: 'Open Sans', sans-serif;

	/* Metrics */
	--bejs-measure: 1100px;
	--bejs-header-height: 100px;
	--bejs-header-height-sticky: 60px;
	--bejs-gutter: 15px;

	/* Motion */
	--bejs-ease: cubic-bezier(0.694, 0.0482, 0.335, 1);
	--bejs-transition: 0.3s ease-in-out;
}

/* ==========================================================================
   2. RESET & BASE
   Genesis ships almost no reset; the original relied on its own.
   ========================================================================== */

html {
	height: 100%;
	margin: 0;
}

/* NOTE: deliberately no global border-box reset. The original theme used the
   default content-box, and the ported layout depends on it — a global
   border-box shrinks the hamburger hit area (width + padding) and pulls the
   banner's 1px bottom border inside its 400px height, shifting the whole page.
   border-box is applied below only where the original applied it. */

/* The original theme's reset. It matters for content fidelity: without the
   list/table entries, browser default margins on <ol>/<ul> leak in and change
   the height of every list in the page content. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	outline: 0;
}

body {
	margin: 0;
	font-family: var(--bejs-font-body);
	font-size: 16px;
	/* 23px, not 24px: the theme's base line-height was never changed when the
	   font size was raised to 16px. Paragraphs override this to 24px below, so
	   the 23px only shows up on table cells, list items and inline text —
	   which is exactly how the legacy site rendered. */
	line-height: 23px;
	font-weight: 400;
	color: var(--bejs-body-text);
	background-color: var(--bejs-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}

img,
.wp-caption {
	max-width: 100%;
	height: auto;
}

a img {
	border: 0;
}

::selection {
	background: var(--bejs-selection);
	color: var(--bejs-white);
}

::-moz-selection {
	background: var(--bejs-selection);
	color: var(--bejs-white);
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	vertical-align: middle;
}

table th {
	border: 0;
	padding: 5px 7px;
	text-align: center;
}

table td {
	padding: 5px 10px;
	text-align: center;
}

.clearfix::before,
.clearfix::after {
	content: " ";
	display: table;
}

.clearfix::after {
	clear: both;
}

/* Genesis wrappers we do not use */
.site-inner,
.content-sidebar-wrap {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   3. TYPOGRAPHY
   Sizes/weights/colours from the original style_dynamic.php, with the
   custom_css.php padding tweaks folded in.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--bejs-font-body);
}

h1 {
	font-size: 64px;
	line-height: 1.3125em;
	letter-spacing: 4px;
	font-weight: 700;
	text-transform: uppercase;
	color: #5d5d5d;
}

h2,
h2 a {
	color: var(--bejs-primary);
}

h2 {
	font-size: 28px;
	line-height: 1.2em;
	letter-spacing: 2px;
	font-weight: 900;
	text-transform: none;
	padding-bottom: 20px;
}

h3,
h3 a {
	color: var(--bejs-primary);
}

h3 {
	font-size: 28px;
	line-height: 1.285714285714286em;
	font-style: normal;
	font-weight: 400;
	padding-bottom: 15px;
}

h4,
h4 a {
	color: var(--bejs-primary);
}

h4 {
	font-size: 20px;
	line-height: 1.538461538461538em;
	letter-spacing: 1px;
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	padding-bottom: 10px;
}

h5,
h5 a {
	color: var(--bejs-h5);
}

h5 {
	font-size: 17px;
	font-weight: bold;
	text-transform: none;
	padding-top: 15px;
	text-decoration: underline;
}

h6,
h6 a {
	font-family: var(--bejs-font-accent);
	font-size: 14px;
	line-height: 1.571428571428571em;
	font-style: italic;
	font-weight: 400;
	color: var(--bejs-primary);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	color: var(--bejs-accent);
}

p {
	margin: 10px 0;
	padding-bottom: 10px;
	font-size: 16px;
	line-height: 24px;
	color: var(--bejs-body-text);
}

a,
p a {
	color: var(--bejs-primary);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--bejs-transition);
}

a:hover,
p a:hover,
a:focus-visible {
	color: var(--bejs-accent);
}

ul {
	list-style-position: inside;
}

.content ul ul,
.content ol {
	padding: 0 0 0 15px;
}

strong,
b {
	font-weight: 700;
}

blockquote.with_background,
blockquote.with_border {
	padding: 14px 14px 14px 10px;
}

blockquote.with_border {
	border-left: 4px solid transparent;
}

blockquote h3,
blockquote > p {
	font-size: 20px;
	color: var(--bejs-accent);
}

.separator.normal {
	border-color: var(--bejs-separator);
}

/* Homepage lead paragraph */
.intro p {
	font-size: 20px;
}

/* Footer/contact address block */
.address {
	font-size: 15px;
	line-height: 24px;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrapper {
	position: relative;
	z-index: 1000;
	left: 0;
	background-color: var(--bejs-white);
	transition: left 0.33s var(--bejs-ease);
}

.wrapper_inner {
	width: 100%;
	overflow: hidden;
}

.content {
	position: relative;
	z-index: 100;
	margin-top: 0;
	background-color: var(--bejs-white);
}

.content.content_top_margin_none {
	margin-top: 0 !important;
}

/* No background here: the footer reuses .container, and painting it white
   would cover the footer's green. The original scoped the background to
   .content .container for exactly this reason. */
.container {
	position: relative;
	z-index: 100;
	width: 100%;
	padding: 0;
}

.content .container {
	background-color: var(--bejs-white);
}

.container_inner {
	width: var(--bejs-measure);
	margin: 0 auto;
}

.content .container .container_inner.default_template_holder,
.content .content_inner > .container > .container_inner.default_template_holder {
	padding-top: 44px;
}

/* Descendant, not child, combinators: Genesis inserts .site-inner and
   .content-sidebar-wrap between .content_inner and these wrappers. */
.content .full_width .full_width_inner {
	padding-top: 0;
}

.full_width {
	position: relative;
	z-index: 100;
	background-color: var(--bejs-white);
}

/* Sections ---------------------------------------------------------------- */

div.section {
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.grid_section .section_inner {
	position: relative;
	z-index: 20;
	width: var(--bejs-measure);
	margin: 0 auto;
}

div.column1 .grid_section .section_inner,
div.column2 .grid_section .section_inner {
	width: 100%;
}

.full_section_inner {
	position: relative;
	z-index: 20;
}

.section_inner_margin {
	margin-left: calc(-1 * var(--bejs-gutter));
	margin-right: calc(-1 * var(--bejs-gutter));
}

/* WPBakery rows & columns ------------------------------------------------- */

.vc_row {
	margin-left: calc(-1 * var(--bejs-gutter));
	margin-right: calc(-1 * var(--bejs-gutter));
}

.vc_row::before,
.vc_row::after {
	content: " ";
	display: table;
}

.vc_row::after {
	clear: both;
}

.wpb_row,
.wpb_content_element,
.wpb_button {
	margin-bottom: 0 !important;
}

[class^="vc_col-"],
[class*=" vc_col-"] {
	position: relative;
	min-height: 1px;
	padding-left: var(--bejs-gutter);
	padding-right: var(--bejs-gutter);
	box-sizing: border-box;
}

/* Must follow the .vc_col-* rule above, as it does in WPBakery: a column
   container carries no padding itself — its .vc_column-inner does. Reversing
   these two blocks shifts every column in by 15px. */
.vc_column_container {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.vc_column_container > .vc_column-inner {
	width: 100%;
	padding-left: var(--bejs-gutter);
	padding-right: var(--bejs-gutter);
	box-sizing: border-box;
}

.vc_column-inner::before,
.vc_column-inner::after {
	content: " ";
	display: table;
}

.vc_column-inner::after {
	clear: both;
}

.vc_col-xs-12 {
	width: 100%;
}

.vc_col-has-fill > .vc_column-inner {
	padding-top: 35px;
}

.vc_clearfix::before,
.vc_clearfix::after {
	content: " ";
	display: table;
}

.vc_clearfix::after {
	clear: both;
}

/* Legacy qode fixed-ratio columns (footer + in-content sidebar) ----------- */

.two_columns_50_50,
.two_columns_25_75 {
	width: 100%;
}

.two_columns_50_50 > .column1,
.two_columns_50_50 > .column2 {
	width: 50%;
	float: left;
}

.two_columns_50_50 > .column1 > .column_inner {
	padding: 0 10px 0 0;
}

.two_columns_50_50 > .column2 > .column_inner {
	padding: 0 0 0 10px;
}

.two_columns_25_75 > .column1 {
	width: 25%;
	float: left;
}

.two_columns_25_75 > .column1 > .column_inner {
	padding: 0 20px 0 0;
}

.two_columns_25_75 > .column2 {
	width: 75%;
	float: left;
}

.two_columns_25_75 > .column2 > .column_inner {
	padding: 0 0 0 20px;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

header.page_header {
	position: relative;
	z-index: 110;
	display: inline-block;
	width: 100%;
	margin: 0;
	vertical-align: middle;
	backface-visibility: hidden;
}

.header_inner_left {
	position: absolute;
	left: 0;
	top: 0;
}

.header_top_bottom_holder {
	position: relative;
}

.header_inner_right {
	position: relative;
	z-index: 110;
	float: right;
}

.header_bottom {
	position: relative;
	padding: 0 45px;
	background-color: var(--bejs-white);
	transition: all 0.2s ease 0s;
}

.header_bottom .container_inner {
	position: relative;
}

/* The logo keeps its natural height, vertically centred in the bar — the
   original sized it in JS from the image's intrinsic height (77px for the
   current logo), capped at the bar height. main.js does the same; the 77px
   below is the pre-JS fallback so there is no reflow on load. */
.logo_wrapper {
	display: flex;
	align-items: center;
	height: var(--bejs-header-height);
	float: left;
}

.q_logo {
	position: relative;
	left: 0;
}

.q_logo a {
	position: relative;
	display: block;
	height: 77px;
}

/* The four logo variants stack, with opacity switching between them. */
.q_logo img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: auto !important;
	max-width: none;
	height: 100%;
	opacity: 1;
	transition: opacity 0.6s ease-in-out;
}

.q_logo img.light,
.q_logo img.sticky,
.q_logo img.dark {
	opacity: 0;
}

/* Sticky state — JS adds .sticky, then .sticky_animate one frame later so
   the slide-down transition runs. */
header.page_header.sticky {
	position: fixed;
	top: -120px;
	left: 0;
	transition: all 0.33s var(--bejs-ease);
}

header.page_header.sticky.sticky_animate {
	top: 0;
}

header.sticky .header_bottom {
	background-color: var(--bejs-white) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11);
}

header.sticky .logo_wrapper {
	height: var(--bejs-header-height-sticky) !important;
	float: left;
}

header.sticky .q_logo img.sticky {
	opacity: 1;
}

header.sticky .q_logo img.normal,
header.sticky .q_logo img.light,
header.sticky .q_logo img.dark {
	opacity: 0 !important;
}

header.sticky .side_menu_button {
	height: var(--bejs-header-height-sticky);
}

/* Hamburger -------------------------------------------------------------- */

.side_menu_button_wrapper {
	display: table;
}

.side_menu_button {
	display: table-cell;
	height: var(--bejs-header-height);
	vertical-align: middle;
	cursor: pointer;
}

.side_menu_button > a {
	position: relative;
	display: inline;
	width: 20px;
	height: 20px;
	padding: 0 12px;
	color: var(--bejs-primary);
	transition: opacity 0.3s ease, color 0.3s ease;
}

/* custom_css.php bumped the hamburger to 38px. content-box is explicit here:
   the 24px is the glyph box and the 12px side padding sits outside it, giving
   the original 48px hit area. */
.side_menu_button > a.side_menu_button_link.large {
	display: inline-block;
	box-sizing: content-box;
	width: 24px;
	height: 34px;
	font-size: 38px;
	line-height: 34px;
}

.side_menu_button > a:hover,
.side_menu_button > a:focus-visible {
	color: var(--bejs-accent);
}

/* The original markup ships these navs empty — all navigation lives in the
   side drawer. Kept so the header layout matches. */
nav.main_menu,
nav.mobile_menu {
	display: none;
}

/* ==========================================================================
   6. SIDE DRAWER NAVIGATION
   210px content + 30px padding each side = 270px, parked off-canvas right.
   ========================================================================== */

.side_menu {
	position: fixed;
	top: 0;
	right: -270px;
	z-index: 90;
	width: 210px;
	height: 100%;
	min-height: 100%;
	padding: 30px;
	overflow-y: auto;
	background-color: var(--bejs-drawer-bg);
	visibility: hidden;
}

.side_menu .side-pad {
	padding-bottom: 20px;
}

.side_menu .widget {
	margin: 0 0 30px;
}

.side_menu h4,
.side_menu h5 {
	margin: 0 0 15px;
	font-size: 16px;
	font-style: normal;
	color: var(--bejs-white);
}

.side_menu a,
.side_menu li,
.side_menu span,
.side_menu p {
	color: var(--bejs-drawer-muted);
}

.side_menu .widget ul {
	list-style: none;
	margin: 0;
	padding-left: 15px;
}

.side_menu .widget li {
	position: relative;
	margin: 0 0 7px;
	font-family: var(--bejs-font-accent);
	font-size: 14px;
	font-style: italic;
	transition: color var(--bejs-transition);
}

.side_menu .widget li:last-child {
	margin: 0;
}

.side_menu .widget li a,
.side_menu .widget a {
	margin: 0;
	font-family: var(--bejs-font-body);
	font-size: 16px;
	font-style: normal;
	color: var(--bejs-white);
}

.side_menu .widget a:hover,
.side_menu .widget a:focus-visible,
.side_menu .widget li:hover > a {
	color: var(--bejs-accent);
}

.side_menu .widget ul ul {
	padding: 6px 0 0 10px;
}

.side_menu .widget ul li.menu-item-has-children {
	padding-right: 0;
	border-bottom: 0;
}

.side_menu .current-menu-item > a {
	color: var(--bejs-accent);
}

.side_menu a.close_side_menu {
	position: absolute;
	top: 29px;
	right: 25px;
	z-index: 1000;
	display: inline-block;
	width: 13px;
	height: 13px;
	line-height: 13px;
	background-image: url("assets/media/close_side_menu.png");
	background-repeat: no-repeat;
	transition: transform 0.5s ease;
}

.side_menu a.close_side_menu:hover {
	transform: rotate(180deg);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 160dppx) {
	.side_menu a.close_side_menu {
		background-image: url("assets/media/close_side_menu@2x.png");
		background-size: 13px 13px;
	}
}

/* Open state: the page slides left to reveal the drawer. */
.side_menu[style*="right: 0"],
body.right_side_menu_opened .side_menu {
	visibility: visible;
}

body.right_side_menu_opened .wrapper,
body.right_side_menu_opened .wrapper header.sticky {
	left: -270px;
}

body.right_side_menu_opened #back_to_top {
	display: none;
}

/* ==========================================================================
   7. BANNER
   400px image strip. The <h1> is present for structure but hidden, as on
   the legacy site (custom_css.php hid the inner span).
   ========================================================================== */

.title_outer {
	position: relative;
}

.title {
	position: relative;
	z-index: 101;
	display: block;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid var(--bejs-title-border);
}

.title.has_background {
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: cover !important;
	background-attachment: scroll;
}

.title img {
	display: block;
	position: relative;
	width: 100%;
}

.title .not_responsive {
	display: none;
}

.title_outer .has_background.title .title_holder {
	position: absolute;
	top: 0;
	display: block;
	left: 0;
	width: 100%;
	height: 100%;
}

.title_outer .has_background.title .title_holder .container {
	display: block;
	height: 100%;
	background-color: transparent;
}

.title_outer .has_background.title .title_holder .container_inner {
	display: table;
	height: 100%;
	padding: 0 !important;
}

.title_subtitle_holder {
	display: block;
	padding: 0;
	position: relative;
}

.title_outer .has_background.title .title_subtitle_holder {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}

.title_subtitle_holder_inner {
	position: relative;
}

.title h1 {
	display: inline-block;
	vertical-align: middle;
	word-break: break-word;
	font-size: 54px;
	line-height: 1.25em;
	color: var(--bejs-white);
}

.title_text_shadow .title h1 {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Hidden on the legacy site, but kept in the DOM for structure. */
.title_subtitle_holder_inner h1 span {
	display: none;
}

.subtitle {
	font-size: 42px;
	font-style: normal;
	font-family: var(--bejs-font-body);
}

/* ==========================================================================
   8. CONTENT COMPONENTS
   ========================================================================== */

.wpb_text_column .wpb_wrapper > :last-child,
.wpb_text_column p:last-child {
	margin-bottom: 0;
}

/* Spacer blocks carry their height inline. */
.vc_empty_space {
	clear: both;
	width: 100%;
	display: block;
	position: relative;
}

.vc_empty_space .vc_empty_space_inner {
	display: block;
}

/* Images ----------------------------------------------------------------- */

.wpb_single_image a {
	border: none;
	outline: 0;
}

.wpb_single_image img {
	height: auto;
	max-width: 100%;
	vertical-align: top;
}

.wpb_content_element.wpb_single_image img {
	vertical-align: middle;
}

.wpb_single_image .vc_single_image-wrapper {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border,
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border img {
	border-radius: 0;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border {
	padding: 6px;
}

.wpb_single_image.vc_align_center {
	text-align: center;
}

.wpb_single_image.vc_align_left {
	text-align: left;
}

/* Subtle brighten on hover, from custom_css.php */
.boxes {
	filter: brightness(100%);
}

.boxes:hover {
	filter: brightness(110%);
}

/* Team grid tiles */
.bio-tile img {
	padding-top: 15px;
}

/* Google Map ------------------------------------------------------------- */

.wpb_gmaps_widget .wpb_wrapper {
	background-color: #f7f7f7;
	padding: 5px;
}

.wpb_gmaps_widget .wpb_map_wraper iframe {
	display: block;
	width: 100%;
	margin-bottom: 0;
	padding: 0;
	border: none;
}

/* Video embed ------------------------------------------------------------ */

.wpb_video_widget .wpb_wrapper {
	position: relative;
}

.wpb_video_widget.vc_video-el-width-100 .wpb_wrapper {
	width: 100%;
}

.wpb_video_widget.vc_video-align-left .wpb_wrapper {
	float: left;
}

.wpb_video_widget .wpb_video_wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.wpb_video_widget .wpb_video_wrapper > div {
	position: static;
	padding-top: 0 !important;
}

.wpb_video_widget .wpb_wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* Buttons ---------------------------------------------------------------- */

.qbutton {
	display: inline-block;
	padding: 0 23px;
	height: 41px;
	line-height: 39px;
	font-family: var(--bejs-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--bejs-white);
	background-color: var(--bejs-primary);
	border: 1px solid var(--bejs-primary);
	transition: color var(--bejs-transition), background-color var(--bejs-transition),
		border-color var(--bejs-transition);
}

.qbutton:hover {
	color: var(--bejs-primary);
	background-color: transparent;
}

.qbutton.white {
	color: var(--bejs-button-blue);
	background-color: transparent;
	border-color: var(--bejs-button-blue);
}

.qbutton.white:hover {
	color: var(--bejs-white);
	background-color: var(--bejs-primary);
	border-color: var(--bejs-primary);
}

/* ==========================================================================
   9. IN-CONTENT SIDEBAR
   Section nav on the About Us and Our Focus subpages.
   ========================================================================== */

.container aside.sidebar {
	position: relative;
	z-index: 11;
}

aside.sidebar .widget {
	margin: 0 0 26px;
}

aside.sidebar .widget h4 {
	margin-bottom: 18px;
	padding: 12px 18px;
	letter-spacing: 1px;
	color: var(--bejs-white);
	background-color: var(--bejs-primary);
}

aside.sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding-left: 15px;
}

aside.sidebar .widget li {
	margin: 0 0 7px;
	color: var(--bejs-primary);
}

aside.sidebar .widget li:last-child {
	margin: 0;
}

aside.sidebar .widget a {
	font-size: 16px;
	font-style: normal;
	color: var(--bejs-primary);
	transition: color var(--bejs-transition);
}

aside.sidebar .widget a:hover,
aside.sidebar .widget a:focus-visible {
	color: var(--bejs-accent);
}

aside.sidebar .current-menu-item > a {
	color: var(--bejs-accent);
}

aside.sidebar .widget_nav_menu .sub-menu {
	margin-left: 5px;
	margin-top: 6px;
}

aside.sidebar .sub-menu a {
	color: var(--bejs-primary);
}

/* ==========================================================================
   10. TABS
   Used by the 12 team bio pages.
   ========================================================================== */

.q_tabs {
	display: block;
}

.q_tabs .tabs-nav {
	position: relative;
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.q_tabs .tabs-nav li {
	position: relative;
	display: inline-block;
	float: left;
	margin: 0 8px 0 0;
	overflow: hidden;
}

/* margin stays 0: custom_css.php asked for margin-bottom 10px via
   `ul.tabs-nav li a`, but the theme's own higher-specificity rule won. */
.q_tabs .tabs-nav li a {
	position: relative;
	display: block;
	height: 52px;
	line-height: 52px;
	margin: 0;
	padding: 0 20px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bejs-white);
	background-color: var(--bejs-separator);
	transition: color var(--bejs-transition), background-color var(--bejs-transition);
}

.q_tabs .tabs-nav li.active a,
.q_tabs .tabs-nav li a:hover,
.q_tabs .tabs-nav li a:focus-visible {
	background-color: var(--bejs-primary);
}

.q_tabs.horizontal.left {
	text-align: left;
}

.q_tabs.horizontal.left .tabs-nav li a:first-child {
	padding-left: 0;
}

.q_tabs.horizontal .tabs-container {
	padding-top: 10px;
	padding-bottom: 15px;
	text-align: left;
}

/* custom_css.php centred and fixed the width of the bio tab labels */
.tab-titles ul a {
	width: 100px;
	padding-left: 25px !important;
	text-align: center !important;
}

.q_tabs .tab-content[hidden] {
	display: none;
}

/* ==========================================================================
   11. ACCORDION
   Used by the three Our Focus pages. Single-open per section.
   ========================================================================== */

.q_accordion_holder {
	position: relative;
	display: block;
}

/* Header: a 58px bar with the circular +/- mark absolutely placed at its
   left, and the label indented past it. Geometry from the vendor theme. */
.q_accordion_holder.accordion h4.title-holder {
	position: relative;
	display: block;
	box-sizing: border-box;
	height: 58px;
	line-height: 58px;
	margin: 28px 0 0;
	padding: 0;
	cursor: pointer;
	user-select: none;
}

.q_accordion_holder.accordion h4.title-holder:first-child {
	margin: 0;
}

.q_accordion_holder.accordion h4.title-holder .accordion_mark {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 58px;
	height: 58px;
	background-color: transparent;
	border: 2px solid var(--bejs-primary);
	border-radius: 3em;
	box-sizing: border-box;
	transition: background-color var(--bejs-transition), border-color var(--bejs-transition);
}

.q_accordion_holder.accordion h4.title-holder.ui-state-active .accordion_mark,
.q_accordion_holder.accordion h4.title-holder:hover .accordion_mark {
	background-color: var(--bejs-primary);
}

.q_accordion_holder.accordion h4.title-holder .accordion_mark_icon {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 54px;
	text-align: center;
	font-size: 18px;
	color: var(--bejs-primary);
	transition: color var(--bejs-transition);
}

.q_accordion_holder.accordion h4.title-holder.ui-state-active .accordion_mark_icon,
.q_accordion_holder.accordion h4.title-holder:hover .accordion_mark_icon {
	color: var(--bejs-white);
}

/* The two glyphs stack and cross-fade. */
.q_accordion_holder.accordion h4.title-holder .accordion_mark_icon span {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 54px;
	transition: opacity var(--bejs-transition);
}

.accordion_mark_icon .icon_plus,
.accordion_mark_icon .icon_minus-06 {
	font-family: 'ElegantIcons';
	font-style: normal;
	font-weight: normal;
	speak: never;
	-webkit-font-smoothing: antialiased;
}

.accordion_mark_icon .icon_plus::before {
	content: "\4c";
}

.accordion_mark_icon .icon_minus-06::before {
	content: "\4b";
}

.q_accordion_holder.accordion h4.title-holder .accordion_mark_icon .icon_minus-06,
.q_accordion_holder.accordion h4.title-holder.ui-state-active .accordion_mark_icon .icon_plus,
.q_accordion_holder.accordion h4.title-holder:hover .accordion_mark_icon .icon_plus {
	opacity: 0;
}

.q_accordion_holder.accordion h4.title-holder.ui-state-active .accordion_mark_icon .icon_minus-06,
.q_accordion_holder.accordion h4.title-holder:hover .accordion_mark_icon .icon_minus-06 {
	opacity: 1;
}

/* Label sits to the right of the 58px mark and is vertically centred. */
.q_accordion_holder.accordion h4.title-holder span.tab-title {
	display: table;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 0 0 78px;
	line-height: normal;
	vertical-align: middle;
	color: inherit;
}

.q_accordion_holder.accordion h4.title-holder span.tab-title-inner {
	position: relative;
	display: table-cell;
	width: 100%;
	height: 100%;
	line-height: normal;
	vertical-align: middle;
	color: inherit;
}

.q_accordion_holder.accordion div.accordion_content {
	margin: 0;
	padding: 0 0 0 82px;
}

.q_accordion_holder.accordion div.accordion_content[hidden] {
	display: none;
}

.q_accordion_holder.accordion div.accordion_content_inner {
	display: block;
}

/* ==========================================================================
   12. BACK TO TOP
   ========================================================================== */

#back_to_top {
	position: fixed;
	right: 25px;
	bottom: 65px;
	z-index: 10000;
	height: auto;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bejs-transition);
}

#back_to_top.off {
	opacity: 0;
}

#back_to_top.on {
	opacity: 1;
	visibility: visible;
}

#back_to_top > span {
	display: block;
	width: 46px;
	height: 46px;
	line-height: 46px;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	color: var(--bejs-white);
	background-color: var(--bejs-back-to-top-bg);
	border: 1px solid transparent;
	transition: background-color var(--bejs-transition), color var(--bejs-transition),
		border-color var(--bejs-transition);
}

#back_to_top span span {
	display: block;
	line-height: inherit;
}

#back_to_top:hover > span,
#back_to_top:focus-visible > span {
	background-color: var(--bejs-back-to-top-bg-hover);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

footer {
	position: relative;
	z-index: 100;
	display: block;
	width: 100%;
	margin: 0 auto;
}

footer .container_inner {
	position: relative;
}

.footer_top_holder {
	display: block;
	background-color: var(--bejs-primary);
}

.footer_top {
	padding: 82px 0 76px;
}

.footer_top .widget {
	margin: 0 0 26px;
}

.footer_top .widget:last-child {
	margin: 0;
}

/* Keeps the global h4 padding-bottom: the original footer did not reset it. */
.footer_top .widget h4 {
	margin: 0 0 15px;
	font-family: var(--bejs-font-footer-heading);
	font-size: 14px;
	color: var(--bejs-white);
}

.footer_top,
.footer_top p,
.footer_top li,
.footer_top .textwidget,
.footer_top span:not(.q_social_icon_holder):not(.fa-stack):not(.social_icon) {
	font-size: 11px;
	line-height: 14px;
	color: var(--bejs-white);
}

.footer_top a {
	color: var(--bejs-white);
	word-wrap: break-word;
	text-decoration: underline;
}

.footer_top a:hover {
	color: var(--bejs-accent);
}

.footer_top ul {
	list-style: none;
}

/* .address keeps its own 15px/24px from section 3 — it is a div, so the
   footer's 11px/14px rule does not match it, exactly as on the legacy site. */

footer.footer_border_columns .qode_column {
	border-left: 1px solid var(--bejs-accent);
	box-sizing: border-box;
}

footer.footer_border_columns .qode_column:first-child {
	border: 0;
}

footer.footer_border_columns .qode_column > .column_inner {
	padding: 0 30px;
}

footer.footer_border_columns .qode_column:first-child > .column_inner {
	padding-left: 0;
}

footer.footer_border_columns .qode_column:last-child > .column_inner {
	padding-right: 0;
}

.footer_bottom_holder {
	display: block;
	background-color: var(--bejs-footer-bottom-bg);
}

.footer_bottom {
	display: table-cell;
	width: 1%;
	height: 65px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
}

.footer_bottom,
.footer_bottom p,
.footer_bottom .textwidget,
.footer_bottom span:not(.q_social_icon_holder):not(.fa-stack):not(.social_icon) {
	margin: 0;
	color: #bbbbbb;
}

.footer_bottom a {
	color: #eeeeee;
}

/* ==========================================================================
   14. ICON FONTS
   Only two glyphs are used: the hamburger (Font Awesome) and the
   back-to-top chevron (Elegant Icons). Minimal @font-face instead of the
   two full icon stylesheets.
   ========================================================================== */

@font-face {
	font-family: 'FontAwesome';
	src: url("assets/fonts/fontawesome-webfont.woff2") format("woff2"),
		url("assets/fonts/fontawesome-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'ElegantIcons';
	src: url("assets/fonts/ElegantIcons.woff") format("woff"),
		url("assets/fonts/ElegantIcons.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 'FontAwesome';
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.fa-bars::before {
	content: "\f0c9";
}

.arrow_carrot-up {
	display: inline-block;
	font-family: 'ElegantIcons';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	speak: never;
	-webkit-font-smoothing: antialiased;
}

.arrow_carrot-up::before {
	content: "\32";
}

/* ==========================================================================
   15. RESPONSIVE
   Breakpoints and widths taken from the original responsive.min.css.
   ========================================================================== */

@media only screen and (max-width: 1200px) {
	.container_inner,
	div.grid_section .section_inner {
		width: 950px;
	}
}

@media only screen and (max-width: 1000px) {
	.container_inner,
	div.grid_section .section_inner {
		width: 768px;
	}

	header.page_header,
	.header_inner_left {
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		margin: 0 !important;
		margin-bottom: 0;
		display: block;
	}

	.content {
		margin-bottom: 0 !important;
	}

	body .content {
		margin-top: 0 !important;
	}

	.header_bottom {
		background-color: var(--bejs-white);
	}

	.header_bottom .container_inner {
		width: auto;
	}

	header .q_logo img.normal {
		display: block !important;
		position: relative;
		margin: 0 auto;
		opacity: 1 !important;
	}

	header .q_logo img.light,
	header .q_logo img.dark,
	header .q_logo img.sticky {
		display: none !important;
	}

	.logo_wrapper {
		display: table;
		position: absolute;
		left: 50%;
		height: var(--bejs-header-height);
	}

	.q_logo {
		display: table-cell;
		position: relative;
		top: auto;
		vertical-align: middle;
	}

	.q_logo a {
		left: -50%;
		width: auto !important;
		height: 60px !important;
	}

	.q_logo img {
		top: 0;
		left: 0;
	}

	.side_menu_button {
		height: var(--bejs-header-height);
	}

	.title,
	.title.has_background {
		height: auto !important;
		padding: 0 !important;
		background: none !important;
	}

	.title .not_responsive {
		display: block;
	}

	.title h1 {
		font-size: 38px;
	}

	.title .title_holder {
		height: 100% !important;
		padding: 0 !important;
	}

	.content .container .container_inner.default_template_holder,
	.content .full_width .full_width_inner {
		padding: 44px 0 0 !important;
	}

	.q_tabs .tabs-nav li a {
		padding: 0 7px;
	}
}

/* WPBakery column floats only kick in from 768px up. */
@media (min-width: 768px) {
	.vc_col-sm-1,
	.vc_col-sm-2,
	.vc_col-sm-3,
	.vc_col-sm-4,
	.vc_col-sm-5,
	.vc_col-sm-6,
	.vc_col-sm-7,
	.vc_col-sm-8,
	.vc_col-sm-9,
	.vc_col-sm-10,
	.vc_col-sm-11,
	.vc_col-sm-12 {
		float: left;
	}

	.vc_col-sm-12 { width: 100%; }
	.vc_col-sm-11 { width: 91.66666667%; }
	.vc_col-sm-10 { width: 83.33333333%; }
	.vc_col-sm-9  { width: 75%; }
	.vc_col-sm-8  { width: 66.66666667%; }
	.vc_col-sm-7  { width: 58.33333333%; }
	.vc_col-sm-6  { width: 50%; }
	.vc_col-sm-5  { width: 41.66666667%; }
	.vc_col-sm-4  { width: 33.33333333%; }
	.vc_col-sm-3  { width: 25%; }
	.vc_col-sm-2  { width: 16.66666667%; }
	.vc_col-sm-1  { width: 8.33333333%; }
}

@media only screen and (max-width: 768px) {
	.container_inner,
	div.grid_section .section_inner {
		width: 600px;
	}

	.title h1 {
		font-size: 30px;
	}

	.q_tabs .tabs-nav li a {
		padding: 0 4px;
		font-size: 12px;
	}

	.content .full_width h2,
	.content .container_inner.default_template_holder h2 {
		font-size: 30px;
	}

	/* Homepage CTA centring from custom_css.php */
	.hp-button {
		left: 50% !important;
		right: 50% !important;
		margin-left: -85px !important;
	}

	.service-space {
		height: 5px !important;
	}
}

@media only screen and (max-width: 600px) {
	.container_inner,
	div.grid_section .section_inner,
	div.column1 .grid_section .section_inner,
	div.column2 .grid_section .section_inner {
		width: 420px;
	}

	.two_columns_50_50 .column1,
	.two_columns_50_50 .column2,
	.two_columns_25_75 .column1,
	.two_columns_25_75 .column2 {
		width: 100%;
	}

	.two_columns_50_50 .column1 .column_inner,
	.two_columns_50_50 .column2 .column_inner,
	.two_columns_25_75 .column1 .column_inner,
	.two_columns_25_75 .column2 .column_inner {
		padding: 0;
	}

	.q_tabs .tabs-nav {
		display: block;
	}

	.q_tabs .tabs-nav li {
		display: block;
		float: none;
		margin: 0 0 8px;
	}

	.q_tabs .tabs-nav li a {
		padding: 0 20px;
	}

	.tab-titles ul a {
		width: auto;
		padding-left: 20px !important;
	}

	.title h1 {
		float: none;
		font-size: 24px;
		letter-spacing: 2px;
	}

	.footer_top .two_columns_50_50 .column1 {
		margin: 0 0 25px;
	}

	footer .qode_column,
	footer.footer_border_columns .qode_column {
		border: 0;
		min-height: 0 !important;
	}

	footer.footer_border_columns .qode_column .column_inner {
		padding: 0;
	}

	.footer_bottom {
		height: auto !important;
		padding: 4% 0 !important;
	}

	.content .full_width h2,
	.content .container_inner.default_template_holder h2 {
		font-size: 26px;
	}

	.q_accordion_holder.accordion div.accordion_content {
		padding-left: 30px;
	}
}

@media only screen and (max-width: 480px) {
	.container_inner,
	div.grid_section .section_inner,
	div.column1 .grid_section .section_inner,
	div.column2 .grid_section .section_inner {
		width: 300px;
	}

	.header_bottom,
	footer .container_inner {
		padding: 0 25px;
	}

	footer .container_inner {
		width: auto;
	}

	.q_logo a {
		height: 60px !important;
	}

	.side_menu_button > a {
		padding: 0 0 0 5px;
	}

	.footer_top .column_inner > div {
		margin: 0 0 25px !important;
	}

	.footer_top .column_inner {
		border: 0;
	}

	.content .full_width h2,
	.content .container_inner.default_template_holder h2 {
		font-size: 22px;
	}
}

@media only screen and (max-width: 420px) {
	.header_bottom,
	footer .container_inner {
		padding: 0 15px;
	}
}

@media only screen and (max-width: 350px) {
	.container_inner,
	div.grid_section .section_inner,
	div.column1 .grid_section .section_inner,
	div.column2 .grid_section .section_inner {
		width: 95%;
	}

	.section_inner_margin {
		margin: 0;
	}
}

/* ==========================================================================
   16. ACCESSIBILITY & PRINT
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

:focus-visible {
	outline: 2px solid var(--bejs-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.side_menu,
	.side_menu_button_wrapper,
	#back_to_top {
		display: none !important;
	}

	.wrapper {
		left: 0 !important;
	}
}