/* =========================================================
   Run The Room — custom CSS
   Deliberately small: colors/typography/header come from Astra's
   own Customizer settings, and page layout comes from core/Kadence
   block settings. This file only covers the three custom blocks
   (RTR Button, RTR Testimonials, RTR FAQs) and the contact form,
   none of which have a native theme/block equivalent.
   ========================================================= */

/* ---------- Border-style fallback (editor parity) ----------
   When a block's Border panel only sets a color/width (no explicit style),
   WordPress relies on its own global fallback rule — roughly
   `html :where(.has-border-color) { border-style: solid; }` — to actually
   render it as a solid line; that rule ships on the frontend but isn't
   included in the block editor's iframe, so any card border set this way
   (e.g. the "Other offerings" cards) was invisible while editing even
   though it rendered fine on the page. Duplicating the same fallback here
   (loaded in both places via add_editor_style) closes that gap. */
.has-border-color,
[style*="border-color"] {
	border-style: solid;
}

/* ---------- List indent fallback (editor parity) ----------
   Astra resets ul/ol padding to 0 globally, then re-adds it via its own
   dynamic CSS scoped to `.entry-content ul, .entry-content ol` — that
   wrapper class only exists on the frontend, not inside the block
   editor's iframe, so list bullets/numbers there fell back to the 0px
   reset and hung off the left edge instead of lining up with the rest of
   the content. Reasserting the same padding here (loaded in both editor
   and frontend) closes the gap. */
.wp-block-list {
	padding-left: 20px;
}


/* ---------- Adjusted heading sizes for simple pages   ----------
	Like the Privacy Policy, Terms & Conditions, etc. */
.simple-template header.entry-header .entry-title,
.simple-template .editor-post-title__input {
	/* !important: Astra's own editor-only title-preview rule
	   (`.edit-post-visual-editor__post-title-wrapper > h1`) outranks a
	   plain class match by specificity — this is just the editor preview
	   (not real output), so !important is the simplest robust override. */
	font-size: 56px !important;
	font-size: 3.5rem !important;
}
.simple-template h2, .simple-template .entry-content :where(h2) {
    font-size: 40px;
    font-size: 2.5rem;
}
.simple-template h3, .simple-template .entry-content :where(h3) {
    font-size: 28px;
    font-size: 1.75rem;
}
.simple-template h4, .simple-template .entry-content :where(h4) {
    font-size: 24px;
    font-size: 1.5rem;
}


@media (max-width: 921px) {
	.simple-template header.entry-header .entry-title,
	.simple-template .editor-post-title__input {
		font-size: 40px !important;
		font-size: 2.5rem !important;
	}
	.simple-template h2, .simple-template .entry-content :where(h2) {
		font-size: 36px;
		font-size: 2.25rem;
	}
	.simple-template h3, .simple-template .entry-content :where(h3) {
		font-size: 24px;
		font-size: 1.5rem;
	}
	.simple-template h4, .simple-template .entry-content :where(h4) {
		font-size: 22px;
		font-size: 1.375rem;
	}

}

@media (max-width: 544px) {
	.simple-template header.entry-header .entry-title,
	.simple-template .editor-post-title__input {
		font-size: 36px !important;
		font-size: 2.25rem !important;
	}
	.simple-template h2, .simple-template .entry-content :where(h2) {
		font-size: 28px;
		font-size: 1.75rem;
	}
	.simple-template h3, .simple-template .entry-content :where(h3) {
		font-size: 22px;
		font-size: 1.375rem;
	}
	.simple-template h4, .simple-template .entry-content :where(h4) {
		font-size: 18px;
		font-size: 1.125rem;
	}

}

/* Editor-only equivalent of Astra's own "Narrow Container" page layout,
   which the `astra_get_content_layout` filter in functions.php forces for
   this template on the frontend (already set to 850px via the theme's
   own `narrow-container-max-width` option) — the editor canvas doesn't
   share that markup at all, so this mirrors the same 850px column while
   editing. Keep this in sync with `narrow-container-max-width` in the
   Customizer if that's ever changed. */
