/**
 * Styles for the "RD New Design" — the header/footer template parts
 * (templates/parts/) and the RD New Design widgets (currently just the
 * Banner, widgets/class-rd-new-design-banner.php).
 *
 * Loaded on pages/posts using the "RD New Design" template, and on any
 * other page/post that uses one of the RD New Design widgets — see
 * Rotate_Digital_Elementor_Templates::register_assets() / enqueue_assets()
 * and Rotate_Digital_Elementor_New_Design_Base_Widget::get_style_depends().
 *
 * Fonts (Bebas Neue + Cormorant Garamond + Inter) are loaded from Google
 * Fonts — see Rotate_Digital_Elementor_Templates::FONTS_HANDLE — rather than
 * self-hosted, per client request. That request is only enqueued in the
 * same places this stylesheet is, so it never loads outside the RD New
 * Design pages/widgets.
 */

:root {
	--rde-new-design-font-heading: 'Bebas Neue', sans-serif;
	--rde-new-design-font-serif: 'Cormorant Garamond', serif;
	--rde-new-design-font-body: 'Inter', sans-serif;
	--rde-new-design-primary: #667A62;
	--rde-new-design-gold: #C9A84C;
	--rde-new-design-bg: #E7E3DA;
	--rde-new-design-dark: #4A4C35;
	--rde-new-design-container: 1280px;
}

body.rd-new-design {
	background-color: #E7E3DA!important;
}

/* Header */
.rd-new-design-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
}

/* Gradient overlay — spans the header's own (content-sized) height, sits
   below the logo/nav/buttons via z-index, not a fixed height of its own. */
.rd-new-design-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( to bottom, rgba( 19, 19, 19, 1 ) 0%, rgba( 19, 19, 19, 0 ) 100% );
	pointer-events: none;
}

.rd-new-design-header__inner {
	position: relative;
	z-index: 1;
	max-width: var( --rde-new-design-container );
	margin: 0 auto;
	padding: 24px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.rd-new-design-header__logo {
	display: inline-flex;
	flex: none;
}

.rd-new-design-header__logo img {
	display: block;
	max-height: 40px;
	width: auto;
}

.rd-new-design-header__right {
	display: flex;
	align-items: center;
	gap: 32px;
}

.rd-new-design-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/*
 * Hamburger toggle — hidden by default (desktop shows the nav/buttons
 * inline); shown, and the nav/buttons turned into a drawer, below 1200px
 * — see the max-width: 1199px block after the desktop nav rules.
 */
.rd-new-design-header__toggle {
	display: none;
	flex: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.rd-new-design-header__toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.rd-new-design-header__toggle.is-open .rd-new-design-header__toggle-bar:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

.rd-new-design-header__toggle.is-open .rd-new-design-header__toggle-bar:nth-child( 2 ) {
	opacity: 0;
}

.rd-new-design-header__toggle.is-open .rd-new-design-header__toggle-bar:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/*
 * Sub-menu toggle chevron — JS-injected next to each parent link's <a>
 * (initMobileMenu() in assets/js/rd-new-design.js); hidden by default same
 * as the hamburger, shown within the max-width: 1199px block below.
 */
.rd-new-design-header__submenu-toggle {
	display: none;
}

/* Only the top-level list is a row; .sub-menu below overrides nested lists. */
.rd-new-design-header__nav > ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rd-new-design-header__nav li {
	position: relative;
}

.rd-new-design-header .rd-new-design-header__nav a {
	display: inline-flex;
	align-items: center;
	font-family: var( --rde-new-design-font-body );
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

/* Dropdowns for child menu items, any depth. */
.rd-new-design-header__nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #1a1a1a;
	border-radius: 8px;
	box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.25 );
	z-index: 20;
}

/*
 * Desktop only — scoped so it can't out-specificity the mobile drawer's
 * click-only `.is-open` toggle below (unscoped, `li:hover` was winning over
 * the mobile block's plain `.sub-menu { display: none; }` regardless of
 * source order, since a pseudo-class adds specificity).
 */
@media ( min-width: 1200px ) {
	.rd-new-design-header__nav li:hover > .sub-menu,
	.rd-new-design-header__nav li:focus-within > .sub-menu {
		display: flex;
	}
}

/* Nested dropdowns flyout to the right instead of stacking below their parent. */
.rd-new-design-header__nav .sub-menu .sub-menu {
	top: -8px;
	left: 100%;
}

.rd-new-design-header__nav .sub-menu a {
	padding: 10px 20px;
	white-space: nowrap;
}

.rd-new-design-header__nav .menu-item-has-children > a {
	position: relative;
	padding-right: 18px;
}

.rd-new-design-header__nav .menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

/*
 * Header, below 1200px: hamburger + drawer instead of the inline nav/buttons.
 * No design was given for this. Sub-menus (any depth — the real menu nests
 * 3+ levels deep) are collapsed by default and expand one level at a time
 * via a chevron button JS injects next to each parent link's toggle
 * (assets/js/rd-new-design.js's initMobileMenu()) — .menu-item-has-children
 * > a::after (the desktop hover-caret) is hidden here since this button
 * replaces it.
 */
@media ( max-width: 1199px ) {
	.rd-new-design-header__toggle {
		display: flex;
	}

	.rd-new-design-header__right {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: 80vh;
		overflow-y: auto;
		background-color: #292828;
		padding: 8px 20px 24px;
	}

	.rd-new-design-header__right.is-open {
		display: flex;
	}

	.rd-new-design-header__nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.rd-new-design-header__nav li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.rd-new-design-header .rd-new-design-header__nav a {
		flex: 1 1 auto;
		width: auto;
		padding: 12px 0;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	}

	/* Collapsed by default; JS toggles `is-open` on the parent <li>. */
	.rd-new-design-header__nav .sub-menu {
		display: none;
		position: static;
		flex: 1 0 100%;
		min-width: 0;
		margin: 0 0 0 16px;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.rd-new-design-header__nav li.is-open > .sub-menu {
		display: flex;
	}

	.rd-new-design-header__nav .sub-menu a {
		padding: 10px 0;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
		white-space: normal;
	}

	.rd-new-design-header__nav .menu-item-has-children > a {
		padding-right: 0;
	}

	.rd-new-design-header__nav .menu-item-has-children > a::after {
		display: none;
	}

	/* Chevron toggle button JS inserts next to each parent link. */
	.rd-new-design-header__submenu-toggle {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin-left: 8px;
		padding: 0;
		background: transparent;
		border: 0;
		color: #fff;
		cursor: pointer;
	}

	.rd-new-design-header__submenu-toggle svg {
		width: 16px;
		height: 16px;
		transition: transform 0.2s ease;
	}

	li.is-open > .rd-new-design-header__submenu-toggle svg {
		transform: rotate( 90deg );
	}

	.rd-new-design-header__actions {
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 20px;
	}

	.rd-new-design-header__actions .rde-button {
		width: 100%;
		justify-content: center;
	}
}

/*
 * Footer — hardcoded content (no nav menu, unlike the header), see
 * templates/parts/footer-rd-new-design.php. White, rounded top corners,
 * sitting over the page's --rde-new-design-bg.
 */
.rd-new-design-footer {
	margin-top: 80px;
	background-color: #fff;
	border-radius: 48px 48px 0 0;
}

.rd-new-design-footer__inner {
	max-width: var( --rde-new-design-container );
	margin: 0 auto;
	padding: 64px 20px 32px;
	font-family: var( --rde-new-design-font-body );
}

.rd-new-design-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.rd-new-design-footer__logo {
	display: block;
	height: 66px;
	width: auto;
}

.rd-new-design-footer__description {
	max-width: 280px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: #989898;
}

.rd-new-design-footer__description p {
	margin: 0 0 10px;
}

.rd-new-design-footer__description p:last-child {
	margin-bottom: 0;
}

.rd-new-design-footer__heading {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 8px;
	font-family: var( --rde-new-design-font-serif );
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #292828;
}

.rd-new-design-footer__heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	background-color: var( --rde-new-design-gold );
}

.rd-new-design-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-new-design-footer__links li{
	margin: 0;
}

.rd-new-design-footer__links a {
	font-size: 14px;
	font-weight: 300;
	color: #989898!important;
	text-decoration: none;
}

.rd-new-design-footer__links a:hover {
	color: #989898 !important;
	text-decoration: underline;
}

.rd-new-design-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-new-design-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #989898;
	font-weight: 300;
	text-decoration: none;
}

