/*
Theme Name: OnTrack HR
Theme URI: https://www.ontrackhrcoachingandconsulting.ca/
Description: GeneratePress child theme for OnTrack HR Coaching and Consulting. Visual system reproduced from the live site's measured computed styles (see reference/design-tokens.md).
Author: Genex Marketing
Template: generatepress
Version: 1.0.0
Text Domain: ontrackhr
*/

/* ==========================================================================
   Design tokens — measured from the live site, not from the theme it used.
   ========================================================================== */

:root {
	/* Brand */
	--ot-accent: #1ccdca;
	--ot-accent-hover: #17b3b0;

	/* Text */
	--ot-text: #494949;
	--ot-heading: #000000;
	--ot-menu-link: #252525;
	--ot-inverse: #ffffff;

	/* Surfaces */
	--ot-bg: #ffffff;
	--ot-bg-alt: #f5f5f5;
	--ot-bg-alt-2: #f8f8f8;

	/* Type */
	--ot-font-body: "Open Sans", Arial, Helvetica, sans-serif;
	--ot-font-head: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Layout */
	--ot-container: 1200px;
	--ot-gutter: 15px;
}

/* ==========================================================================
   Base type — body 14px / 26.04px, #494949
   ========================================================================== */

body {
	font-family: var(--ot-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.86;
	color: var(--ot-text);
	background-color: var(--ot-bg);
}

p {
	font-family: var(--ot-font-body);
	font-size: 14px;
	line-height: 1.86;
	color: var(--ot-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ot-font-head);
	color: var(--ot-heading);
}

h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	text-transform: capitalize;
}

h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ==========================================================================
   Layout — 1200px container with 15px gutters (1170px content box)
   ========================================================================== */

.grid-container,
.ot-container {
	max-width: var(--ot-container);
	padding-left: var(--ot-gutter);
	padding-right: var(--ot-gutter);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Navigation — Poppins 600 13px, lowercase, #252525
   ========================================================================== */

.main-navigation .main-nav ul li a {
	font-family: var(--ot-font-head);
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
	color: var(--ot-menu-link);
	text-transform: lowercase;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--ot-accent);
}

.site-logo img {
	width: 200px;
	height: auto;
}

/* ==========================================================================
   Primary button — .btn-theme on the original
   ========================================================================== */

.btn-theme,
.wp-block-button__link,
.gform_button {
	display: inline-block;
	font-family: var(--ot-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.86;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ot-inverse);
	background-color: var(--ot-accent);
	padding: 8px 24px;
	border: 1px solid transparent;
	border-radius: 30px;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.btn-theme:hover,
.wp-block-button__link:hover,
.gform_button:hover {
	background-color: var(--ot-accent-hover);
	color: var(--ot-inverse);
}

/* ==========================================================================
   Section heading block (was gva_block_heading)
   Title, then a short accent rule, then the description.
   ========================================================================== */

.ot-heading {
	margin-bottom: 30px;
}

.ot-heading__title {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 14px;
}

.ot-heading__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background-color: var(--ot-accent);
}

.ot-heading--center {
	text-align: center;
}

.ot-heading--center .ot-heading__title::after {
	left: 50%;
	transform: translateX(-50%);
}

