/**
 * RM Our Team – front-end styles.
 * Branding pulled from https://1286250.us31.myftpupload.com/dr-koffie/
 */

:root {
	--rm-navy: #09345e;          /* headings / dark sections */
	--rm-cyan: #00b7e2;          /* accent / outline buttons */
	--rm-blue: #1e73be;          /* solid button */
	--rm-cyan-light: #4cc3e4;    /* button border accent */
	--rm-bg-light-blue: #e4f3f7; /* light section background */
	--rm-bg-gray: #f4f4f4;
	--rm-white: #ffffff;
	--rm-text: #000000;
	--rm-font-heading: "Lato", sans-serif;
	--rm-font-body: "Poppins", sans-serif;
	--rm-card-overlay: rgba(9, 52, 94, 0.88);
}

/* ---------- Layout primitives ---------- */

.rm-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.rm-section {
	position: relative;
	padding: 60px 0;
	font-family: var(--rm-font-body);
	color: var(--rm-text);
}

.rm-section--has-bg-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rm-section__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rm-section > .rm-container,
.rm-section > .rm-cta__inner {
	position: relative;
	z-index: 1;
}

.rm-align-left { text-align: left; }
.rm-align-center { text-align: center; }
.rm-align-right { text-align: right; }

.rm-section__heading,
.rm-hero__title,
.rm-cta__heading,
.rm-clientele__heading,
.rm-team-archive__heading,
.rm-team-card__name {
	font-family: var(--rm-font-heading);
	color: var(--rm-navy);
	line-height: 1.2;
	margin: 0 0 20px;
}

.rm-richtext { line-height: 1.7; }
.rm-richtext img { max-width: 100%; height: auto; }

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

.rm-btn {
	display: inline-block;
	padding: 12px 28px;
	font-family: var(--rm-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	border: 2px solid transparent;
}

.rm-btn--solid {
	background-color: var(--rm-blue);
	border-color: var(--rm-cyan-light);
	color: var(--rm-white);
}

.rm-btn--solid:hover {
	background-color: var(--rm-navy);
	color: var(--rm-white);
}

.rm-btn--outline {
	background-color: transparent;
	border-color: var(--rm-cyan);
	color: var(--rm-cyan);
}

.rm-btn--outline:hover {
	background-color: var(--rm-cyan);
	color: var(--rm-white);
}

.rm-btn--outline-light {
	background-color: transparent;
	border-color: var(--rm-white);
	color: var(--rm-white);
}

.rm-btn--outline-light:hover {
	background-color: var(--rm-white);
	color: var(--rm-navy);
}

.rm-btn--text {
	background: none;
	border: none;
	padding: 12px 0;
	color: var(--rm-cyan);
	text-transform: none;
}

.rm-btn--text:hover { color: var(--rm-navy); }

/* ---------- Archive: hero ---------- */

.rm-team-archive { font-family: var(--rm-font-body); }

.rm-team-archive__hero {
	background-color: var(--rm-bg-light-blue);
	padding: 70px 0;
	text-align: center;
}

.rm-team-archive__heading { font-size: 42px; }

.rm-team-archive__description {
	max-width: 760px;
	margin: 0 auto 24px;
	line-height: 1.7;
}

.rm-team-archive__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* ---------- Archive: filter ---------- */

.rm-team-filter {
	background-color: var(--rm-navy);
	padding: 22px 0;
}

.rm-team-filter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.rm-team-filter__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 160px;
	min-width: 150px;
}