.rd-new-design-footer__contact-item img {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	object-fit: contain;
}

.rd-new-design-footer__contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rd-new-design-footer__contact-title {
	font-size: 14px;
	font-weight: 400;
	color: #989898 !important;
}

.rd-new-design-footer__contact-info {
	font-size: 12px;
	font-weight: 300;
	color: #989898 !important;
}

a.rd-new-design-footer__contact-item:hover {
	text-decoration: underline;
}

.rd-new-design-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid #ECECEC;
}

.rd-new-design-footer__copyright {
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	color: #989898;
}

.rd-new-design-footer__copyright p {
	margin: 0;
}

.rd-new-design-footer__copyright a {
	color: #989898!important;
}

.rd-new-design-footer__social {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rd-new-design-footer__social img {
	display: block;
	width: 36px;
	height: 36px;
}

/*
 * Buttons — shared by the header nav (see
 * Rotate_Digital_Elementor_Templates::style_nav_menu_buttons(), triggered by
 * giving a menu item the CSS class 'btn-primary' / 'btn-ghost-gold') and the
 * Banner widget below. `.rde-button__icon` is only added where the icon is
 * wanted (all Banner buttons; the header's nav-item buttons don't have one).
 */
.rde-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 50px;
	border: 2px solid transparent;
	font-family: var( --rde-new-design-font-body );
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.rde-button:hover {
	opacity: 0.8;
}

.rde-button__icon {
	display: inline-flex;
	flex: none;
	line-height: 0;
}

.rde-button__icon img {
	display: block;
	width: 28px;
	height: 28px;
}

.rde-button--primary {
	background-color: var( --rde-new-design-primary );
	border-color: var( --rde-new-design-primary );
	color: #fff !important;
}

.rde-button--secondary {
	background-color: #fff;
	border-color: #fff;
	color: var( --rde-new-design-primary ) !important;
}

.rde-button--ghost {
	background-color: transparent;
	border-color: #fff;
	color: #fff !important;
}

.rde-button--ghost-gold {
	background-color: transparent;
	border-color: var( --rde-new-design-gold );
	color: var( --rde-new-design-gold ) !important;
}

/* RD New Design - Banner */
.rde-rd-new-design-banner-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Gradient overlay — above the background image, below the container/content. */
.rde-rd-new-design-banner-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( to right, rgba( 19, 19, 19, 1 ) 0%, rgba( 19, 19, 19, 0.75 ) 25%, rgba( 19, 19, 19, 0 ) 75% );
	pointer-events: none;
}

.rde-rd-new-design-banner-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-banner {
	display: flex;
	align-items: center;
	min-height: 700px;
	padding: 160px 0 60px;
}

.rde-rd-new-design-banner__content {
	max-width: 600px;
	color: #fff;
}

.rde-rd-new-design-banner__title {
	margin: 0 0 20px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 74px;
	line-height: 1.1;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-banner__description {
	margin: 0 0 30px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	color: rgba(255, 255, 255, 0.85);
}

.rde-rd-new-design-banner__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * RD New Design - Feature Banner
 * A flat dark overlay (not the hero Banner's left-to-right gradient), since
 * text sits across both columns here, not just on the left.
 */
.rde-rd-new-design-feature-banner-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-feature-banner-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.55 );
	pointer-events: none;
}

.rde-rd-new-design-feature-banner-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-feature-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 60px;
	padding: 70px 0;
}

.rde-rd-new-design-feature-banner__col {
	flex: 1 1 0;
	min-width: 280px;
}

.rde-rd-new-design-feature-banner__title {
	margin: 0 0 24px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-feature-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rde-rd-new-design-feature-banner__description {
	margin: 0 0 20px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.6;
	color: #fff;
}

.rde-rd-new-design-feature-banner__description p:last-child {
	margin-bottom: 0;
}

/* No exact color spec for this — light/neutral so it reads over any background image; revisit once real copy/spec is in. */
.rde-rd-new-design-feature-banner__subtitle {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-serif );
	font-size: 36px!important;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	color: rgba( 255, 255, 255, 0.9 );
}

