/* ==========================================================================
   Flexible template — Dr Jo Perkins 2026 redesign
   Design source: Figma "Dr Jo Perkins" / New Landing Page — Hi-Fi
   ========================================================================== */

:root {
	--flex-purple: #4e306c;
	--flex-purple-dark: #32234a;
	--flex-purple-soft: #b8a8c9;
	--flex-tint: #f4f1f7;
	--flex-chip: #e8e2f1;
	--flex-text: #3a3a3a;
	--flex-muted: #7a7580;
	--flex-line: #e5e0eb;
	--flex-card-line: #e4dfea;
	--flex-footer-bg: #1f1d1f;
	--flex-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.flex-page {
	margin: 0;
	background: #fff;
	color: var(--flex-text);
	font-family: var(--flex-font);
	font-size: 16.5px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.flex-page *,
.flex-page *::before,
.flex-page *::after { box-sizing: border-box; }

.flex-container {
	max-width: 1160px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* --------------------------------------------------------------------------
   Shared elements
   -------------------------------------------------------------------------- */

.flex-section { padding: 104px 0; }

.flex-bg--tint { background: var(--flex-tint); }
.flex-bg--white { background: #fff; }
.flex-bg--purple { background: var(--flex-purple); color: #fff; }

.flex-eyebrow {
	margin: 0 0 14px;
	color: var(--flex-purple);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.flex-heading {
	margin: 0 0 24px;
	font-size: 34px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--flex-text);
}

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

.flex-richtext p { margin: 0 0 22px; color: var(--flex-muted); }
.flex-richtext p:last-child { margin-bottom: 0; }
.flex-richtext a { color: var(--flex-purple); }
.flex-richtext hr {
	border: 0;
	border-top: 1px solid #d1c9db;
	margin: 22px 0;
}

.flex-btn {
	display: inline-block;
	padding: 15px 26px;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.flex-btn:hover { opacity: .85; }
.flex-btn--solid { background: var(--flex-purple); color: #fff; }
.flex-btn--white { background: #fff; color: var(--flex-purple); }
.flex-btn--outline-white { border: 1.5px solid #fff; color: #fff; }
.flex-btn--outline { border: 1px solid currentColor; color: inherit; }
.flex-btn--small { padding: 9px 18px; font-size: 12px; letter-spacing: 1px; }

.flex-text-link {
	color: var(--flex-purple);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-decoration: none;
}
.flex-text-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.flex-header {
	background: var(--flex-purple-dark);
	position: relative;
	z-index: 20;
}

.flex-page--overlay-header .flex-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.flex-header__inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 32px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.flex-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.flex-header__logo {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-image: url(../images/drjo-mark-white-260922.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 52% auto;
	text-indent: -9999px;
	overflow: hidden;
}

/* Larger brand treatment on the homepage bar */
.home .flex-header__logo {
	width: 54px;
	height: 54px;
	font-size: 19px;
}
.home .flex-header__name {
	font-size: 20px;
	letter-spacing: 3px;
}

.flex-header__name,
.flex-footer__name {
	color: #fff;
	font-size: 15px;
	letter-spacing: 2px;
}

.flex-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
}
.flex-header__nav .flex-btn--outline { color: #fff; border-color: #fff; }

.flex-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.flex-header__menu li { margin: 0; }
.flex-header__menu a {
	color: #fff;
	font-size: 15px;
	text-decoration: none;
}
.flex-header__menu a:hover { opacity: .8; }

/* Dropdown (e.g. Services) */
.flex-header__menu li.menu-item-has-children { position: relative; }
.flex-header__menu li.menu-item-has-children > a::after {
	content: ' \25BE';
	font-size: 11px;
}
.flex-header__menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 250px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: var(--flex-purple-dark);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
	z-index: 30;
}
.flex-header__menu li:hover > .sub-menu,
.flex-header__menu li:focus-within > .sub-menu { display: block; }
.flex-header__menu .sub-menu::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}
.flex-header__menu .sub-menu li { padding: 0; }
.flex-header__menu .sub-menu a {
	display: block;
	padding: 8px 22px;
	white-space: nowrap;
	font-size: 14px;
}

.flex-header__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.flex-header__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	margin: 5px 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Hero height is its design height, capped to the space left in the viewport
   below the header so the bottom-aligned text never falls below the fold on
   short screens. Content can still grow it if the text needs more room.
   --flex-hero-offset is the height of an in-flow header above the hero. */
.flex-hero {
	--flex-hero-max: 820px;
	--flex-hero-offset: 100px;
	position: relative;
	min-height: min(var(--flex-hero-max), calc(100vh - var(--flex-hero-offset)));
	min-height: min(var(--flex-hero-max), calc(100svh - var(--flex-hero-offset)));
	display: flex;
	align-items: flex-end;
	background-color: var(--flex-purple-dark);
	background-size: cover;
	background-position: center top;
}

/* Overlay header sits on top of the hero, so it takes no space from it. */
.flex-page--overlay-header .flex-hero { --flex-hero-offset: 0px; }

.home .flex-hero {
	min-height: 100vh;
	min-height: 100svh;
}

.flex-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 35%),
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%);
}

.flex-hero__inner {
	position: relative;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 52px;
}

.flex-hero__eyebrow {
	margin: 0 0 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.flex-hero__heading {
	margin: 0 0 24px;
	max-width: 820px;
	color: #fff;
	font-size: 66px;
	font-weight: 300;
	line-height: 72px;
	letter-spacing: 1px;
}

.flex-hero__sub {
	margin: 0 0 26px;
	color: #ebe5f0;
	font-size: 18px;
}

/* --------------------------------------------------------------------------
   Logo strip
   -------------------------------------------------------------------------- */

.flex-logo-strip { padding: 64px 0; }

.flex-logo-strip__text {
	margin: 0 0 34px;
	text-align: center;
	color: var(--flex-muted);
	font-size: 16px;
}

.flex-logo-strip__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 28px 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flex-logo-strip__logos li {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-logo-strip__logos img {
	display: block;
	width: auto;
	height: 64px;
	max-width: 180px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Media + text
   -------------------------------------------------------------------------- */

.flex-media-text__row {
	display: flex;
	align-items: center;
	gap: 72px;
}

.flex-media-text--img-right .flex-media-text__row { flex-direction: row-reverse; }

.flex-media-text__media { flex: 0 0 460px; }
.flex-media-text__media img {
	width: 100%;
	height: 560px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

.flex-media-text__copy { flex: 1; }
.flex-media-text__copy .flex-heading { font-size: 34px; line-height: 44px; }
.flex-media-text__copy .flex-btn { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Statement (dark centered)
   -------------------------------------------------------------------------- */

.flex-statement { background: var(--flex-purple-dark); }

.flex-statement__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.flex-statement__heading {
	margin: 0 0 28px;
	color: #fff;
	font-size: 38px;
	font-weight: 300;
	line-height: 46px;
}

.flex-statement__text p { margin: 0 0 16px; color: #dbd4e5; font-size: 16.5px; line-height: 29px; }
.flex-statement__text p:last-child { margin: 0; }

.flex-statement__divider {
	width: 120px;
	height: 1px;
	margin: 28px auto;
	background: rgba(255, 255, 255, .4);
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.flex-card-grid__cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	padding-top: 28px;
}

.flex-card {
	background: #fff;
	border: 1px solid var(--flex-card-line);
	border-radius: 10px;
	padding: 28px 24px 30px;
}

.flex-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--flex-purple);
	color: #fff;
	font-size: 20px;
	line-height: 1;
}

.flex-card__title { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.flex-card__title a { color: inherit; text-decoration: none; }
.flex-card__text { margin: 0; color: var(--flex-muted); font-size: 14px; line-height: 22px; }

/* --------------------------------------------------------------------------
   Tag list
   -------------------------------------------------------------------------- */

.flex-tag-list { padding: 96px 0; }

.flex-tag-list__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.flex-chip {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 100px;
	background: var(--flex-chip);
	color: var(--flex-purple);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Centered text
   -------------------------------------------------------------------------- */

.flex-centered-text__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.flex-centered-text .flex-richtext { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   Text block
   -------------------------------------------------------------------------- */

.flex-text-block__body { max-width: 860px; padding-top: 16px; }

/* --------------------------------------------------------------------------
   Numbered list
   -------------------------------------------------------------------------- */

.flex-numbered-list .flex-heading { margin-bottom: 40px; }

.flex-numbered-list__row {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 32px 0;
	border-top: 1px solid var(--flex-line);
}
.flex-numbered-list__row:first-child { border-top: 0; }

.flex-numbered-list__num {
	flex: 0 0 46px;
	color: var(--flex-purple-soft);
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
}

.flex-numbered-list__mid { flex: 1; }
.flex-numbered-list__mid h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; }
.flex-numbered-list__mid p { margin: 0; color: var(--flex-muted); font-size: 15.5px; line-height: 25px; }

.flex-numbered-list__row .flex-text-link { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Latest posts
   -------------------------------------------------------------------------- */

.flex-latest-posts__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.flex-latest-posts__head .flex-heading { margin-bottom: 0; }

.flex-latest-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.flex-post-card {
	display: block;
	background: #fff;
	border: 1px solid var(--flex-line);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
}

.flex-post-card__thumb {
	height: 210px;
	padding: 20px;
	background-image: linear-gradient(90deg, #4f2e70 0%, #8f78ab 100%);
	background-size: cover;
	background-position: center;
}

.flex-post-card__tag {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 100px;
	background: #fff;
	color: var(--flex-purple);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
}

.flex-post-card__body { padding: 26px 26px 30px; }
.flex-post-card__body h3 { margin: 0 0 12px; color: var(--flex-text); font-size: 19px; font-weight: 600; line-height: 26px; }
.flex-post-card__body p { margin: 0; color: var(--flex-muted); font-size: 13px; }

/* --------------------------------------------------------------------------
   Credentials
   -------------------------------------------------------------------------- */

.flex-credentials__row {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.flex-credentials__copy { flex: 1; }

.flex-credentials__copy--sticky {
	position: sticky;
	top: 40px;
	align-self: flex-start;
}

.flex-credentials__cards {
	flex: 0 0 420px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.flex-credentials__card {
	background: var(--flex-tint);
	border: 1px solid var(--flex-line);
	border-left: 3px solid var(--flex-purple);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(77, 61, 92, .06);
	padding: 16px 22px 18px;
}

/* Cards flip to white wherever the section itself is tinted or purple. */
.flex-credentials.flex-bg--tint .flex-credentials__card,
.flex-credentials.flex-bg--purple .flex-credentials__card { background: #fff; }

.flex-credentials__label {
	display: block;
	margin-bottom: 7px;
	color: var(--flex-purple);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.5px;
}

.flex-credentials__value {
	display: block;
	color: var(--flex-text);
	font-size: 15px;
	line-height: 22px;
}

/* Deep purple variant — cards stay light, copy flips to white. */
.flex-credentials.flex-bg--purple .flex-eyebrow { color: var(--flex-purple-soft); }
.flex-credentials.flex-bg--purple .flex-heading,
.flex-credentials.flex-bg--purple .flex-richtext,
.flex-credentials.flex-bg--purple .flex-richtext p,
.flex-credentials.flex-bg--purple .flex-richtext li,
.flex-credentials.flex-bg--purple .flex-richtext strong,
.flex-credentials.flex-bg--purple .flex-richtext a { color: #fff; }
.flex-credentials.flex-bg--purple .flex-credentials__card {
	border-color: rgba(255, 255, 255, .14);
	border-left-color: var(--flex-purple-soft);
	box-shadow: none;
}

/* Manual overrides — set per block in the editor, these beat the auto rules above. */

/* Section copy colour */
.flex-credentials--text-white .flex-eyebrow { color: var(--flex-purple-soft); }
.flex-credentials--text-white .flex-heading,
.flex-credentials--text-white .flex-richtext,
.flex-credentials--text-white .flex-richtext p,
.flex-credentials--text-white .flex-richtext a,
.flex-credentials--text-white .flex-richtext strong,
.flex-credentials--text-white .flex-richtext li { color: #fff; }
.flex-credentials--text-white .flex-richtext a { text-decoration-color: rgba(255, 255, 255, .5); }

.flex-credentials--text-dark .flex-eyebrow { color: var(--flex-purple); }
.flex-credentials--text-dark .flex-heading,
.flex-credentials--text-dark .flex-richtext,
.flex-credentials--text-dark .flex-richtext p,
.flex-credentials--text-dark .flex-richtext a,
.flex-credentials--text-dark .flex-richtext strong,
.flex-credentials--text-dark .flex-richtext li { color: var(--flex-text); }

/* Card background */
.flex-credentials.flex-credentials--cardbg-white .flex-credentials__card { background: #fff; }
.flex-credentials.flex-credentials--cardbg-tint .flex-credentials__card { background: var(--flex-tint); }
.flex-credentials.flex-credentials--cardbg-purple .flex-credentials__card {
	background: var(--flex-purple);
	border-color: rgba(255, 255, 255, .18);
	border-left-color: var(--flex-purple-soft);
	box-shadow: none;
}
.flex-credentials.flex-credentials--cardbg-transparent .flex-credentials__card {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	border-left-color: var(--flex-purple-soft);
	box-shadow: none;
}
.flex-credentials.flex-bg--white.flex-credentials--cardbg-transparent .flex-credentials__card,
.flex-credentials.flex-bg--tint.flex-credentials--cardbg-transparent .flex-credentials__card {
	border-color: var(--flex-line);
	border-left-color: var(--flex-purple);
}

/* Card text colour */
.flex-credentials.flex-credentials--cardtext-white .flex-credentials__label { color: var(--flex-purple-soft); }
.flex-credentials.flex-credentials--cardtext-white .flex-credentials__value { color: #fff; }
.flex-credentials.flex-credentials--cardtext-dark .flex-credentials__label { color: var(--flex-purple); }
.flex-credentials.flex-credentials--cardtext-dark .flex-credentials__value { color: var(--flex-text); }

/* Purple or transparent cards default to white text unless told otherwise. */
.flex-credentials.flex-credentials--cardbg-purple:not(.flex-credentials--cardtext-dark) .flex-credentials__label { color: var(--flex-purple-soft); }
.flex-credentials.flex-credentials--cardbg-purple:not(.flex-credentials--cardtext-dark) .flex-credentials__value { color: #fff; }
.flex-credentials.flex-bg--purple.flex-credentials--cardbg-transparent:not(.flex-credentials--cardtext-dark) .flex-credentials__label { color: var(--flex-purple-soft); }
.flex-credentials.flex-bg--purple.flex-credentials--cardbg-transparent:not(.flex-credentials--cardtext-dark) .flex-credentials__value { color: #fff; }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.flex-cta { background: var(--flex-purple); }

.flex-cta__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.flex-cta__heading {
	margin: 0 0 26px;
	color: #fff;
	font-size: 42px;
	font-weight: 300;
	line-height: 1.3;
}

.flex-cta__text {
	max-width: 620px;
	margin: 0 auto 26px;
	color: #d9d1e5;
	font-size: 17px;
	line-height: 27px;
}

/* --------------------------------------------------------------------------
   Video, form, columns
   -------------------------------------------------------------------------- */

.flex-video__player,
.flex-video__embed { width: 100%; border-radius: 6px; overflow: hidden; display: block; }
.flex-video__embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }

.flex-form__inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
.flex-form__body { text-align: left; }
.flex-form input[type="text"],
.flex-form input[type="email"],
.flex-form input[type="tel"],
.flex-form textarea {
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 16px;
	border: 1px solid var(--flex-line);
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
}
.flex-form input[type="submit"] {
	background: var(--flex-purple);
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 15px 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.flex-columns__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	text-align: center;
}
.flex-columns__col h3 { margin: 0 0 14px; font-size: 20px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.flex-footer {
	background: var(--flex-footer-bg);
	padding: 56px 0 48px;
	color: #b8b5ba;
	font-size: 13px;
}

.flex-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 28px;
}

.flex-footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.flex-footer__name { font-size: 14px; }

.flex-footer__nav { display: flex; gap: 30px; }
.flex-footer__nav a { color: #b8b5ba; font-size: 14px; text-decoration: none; }
.flex-footer__nav a:hover { color: #fff; }

.flex-footer__rule { height: 1px; background: #424042; margin-bottom: 28px; }

.flex-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.flex-footer__bottom p { margin: 0; }

.flex-footer__reg { display: flex; gap: 26px; }
.flex-footer__reg a { color: #b8b5ba; text-decoration: none; }
.flex-footer__reg a:hover { color: #fff; }

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

@media (max-width: 1080px) {
	.flex-card-grid__cards { grid-template-columns: repeat(3, 1fr); }
	.flex-credentials__cards { flex-basis: 340px; }
	.flex-media-text__media { flex-basis: 380px; }
	.flex-media-text__media img { height: 460px; }
}

/* Classic header (main.css) drops from 100px to 60px at this breakpoint. */
@media (max-width: 992px) {
	.flex-hero { --flex-hero-offset: 60px; }
	.flex-page--overlay-header .flex-hero { --flex-hero-offset: 0px; }
}

@media (max-width: 860px) {
	.flex-section { padding: 64px 0; }

	.flex-hero { --flex-hero-max: 640px; }
	.flex-hero__heading { font-size: 42px; line-height: 1.2; }

	.flex-header__toggle { display: block; }
	.flex-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: var(--flex-purple-dark);
		padding: 12px 24px 24px;
	}
	.flex-nav-open .flex-header__nav { display: flex; }
	.flex-nav-open .flex-header--overlay { background: var(--flex-purple-dark); }
	.flex-header__menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
	.flex-header__menu a { display: block; padding: 12px 0; }
	.flex-header__menu .sub-menu {
		display: block;
		position: static;
		transform: none;
		min-width: 0;
		padding: 0 0 0 18px;
		background: transparent;
		box-shadow: none;
	}
	.flex-header__menu .sub-menu a { padding: 8px 0; font-size: 14px; }
	.home .flex-header__logo { width: 38px; height: 38px; font-size: 14px; }
	.home .flex-header__name { font-size: 15px; letter-spacing: 2px; }
	.flex-header__nav .flex-btn { margin-top: 16px; }

	.flex-media-text__row,
	.flex-media-text--img-right .flex-media-text__row { flex-direction: column; }
	.flex-media-text__media { flex-basis: auto; width: 100%; }
	.flex-media-text__media img { height: auto; }

	.flex-card-grid__cards { grid-template-columns: repeat(2, 1fr); }
	.flex-latest-posts__grid { grid-template-columns: 1fr; }
	.flex-columns__grid { grid-template-columns: 1fr; }

	.flex-credentials__row { flex-direction: column; gap: 40px; }
	.flex-credentials__copy--sticky { position: static; }
	.flex-credentials__cards { flex-basis: auto; width: 100%; }

	.flex-numbered-list__row { flex-wrap: wrap; gap: 16px; }
	.flex-numbered-list__num { flex-basis: 100%; }

	.flex-latest-posts__head { flex-direction: column; align-items: flex-start; }

	.flex-footer__top,
	.flex-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
	.flex-card-grid__cards { grid-template-columns: 1fr; }
	.flex-logo-strip__logos { gap: 20px 28px; }
	.flex-logo-strip__logos img { height: 48px; max-width: 140px; }
	.flex-hero__heading { font-size: 34px; }
	.flex-heading { font-size: 28px; }
	.flex-cta__heading { font-size: 30px; }
	.flex-statement__heading { font-size: 28px; line-height: 1.3; }
}

/* --------------------------------------------------------------------------
   FAQ block
   -------------------------------------------------------------------------- */

.flex-faq__intro {
	max-width: 760px;
	margin: -8px 0 40px;
	color: var(--flex-muted);
	font-size: 17px;
}

.flex-faq__list {
	max-width: 860px;
	border-top: 1px solid var(--flex-line);
}

.flex-faq__item {
	border-bottom: 1px solid var(--flex-line);
}

.flex-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
}

.flex-faq__q::-webkit-details-marker { display: none; }

.flex-faq__q h3 {
	margin: 0;
	color: var(--flex-purple-dark);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.45;
}

.flex-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 6px;
}

.flex-faq__icon::before,
.flex-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 2px;
	background: var(--flex-purple);
	transform: translateY(-50%);
	transition: transform .2s ease, opacity .2s ease;
}

.flex-faq__icon::after { transform: translateY(-50%) rotate(90deg); }

.flex-faq__item[open] .flex-faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.flex-faq__item[open] .flex-faq__q h3 { color: var(--flex-purple); }

.flex-faq__a {
	max-width: 720px;
	padding: 0 0 28px;
	color: var(--flex-text);
}

.flex-faq__a p { margin: 0 0 14px; }
.flex-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
	.flex-faq__q h3 { font-size: 17px; }
}