.rm-team-filter__label {
	color: var(--rm-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.rm-team-filter__select {
	padding: 10px 12px;
	font-family: var(--rm-font-body);
	font-size: 14px;
	border: 1px solid var(--rm-cyan-light);
	background-color: var(--rm-white);
	color: var(--rm-text);
}

.rm-team-filter__reset {
	padding: 10px 20px;
	background: none;
	border: 2px solid var(--rm-cyan);
	color: var(--rm-cyan);
	font-family: var(--rm-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.rm-team-filter__reset:hover {
	background-color: var(--rm-cyan);
	color: var(--rm-white);
}

/* ---------- Archive: grid + cards ---------- */

.rm-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 30px;
	padding: 50px 0 20px;
	transition: opacity 0.2s ease;
}

.rm-team-grid.rm-is-loading { opacity: 0.4; }

.rm-team-grid__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 0;
}

.rm-team-card {
	background-color: var(--rm-white);
	box-shadow: 0 4px 18px rgba(9, 52, 94, 0.1);
}

.rm-team-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 3.4;
	background-color: var(--rm-bg-gray);
}

.rm-team-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.rm-team-card:hover .rm-team-card__media img { transform: scale(1.05); }

.rm-team-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	background-color: var(--rm-card-overlay);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rm-team-card:hover .rm-team-card__overlay,
.rm-team-card:focus-within .rm-team-card__overlay {
	opacity: 1;
}

.rm-team-card__overlay .rm-btn {
	font-size: 13px;
	padding: 10px 18px;
	text-align: center;
}

.rm-team-card__body { padding: 20px 22px 26px; }

.rm-team-card__name { font-size: 20px; margin-bottom: 6px; }

.rm-team-card__credentials { font-weight: 400; font-size: 16px; }

.rm-team-card__specialty {
	color: var(--rm-cyan);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.rm-team-card__description {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.rm-team-card__readmore {
	display: inline-block;
	margin-top: 14px;
	color: var(--rm-cyan);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease;
}

.rm-team-card__readmore:hover { color: var(--rm-navy); }

.rm-team-card__readmore-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.rm-team-card__readmore:hover .rm-team-card__readmore-arrow { transform: translateX(4px); }

/* Heading/description above the cards grid */

.rm-team-grid-intro {
	padding-top: 50px;
	text-align: center;
}

.rm-team-grid-intro__heading {
	font-family: var(--rm-font-heading);
	color: var(--rm-navy);
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.rm-team-grid-intro__description {
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.7;
}

.rm-team-grid-intro + .rm-team-grid { padding-top: 40px; }

/* ---------- Archive: pagination ---------- */

.rm-team-pagination { padding: 10px 0 60px; text-align: center; }
.rm-team-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 3px;
	color: var(--rm-navy);
	text-decoration: none;
	border: 1px solid var(--rm-bg-light-blue);
}
.rm-team-pagination .page-numbers.current,
.rm-team-pagination .page-numbers:hover {
	background-color: var(--rm-navy);
	color: var(--rm-white);
}

/* ---------- Single: hero ---------- */

.rm-hero {
	background-color: var(--rm-bg-light-blue);
	padding: 70px 0 50px;
}

.rm-hero__title { font-size: 42px; margin-bottom: 10px; }

.rm-hero__description {
	max-width: 820px;
	line-height: 1.7;
}

.rm-hero.rm-align-center .rm-hero__description { margin-left: auto; margin-right: auto; }
.rm-hero.rm-align-right .rm-hero__description { margin-left: auto; }

/* Breadcrumbs (archive hero + detail hero) */

.rm-breadcrumbs {
	font-size: 14px;
	color: var(--rm-navy);
	margin-bottom: 14px;
}

.rm-breadcrumbs a {
	color: var(--rm-cyan);
	text-decoration: none;
}

.rm-breadcrumbs a:hover { text-decoration: underline; }

.rm-breadcrumbs__sep { margin: 0 8px; opacity: 0.5; }

/* Standalone breadcrumbs shortcode: [rm_team_breadcrumbs] */
.rm-breadcrumbs--standalone {
	font-family: var(--rm-font-body);
	margin-bottom: 0;
}

/* Breadcrumbs section (Page Sections layout): slimmer default padding */
.rm-breadcrumbs-section { padding: 22px 0; }
.rm-breadcrumbs-section .rm-breadcrumbs { margin-bottom: 0; }

/* ---------- Single: content + media ---------- */

.rm-content-media__row {
	display: flex;
	align-items: center;
	gap: 50px;
}

.rm-content-media__row--image-right { flex-direction: row-reverse; }

.rm-content-media__image { flex: 0 0 44%; }

.rm-content-media__image img {
	width: 100%;
	height: auto;
	display: block;
}

.rm-content-media__content { flex: 1; }

.rm-content-media__extra { margin-top: 40px; }

/* ---------- Single: video ---------- */

.rm-video__wrap { margin-top: 30px; display: flex; }
.rm-video__wrap--left { justify-content: flex-start; }
.rm-video__wrap--center { justify-content: center; }
.rm-video__wrap--right { justify-content: flex-end; }

.rm-video__embed,
.rm-video__player {
	width: 100%;
	max-width: 860px;
}

.rm-video__embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	border: 0;
}

/* ---------- Single: two columns ---------- */

.rm-two-columns__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

.rm-two-columns__media { margin: 0 0 20px; }
.rm-two-columns__media img { width: 100%; height: auto; display: block; }

/* ---------- Single: CTA ---------- */

.rm-cta { padding: 0; }

.rm-cta__inner {
	background-size: cover;
	background-position: center;
	background-color: var(--rm-navy);
	padding: 90px 0;
}

.rm-cta__content { max-width: 560px; }

.rm-cta__subheading {
	color: var(--rm-cyan-light);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.rm-cta__heading {
	color: var(--rm-white);
	font-size: 36px;
}

.rm-cta__button { margin-top: 10px; }

/* CTA alignment follows the section's content alignment setting. */
.rm-cta.rm-align-center .rm-cta__content { margin-left: auto; margin-right: auto; }
.rm-cta.rm-align-right .rm-cta__content { margin-left: auto; }

/* ---------- Single: clientele carousel ---------- */

.rm-clientele__subheading {
	color: var(--rm-cyan);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.rm-clientele__carousel {
	overflow: hidden;
	margin-top: 40px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.rm-clientele__track {
	display: flex;
	align-items: center;
	gap: 70px;
	width: max-content;
	animation: rm-carousel-scroll var(--rm-carousel-duration, 30s) linear infinite;
}

.rm-clientele__carousel:hover .rm-clientele__track { animation-play-state: paused; }

.rm-clientele__item { flex: 0 0 auto; display: block; }

.rm-clientele__icon {
	max-height: 70px;
	width: auto;
	display: block;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.rm-clientele__item:hover .rm-clientele__icon {
	filter: none;
	opacity: 1;
}

@keyframes rm-carousel-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.rm-clientele__track { animation: none; }
}

/* ---------- Large screens (2K / 4K) ---------- */

@media (min-width: 1800px) {
	.rm-container { max-width: 1560px; }

	.rm-team-archive__hero { padding: 90px 0; }
	.rm-team-archive__heading { font-size: 50px; }
	.rm-team-archive__description { max-width: 900px; font-size: 18px; }

	.rm-hero__description { max-width: 1000px; }

	.rm-team-grid {
		grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
		gap: 36px;
	}
}

@media (min-width: 2400px) {
	.rm-container { max-width: 1920px; }

	.rm-team-archive__hero { padding: 110px 0; }
	.rm-team-archive__heading { font-size: 58px; }
	.rm-team-archive__description { max-width: 1060px; font-size: 20px; }

	.rm-team-grid {
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		gap: 42px;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.rm-content-media__row,
	.rm-content-media__row--image-right {
		flex-direction: column;
		gap: 30px;
	}

	.rm-content-media__image { flex-basis: auto; width: 100%; }

	.rm-two-columns__row { grid-template-columns: 1fr; gap: 40px; }

	.rm-team-archive__heading,
	.rm-hero__title { font-size: 32px; }

	.rm-cta__heading { font-size: 28px; }
}

@media (max-width: 600px) {
	.rm-section { padding: 40px 0; }

	.rm-team-filter__form { flex-direction: column; align-items: stretch; }

	.rm-team-filter__field { min-width: 0; }
}