.rde-rd-new-design-feature-banner__items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rde-rd-new-design-feature-banner__item {
	padding: 10px 18px;
	border-radius: 50px;
	background: #fff;
	font-family: var( --rde-new-design-font-body );
	font-size: 18px;
	font-weight: 300;
	color: #292828;
	white-space: nowrap;
	margin: 0;
}

/*
 * RD New Design - Feature Banner Simple
 * Same overlay/title/description/item-pill/button styling as the Feature
 * Banner above, just one column instead of two.
 */
.rde-rd-new-design-feature-banner-simple-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-feature-banner-simple-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.55 );
	pointer-events: none;
}

.rde-rd-new-design-feature-banner-simple-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-feature-banner-simple {
	padding: 20px 0;
}

.rde-rd-new-design-feature-banner-simple__title {
	max-width: 900px;
	margin: 0 0 12px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-feature-banner-simple__description {
	margin: 0 0 20px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.6;
	color: #fff;
}

.rde-rd-new-design-feature-banner-simple__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-feature-banner-simple__items {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.rde-rd-new-design-feature-banner-simple__item {
	padding: 10px 18px;
	border-radius: 50px;
	border: 1px solid #fff;
	backdrop-filter: blur(10px);
	font-family: var( --rde-new-design-font-body );
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	white-space: nowrap;
	backdrop-filter: blur(10px);
	margin: 0;
}

.rde-rd-new-design-feature-banner-simple__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * RD New Design - CTA
 * Same overlay treatment as the Feature Banner family, but centered — the
 * simplest of the group (no items/columns), so centered reads as a
 * standalone call-to-action rather than duplicating Feature Banner Simple.
 */
.rde-rd-new-design-cta-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.55 );
	pointer-events: none;
}

.rde-rd-new-design-cta-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-cta {
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
}

.rde-rd-new-design-cta__title {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-cta__description {
	margin: 0 0 28px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.6;
	color: #fff;
}

.rde-rd-new-design-cta__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/*
 * RD New Design - Form
 * Structurally the same as the Feature Banner directly above (same overlay,
 * same two-column layout) — only the right column differs, rendering a
 * form shortcode instead of a subtitle/tag list.
 */
.rde-rd-new-design-form-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-form-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.55 );
	pointer-events: none;
}

.rde-rd-new-design-form-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 60px;
	padding: 70px 0;
}

.rde-rd-new-design-form__col {
	flex: 1 1 0;
	min-width: 280px;
}