.ot-heading__desc {
	margin: 0;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.ot-section {
	padding-top: 25px;
	padding-bottom: 25px;
}

.ot-section--large {
	padding-top: 80px;
	padding-bottom: 80px;
}

.ot-section--alt {
	background-color: var(--ot-bg-alt);
}

.ot-section--alt-2 {
	background-color: var(--ot-bg-alt-2);
}

/* ==========================================================================
   Responsive — original breaks at Bootstrap 3 widths
   ========================================================================== */

@media (max-width: 1024px) {
	.grid-container,
	.ot-container {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	h2 {
		font-size: 20px;
	}

	.ot-section--large {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* ==========================================================================
   Nav CTA — the "book an appointment" pill in the header
   ========================================================================== */

.main-navigation .main-nav ul li.ot-nav-cta > a {
	color: var(--ot-inverse);
	background-color: var(--ot-accent);
	border-radius: 30px;
	padding: 6px 22px;
	margin-left: 10px;
}

.main-navigation .main-nav ul li.ot-nav-cta > a:hover {
	background-color: var(--ot-accent-hover);
	color: var(--ot-inverse);
}

/* ==========================================================================
   Feature tabs (was gva_tabs_content)
   ========================================================================== */

.ot-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}

.ot-tabs__tab {
	font-family: var(--ot-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ot-text);
	background: transparent;
	border: 1px solid #dcdcdc;
	border-radius: 30px;
	padding: 8px 24px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ot-tabs__tab:hover,
.ot-tabs__tab.is-active {
	color: var(--ot-inverse);
	background-color: var(--ot-accent);
	border-color: var(--ot-accent);
}

.ot-tabs__panel {
	display: none;
	align-items: center;
	gap: 40px;
}

.ot-tabs__panel.is-active {
	display: flex;
}

.ot-tabs__media {
	flex: 1 1 50%;
}

.ot-tabs__media img {
	max-width: 100%;
	height: auto;
}

.ot-tabs__body {
	flex: 1 1 50%;
}

.ot-tabs__body h3 {
	color: var(--ot-heading);
	margin-bottom: 16px;
}

@media (max-width: 768px) {
	.ot-tabs__panel.is-active {
		display: block;
	}

	.ot-tabs__media {
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   Testimonials (was gva_testimonial)
   ========================================================================== */

.ot-testimonials__track {
	position: relative;
}

.ot-testimonials__item {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.ot-testimonials__item.is-active {
	display: block;
}

.ot-testimonials__quote p {
	font-size: 15px;
	font-style: italic;
	line-height: 1.9;
}

.ot-testimonials__cite {
	display: block;
	margin-top: 16px;
	font-style: normal;
}

.ot-testimonials__name {
	font-family: var(--ot-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ot-accent);
}

.ot-testimonials__role {
	display: block;
	font-size: 12px;
	color: var(--ot-text);
}

.ot-testimonials__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.ot-testimonials__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #d5d5d5;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.ot-testimonials__dot.is-active {
	background-color: var(--ot-accent);
}

/* ==========================================================================
   Contact card (was gva_contact_info)
   ========================================================================== */

.ot-contact-info {
	margin-top: 24px;
}

.ot-contact-info__photo img {
	max-width: 100%;
	height: auto;
	margin-bottom: 16px;
}

.ot-contact-info__phone,
.ot-contact-info__email {
	margin: 0 0 6px;
}

.ot-contact-info__email a {
	color: var(--ot-accent);
}

/* ==========================================================================
   Header — 91px tall, white, logo on the container's left edge,
   everything else ranged right. Geometry measured off the original.
   ========================================================================== */

.ot-header {
	background-color: var(--ot-bg);
	position: relative;
	z-index: 20;
}

.ot-header__inner {
	display: flex;
	align-items: center;
	min-height: 91px;
}

/* The original pins this outside the 1200 container, hard against the
   viewport's left edge, so the logo can still sit on the container line. */
.ot-header__toggle {
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ot-menu-link);
	cursor: pointer;
}

.ot-header__logo {
	line-height: 0;
}

.ot-header__logo img {
	width: 200px;
	height: auto;
}

.ot-header__nav {
	margin-left: auto;
}

.ot-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ot-menu a {
	font-family: var(--ot-font-head);
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
	color: var(--ot-menu-link);
	text-transform: lowercase;
	text-decoration: none;
}

.ot-menu a:hover,
.ot-menu .current-menu-item > a {
	color: var(--ot-accent);
}

.ot-menu .ot-nav-cta > a {
	color: var(--ot-inverse);
	background-color: var(--ot-accent);
	border-radius: 30px;
	padding: 8px 24px;
	margin-left: 13px;
}

.ot-menu .ot-nav-cta > a:hover {
	background-color: var(--ot-accent-hover);
	color: var(--ot-inverse);
}

.ot-header__aside {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: -4px;
	margin-right: 25px;
}

.ot-header__social {
	font-family: var(--ot-font-head);
	font-size: 13px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ot-menu-link);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.ot-header__social:hover,
.ot-header__search:hover {
	color: var(--ot-accent);
}

.ot-header__search {
	display: inline-flex;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ot-menu-link);
	cursor: pointer;
}

@media (max-width: 1024px) {
	.ot-header__toggle {
		left: 15px;
	}

	.ot-menu {
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.ot-header__nav {
		display: none;
	}

	.ot-header__nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ot-bg);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
		padding: 20px;
	}

	.ot-header__nav.is-open .ot-menu {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Footer — three columns on #252429 over a darker copyright bar
   ========================================================================== */

.ot-footer {
	background-color: #252429;
	color: #bbbbbb;
}

.ot-footer__main {
	padding-top: 70px;
	padding-bottom: 50px;
}

.ot-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}

.ot-footer__col {
	flex: 1 1 calc(33.333% - 24px);
}

.ot-footer__title {
	font-family: var(--ot-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--ot-inverse);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 22px;
}

.ot-footer p,
.ot-footer a {
	font-size: 14px;
	line-height: 1.86;
	color: #bbbbbb;
}

.ot-footer a {
	text-decoration: none;
}

.ot-footer a:hover {
	color: var(--ot-accent);
}

.ot-footer__contact {
	margin: 0 0 4px;
}

.ot-footer__cta {
	display: inline-block;
	margin-top: 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ot-inverse) !important;
	background-color: var(--ot-accent);
	border-radius: 30px;
	padding: 8px 24px;
}

.ot-footer__cta:hover {
	background-color: var(--ot-accent-hover);
}

.ot-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ot-footer__menu li {
	margin-bottom: 6px;
}

.ot-footer__bottom {
	background-color: #1f1e23;
	padding: 20px 0;
}

.ot-footer__bottom p {
	margin: 0;
	font-size: 13px;
}

@media (max-width: 768px) {
	.ot-footer__col {
		flex: 1 1 100%;
	}

	.ot-footer__main {
		padding-top: 45px;
	}
}

/* ==========================================================================
   Contact card social row
   ========================================================================== */

.ot-contact-info__social {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.ot-contact-info__social a {
	display: inline-flex;
	color: var(--ot-menu-link);
}

.ot-contact-info__social a:hover {
	color: var(--ot-accent);
}

/* ==========================================================================
   Blog — two-column grid, matching the original's gva_blogs_grid
   ========================================================================== */

.ot-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 35px;
}

.ot-blog-card {
	display: flex;
	flex-direction: column;
	background-color: var(--ot-bg);
}

.ot-blog-card__thumb img {
	width: 100%;
	height: auto;
}

.ot-blog-card__title {
	font-family: var(--ot-font-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	margin: 16px 0 10px;
	text-transform: none;
	letter-spacing: 0;
}

.ot-blog-card__title a {
	color: var(--ot-heading);
	text-decoration: none;
}

.ot-blog-card__title a:hover {
	color: var(--ot-accent);
}

.ot-blog-card__meta {
	font-size: 12px;
	color: #8a8a8a;
	margin-bottom: 10px;
}

.ot-blog-card__more {
	margin-top: auto;
	padding-top: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ot-accent);
	text-decoration: none;
}

.ot-single__title {
	font-size: 30px;
	text-transform: none;
}

.ot-single__meta {
	font-size: 12px;
	color: #8a8a8a;
	margin-bottom: 24px;
}

@media (max-width: 768px) {
	.ot-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Strip GeneratePress' content chrome.

   The original has no article container — sections run edge to edge straight
   under the header — so GP's wrapper padding/margins are zeroed out.
   ========================================================================== */

.site.grid-container,
.site-content,
.content-area,
.site-main,
.inside-article,
.entry-content {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.separate-containers .site-main,
.one-container .site-main,
.separate-containers .inside-article {
	margin: 0;
	padding: 0;
}

.entry-content > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Sections own their own rhythm, so no stray first/last-child spacing. */
.entry-content > section:first-child {
	margin-top: 0;
}

#content.site-content,
#page.site {
	padding: 0;
	margin: 0;
	max-width: none;
}

/* The original prints no page title above the content. */
.entry-header,
.page .entry-header {
	display: none;
}

/* ==========================================================================
   Section heights tuned to the original's measured row heights.
   ========================================================================== */

.gb-element-hero002 {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
}

.gb-element-kate001 {
	padding-top: 95px;
	padding-bottom: 95px;
}

.gb-element-test001 {
	padding-top: 112px;
	padding-bottom: 112px;
}

/* ==========================================================================
   Contact form — metrics measured off the original's Contact Form 7 markup,
   reproduced on Gravity Forms. Note the submit button is square here, unlike
   the pill-shaped .btn-theme CTAs elsewhere on the site.
   ========================================================================== */

.gform_wrapper .gform_fields {
	row-gap: 20px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper textarea {
	font-family: var(--ot-font-body);
	font-size: 14px;
	color: var(--ot-text);
	background-color: #f6f6f6;
	border: 0;
	border-radius: 0;
	width: 100%;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"] {
	height: 45px;
	padding: 0 15px;
}

.gform_wrapper textarea {
	height: 195px;
	padding: 10px 15px;
	resize: vertical;
}

.gform_wrapper ::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

/* Reserve the reCAPTCHA block's footprint so the column height matches the
   original. The widget itself needs site keys before it will render. */
.gform_wrapper .gform_footer {
	margin-top: 78px;
	padding: 0;
}

/* Contact Form 7 wrapped every field in a <p>, so the original form runs
   607px tall. Gravity Forms' markup is tighter; hold the same footprint so
   the Contact section keeps the original's height. */
.gform_wrapper {
	min-height: 607px;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button {
	font-family: var(--ot-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ot-inverse);
	background-color: var(--ot-accent);
	border: 0;
	border-radius: 0;
	padding: 10px 45px;
	height: 46px;
	width: auto;
}

.gform_wrapper .gform_footer input[type="submit"]:hover {
	background-color: var(--ot-accent-hover);
}

/* ==========================================================================
   Footer spacing — main 525px over a 62px copyright bar
   ========================================================================== */

.ot-footer__main {
	padding-top: 110px;
	padding-bottom: 111px;
}

.ot-footer__title {
	margin-bottom: 20px;
}

.ot-footer__bottom {
	padding: 15px 0;
}

@media (max-width: 768px) {
	.ot-footer__main {
		padding-top: 45px;
		padding-bottom: 45px;
	}
}

/* ==========================================================================
   Inner-page hero — 320px breadcrumb band. Front page has none.
   ========================================================================== */

.ot-page-hero {
	box-sizing: border-box;
	height: 320px;
	display: flex;
	align-items: center;
	padding: 10px 0;
	background-color: #f2f2f2;
	background-image: url(/wp-content/uploads/2015/12/highway-in-grand-teton-national-park-PZMRVBC-e1563206352422.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.ot-page-hero__crumb {
	font-family: var(--ot-font-body);
	font-size: 14px;
	color: #858585;
}

.ot-page-hero__crumb a {
	color: #858585;
	text-decoration: none;
}

.ot-page-hero__crumb a:hover {
	color: var(--ot-accent);
}

.ot-page-hero__sep {
	margin: 0 6px;
}

@media (max-width: 768px) {
	.ot-page-hero {
		height: 180px;
	}
}

/* ==========================================================================
   Off-canvas panel — the hamburger's target.
   Geometry from the original: 300px wide, slides from left: -300px to 0
   over 0.35s, close button sitting just outside the panel's right edge.
   ========================================================================== */

.ot-offcanvas {
	position: fixed;
	top: 0;
	left: -300px;
	width: 300px;
	height: 100vh;
	background-color: var(--ot-bg);
	z-index: 9999;
	visibility: hidden;
	overflow-y: auto;
	transition: left 0.35s ease, visibility 0.35s ease;
}

.ot-offcanvas.is-open {
	left: 0;
	visibility: visible;
}

.ot-offcanvas__inner {
	padding: 30px;
}

.ot-offcanvas__close {
	position: absolute;
	left: 100%;
	top: 0;
	width: 47px;
	height: 47px;
	font-size: 26px;
	line-height: 1;
	color: var(--ot-menu-link);
	background-color: var(--ot-bg);
	border: 0;
	cursor: pointer;
}

.ot-offcanvas__close:hover {
	color: var(--ot-accent);
}

.ot-offcanvas__widget {
	margin-bottom: 30px;
}

.ot-offcanvas__title {
	font-family: var(--ot-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ot-heading);
	margin: 0 0 20px;
}

.ot-offcanvas__widget p {
	margin: 0 0 6px;
}

.ot-offcanvas__info p {
	margin: 0 0 6px;
}

.ot-offcanvas__info a {
	color: var(--ot-text);
	text-decoration: none;
}

.ot-offcanvas__info a:hover {
	color: var(--ot-accent);
}

.ot-offcanvas-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.ot-offcanvas-overlay.is-open {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ot-offcanvas,
	.ot-offcanvas-overlay {
		transition: none;
	}
}

.ot-social {
	display: flex;
	gap: 10px;
	margin: 16px 0 0;
}

.ot-social a {
	display: inline-flex;
	color: var(--ot-menu-link);
}

.ot-social a:hover {
	color: var(--ot-accent);
}

/* ==========================================================================
   Layout corrections.

   The original's .container is border-box: 1200px total INCLUDING its 15px
   gutters, so it starts at x=120 in a 1440 viewport. Without this the box
   measures 1230 and starts at 105, dragging every column left.
   ========================================================================== */

.ot-container,
.grid-container {
	box-sizing: border-box;
}

.ot-container *,
.ot-container *::before,
.ot-container *::after {
	box-sizing: border-box;
}

/* Hero row: 1/3 empty gutter over the photo, text in the right 2/3.
   The original is Bootstrap, so the row pulls out by its 15px gutters and the
   columns divide the full 1200 — not the padded 1170. Reproduced here rather
   than relying on GenerateBlocks' generated CSS. */
.gb-element-hero002 {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding-left: 0;
	padding-right: 0;
}

.gb-element-hero003 {
	flex: 0 0 33.333%;
}

.gb-element-hero004 {
	flex: 0 0 66.666%;
	padding-left: 15px;
	padding-right: 15px;
}

@media (max-width: 768px) {
	.gb-element-hero002 {
		display: block;
	}

	.gb-element-hero004 {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Page section layout.

   These rules used to live inside GenerateBlocks block attributes. They were
   moved here so the page content can be plain core blocks — hand-written GB
   markup fails the editor's block validation, and "Attempt Recovery" strips it.
   The class names are unchanged, so the rendering is identical.
   ========================================================================== */

/* --- Home: boat hero --- */
.gb-element-hero001 {
	background-color: #f8f8f8;
	background-image: url(/wp-content/uploads/2019/07/boat_analogy-e1562354286604.jpg);
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: auto;
	padding-top: 25px;
	padding-bottom: 25px;
}

.gb-element-hero007 {
	text-align: center;
}

/* --- Home / Services: "What does ... do?" --- */
.gb-element-what001 {
	background-color: #f5f5f5;
	background-image: url(/wp-content/uploads/2019/07/background-01-1920x640-01.png);
	background-position: 10% 180%;
	background-repeat: no-repeat;
	background-size: auto;
}

.gb-element-what002 {
	padding-bottom: 20px;
}

.gb-text-what004,
.gb-text-svc004 {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Home: Meet Kate --- */
.gb-element-kate001,
.gb-element-cont001 {
	background-color: #fff;
}

.gb-element-kate002 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 30px;
}

.gb-element-kate003 {
	flex: 1 1 60%;
}

.gb-element-kate005 {
	flex: 1 1 33%;
}

.gb-media-kate004 img,
.gb-media-abt007 img,
.gb-media-abt021 img {
	max-width: 100%;
	height: auto;
}

.gb-text-kate007,
.gb-text-hero006 {
	margin-bottom: 30px;
}

/* --- Home: testimonials --- */
.gb-element-test002 {
	max-width: 800px;
}

/* --- Home / Contact: contact row --- */
.gb-element-cont005,
.gb-element-ctc005 {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
}

.gb-element-cont006,
.gb-element-ctc006 {
	flex: 1 1 60%;
}

.gb-element-cont007,
.gb-element-ctc007 {
	flex: 1 1 33%;
}

.gb-text-cont008,
.gb-text-ctc008 {
	margin-bottom: 24px;
}

/* --- About --- */
.gb-element-abt005,
.gb-element-abt011,
.gb-element-abt019 {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
}

.gb-element-abt005 {
	margin-top: 50px;
}

.gb-element-abt006 {
	flex: 1 1 30%;
	padding-right: 15px;
}

.gb-media-abt007 {
	margin-top: 25px;
	text-align: center;
}

.gb-element-abt008,
.gb-element-abt020 {
	flex: 1 1 63%;
}

.gb-element-abt012,
.gb-element-abt015 {
	flex: 1 1 45%;
}

.gb-element-abt019 {
	align-items: center;
}

.gb-element-abt022 {
	flex: 1 1 30%;
}

.gb-text-abt024 {
	margin-bottom: 30px;
}

.gb-element-abt018 {
	background-color: #f5f5f5;
}

/* --- Services --- */
.gb-element-svc005 {
	background-color: #f5f5f5;
}

.gb-element-svc006 {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
}

.gb-element-svc007 {
	flex: 1 1 47%;
	padding-top: 25px;
	padding-bottom: 25px;
}

.gb-element-svc009 {
	flex: 1 1 47%;
	background-color: #fff;
	padding: 25px;
}

@media (max-width: 768px) {
	.gb-element-kate002,
	.gb-element-cont005,
	.gb-element-ctc005,
	.gb-element-abt005,
	.gb-element-abt011,
	.gb-element-abt019,
	.gb-element-svc006 {
		display: block;
	}
}

/* ==========================================================================
   Core's group block wraps children in an extra .wp-block-group__inner-container.
   That wrapper would be the only flex item, leaving the real columns stacked
   inside it. display:contents removes the wrapper box so the columns become
   direct children of the row again.
   ========================================================================== */

.wp-block-group__inner-container {
	display: contents;
}