.simple-template .is-root-container {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Named paragraph styles ----------
   Registered as core/paragraph block styles in inc/blocks.php, so they
   show up as clickable options in the paragraph block's own "Styles"
   panel rather than a manually-typed class name. */
.is-style-body-large {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 400;
}

.is-style-body-small {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 400;
}

/* ---------- Small CTA (e.g. "Learn More" links) ----------
   Registered as a core/paragraph block style in inc/blocks.php. Uses a
   border instead of text-decoration so the underline sits with a gap
   below the text. */
.is-style-small-cta {
	font-family: var(--ast-body-font-family, inherit);
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
}

.is-style-small-cta a {
	color: inherit;
	text-decoration: none !important;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.is-style-small-cta a:hover {
	color: var(--ast-global-color-1);
	border-bottom-color: var(--ast-global-color-1);
}

/* ---------- Card min-height (desktop only) ----------
   Group block's native "Min. height" isn't responsive so this is a small
   opt-in utility class instead of the native attribute. */
@media (min-width: 783px) {
	.rtr-card-min-h {
		min-height: 370px;
	}

	.rtr-card-min-h-pricing {
		min-height: 570px;
	}
}

/* The native "Fixed width" child-layout attribute (style.layout.selfStretch
   / flexSize) renders correctly on the front end (server-side layout
   support) but isn't reflected in the block editor's own live preview, so
   this class-based rule keeps both in sync regardless of that gap. */
.rtr-card-min-h-pricing {
	flex: 0 0 370px;
	box-sizing: border-box;
}

/* Buttons in the pricing cards stretch full-width by default (the card's
   flex column stretches its children), but the design wants them
   auto-width, so this overrides just the button's own cross-axis sizing. */
.rtr-card-min-h-pricing .rtr-btn {
	align-self: flex-start;
}

/* ---------- Guide name / role (About Your Guide) ----------
   One-off typographic treatment (Inter Bold, not the site's Lora heading
   font) that doesn't match any of the named type-scale styles, so it's a
   small scoped class rather than a selectable style. */
.rtr-guide-name {
	font-family: var(--ast-body-font-family, 'Inter', sans-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: var(--ast-global-color-0, #011e85);
	margin: 0;
}

.rtr-guide-role {
	font-family: var(--ast-body-font-family, 'Inter', sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ast-global-color-0, #011e85);
	margin: 0 0 16px;
}

/* ---------- Card Heading (audience cards H3) ----------
   Registered as a core/heading block style in inc/blocks.php. On the
   frontend Astra sets the H3 font via a zero-specificity `:where(h3)`
   rule, so a plain class easily wins — but its *editor-preview* copy of
   that rule is `.editor-styles-wrapper h3 {...}` (a real, non-:where()
   selector), which outranks a single class and was winning here, so the
   editor showed Inter instead of Lora. Doubling the class is a simple,
   Astra-version-proof way to outrank it in both places without hardcoding
   Astra's own wrapper selector. */
.is-style-card-heading.is-style-card-heading {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
}

/* ---------- Stylised heading (outlined text) ----------
   No native Astra/Gutenberg control for a text stroke, so this is a
   small opt-in utility class rather than a global heading rule —
   apply via "Additional CSS Class(es)" in the block's Advanced panel. */
.rtr-heading-stroke {
	line-height: 1;
	-webkit-text-stroke: 0.15rem #455178;
	text-stroke: 0.15rem #455178;
	paint-order: stroke fill;
}

/* ---------- Narrow hero content ----------
   Constrains the Cover block's inner content column so the subheading
   wraps to 2-3 lines instead of running the full hero width; apply via
   "Additional CSS Class(es)" on the Cover block. */
.rtr-hero-narrow .wp-block-cover__inner-container {
	max-width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Nav  ---------- */

.ast-site-identity .site-title a {
	font-weight: 700;
}
.main-header-menu .sub-menu {
	padding: 20px 24px;
	top: 3.75rem;
}

.main-header-menu .sub-menu .menu-link {
	padding: 5px 0;
}

body.page-id-8.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link,
body.page-id-8.ast-theme-transparent-header .main-header-menu > .menu-item > .ast-menu-toggle,
body.page-id-8.ast-theme-transparent-header .site-title a,
body.page-id-8.ast-theme-transparent-header .site-header .site-description {
	color: #ffffff !important;
}

/* Global hover is pink now, but on the homepage's dark photo hero pink
   doesn't have enough contrast — keep the homepage hover blue instead. */
body.page-id-8.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link:hover,
body.page-id-8.ast-theme-transparent-header .main-header-menu > .menu-item > .ast-menu-toggle:hover {
	color: #011e85 !important;
}

/* ---------- Sticky nav (transparent-header pages) ----------
   Astra's native "Sticky Header" is a Pro add-on that isn't installed on
   this site. The transparent header already overlays the hero with
   `position: absolute` and no flow space (Astra's own dynamic CSS,
   `.ast-theme-transparent-header #masthead`) — switching that to `fixed`
   pins it to the viewport on scroll instead of scrolling away with the
   page, with no other layout change needed. site.js then toggles
   `.rtr-nav-stuck` on <body> once scrolled away from the very top, so the
   nav can pick up a solid background instead of staying transparent over
   arbitrary page content. */
body.ast-theme-transparent-header #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

body.ast-theme-transparent-header.rtr-nav-stuck #masthead {
	background-color: #FFEBBC;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

body.ast-theme-transparent-header.rtr-nav-stuck #masthead li a, body.ast-theme-transparent-header.rtr-nav-stuck #masthead .ast-site-identity .site-title a {
	color: #011e85 !important;
}
/* Stuck state has a solid blue bar now, so the homepage's blue hover
   override above (there for contrast against the photo) would go
   invisible against it — flip hover back to the site's usual pink once
   stuck. */
body.page-id-8.ast-theme-transparent-header.rtr-nav-stuck .main-header-menu > .menu-item > .menu-link:hover,
body.page-id-8.ast-theme-transparent-header.rtr-nav-stuck .main-header-menu > .menu-item > .ast-menu-toggle:hover {
	color: #e085c8 !important;
}

body.ast-theme-transparent-header.rtr-nav-stuck #masthead .ast-mobile-header-wrap .ast-primary-header-bar, body.ast-theme-transparent-header.rtr-nav-stuck #masthead .ast-primary-header-bar .site-primary-header-wrap {
	height: 60px;
	min-height: 60px;
}

/* ---------- RTR Button ---------- */
.rtr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 400px;
	font-family: var(--ast-body-font-family, inherit);
	font-weight: 600;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-position 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/*
 * A plain `transition: background` can't cross-fade between two different
 * gradients, which is why this didn't animate before. Instead each gradient
 * is doubled (A, B, A) at 200% width, and the hover state just slides the
 * background-position from 0% to 100% — background-position animates fine,
 * so the "reverse direction" effect becomes a smooth slide instead of a cut.
 */
.rtr-btn--primary {
	background: linear-gradient(90deg, #e085c8, #f5c0cb, #e085c8);
	background-size: 200% 100%;
	background-position: 0% 0%;
	color: var(--ast-global-color-0, #011e85) !important;
}

.rtr-btn--primary:hover {
	background-position: 100% 0%;
}

.rtr-btn--secondary {
	background: linear-gradient(90deg, #7c8de1, #45d9f5, #7c8de1);
	background-size: 200% 100%;
	background-position: 0% 0%;
	color: #ffffff !important;
}

.rtr-btn--secondary:hover {
	background-position: 100% 0%;
}

.rtr-btn--tertiary {
	background: #f5c0cb;
	color: var(--ast-global-color-0, #011e85) !important;
}

.rtr-btn--large {
	padding: 17px 35px;
	font-size: 20px;
}

.rtr-btn--medium {
	padding: 14px 28px;
	font-size: 16px;
}

/* ---------- RTR Testimonials ---------- */
.rtr-testimonial-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 782px) {
	.rtr-testimonial-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rtr-testimonial {
	position: relative;
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 40px 24px 24px;
}

.rtr-testimonial::before {
	content: '\201C';
	position: absolute;
	top: -18px;
	left: 20px;
	font-family: Georgia, serif;
	font-size: 60px;
	line-height: 1;
	color: #e38cc8;
	background: #fff;
	padding: 0 8px;
}

.rtr-testimonial .rtr-quote {
	font-size: 14px;
	margin: 0 0 20px;
}

.rtr-testimonial__person {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rtr-testimonial__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #809cff;
	flex-shrink: 0;
	object-fit: cover;
}

.rtr-testimonial__person strong,
.rtr-testimonial__person span {
	display: block;
	font-size: 13px;
}

/* ---------- RTR FAQs ----------
   Flex-wrap (not CSS Grid) so each card hugs its own question/answer
   height instead of stretching to match the tallest card in its row —
   a lightweight "masonry" effect with no JS library. */
.rtr-faq-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px 21px;
}

.rtr-faq {
	flex: 0 1 100%;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	box-sizing: border-box;
}

@media (min-width: 782px) {
	.rtr-faq {
		/* flex-grow: 0 so a lone card left over in the last row stays at
		   50% width instead of stretching to fill the row. */
		flex: 0 1 calc(50% - 11px);
	}
}

.rtr-faq__question {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
	font-size: 18px;
	color: var(--ast-global-color-0, #011e85);
	background-color: transparent !important;
	transition: all 0.2s ease-in-out;
}

.rtr-faq__question:hover {
	background-color: transparent !important;
	color: var(--ast-global-color-1, #E38CC8);
}

.rtr-faq__icon {
	flex-shrink: 0;
	position: relative;
	width: 20px;
	height: 20px;
}

.rtr-faq__icon::before,
.rtr-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease-in-out;
}

.rtr-faq__icon::before {
	width: 14px;
	height: 2px;
}

.rtr-faq__icon::after {
	width: 2px;
	height: 14px;
}

.rtr-faq__question[aria-expanded='true'] .rtr-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* Animated open/close: 0fr -> 1fr on a grid row is the standard way to
   transition height when the content's natural height is unknown. */
.rtr-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.2s ease-in-out;
}

.rtr-faq.is-open .rtr-faq__panel {
	grid-template-rows: 1fr;
}

.rtr-faq__panel-inner {
	overflow: hidden;
}

.rtr-faq__panel-inner p {
	margin: 16px 0 0;
	font-size: 16px;
}

/* ---------- RTR Testimonial Slider ---------- */
.rtr-ts {
	/* Positioning context for the prev/next arrows below. The clipping
	   (overflow: hidden) lives on .rtr-ts-viewport instead of here, so the
	   arrows can sit outside the track's own box (e.g. left/right: -24px)
	   without being clipped along with it. */
	position: relative;
}

.rtr-ts-viewport {
	/* `overflow-x: hidden` alone doesn't work here — browsers compute the
	   unset overflow-y as auto whenever overflow-x is non-visible, which
	   still clips vertically. So this stays a normal `overflow: hidden`,
	   and the quoted card's straddling quote mark instead gets reserved
	   space via padding-top on .rtr-ts-row below, entirely inside this
	   box, rather than trying to escape it. */
	overflow: hidden;
}

.rtr-ts-track {
	display: flex;
	transition: transform 0.4s ease-in-out;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.rtr-ts-track.is-dragging {
	cursor: grabbing;
}

.rtr-ts-track img {
	-webkit-user-drag: none;
	user-drag: none;
}

.rtr-ts-slide {
	flex: 0 0 100%;
	min-width: 0;
	    padding-left: 8px;
    padding-right: 8px;
}

.rtr-ts-row {
	display: flex;
	align-items: stretch;
	gap: 16px;
	flex-wrap: wrap;
}

.rtr-ts-row--two {
	gap: 24px;
	/* Reserves room above the cards for the quote mark to straddle into,
	   inside .rtr-ts-viewport's own clipping box (see the note above). */
	padding-top: 64px;
}

.rtr-ts-card {
	flex: 1 1 0;
	min-width: calc(45% - 8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 32px;
	min-height: 300px;
	background: #fff;
	box-sizing: border-box;
}

.rtr-ts-quote {
	margin: 0;
	color: var(--ast-global-color-0, #011e85);
}

.rtr-ts-name {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ast-global-color-0, #011e85);
}

.rtr-ts-role {
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--ast-global-color-0, #011e85);
}

.rtr-ts-avatar,
.rtr-ts-avatar--letter {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	line-height: 1;
}

.rtr-ts-avatar--letter {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffebbc;
	color: var(--ast-global-color-0, #011e85);
	font-weight: 700;
	font-size: 18px;
}

.rtr-ts-image {
	flex: 1 1 0;
	min-width: calc(55% - 8px);
	border-radius: 12px;
	overflow: hidden;
}

.rtr-ts-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media screen and (max-width: 768px) {
	.rtr-ts-slide {
		padding: 0 16px;
	}
	.rtr-ts-card {
		min-width: calc(100% - 8px);
	}
	.rtr-ts-image {
		min-width: calc(100% - 8px);
	}
}

/* "Single testimonial" layout: one card per slide, centered, capped at a
   readable line-length instead of stretching full width. */
.rtr-ts-row--single {
	justify-content: center;
}
.rtr-ts-row--single .rtr-ts-card {
	max-width: 700px;
	min-width: 0;
	width: 100%;
	min-height: 0;
	gap: 0;
}


/* "Quoted" card variant (2-card slider): quote mark top-left, text left
   aligned, author row pinned to the bottom. */
.rtr-ts-card--quoted {
	position: relative;
	align-items: stretch;
	text-align: left;
	padding-top: 56px;
	justify-content: space-between;
}

.rtr-ts-card--quoted::before {
	content: '\201C';
	position: absolute;
	top: -30px;
	left: 24px;
	font-family: Georgia, serif;
	font-size: 120px;
	font-weight: bold;
	line-height: 1;
	color: var(--ast-global-color-0, #011e85);
}

.rtr-ts-card--quoted .rtr-ts-quote {
	text-align: left;
}

.rtr-ts-person {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rtr-ts-person span {
	text-align: left;
}

.rtr-ts-card--quoted .rtr-ts-person .rtr-ts-name,
.rtr-ts-card--quoted .rtr-ts-person .rtr-ts-role {
	text-transform: none;
	font-weight: 700;
}

.rtr-ts-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding-top: 24px;
}

.rtr-ts-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--ast-global-color-0, #011e85);
	transition: background 0.2s ease-in-out;
}

.rtr-ts-dot:hover,
.rtr-ts-dot.is-active {
	background: linear-gradient(90deg, #e085c8, #f5c0cb);
}

.rtr-ts-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--ast-global-color-0, #011e85);
	background: none;
	font-size: 24px;
	line-height: 1;
	transition: all 0.2s ease-in-out;
	box-shadow: none;
}

.rtr-ts-arrow:hover {
	background: linear-gradient(90deg, #e085c8, #f5c0cb);
	color: #ffffff;
}

.rtr-ts-arrow--prev {
	left: -48px;
}

.rtr-ts-arrow--next {
	right: -48px;
}

@media screen and (max-width: 600px) {
	.rtr-ts-arrow {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}
}

/* ---------- RTR Gallery Slider ----------
   Same track/dots/drag mechanism as the Testimonial Slider above, just
   feeding images instead of testimonial cards. */
.rtr-gs {
	/* Positioning context for the prev/next arrows below. The clipping
	   (overflow: hidden) lives on .rtr-gs-viewport instead of here, so the
	   arrows can sit outside the track's own box (e.g. left/right: -24px)
	   without being clipped along with it. */
	position: relative;
}

.rtr-gs-viewport {
	overflow: hidden;
}

.rtr-gs-track {
	display: flex;
	transition: transform 0.4s ease-in-out;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.rtr-gs-track.is-dragging {
	cursor: grabbing;
}

.rtr-gs-track img {
	-webkit-user-drag: none;
	user-drag: none;
}

.rtr-gs-slide {
	flex: 0 0 100%;
	min-width: 0;
	padding: 8px;
}

.rtr-gs-cell {
	min-width: 0;
	min-height: 0;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.rtr-gs-cell .rtr-gs-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A fixed pixel height doesn't scale with the slider's own width (e.g. a
   full-width section vs. a narrow one), and — combined with a grid row
   that has no explicit track — lets a tall source photo's intrinsic size
   push the row taller than the box, overflowing past it. Locking every
   layout to the same 4:3 aspect-ratio instead means the box always scales
   with the container, and the explicit `1fr` row track (plus min-height:0
   on the cells) stops content from overflowing it. */
.rtr-gs-layout-one,
.rtr-gs-layout-two,
.rtr-gs-layout-three {
	aspect-ratio: 4 / 3;
}

.rtr-gs-layout-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 16px;
}

.rtr-gs-layout-three {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr;
	gap: 16px;
}

.rtr-gs-layout-three .rtr-gs-stack {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	height: 100%;
	min-height: 0;
}

@media screen and (max-width: 768px) {
	.rtr-gs-layout-two,
	.rtr-gs-layout-three {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.rtr-gs-layout-three .rtr-gs-stack {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
	}
}

.rtr-gs-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding-top: 24px;
}

.rtr-gs-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--ast-global-color-0, #011e85);
	transition: background 0.2s ease-in-out;
}

.rtr-gs-dot:hover,
.rtr-gs-dot.is-active {
	background: linear-gradient(90deg, #e085c8, #f5c0cb);
}

.rtr-gs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--ast-global-color-0, #011e85);
	background: none;
	font-size: 24px;
	line-height: 1;
	transition: all 0.2s ease-in-out;
	box-shadow: none;
}

.rtr-gs-arrow:hover {
	background: linear-gradient(90deg, #e085c8, #f5c0cb);
	color: #ffffff;
}

.rtr-gs-arrow--prev {
	left: -48px;
}

.rtr-gs-arrow--next {
	right: -48px;
}

@media screen and (max-width: 600px) {
	.rtr-gs-arrow {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}
}

/* ---------- Footer ----------
   Background + copyright text come from Astra's Footer Builder
   ("hbb-footer-bg-obj-responsive" / "footer-copyright-editor" in
   astra-settings) — the 20px vertical padding on this row is hardcoded in
   Astra's own dynamic CSS with no Customizer control, so overriding it to
   16px is the one part that needs custom CSS. */
.site-below-footer-wrap {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
.site-below-footer-wrap[data-section="section-below-footer-builder"].ast-footer-row-tablet-stack .site-footer-section {
	margin-bottom: 0 !important;
}

/* ---------- Questions section preheader / heading ----------
   One-off treatments used only in the "Ask us anything" section; not part
   of the named type scale, so scoped classes rather than global styles. */
.rtr-preheader {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ast-global-color-0, #011e85);
	margin: 0;
}

.rtr-gradient-text {
	background: linear-gradient(90deg, #e085c8, #f5c0cb);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rtr-ask-heading {
	font-family: var(--ast-body-font-family, 'Inter', sans-serif);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
	color: var(--ast-global-color-0, #011e85);
}

/* ---------- Contact form (WPForms) ----------
   Floating-label treatment: the label sits over the input like a
   placeholder, then floats to a small uppercase caption once the field
   has focus or a value. Needs an actual `placeholder` attribute (even a
   single space) on each field for :placeholder-shown to apply — set via
   each field's WPForms settings — and relies on :has(), which is safe to
   depend on across current browsers. */
.wpforms-container {
	border: 1px solid #e7e7e7 !important;
	border-radius: 16px !important;
	padding: 20px 40px 40px 40px !important;
	background: #fff !important;
}

.wpforms-container .wpforms-field {
	position: relative;
	border-bottom: 1px solid #d1d1d1 !important;
	padding: 8px 4px 8px !important;
	margin-bottom: 4px !important;
}

.wpforms-container .wpforms-field-checkbox {
	border-bottom: none !important;
	padding: 8px 4px !important;
}

.wpforms-container .wpforms-field-label {
	position: absolute;
	top: 32px;
	left: 4px;
	right: 4px;
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 400;
	color: var(--ast-global-color-0, #011e85) !important;
	pointer-events: none;
	transition: all 0.2s ease-in-out;
}
.wpforms-container input:focus,
.wpforms-container textarea:focus {
	border: 0 none !important;
	box-shadow: none !important;
}

.wpforms-container .wpforms-field:has(input:focus) .wpforms-field-label,
.wpforms-container .wpforms-field:has(textarea:focus) .wpforms-field-label,
.wpforms-container .wpforms-field:has(input:not(:placeholder-shown)) .wpforms-field-label,
.wpforms-container .wpforms-field:has(textarea:not(:placeholder-shown)) .wpforms-field-label {
	top: 12px;
	font-size: 10px !important;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--ast-global-color-0, #011e85) !important;
}

.wpforms-container .wpforms-field input[type='text'],
.wpforms-container .wpforms-field input[type='email'],
.wpforms-container .wpforms-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: none;
	padding: 20px 0 0 !important;
	font-size: 16px;
	font-family: inherit;
	background: transparent;
	color: var(--ast-global-color-0, #011e85);
	resize: vertical;
}
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
		color: var(--ast-global-color-0, #011e85) !important;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus {
	outline: none;
}

.wpforms-container .wpforms-field-checkbox .wpforms-field-label {
	position: static;
	font-size: 16px;
	font-weight: 400;
	color: var(--ast-global-color-0, #011e85);
	text-transform: none;
}
.wpforms-field.wpforms-field-checkbox .wpforms-field-label-inline {
	font-size: 14px !important;
		color: var(--ast-global-color-0, #011e85) !important;
}

div.wpforms-container-full .wpforms-form label.wpforms-error, div.wpforms-container-full .wpforms-form em.wpforms-error {
	font-size: 10px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field input.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field textarea.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field textarea.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field select.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field select.user-invalid {
	border: 0 none !important;
}

/* WPForms' own anti-spam honeypot field usually ships with an inline
   hidden style, but one of its two honeypot fields on this form doesn't
   get it — this is a safety net so it stays invisible regardless. */
.wpforms-container .wpforms-field:has(> input[tabindex='-1'][aria-hidden='true']) {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.wpforms-container .wpforms-submit-container button,
.wpforms-container button.wpforms-submit {
	background: #f5c0cb !important;
	color: var(--ast-global-color-0, #011e85) !important;
	border: none !important;
	border-radius: 400px !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	cursor: pointer;
}

/* ---------- small utilities ---------- */
.rtr-avatar-circle img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.rtr-block-placeholder {
	padding: 16px;
	background: #f0f0f0;
	border: 1px dashed #ccc;
	font-style: italic;
}