.rde-rd-new-design-form__title {
	margin: 0 0 24px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-form__description {
	margin: 0 0 20px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.6;
	color: #fff;
}

.rde-rd-new-design-form__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-form__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rde-rd-new-design-form__form-wrap {
	padding: 30px;
	background-color: #fff;
	border-radius: 16px;
}

.rde-rd-new-design-form__form-title {
	margin: 0 0 20px 0;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px!important;
	color: #292828;
}

.rde-rd-new-design-form__form-description {
	margin: 20px 0 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	color: #B3B3BA;
}

/* RD New Design - Trust Section */
.rde-rd-new-design-trust-section {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-trust {
	text-align: center;
}

.rde-rd-new-design-trust__title {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-trust__description {
	max-width: 600px;
	margin: 0 auto 40px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	color: #292828;
	font-size: 18px!important;
}

.rde-rd-new-design-trust__description p:last-child {
	margin-bottom: 0;
}

/*
 * Flex, not grid: `justify-content: center` on a wrapping flex container
 * centers each wrapped row independently, so a leftover row (e.g. 5 items =
 * 3 + 2) centers as its own pair instead of sitting left under columns 1-2
 * — that's what the reference design does. Each card is a fixed one-third
 * width (`flex: 0 0 …`, not content-sized) so wrapping always happens after
 * exactly 3 — content-based widths let a 4th item fit on wide enough
 * containers/short enough text, breaking the "3 per row" rule.
 */
.rde-rd-new-design-trust__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.rde-rd-new-design-trust__item {
	flex: 0 0 calc( ( 100% - 40px ) / 3 );
	max-width: calc( ( 100% - 40px ) / 3 );
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	padding: 22px 28px;
	text-align: left;
}

.rde-rd-new-design-trust__item-title {
	margin: 0 0 4px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 700;
	font-size: 18px;
	color: #292828;
}

.rde-rd-new-design-trust__item-description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 14px;
	color: #292828;
}

/*
 * RD New Design - Journey
 * No background-image field on this one — plain page background, like
 * Trust Section. Fixed equal-thirds item width (not content-sized) so
 * wrapping always happens after exactly 3, same reasoning as Trust Section.
 */
.rde-rd-new-design-journey-section {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-journey {
	padding: 80px 0;
}

.rde-rd-new-design-journey__header {
	text-align: center;
	margin-bottom: 32px;
}

.rde-rd-new-design-journey__title {
	margin: 0 0 12px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-journey__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 14px;
	color: #292828;
}

.rde-rd-new-design-journey__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-journey__items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.rde-rd-new-design-journey__item {
	display: block;
	flex: 0 0 calc( ( 100% - 40px ) / 3 );
	max-width: calc( ( 100% - 40px ) / 3 );
	padding: 24px;
	background: #fff;
	border-radius: 16px;
	text-decoration: none;
}

.rde-rd-new-design-journey__item-title {
	display: block;
	margin-bottom: 8px;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px;
	line-height: 1.35;
	color: #292828;
}

.rde-rd-new-design-journey__item-link {
	width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 600;
	font-size: 18px;
	color: var( --rde-new-design-primary );
}

.rde-rd-new-design-journey__item-link::after {
	content: '\2192';
}

/*
 * RD New Design - Numbers
 * The "i" tooltip opens on hover (CSS only) and on click/tap of the info
 * icon (JS toggles `.is-open` — see assets/js/rd-new-design.js — since
 * touch devices have no hover). data-rde-count-to drives the count-up.
 */
.rde-rd-new-design-numbers-section {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-numbers {
}

.rde-rd-new-design-numbers__header {
	margin-bottom: 32px;
}

.rde-rd-new-design-numbers__title {
	margin: 0 0 12px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-numbers__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	color: #292828;
}

.rde-rd-new-design-numbers__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-numbers__items {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px;
	margin-bottom: 24px;
}

.rde-rd-new-design-numbers__item {
	position: relative;
	flex: 1 1 200px;
	min-width: 200px;
	padding: 20px 36px 20px 20px;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
}

.rde-rd-new-design-numbers__info {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #EDEAE2;
	color: #292828;
	font-family: var( --rde-new-design-font-body );
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

/* The description replaces the stat content in place (same box, not a
   floating tooltip) on hover/click, so it's stacked as an absolute overlay
   over the same padded box instead of positioned below it. */
.rde-rd-new-design-numbers__tooltip {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 34px 20px 16px;
	background-color: #292828;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.rde-rd-new-design-numbers__tooltip,
.rde-rd-new-design-numbers__tooltip p {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
}

.rde-rd-new-design-numbers__item:hover .rde-rd-new-design-numbers__tooltip,
.rde-rd-new-design-numbers__item.is-open .rde-rd-new-design-numbers__tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.rde-rd-new-design-numbers__item:hover .rde-rd-new-design-numbers__stat,
.rde-rd-new-design-numbers__item.is-open .rde-rd-new-design-numbers__stat {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Plain inline flow (not flexbox) on purpose: the number/suffix/label
   should wrap together like normal text (e.g. a short number can share its
   first line with the start of a long label) instead of each one being
   treated as an atomic flex item that jumps to its own line. */
.rde-rd-new-design-numbers__number,
.rde-rd-new-design-numbers__suffix {
	margin-right: 6px;
}

.rde-rd-new-design-numbers__number,
.rde-rd-new-design-numbers__suffix,
.rde-rd-new-design-numbers__label {
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 26px;
	color: #292828;
}

.rde-rd-new-design-numbers__end-note {
	max-width: 700px;
	margin: 0 0 24px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	color: #292828;
}

.rde-rd-new-design-numbers__end-note ul {
	margin: 0;
	padding-left: 18px;
}

.rde-rd-new-design-numbers__end-note li + li {
	margin-top: 4px;
}

.rde-rd-new-design-numbers__end-note p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-numbers__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * RD New Design - Services
 * The slider is native scroll + JS scrollBy (assets/js/rd-new-design.js),
 * not a library — same lightweight approach as the existing Blog widget's
 * slider (assets/js/blog-slider.js).
 */
.rde-rd-new-design-services-section {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-services {
}

.rde-rd-new-design-services__header {
	margin-bottom: 40px;
}

.rde-rd-new-design-services__title {
	margin: 0 0 12px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-services__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	color: #292828;
}

.rde-rd-new-design-services__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-services__nav {
	display: flex;
	flex: none;
	gap: 8px;
	margin-top: 24px;
}

/*
 * Shared slider nav-arrow button — used by any RD New Design slider (see
 * Rotate_Digital_Elementor_New_Design_Base_Widget::render_slider_nav_buttons()).
 * Default icon is the inline chevron <svg> below; widgets that pass a
 * custom icon (Services passes assets/img/icon-slider-arrow-left/right.svg)
 * render an <img> instead — sized via `.rde-slider-nav img`.
 */
.rde-slider-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 33px;
	padding: 0;
	border: 1px solid #292828;
	border-radius: 50px;
	background: transparent;
	color: #292828;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.rde-slider-nav:hover {
	background: #292828;
	color: #fff;
}

.rde-slider-nav svg {
	width: 16px;
	height: 16px;
}

.rde-slider-nav img {
	display: block;
	width: 31px;
	height: auto;
	transition: filter 0.2s ease;
}

/* The custom icon's color is baked into the SVG (not currentColor, since
   it's used via <img>), so invert it to stay visible against the dark
   hover background instead of the color transition the default svg gets. */
.rde-slider-nav:hover img {
	filter: invert( 1 );
}

/*
 * Shared slider pagination dot — auto-generated, one per slide, by
 * assets/js/rd-new-design.js's initSliderDots() into any
 * [data-rde-slider-dots] container. Default styling assumes a dark
 * background (e.g. Reviews' hero); a widget on a light background should
 * override the colors.
 */
.rde-rd-new-design-reviews__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.rde-slider-dot {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.rde-slider-dot.is-active {
	background-color: var( --rde-new-design-gold );
	width: 24px;
	height: 24px;
}

[data-rde-slider-viewport] {
	cursor: grab;
}

[data-rde-slider-viewport].is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

/*
 * Scroll reveal — fades an element in while sliding it from the given
 * direction, the first time it scrolls into view (see
 * assets/js/rd-new-design.js's initScrollReveal(), which flips
 * `is-visible`). Generic/reusable, not tied to any one widget.
 */
[data-rde-reveal] {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-rde-reveal="left"] {
	transform: translateX( -40px );
}

[data-rde-reveal="right"] {
	transform: translateX( 40px );
}

[data-rde-reveal="top"] {
	transform: translateY( -40px );
}

[data-rde-reveal="bottom"] {
	transform: translateY( 40px );
}

[data-rde-reveal].is-visible {
	opacity: 1;
	transform: none;
}

.rde-rd-new-design-services__slider {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rde-rd-new-design-services__slider::-webkit-scrollbar {
	display: none;
}

.rde-rd-new-design-services__track {
	display: flex;
	gap: 24px;
}

.rde-rd-new-design-services__card {
	display: flex;
	flex: 0 0 calc( ( 100% - 48px ) / 3 );
	flex-direction: column;
	max-width: calc( ( 100% - 48px ) / 3 );
	padding: 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	scroll-snap-align: start;
}

.rde-rd-new-design-services__image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}

.rde-rd-new-design-services__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px !important;
}

.rde-rd-new-design-services__card-title {
	margin: 20px 0 8px;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px!important;
	color: #292828;
}

.rde-rd-new-design-services__card-description {
	flex-grow: 1;
	margin: 0 0 16px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	color: #292828;
}

.rde-rd-new-design-services__explore {
	width: 100%;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 600;
	font-size: 18px;
	color: var( --rde-new-design-primary )!important;
	text-decoration: none;
}

.rde-rd-new-design-services__explore::after {
	content: '\2192';
}

.rde-rd-new-design-services__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

/*
 * RD New Design - Blog
 * Posts are grouped server-side into slides of 3 (1 featured + 2 small);
 * each .rde-rd-new-design-blog__slide is a full-width scroll-snap unit, so
 * the shared slider (assets/js/rd-new-design.js) advances a whole group at
 * once instead of one card at a time.
 */
.rde-rd-new-design-blog-section {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-blog {
}

.rde-rd-new-design-blog__card {
	margin: 0 auto;
	padding: 40px;
	background-color: #fff;
	border-radius: 60px;
}

.rde-rd-new-design-blog__header {
	display: flex;
	align-items: flex-end;
	margin-bottom: 24px;
}

.rde-rd-new-design-blog__intro {
	max-width: 900px;
}

.rde-rd-new-design-blog__title {
	margin: 0 0 8px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-blog__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	color: #292828;
}

.rde-rd-new-design-blog__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-blog__nav {
	display: flex;
	flex: none;
	gap: 8px;
	margin-top: 24px;
}

.rde-rd-new-design-blog__slider {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rde-rd-new-design-blog__slider::-webkit-scrollbar {
	display: none;
}

.rde-rd-new-design-blog__track {
	display: flex;
}

.rde-rd-new-design-blog__slide {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	max-width: 100%;
	gap: 16px;
	scroll-snap-align: start;
}

.rde-rd-new-design-blog__featured,
.rde-rd-new-design-blog__small-post {
	display: flex;
	background-color: #F5F1EE;
	border-radius: 16px;
	text-decoration: none;
}

.rde-rd-new-design-blog__featured {
	gap: 24px;
	padding: 20px;
}

.rde-rd-new-design-blog__featured-image,
.rde-rd-new-design-blog__small-post-image {
	display: block;
	flex: none;
	overflow: hidden;
	border-radius: 12px;
}

.rde-rd-new-design-blog__featured-image {
	flex-basis: 45%;
	max-width: 45%;
}

.rde-rd-new-design-blog__featured-image img,
.rde-rd-new-design-blog__small-post-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px !important;
}

.rde-rd-new-design-blog__small-post-image img {
	height: auto;
	object-fit: contain;
}

.rde-rd-new-design-blog__featured-content {
	flex: 1;
	min-width: 0;
}

.rde-rd-new-design-blog__small-posts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.rde-rd-new-design-blog__small-post {
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
}

.rde-rd-new-design-blog__small-post-image {
	flex-basis: 145px;
	width: 145px;
}

.rde-rd-new-design-blog__small-post-content {
	flex: 1;
	min-width: 0;
}

.rde-rd-new-design-blog__post-title {
	margin: 0 0 6px 0;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px!important;
	line-height: 1.3;
	color: #292828;
}

.rde-rd-new-design-blog__featured .rde-rd-new-design-blog__post-title {
	font-size: 20px;
}

.rde-rd-new-design-blog__post-excerpt {
	margin: 0 0 10px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #292828;
}

.rde-rd-new-design-blog__read-more {
	width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 600;
	font-size: 18px;
	color: var( --rde-new-design-primary );
}

.rde-rd-new-design-blog__read-more::after {
	content: '\2192';
}

.rde-rd-new-design-blog__empty {
	font-family: var( --rde-new-design-font-body );
	font-size: 14px;
	color: #292828;
}

.rde-rd-new-design-blog__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

/*
 * RD New Design - Promise Section
 * --rde-new-design-dark is an approximation of the card's dark olive
 * background — no exact hex from a spec, revisit once you have one.
 */
.rde-rd-new-design-promise-section {
	background-color: var( --rde-new-design-bg );
	padding-top: 0!important;
}

@media (min-width: 700px) {
	.rde-rd-new-design-promise-section-section {
		padding-top: 0!important;
	}
}

.rde-rd-new-design-promise {
	padding: 0 0 80px 0;
	text-align: center;
}

.rde-rd-new-design-promise__header {
	margin: 0 auto 40px;
}

.rde-rd-new-design-promise__title {
	margin: 0 0 12px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-promise__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	color: #292828;
}

.rde-rd-new-design-promise__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-promise__card {
	max-width: 700px;
	margin: 0 auto;
	padding: 48px;
	background-color: var( --rde-new-design-dark );
	border-radius: 16px;
	text-align: left;
}

.rde-rd-new-design-promise__item + .rde-rd-new-design-promise__item {
	margin-top: 32px;
}

.rde-rd-new-design-promise__item-title {
	margin: 0 0 4px 0;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px!important;
	color: #fff;
}

.rde-rd-new-design-promise__item-description {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	color: #fff;
}

.rde-rd-new-design-promise__checks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rde-rd-new-design-promise__check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	color: #fff;
}

.rde-rd-new-design-promise__check-icon {
	display: block;
	flex: none;
	width: 16px;
	height: auto;
}

.rde-rd-new-design-promise__image {
	max-width: var( --rde-new-design-container );
	margin: 48px auto 0;
}

.rde-rd-new-design-promise__image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * RD New Design - How We Work
 * Two zones with different backgrounds (image banner, then plain timeline)
 * — see the note at the top of class-rd-new-design-how-we-work.php for why
 * this widget builds its own section/container markup instead of using
 * render_wrapper_start()/render_wrapper_end().
 */

@media (min-width: 700px) {
	.rde-rd-new-design-how-we-work-section {
		padding-top: 0!important;
	}
}
.rde-rd-new-design-how-we-work__banner {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-how-we-work__banner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.55 );
	pointer-events: none;
}

.rde-rd-new-design-how-we-work__banner .rde-container {
	position: relative;
	z-index: 2;
}

.rde-rd-new-design-how-we-work__banner-content {
	padding: 90px 0;
	color: #fff;
}

.rde-rd-new-design-how-we-work__title {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-how-we-work__description {
	margin: 0 0 24px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.6;
	color: #fff;
}

.rde-rd-new-design-how-we-work__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-how-we-work__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rde-rd-new-design-how-we-work__steps-wrap {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-how-we-work__steps {
	max-width: 640px;
	padding-top: 80px;
}

.rde-rd-new-design-how-we-work__step {
	position: relative;
	display: flex;
	gap: 20px;
	padding-bottom: 36px;
}

.rde-rd-new-design-how-we-work__step:last-child {
	padding-bottom: 0;
}

.rde-rd-new-design-how-we-work__step:not( :last-child )::before {
	content: '';
	position: absolute;
	top: 29px;
	left: 20px;
	bottom: -24px;
	width: 2px;
	background-color: var( --rde-new-design-primary );
}

.rde-rd-new-design-how-we-work__step-marker {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	margin-top: 22px;
	background-color: var( --rde-new-design-bg );
	border: 12px solid var( --rde-new-design-primary );
	border-radius: 50%;
	z-index: 1;
}

.rde-rd-new-design-how-we-work__step-marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	transform: translate( -50%, -50% );
}

.rde-rd-new-design-how-we-work__step-number {
	display: block;
	margin-bottom: 4px;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 66px;
	line-height: 1;
	color: var( --rde-new-design-gold );
}

.rde-rd-new-design-how-we-work__step-title {
	margin: 0 0 4px 0;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px!important;
	color: #292828;
}

.rde-rd-new-design-how-we-work__step-description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #292828;
}

/*
 * RD New Design - Tabs
 * Panel content is free-form WYSIWYG (the client's own h2/h3/h4/p/ul), so
 * these rules style generic tags within the panel rather than widget-authored
 * classes — same overlay treatment as the other single-column banners.
 */
.rde-rd-new-design-tabs-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-tabs-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.55 );
	pointer-events: none;
}

.rde-rd-new-design-tabs-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-tabs {
	padding: 20px 0;
}

.rde-rd-new-design-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.rde-rd-new-design-tabs__tab {
	padding: 10px 18px;
	border-radius: 50px;
	background: rgba( 255, 255, 255, 0.11 );
	color: #fff;
	font-family: var( --rde-new-design-font-body );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	text-decoration: none!important;
}

.rde-rd-new-design-tabs__tab:hover{
	text-decoration: none!important;
}

.rde-rd-new-design-tabs__tab.is-active {
	background: #fff;
	border-color: #fff;
	color: #292828;
}

.rde-rd-new-design-tabs__panel {
	display: none;
}

.rde-rd-new-design-tabs__panel.is-active {
	display: block;
}

.rde-rd-new-design-tabs__panel h2,
.rde-rd-new-design-tabs__panel h3,
.rde-rd-new-design-tabs__panel h4 {
	margin: 24px 0 10px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-tabs__panel h2:first-child,
.rde-rd-new-design-tabs__panel h3:first-child,
.rde-rd-new-design-tabs__panel h4:first-child {
	margin-top: 0;
}

.rde-rd-new-design-tabs__panel h2 {
	font-size: 30px;
}

.rde-rd-new-design-tabs__panel h3 {
	font-size: 20px;
}

.rde-rd-new-design-tabs__panel h4 {
	font-size: 16px;
}

.rde-rd-new-design-tabs__panel p {
	margin: 0 0 14px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.6;
	color: #fff;
}

.rde-rd-new-design-tabs__panel p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-tabs__panel ul,
.rde-rd-new-design-tabs__panel ol {
	margin: 0 0 14px 0;
	padding-left: 18px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	line-height: 1.8;
	color: #fff;
}

.rde-rd-new-design-tabs__panel li + li {
	margin-top: 2px;
}

.rde-rd-new-design-tabs__panel a {
	color: #fff;
}

/*
 * RD New Design - FAQ
 * Accordion is single-open (assets/js/rd-new-design.js) — opening one item
 * closes the rest, matching the reference (only the first item expanded).
 */
.rde-rd-new-design-faq-section {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-faq {
}

.rde-rd-new-design-faq__header {
	margin-bottom: 24px;
}

.rde-rd-new-design-faq__title {
	margin: 0 0 12px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #292828;
	text-transform: uppercase;
}

.rde-rd-new-design-faq__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 14px;
	color: #292828;
}

.rde-rd-new-design-faq__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-faq__item {
	border-bottom: 1px solid rgba( 19, 19, 19, 0.15 );
}

.rde-rd-new-design-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	text-decoration: none!important;
}

.rde-rd-new-design-faq__question:hover{
	text-decoration: none!important;
}

.rde-rd-new-design-faq__question-text {
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px;
	color: #292828;
}



.rde-rd-new-design-faq__icon {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.rde-rd-new-design-faq__icon::before,
.rde-rd-new-design-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var( --rde-new-design-primary );
	transform: translate( -50%, -50% );
}

.rde-rd-new-design-faq__icon::before {
	width: 16px;
	height: 2px;
}

.rde-rd-new-design-faq__icon::after {
	width: 2px;
	height: 16px;
	transition: opacity 0.2s ease;
}

.rde-rd-new-design-faq__item.is-open .rde-rd-new-design-faq__icon::after {
	opacity: 0;
}

.rde-rd-new-design-faq__answer {
	display: none;
	padding-bottom: 20px;
}

.rde-rd-new-design-faq__item.is-open .rde-rd-new-design-faq__answer {
	display: block;
}

.rde-rd-new-design-faq__answer-inner,
.rde-rd-new-design-faq__answer-inner p {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	line-height: 1.7;
	color: #292828;
}

.rde-rd-new-design-faq__answer-inner p + p {
	margin-top: 10px;
}

/*
 * RD New Design - Community
 * No per-item color field was requested, so the two-tone look (green /
 * cream cards) comes from an odd/even alternation instead — ask if you
 * want explicit per-item color control later.
 */
.rde-rd-new-design-community-section {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 80px;
}

.rde-rd-new-design-community-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 16, 16, 16, 0.35 );
	pointer-events: none;
}

.rde-rd-new-design-community-section .rde-container {
	position: relative;
	z-index: 2;
	max-width: var( --rde-new-design-container );
}

.rde-rd-new-design-community {
	text-align: center;
}

.rde-rd-new-design-community__header {
	max-width: 600px;
	margin: 0 auto 40px;
}

.rde-rd-new-design-community__title {
	margin: 0 0 10px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-community__description {
	margin: 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px!important;
	color: #fff;
}

.rde-rd-new-design-community__description p:last-child {
	margin-bottom: 0;
}

.rde-rd-new-design-community__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}

.rde-rd-new-design-community__item {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	min-height: 130px;
	border-radius: 40px;
	text-decoration: none;
}

.rde-rd-new-design-community__item-content {
	position: relative;
	z-index: 2;
	flex: 0 0 70%;
	max-width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 24px 20px 24px 28px;
}

.rde-rd-new-design-community__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin-bottom: 4px;
}

.rde-rd-new-design-community__item-icon img {
	display: block;
	width: 100px;
	height: 100px;
}

.rde-rd-new-design-community__item-title {
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px;
}

.rde-rd-new-design-community__item-explore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --rde-new-design-font-body );
	font-weight: 600;
	font-size: 18px;
}

.rde-rd-new-design-community__item-explore::after {
	content: '\2192';
}

.rde-rd-new-design-community__item-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 40%;
}

.rde-rd-new-design-community__item-image img {
	display: block;
	width: 100%;
	height: 100%!important;
	object-fit: cover;
}

.rde-rd-new-design-community__item-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rde-rd-new-design-community__item:nth-child( odd ) {
	background-color: var( --rde-new-design-bg );
}

.rde-rd-new-design-community__item:nth-child( odd ) .rde-rd-new-design-community__item-title,
.rde-rd-new-design-community__item:nth-child( odd ) .rde-rd-new-design-community__item-explore {
	color: #292828;
}

.rde-rd-new-design-community__item:nth-child( odd ) .rde-rd-new-design-community__item-image::before {
	background: linear-gradient( to right, var( --rde-new-design-bg ) 0%, rgba( 102, 122, 98, 0 ) 35% );
}

.rde-rd-new-design-community__item:nth-child( even ) {
	background-color: var( --rde-new-design-primary );
}

.rde-rd-new-design-community__item:nth-child( even ) .rde-rd-new-design-community__item-title,
.rde-rd-new-design-community__item:nth-child( even ) .rde-rd-new-design-community__item-explore {
	color: #fff;
}

.rde-rd-new-design-community__item:nth-child( even ) .rde-rd-new-design-community__item-image::before {
	background: linear-gradient( to right, var( --rde-new-design-primary ) 0%, rgba( 231, 227, 218, 0 ) 35% );
}

/*
 * RD New Design - Reviews
 * Two visually distinct zones (dark photo hero + light Google-info card),
 * so — like the How We Work widget — this doesn't use the shared single-
 * background-image render_wrapper_start()/end() and builds its own
 * section markup instead. Content is a mix of editable fields (background
 * image/title/buttons) and data pulled live from Trustindex — see
 * widgets/class-rd-new-design-reviews.php for where each comes from.
 */

.rde-rd-new-design-reviews-section{
	padding: 0!important;
}

.rde-rd-new-design-reviews__hero {
	position: relative;
	overflow: hidden;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rde-rd-new-design-reviews__hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 48px;
	padding: 100px 0;
}

.rde-rd-new-design-reviews__hero-content {
	flex: 1 1 380px;
	max-width: 460px;
	color: #fff;
}

.rde-rd-new-design-reviews__title {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-heading );
	font-weight: 400;
	font-size: 64px!important;
	line-height: 1.15;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}

.rde-rd-new-design-reviews__tagline {
	margin: 0 0 24px 0;
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
}

.rde-rd-new-design-reviews__tagline-number {
	font-weight: 700;
	font-size: 36px;
	color: #fff;
}

.rde-rd-new-design-reviews__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rde-rd-new-design-reviews__slider {
	flex: 1 1 380px;
	max-width: 520px;
	padding-left: 40px;
}

.rde-rd-new-design-reviews__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rde-rd-new-design-reviews__viewport::-webkit-scrollbar {
	display: none;
}

.rde-rd-new-design-reviews__track {
	display: flex;
}

.rde-rd-new-design-reviews__quote-card {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 32px;
	background-color: #F3F1EC;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba( 0, 0, 0, 0.25 );
	scroll-snap-align: start;
}

.rde-rd-new-design-reviews__quote-mark {
	display: block;
	width: 46px;
	height: auto;
	margin-bottom: 12px;
}

.rde-rd-new-design-reviews__quote-text {
	margin: 0 0 16px 0;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px;
	line-height: 1.6;
	color: #292828;
	height: 400px;
	overflow-y: scroll;
}

.rde-rd-new-design-reviews__quote-author {
	font-family: var( --rde-new-design-font-body );
	font-weight: 700;
	font-size: 18px;
	color: #292828;
}

.rde-rd-new-design-reviews__admin-notice {
	margin: 0;
	padding: 12px 16px;
	background-color: rgba( 255, 255, 255, 0.1 );
	border: 1px dashed rgba( 255, 255, 255, 0.4 );
	border-radius: 8px;
	font-family: var( --rde-new-design-font-body );
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.8 );
}

.rde-rd-new-design-reviews__summary {
	background-color: var( --rde-new-design-bg );
	padding: 48px 0;
}

.rde-rd-new-design-reviews__summary .rde-rd-new-design-reviews__admin-notice {
	background-color: #fff;
	border-color: rgba( 41, 40, 40, 0.2 );
	color: #57585B;
}

.rde-rd-new-design-reviews__summary-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0 auto;
	padding: 32px;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
}

.rde-rd-new-design-reviews__summary-button {
	display: flex;
	justify-content: flex-start;
	margin: 24px auto 0;
}

.rde-rd-new-design-reviews__google-logo {
	flex: none;
	width: 36px;
	height: 36px;
}

.rde-rd-new-design-reviews__summary-info {
	flex: 1 1 200px;
	min-width: 0;
}

.rde-rd-new-design-reviews__summary-name {
	margin: 0 0 6px 0;
	font-family: var( --rde-new-design-font-serif );
	font-weight: 400;
	font-size: 36px;
	color: #292828;
}

.rde-rd-new-design-reviews__stars {
	display: inline-flex;
	gap: 2px;
	margin-right: 8px;
}

.rde-rd-new-design-reviews__star {
	width: 15px;
	height: 15px;
	fill: #DCD7C9;
}

.rde-rd-new-design-reviews__star.is-filled {
	fill: var( --rde-new-design-gold );
}

.rde-rd-new-design-reviews__summary-count {
	font-family: var( --rde-new-design-font-body );
	font-weight: 300;
	font-size: 18px;
	color: #57585B;
}

.rde-rd-new-design-reviews__summary-score {
	flex: none;
	font-family: var( --rde-new-design-font-body );
	font-weight: 700;
	font-size: 64px;
	color: #292828;
}

@media ( max-width: 767px ) {
	.rde-button{
		font-size: 14px;
	}

	.rd-new-design-header__right {
		gap: 16px;
	}

	.rd-new-design-header__nav > ul {
		gap: 12px;
	}

	.rde-rd-new-design-banner {
		min-height: 0;
		padding: 60px 0;
	}

	.rde-rd-new-design-banner__title {
		font-size: 48px;
	}

	.rde-rd-new-design-feature-banner {
		flex-direction: column;
		gap: 40px;
	}

	.rde-rd-new-design-feature-banner__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-feature-banner-simple__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-cta__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-form {
		flex-direction: column;
		gap: 40px;
	}

	.rde-rd-new-design-form__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-form__form-wrap {
		padding: 28px;
	}

	.rde-rd-new-design-trust__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-trust__item {
		flex-basis: 100%;
		max-width: none;
	}

	.rde-rd-new-design-journey {
	}

	.rde-rd-new-design-journey__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-journey__item {
		flex-basis: 100%;
		max-width: none;
	}

	.rde-rd-new-design-numbers__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-numbers__item {
		flex-basis: 100%;
	}

	.rde-rd-new-design-services__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.rde-rd-new-design-services__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-services__card {
		flex-basis: 100%;
		max-width: 100%;
	}

	.rde-rd-new-design-blog__card {
		border-radius: 16px;
		padding: 24px;
	}

	.rde-rd-new-design-blog__title {
		font-size: 36px!important;
	}

	/*
	 * Below 767px every post card (featured or small) gets the same
	 * image-on-top/content-below layout, and — since the slide/small-posts
	 * wrappers become `display: contents` — each individual post becomes
	 * its own full-width scroll-snap slide instead of the grouped
	 * 1-featured+2-small slide used above this breakpoint, so swiping only
	 * ever moves one post at a time.
	 */

	.rde-rd-new-design-blog__header{
		flex-direction: column;
		align-items: flex-start;
	}

	.rde-rd-new-design-blog__slide {
		display: contents;
	}

	.rde-rd-new-design-blog__small-posts {
		display: contents;
	}

	.rde-rd-new-design-blog__featured,
	.rde-rd-new-design-blog__small-post {
		flex: 0 0 100%;
		flex-direction: column;
		max-width: 100%;
		scroll-snap-align: start;
	}

	.rde-rd-new-design-blog__featured-image {
		width: 100%;
		max-width: none;
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}

	/* No aspect-ratio/object-fit-cover here on purpose — the small-post
	   image must stay uncropped (see .rde-rd-new-design-blog__small-post-image
	   img above), just repositioned to full-width/top instead of a fixed
	   145px column. */
	.rde-rd-new-design-blog__small-post-image {
		width: 100%;
		max-width: none;
		flex-basis: auto;
	}

	.rde-rd-new-design-tabs__panel h2, .rde-rd-new-design-tabs__panel h3, .rde-rd-new-design-tabs__panel h4 {
		font-size: 36px!important;
	}

	.rde-rd-new-design-promise__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-promise__card {
		padding: 32px 24px;
	}

	.rde-rd-new-design-how-we-work__banner-content {
		padding: 60px 0;
	}

	.rde-rd-new-design-how-we-work__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-how-we-work__steps {
		padding: 50px 0;
	}

	.rde-rd-new-design-tabs__panel h2 {
		font-size: 24px;
	}

	.rde-rd-new-design-faq__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-faq__question-text {
		font-size: 22px;
	}

	.rde-rd-new-design-community__title{
		font-size: 36px!important;
	}


	.rde-rd-new-design-community__item {
		min-height: 110px;
		border-radius: 16px;
	}

	.rde-rd-new-design-community__item-content {
		flex-basis: 65%;
		max-width: 65%;
		padding: 16px 14px 16px 20px;
	}

	.rde-rd-new-design-community__item-image {
		width: 42%;
	}

	.rd-new-design-footer {
		border-radius: 28px 28px 0 0;
	}

	.rd-new-design-footer__inner {
		padding: 40px 20px 24px;
	}

	.rd-new-design-footer__columns {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 32px;
	}

	.rd-new-design-footer__bottom{
		flex-direction: column-reverse;
		text-align: center;
	}

	.rde-rd-new-design-how-we-work__step-title, .rde-rd-new-design-form__form-title, .rde-rd-new-design-feature-banner__subtitle, .rde-rd-new-design-journey__item-title, .rde-rd-new-design-blog__post-title, .rde-rd-new-design-community__item-title{
		font-size: 28px !important;
	}

	.rde-rd-new-design-feature-banner, .rde-rd-new-design-form, .rde-rd-new-design-journey{
		padding: 0;
	}

	.rde-rd-new-design-reviews__hero-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 60px 0;
	}

	.rde-rd-new-design-reviews__hero-content,
	.rde-rd-new-design-reviews__slider {
		max-width: none;
	}

	.rde-rd-new-design-reviews__hero-content{
		flex: inherit;
	}

	.rde-rd-new-design-reviews__slider{
		flex: inherit;
		padding-left: 0;
	}

	.rde-rd-new-design-reviews__title {
		font-size: 36px!important;
	}

	.rde-rd-new-design-reviews__quote-text{
		font-size: 22px;
		height: auto
	}

	.rde-rd-new-design-reviews__summary-card {
		justify-content: center;
		text-align: center;
		padding: 24px;
	}

	.rde-rd-new-design-reviews__summary-info {
		flex-basis: 100%;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.rd-new-design-footer__columns {
		grid-template-columns: 1fr 1fr;
	}

	.rd-new-design-footer__col--brand {
		grid-column: 1 / -1;
	}

	.rde-rd-new-design-services__card {
		flex-basis: calc( ( 100% - 24px ) / 2 );
		max-width: calc( ( 100% - 24px ) / 2 );
	}
}