/*
Theme Name: Regulating AI
Theme URI: https://regulating.ai
Author: Regulating AI
Author URI: https://regulating.ai
Description: Custom WordPress theme for RegulatingAI — an AI governance, policy intelligence, and advocacy platform. Built on Bootstrap 5, Font Awesome 6, and Slick Slider, with Poppins as the primary typeface. Compatible with Elementor and the Classic Editor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: regulating-ai
Tags: custom-menu, featured-images, full-width-template, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* =========================================================
   1. CSS VARIABLES / DESIGN TOKENS
   ========================================================= */
:root {
	/* Brand colors */
	--rai-navy:        #0B1E3C;
	--rai-navy-dark:   #081428;
	--rai-navy-soft:   #10294D;
	--rai-teal:        #14C7C1;
	--rai-teal-dark:   #0FA8A3;
	--rai-blue:        #2F6FED;
	--rai-green:       #17A567;
	--rai-orange:      #FF7A1A;
	--rai-amber:       #F5A623;

	/* Neutrals */
	--rai-white:       #FFFFFF;
	--rai-bg-light:    #F5F8FB;
	--rai-bg-soft:     #EFF3F8;
	--rai-border:      #E3E8EF;
	--rai-text:        #14213D;
	--rai-text-muted:  #667085;
	--rai-text-light:  #98A2B3;

	/* Typography */
	--rai-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--rai-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	--rai-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
	--rai-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

	/* Layout */
	--rai-radius-sm: 8px;
	--rai-radius-md: 14px;
	--rai-radius-lg: 22px;
	--rai-radius-pill: 999px;
	--rai-shadow-sm: 0 2px 10px rgba(11, 30, 60, 0.06);
	--rai-shadow-md: 0 12px 32px rgba(11, 30, 60, 0.10);
	/* Section vertical padding — responsive scale (see assets/css/responsive.css):
	   mobile 20px, tablet/ipad 40px, laptop 60px, desktop and above 80px. */
	--rai-section-y: 80px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--rai-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--rai-text);
	background-color: var(--rai-white);
	font-weight: 400;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* Font Awesome icons: solid stays at its required 900 weight (that's how
   the browser knows to pull glyphs from the Solid face rather than the
   near-empty free-tier Regular face — forcing 400 here blanks most solid
   icons out again); brands genuinely only has a 400 weight. */
.fa-solid, .fas { font-weight: 900; font-size: 20px; color: #000000; }
.fa-brands, .fab { font-weight: 400; font-size: 20px; color: #000000; }

a {
	color: var(--rai-blue);
	text-decoration: none;
	transition: color .2s ease, opacity .2s ease;
}
a:hover, a:focus { color: var(--rai-teal-dark); }

ul, ol { padding-left: 1.25rem; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rai-font);
	font-weight: 600;
	color: var(--rai-navy);
	line-height: 1.25;
	margin: 0 0 .75rem;
}
h1 { font-size: var(--rai-h1); font-weight: 700; }
h2 { font-size: var(--rai-h2); font-weight: 700; }
h3 { font-size: var(--rai-h3); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

button, input, select, textarea { font-family: inherit; }

.rai-container {
	width: 100%;
	max-width: 100%;
	padding: 0 80px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--rai-navy);
	color: var(--rai-white);
	padding: 12px 20px;
	z-index: 10000;
}
.skip-link:focus { top: 0; }

/* =========================================================
   3. LAYOUT / SECTIONS
   ========================================================= */
.rai-section { padding-top: var(--rai-section-y); padding-bottom: var(--rai-section-y); position: relative; }
.rai-section--sm { --rai-section-y: 56px; }
.rai-bg-light { background-color: var(--rai-bg-light); }
.rai-bg-white { background-color: var(--rai-white); }
.rai-bg-navy  { background-color: var(--rai-navy); color: var(--rai-white); }
.rai-bg-navy .rai-section-title,
.rai-bg-navy h1, .rai-bg-navy h2, .rai-bg-navy h3 { color: var(--rai-white); }
.rai-bg-teal-gradient {
	background: linear-gradient(120deg, var(--rai-teal) 0%, var(--rai-blue) 100%);
	color: var(--rai-white);
}
.rai-bg-teal-gradient h2, .rai-bg-teal-gradient h3 { color: var(--rai-white); }

.rai-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.rai-section-heading--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.rai-section-heading .rai-section-title { margin-bottom: 0; }

.rai-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rai-teal-dark);
	margin-bottom: 12px;
}
.rai-eyebrow::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--rai-orange);
	display: inline-block;
}

/* =========================================================
   4. BUTTONS
   ========================================================= */
.rai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1;
	padding: 14px 28px;
	border-radius: var(--rai-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: all .2s ease;
}
/* Shared lift/shadow for every .rai-btn-* variant (Newsletter, Join
   Community, and the generic .rai-btn-primary/navy/outline/white family
   used elsewhere) — layered on top of each variant's own color change. */
.rai-btn:hover { transform: translateY(-2px); box-shadow: var(--rai-shadow-md); }
.rai-btn-primary { background: var(--rai-teal); color: var(--rai-navy); }
.rai-btn-primary:hover { background: var(--rai-teal-dark); color: var(--rai-white); }

.rai-btn-navy { background: var(--rai-navy); color: var(--rai-white); }
.rai-btn-navy:hover { background: var(--rai-navy-soft); color: var(--rai-white); }

.rai-btn-outline { background: transparent; color: var(--rai-navy); border-color: var(--rai-border); }
.rai-btn-outline:hover { border-color: var(--rai-teal); color: var(--rai-teal-dark); }

.rai-btn-white { background: var(--rai-white); color: var(--rai-navy); }
.rai-btn-white:hover { background: var(--rai-bg-soft); }

.rai-btn-outline-white { background: transparent; color: var(--rai-white); border-color: rgba(255,255,255,.4); }
.rai-btn-outline-white:hover { border-color: var(--rai-white); background: rgba(255,255,255,.08); }

.rai-btn-sm { padding: 10px 20px; font-size: .8125rem; }
.rai-btn-block { width: 100%; }

/* =========================================================
   5. TAGS / BADGES
   ========================================================= */
.rai-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 5px 12px;
	border-radius: var(--rai-radius-pill);
	background: var(--rai-bg-soft);
	color: var(--rai-navy);
}
.rai-tag-orange { background: rgba(255, 122, 26, .12); color: var(--rai-orange); }
.rai-tag-blue   { background: rgba(47, 111, 237, .10); color: var(--rai-blue); }
.rai-tag-green  { background: rgba(23, 165, 103, .12); color: var(--rai-green); }
.rai-tag-teal   { background: rgba(20, 199, 193, .12); color: var(--rai-teal-dark); }

/* =========================================================
   6. HEADER
   ========================================================= */
.rai-topbar {
	background: var(--rai-navy);
	display: flex;
	align-items: stretch;
	overflow: hidden;
}
.rai-topbar-label {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #EF4444;
	color: #FFFFFF;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	padding: 16px 32px;
}
.rai-topbar-ticker {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 32px;
	background: #28508C;
}
.rai-topbar-ticker-track { display: inline-flex; align-items: center; animation: rai-ticker 30s linear infinite; will-change: transform; }
.rai-topbar-ticker-item {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
}
.rai-topbar-ticker-sep { display: inline-block; margin: 0 15px; color: #FFFFFF; font-size: 18px; line-height: 1; vertical-align: middle; }
@keyframes rai-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rai-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: #F7F8FA;
	border-bottom: 1px solid var(--rai-border);
	padding: 25px 80px;
}
.rai-header .rai-container {
	max-width: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.rai-logo { max-height: 48px; width: auto; }
.rai-logo--text { font-size: 1.375rem; font-weight: 700; color: var(--rai-navy); }

.rai-main-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rai-main-nav .navbar-nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-direction: row;
}
.rai-main-nav .nav-link {
	display: inline-block;
	padding: 10px 12px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	color: #000000;
	text-align: center;
	white-space: nowrap;
	border-radius: var(--rai-radius-sm);
}
.rai-main-nav .nav-link:hover,
.rai-main-nav .current-menu-item > .nav-link { color: #0167FF; }
.rai-main-nav .dropdown-menu {
	background: #FFFFFF;
	border: 1px solid var(--rai-border);
	border-radius: var(--rai-radius-md);
	box-shadow: 0 16px 40px rgba(11, 30, 60, .12);
	padding: 8px;
	margin-top: 8px !important;
}
.rai-main-nav .dropdown-item {
	display: block;
	font-family: 'Poppins', var(--rai-font);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	color: #000000;
	text-align: left;
	border-radius: var(--rai-radius-sm);
	padding: 10px 14px;
	transition: background-color .15s ease, color .15s ease;
}
.rai-main-nav .dropdown-item:hover,
.rai-main-nav .dropdown-item:focus { background: var(--rai-bg-light); color: #0167FF; }

.rai-header-actions { display: flex; align-items: center; gap: 24px; }

.rai-btn-newsletter {
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	border: none;
	border-radius: 0;
	padding: 8px 0;
}
/* Opts out of the shared .rai-btn:hover lift/shadow — Newsletter is a
   flat text-style link (no border/background), so the shadow read as an
   odd floating box around it. */
.rai-btn-newsletter:hover { color: #0167FF; transform: none; box-shadow: none; }

.rai-btn-join-community {
	background-color: #0167FF;
	color: #FFFFFF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: center;
	border: none;
	border-radius: 8px;
	padding: 12px 28px;
}
.rai-btn-join-community:hover { background-color: #0052D6; color: #FFFFFF; }

.rai-nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid var(--rai-border);
	background: var(--rai-white);
	border-radius: var(--rai-radius-sm);
	width: 44px; height: 44px;
	flex: none;
	cursor: pointer;
}
.rai-nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--rai-navy);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.rai-nav-toggle.is-active .rai-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rai-nav-toggle.is-active .rai-nav-toggle-bar:nth-child(2) { opacity: 0; }
.rai-nav-toggle.is-active .rai-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rai-mobile-nav-actions { display: none; }
.rai-header-actions-only { display: inline-flex; }

/* =========================================================
   7. HERO
   ========================================================= */
.rai-hero { padding-top: 72px; padding-bottom: 72px; background: var(--rai-bg-light); overflow: hidden; }
.rai-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.rai-hero-eyebrow { color: var(--rai-teal-dark); }
.rai-hero h1 { margin-bottom: 20px; }
.rai-hero h1 .rai-text-accent { color: var(--rai-teal-dark); }
.rai-hero-desc { font-size: 1.0625rem; color: var(--rai-text-muted); max-width: 560px; margin-bottom: 32px; }
.rai-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }

.rai-hero-stats { display: flex; flex-wrap: wrap; gap: 40px; }
.rai-stat-num { font-size: 1.75rem; font-weight: 700; color: var(--rai-navy); }
.rai-stat-label { font-size: .8125rem; color: var(--rai-text-muted); }

.rai-episode-card {
	background: var(--rai-white);
	border-radius: var(--rai-radius-lg);
	box-shadow: var(--rai-shadow-md);
	padding: 16px;
}
.rai-episode-card-media { position: relative; border-radius: var(--rai-radius-md); overflow: hidden; margin-bottom: 16px; }
.rai-episode-card-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.rai-play-btn {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--rai-white); color: var(--rai-navy);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.125rem; box-shadow: var(--rai-shadow-md);
	border: none; cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}
.rai-episode-card-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rai-teal-dark); margin-bottom: 8px; display: block; }
.rai-episode-card h3 { font-size: 1.125rem; margin-bottom: 12px; }
.rai-episode-card-meta { font-size: .8125rem; color: var(--rai-text-muted); }

/* =========================================================
   8. POLICYORA INTRO
   ========================================================= */
.rai-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rai-intro-copy p { color: var(--rai-text-muted); font-size: 1.0625rem; margin-bottom: 28px; }
.rai-intro-media { background: var(--rai-bg-soft); border-radius: var(--rai-radius-lg); padding: 24px; }
.rai-intro-media img { border-radius: var(--rai-radius-md); }
.rai-intro-steps { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 8px; }
.rai-intro-step { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .875rem; color: var(--rai-navy); }
.rai-intro-step-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--rai-navy); color: var(--rai-white); display: flex; align-items: center; justify-content: center; font-size: .8125rem; }
.rai-intro-step-arrow { color: var(--rai-text-light); }
.rai-intro-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

/* =========================================================
   9. WHY WE BUILT IT
   ========================================================= */
.rai-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rai-why-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--rai-border); }
.rai-why-item:last-child { border-bottom: none; }
.rai-why-num { flex: none; width: 48px; height: 48px; border-radius: var(--rai-radius-sm); background: var(--rai-bg-soft); color: var(--rai-teal-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rai-why-item h3 { font-size: 1.125rem; margin-bottom: 8px; }
.rai-why-item p { color: var(--rai-text-muted); font-size: .9375rem; }
.rai-why-media { position: relative; text-align: center; }

/* =========================================================
   10. PODCAST
   ========================================================= */
.rai-podcast-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: stretch; }
.rai-featured-episode { background: var(--rai-navy); border-radius: var(--rai-radius-lg); overflow: hidden; color: var(--rai-white); }
.rai-featured-episode-media { position: relative; }
.rai-featured-episode-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .85; }
.rai-featured-episode-body { padding: 24px 28px 28px; }
.rai-featured-episode-body h3 { color: var(--rai-white); font-size: 1.375rem; margin-bottom: 10px; }
.rai-featured-episode-meta { color: rgba(255,255,255,.65); font-size: .875rem; }

.rai-episode-list { display: flex; flex-direction: column; gap: 16px; }
.rai-episode-list-item {
	display: flex; flex-direction: column; gap: 8px;
	background: var(--rai-white); border: 1px solid var(--rai-border);
	border-radius: var(--rai-radius-md); padding: 20px;
	position: relative;
}
.rai-episode-list-num {
	position: absolute; top: 20px; right: 20px;
	font-size: 1.5rem; font-weight: 700; color: var(--rai-bg-soft);
}
.rai-episode-list-item h4 { font-size: 1rem; margin: 4px 0; max-width: 85%; }
.rai-episode-list-meta { font-size: .8125rem; color: var(--rai-text-muted); }

/* =========================================================
   11. EVENTS & SUMMITS
   ========================================================= */
.rai-events-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
.rai-event-list { display: flex; flex-direction: column; gap: 16px; }
.rai-event-card {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--rai-radius-md); padding: 20px 24px;
}
.rai-event-card-main { display: flex; align-items: center; gap: 20px; }
.rai-event-date { flex: none; text-align: center; min-width: 56px; }
.rai-event-date-day { font-size: 1.375rem; font-weight: 700; color: var(--rai-teal); line-height: 1; }
.rai-event-date-month { font-size: .75rem; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rai-event-card h4 { color: var(--rai-white); font-size: 1rem; margin-bottom: 6px; }
.rai-event-card-meta { font-size: .8125rem; color: rgba(255,255,255,.6); }

.rai-events-side { display: flex; flex-direction: column; gap: 24px; }
.rai-side-card { border-radius: var(--rai-radius-lg); padding: 28px; }
.rai-side-card--white { background: var(--rai-white); color: var(--rai-text); }
.rai-side-card--white h4 { color: var(--rai-navy); }
.rai-side-card--teal { background: var(--rai-teal); color: var(--rai-navy); }
.rai-side-card p { font-size: .9375rem; margin-bottom: 20px; }

/* =========================================================
   12. INSIGHTS
   ========================================================= */
.rai-insights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.rai-insight-card { border-radius: var(--rai-radius-lg); overflow: hidden; background: var(--rai-white); box-shadow: var(--rai-shadow-sm); }
.rai-insight-card-media { position: relative; }
.rai-insight-card-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.rai-insight-card-tag { position: absolute; top: 16px; left: 16px; }
.rai-insight-card-body { padding: 24px; }
.rai-insight-card h3 { font-size: 1.1875rem; margin-bottom: 12px; }
.rai-insight-card-meta { font-size: .8125rem; color: var(--rai-text-muted); }

/* =========================================================
   13. WHAT WE DO
   ========================================================= */
.rai-whatwedo-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.rai-whatwedo-media { text-align: center; }
.rai-whatwedo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.rai-whatwedo-item h3 { font-size: 1.0625rem; display: flex; align-items: center; gap: 12px; }
.rai-whatwedo-icon { flex: none; width: 46px; height: 46px; border-radius: var(--rai-radius-sm); background: var(--rai-bg-soft); color: var(--rai-teal-dark); display: flex; align-items: center; justify-content: center; }
.rai-whatwedo-item p { color: var(--rai-text-muted); font-size: .9375rem; margin: 10px 0 12px; }
.rai-whatwedo-item a { font-weight: 600; font-size: .875rem; }

/* =========================================================
   14. GOVERNMENT HEARINGS
   ========================================================= */
.rai-hearings-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.rai-hearing-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rai-border); }
.rai-hearing-item:first-child { padding-top: 0; }
.rai-hearing-item:last-child { border-bottom: none; }
.rai-hearing-num { flex: none; font-weight: 700; color: var(--rai-text-light); font-size: 1.125rem; }
.rai-hearing-item h4 { font-size: 1.0625rem; margin: 8px 0 0; }
.rai-hearing-media { position: relative; border-radius: var(--rai-radius-lg); overflow: hidden; }
.rai-hearing-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* =========================================================
   15. CTA BANNER
   ========================================================= */
.rai-cta { border-radius: var(--rai-radius-lg); overflow: hidden; }
.rai-cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 32px; padding: 64px; }
.rai-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.rai-cta-media img { border-radius: var(--rai-radius-md); }

/* =========================================================
   16. NEWSLETTER
   ========================================================= */
.rai-newsletter-grid { display: grid; grid-template-columns: 1fr .7fr; gap: 56px; align-items: center; }
.rai-newsletter-form { margin-top: 28px; }
.rai-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.rai-form-control {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--rai-border);
	border-radius: var(--rai-radius-sm);
	font-size: .9375rem;
	background: var(--rai-white);
	color: var(--rai-text);
}
.rai-form-control:focus { outline: none; border-color: var(--rai-teal); }

/* =========================================================
   17. FOOTER
   ========================================================= */
.rai-footer {
	background-color: #0A0F2D;
	background-image: url('assets/images/doted.png');
	background-repeat: no-repeat;
	background-position: center;
	color: rgba(255,255,255,.7);
	padding-top: 40px;
}
.rai-footer-top {
	display: grid;
	grid-template-columns: 1.4fr .8fr .8fr .8fr .8fr;
	gap: 32px;
	padding-bottom: 20px;
	position: relative;
}
.rai-footer-col { display: flex; flex-direction: column; }

/* Quick Links / Resources / PolicyOra: heading+list centered as one unit
   (width:fit-content + margin:auto) within their grid column. Company
   (marked with .rai-footer-col-company in footer.php — :last-child
   doesn't work here since .rai-footer-social is a later sibling)
   overrides to the right instead. Text itself stays left-aligned/ragged-right inside
   whichever box it lands in; this is deliberately NOT align-items on
   .rai-footer-col, which would size the heading and the list
   independently and misalign them (e.g. "Company" is narrower than
   "Privacy Policy", so each would center/right-align to a different
   starting x-position on its own). */
.rai-footer-col-inner { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
.rai-footer-col-company .rai-footer-col-inner {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 0 auto;
	text-align: left;
}
.rai-footer-brand .rai-logo { max-height: 40px; margin-bottom: 20px; }
.rai-footer-brand p {
	max-width: 280px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	color: rgba(255,255,255,.749);
}

.rai-footer-contact { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 12px; }
.rai-footer-contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	font-weight: 400;
	color: rgba(255,255,255,.749);
}
.rai-footer-contact i { color: var(--rai-teal); width: 16px; text-align: center; flex: none; }
.rai-footer-contact a { color: inherit; }
.rai-footer-contact a:hover { color: var(--rai-teal); }

.footer-widget-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	font-weight: 500;
	color: #00F0C8;
	margin-bottom: 20px;
}
.rai-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.rai-footer-col a {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 17px;
	color: rgba(255,255,255,.749);
	border-radius: 50%;
}
.rai-footer-col a:hover { color: var(--rai-teal); }

/* Anchored to the bottom-right of the whole .rai-footer-top area (not a
   specific column), so its width is never constrained by a narrow grid
   track — sidesteps the overflow/clipping risk a grid-column-confined
   row had at in-between viewport widths. */
.rai-footer-social { display: flex; flex-wrap: nowrap; gap: 12px; position: absolute; bottom: 20px; right: 0; }
.rai-social-link {
	width: 35px; height: 35px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--rai-navy);
	display: flex; align-items: center; justify-content: center;
	font-size: 1rem;
	flex: none;
}
.rai-social-link:hover { background: var(--rai-teal); color: var(--rai-navy); }

.rai-footer-bottom-wrap { border-top: 1px solid rgba(255,255,255,.2); }
.rai-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.rai-footer-bottom span {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: rgba(255,255,255,.698);
}
.rai-footer-bottom nav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 20px; }
.rai-footer-bottom a {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 26px;
	font-weight: 400;
	color: #FFFFFF;
}
.rai-footer-bottom a:hover { color: var(--rai-teal); }

/* =========================================================
   18. GENERIC PAGE / SINGLE / ARCHIVE / 404
   ========================================================= */
.rai-page-header { background: var(--rai-bg-light); padding: 64px 0; text-align: center; }
.rai-content-area { padding: 72px 0; }

.rai-listen-on { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 32px; }
.rai-listen-on-label { font-weight: 600; color: var(--rai-navy); font-size: .9375rem; }
.rai-listen-on-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--rai-radius-pill);
	background: var(--rai-bg-light);
	color: var(--rai-navy);
	font-weight: 600;
	font-size: .875rem;
}
.rai-listen-on-link:hover { background: var(--rai-teal); color: var(--rai-white); }
.rai-entry-content img { border-radius: var(--rai-radius-md); }
.rai-entry-content blockquote { border-left: 4px solid var(--rai-teal); padding-left: 20px; color: var(--rai-text-muted); font-style: italic; margin: 24px 0; }
.rai-entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.rai-entry-content table th, .rai-entry-content table td { border: 1px solid var(--rai-border); padding: 10px 14px; }

.rai-post-card { background: var(--rai-white); border-radius: var(--rai-radius-lg); box-shadow: var(--rai-shadow-sm); overflow: hidden; margin-bottom: 32px; }
.rai-post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.rai-post-card-body { padding: 24px; }

.rai-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.rai-pagination a, .rai-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: var(--rai-radius-sm); border: 1px solid var(--rai-border);
	color: var(--rai-text); font-size: .875rem;
}
.rai-pagination .current { background: var(--rai-navy); color: var(--rai-white); border-color: var(--rai-navy); }

.rai-404 { text-align: center; padding: 120px 0; }
.rai-404-code { font-size: 6rem; font-weight: 700; color: var(--rai-teal); line-height: 1; margin-bottom: 16px; }

.widget { margin-bottom: 40px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--rai-border); }

/* =========================================================
   19. [home-latest-episode] SHORTCODE CARD
   ========================================================= */
.rai-latest-episode-card {
	border-radius: 12px;
	background-color: #28508C;
	padding: 32px;
	max-width: 480px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.rai-latest-episode-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}
.rai-latest-episode-label {
	display: block;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #FFFFFF;
	font-weight: 500;
	text-align: center;
	margin-bottom: 24px;
}
.rai-latest-episode-media {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 24px;
}
.rai-latest-episode-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.rai-latest-episode-card:hover .rai-latest-episode-media img { transform: scale(1.06); }
.rai-latest-episode-card:hover .rai-play-btn { background-color: #EF4444; transform: translate(-50%, -50%) scale(1.08); }
/* Same global-.fa-solid-color quirk as the Listen On icons (see note above) —
   force the play icon white once the button turns red on hover. */
.rai-latest-episode-card:hover .rai-play-btn i { color: #FFFFFF; }
.rai-latest-episode-title {
	font-family: 'DM Serif Display', serif;
	font-size: 30px;
	line-height: 36px;
	color: #FFFFFF;
	font-weight: 400;
	margin-bottom: 20px;
}
.rai-latest-episode-title a { color: inherit; }
.rai-latest-episode-title a:hover { color: var(--rai-teal); }
.rai-latest-episode-meta {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 18px;
	color: #DDDDDD;
	font-weight: 500;
	margin-bottom: 24px;
}
.rai-latest-episode-listen { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.rai-latest-episode-listen-label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 16px;
	color: #FFFFFF;
	font-weight: 300;
}
.rai-latest-episode-listen a { display: inline-flex; color: #FFFFFF; font-size: 20px; }
.rai-latest-episode-listen a:hover { color: var(--rai-teal); }
/* The global .fa-brands/.fa-solid rule sets color directly on the <i>,
   which wins over an ancestor's color regardless of specificity — this
   compound selector is specific enough to override it back to the
   link's own (white / teal-on-hover) color. */
.rai-latest-episode-listen a i { color: inherit; }

/* =========================================================
   20. HOMEPAGE HERO (built in Elementor — template-parts/front-page/hero.php
   is NOT used on this page; these rules target the exact element IDs/
   classes Elementor generates for it instead)
   ========================================================= */
/* #rai-home-hero-section is the ACTUAL two-column flex container — its
   direct children are #responsible-ai-governance-section (the text block)
   and #home-hero-latest-episode (the episode card); they are NOT separate
   siblings under some other shared wrapper (Elementor nests the card
   inside the hero section itself), so the split is controlled directly
   here rather than via a :has() lookup on a nonexistent common parent. */
#rai-home-hero-section {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	padding: 50px 80px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 50px;
}
#responsible-ai-governance-section { flex: 1 1 0%; min-width: 0; }
#home-hero-latest-episode { flex: 0 0 auto; width: 520px; max-width: 100%; }

#raig-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #f49e0c;
	font-weight: 500;
	margin-bottom: 16px;
}
#raig-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #f49e0c; flex: none; }

#raig-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 84px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 24px;
}
/* "rules" isn't wrapped in its own element in the current Elementor
   markup, so it can't be colored via CSS alone — theme.js auto-wraps it
   in this span on page load (see assets/js/theme.js), or wrap it
   manually with <span class="raig-heading-accent">rules</span> /
   Elementor's own "Highlighted Text" feature if you'd rather do it there. */
#raig-heading .raig-heading-accent { color: #28508c; }

#raig-content-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 1.6;
	color: #000000;
	font-weight: 300;
	max-width: 100%;
	margin: 0px 0 30px;
}

#hero-redirection-btns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 30px;
	padding: 0;
}
#hero-redirection-btns .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	color: #0167FF !important;
	padding: 14px 28px;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* These two color classes are reused as-is across the hero, PolicyOra
   initiative, and Events & Summits sections — the lift/shadow on their
   :hover rules applies everywhere they're used, not just here. */
.blue-redirection-btn .elementor-button { background-color: #0167FF !important; border: 1px solid #0167FF !important; }
/* Overrides #hero-redirection-btns .elementor-button's own color: #0167FF
   (blue text, meant for the transparent/outline variant) — without this,
   the solid-blue-filled button in the hero would render blue text on a
   blue background. */
#hero-redirection-btns .blue-redirection-btn .elementor-button {
	background-color: #0167FF !important;
	border: 1px solid #0167FF !important;
	color: #FFFFFF !important;
}
.blue-redirection-btn .elementor-button:hover {
	background-color: #0052D6 !important;
	border-color: #0052D6 !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}
.transparent-redirection-btn .elementor-button { background-color: transparent !important; border: 1px solid #0167FF !important; }
#hero-redirection-btns .transparent-redirection-btn a { color: #0167FF !important; border: 1px solid #0167FF !important; }
.transparent-redirection-btn .elementor-button:hover {
	background-color: rgba(255,255,255,.1) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

#home-hero-stats-section {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 32px;
}
#home-hero-stats-section > div { padding-left: 32px; border-left: 1px solid #0167FF; flex: 1 1 0; min-width: 0; }
#home-hero-stats-section > div:first-child { padding-left: 0; border-left: none; }
.hero-stats-count { font-family: 'Poppins', var(--rai-font); font-size: 45px; line-height: 1.1; color: #28508C; font-weight: 700; margin: 0 0 5px !important; white-space: nowrap; }
.hero-stats-text { font-family: 'Poppins', var(--rai-font); font-size: 16px; color: #000000; font-weight: 400; margin: 0; }

/* =========================================================
   21. POLICYORA INITIATIVE SECTION (built in Elementor — same pattern as
   the hero: #rai-initiative-section's direct children are #left-section
   (text) and #right-section (screenshot + Build/Compare/Find bar))
   ========================================================= */
#rai-initiative-section {
	padding: 50px 80px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 64px;
}
#left-section { flex: 1 1 0%; min-width: 0; box-sizing: border-box; }
#right-section { flex: 1 1 0%; min-width: 0; box-sizing: border-box; }

#initiative-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#initiative-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#initiative-left-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 24px;
}

#initiative-content-1,
#initiative-content-2,
#initiative-content-3 {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 1.6;
	color: #140000;
	font-weight: 300;
	margin: 0 0 20px;
}
#initiative-content-3 { margin-bottom: 32px; }

#rai-initiative-btns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 0;
}
#rai-initiative-btns .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* .blue-redirection-btn is already styled globally (see the hero section
   above) and reused here as-is — also used by the podcast "All Episode"
   button and picks up the same hover lift/shadow automatically. */
.btn-transparent-blue-border .elementor-button {
	background-color: transparent !important;
	border: 1px solid #0167FF !important;
	color: #0167FF !important;
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	font-family: 'Poppins', var(--rai-font);
	text-align: center;
}
.btn-transparent-blue-border .elementor-button:hover {
	background-color: rgba(1, 103, 255, .08) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(1, 103, 255, .2);
}

#introducing-policyora-heading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 30px;
	line-height: 36px;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	margin: 0 0 24px;
	background: linear-gradient(90deg, #00F0C8 0%, #0167FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.introducing-policyora-image {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	box-shadow: var(--rai-shadow-md);
	line-height: 0;
}
.introducing-policyora-image img { display: block; width: 100% !important; height: auto; }

#build-compare-find {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
	background-color: #1D3A5E;
	border-radius: 0 0 16px 16px;
	box-shadow: var(--rai-shadow-md);
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding: 20px 30px;
	gap: 16px;
}
#build-compare-find div { width: 100%; }
#build-compare-find div img { width: 100%; }
#build-block, #compare-block, #find-block {
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
}
#build-block, #compare-block { padding-right: 72px; }
/* Arrows aren't in the exported markup — added structurally via ::after
   rather than as a real element, since only the block between two labels
   needs one (not after the last, "Find"). A plain "→" glyph rendered too
   thick/wide at any font-weight, so this draws a thin 2px-stroke line +
   arrowhead instead, sized independently of text/font rendering. */
#build-block::after, #compare-block::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='12' x2='52' y2='12'/><polyline points='44 4 58 12 44 20'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.build-image, .compare-image, .find-image {
	border-radius: 12px;
	background-color: #00F0C8;
	width: 56px;
	height: 56px;
	padding: 10px;
	box-sizing: border-box;
	flex: none;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Fixed width AND height (not height:auto) — the compare icon wasn't
   rendering because auto-height combined with the wrapper's flex
   context left it with no resolvable box until the image finished
   loading; a fixed square avoids depending on load timing. */
.build-image img, .compare-image img, .find-image img {
	display: block !important;
	width: 36px;
	height: 36px;
	object-fit: contain;
}
#build-text, #compare-text, #find-text {
	font-family: 'Poppins', var(--rai-font);
	font-size: 30px;
	color: #FFFFFF;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}

/* =========================================================
   22. WHY WE BUILT IT (built in Elementor — [why-we-built-it-list]
   shortcode renders the numbered items inside #why-we-built-section)
   ========================================================= */
#why-we-built-section {
	background-color: #F6F8FC;
	padding: 50px 80px;
}

#why-we-build-content {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#why-we-build-content::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#why-we-build-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 48px;
}

.rai-wwb-list { display: flex; flex-direction: column; gap: 48px; }

.rai-wwb-item { display: flex; align-items: flex-start; gap: 50px; }

.rai-wwb-item-number {
	flex: none;
	width: 110px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 100px;
	line-height: 1;
	color: #000000;
	font-weight: 400;
	opacity: .102;
}

.rai-wwb-item-body { flex: 1 1 0%; min-width: 0; }

.rai-wwb-item-top { display: flex; align-items: center; gap: 20px; padding-top: 14px; }

.rai-wwb-item-icon {
	flex: none;
	width: 56px;
	height: 56px;
	padding: 12px;
	box-sizing: border-box;
	background-color: #00F0C8;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rai-wwb-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.rai-wwb-item-title {
	flex: 0 1 auto;
	font-family: 'Poppins', var(--rai-font);
	font-size: 34px;
	color: #000000;
	font-weight: 400;
	margin: 0;
}

/* Decorative connector — a horizontal line from the heading that bends
   down into a filled dot, roughly level with the description below.
   The image's literal "border: 1px solid #000000" rendered far too heavy
   for a thin decorative line, so this uses a soft translucent black
   instead, closer to what's actually pictured. Purely visual: hidden
   below 992px in responsive.css, where there isn't room for it. */
.rai-wwb-item-connector {
	flex: 1 1 auto;
	min-width: 24px;
	align-self: center;
	height: 1px;
	background: rgba(0, 0, 0, .2);
	position: relative;
}
.rai-wwb-item-connector::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 88px;
	background: rgba(0, 0, 0, .2);
}
.rai-wwb-item-connector::before {
	content: '';
	position: absolute;
	top: 88px;
	right: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00F0C8;
	z-index: 1;
}

.rai-wwb-item-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 1.6;
	color: #140000;
	font-weight: 300;
	margin: 12px 0 0;
	padding-right: 40px;
}

/* =========================================================
   23. FEATURED PODCAST + TOP PICKS (built in Elementor — the eyebrow/
   heading/description/button live in #home-podcast-section directly;
   [featured-podcast-top-picks-list] renders the two-column showcase
   below it)
   ========================================================= */
#home-podcast-section { padding: 50px 80px; }

#podcast-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#podcast-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

/* Three columns in a single row: heading (fixed width) | description
   (flexible, fills the middle) | button (sized to its own content, at
   the end) — all top-aligned. */
#podcast-heading-desc {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 48px;
	padding: 0;
}

#home-podcast-heading {
	flex: 0 0 340px;
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0;
}

#podcast-content-desc {
	flex: 1 1 0%;
	min-width: 0;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 1.6;
	color: #140000;
	font-weight: 300;
	margin: 0;
}

#podcast-heading-desc > .elementor-widget-button { flex: 0 0 auto; }

/* The "All Episode" button widget isn't wrapped in its own container (no
   equivalent of #hero-redirection-btns/#rai-initiative-btns here), so its
   base geometry is set directly against the heading block; the actual
   transparent/blue-border coloring comes from the already-global
   .btn-transparent-blue-border rule (see the PolicyOra section above). */
#podcast-heading-desc .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.rai-podcast-showcase { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 40px; }

.rai-podcast-featured-col,
.rai-podcast-picks-col { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
/* Stretches whichever content is shorter (usually the featured card) so
   both columns' cards line up at the bottom, not just at the top. */
.rai-podcast-featured-col > .rai-podcast-featured-card,
.rai-podcast-picks-col > .rai-podcast-top-picks { flex: 1 1 auto; }

/* Same teal-to-blue gradient text treatment as "INTRODUCING POLICYORA". */
.rai-podcast-col-heading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 30px;
	background: linear-gradient(90deg, #00F0C8 0%, #0167FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---- Featured card ---- */
.rai-podcast-featured-card {
	min-width: 0;
	border-radius: 12px;
	background-color: #28508C;
	padding: 32px;
	transition: transform .3s ease, box-shadow .3s ease;
}
/* Same lift/zoom/play-button treatment as the homepage hero's
   [home-latest-episode] card (see that section for the same reasoning). */
.rai-podcast-featured-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}
.rai-podcast-featured-media { position: relative; display: block; border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
/* object-position:top (not the default center) keeps the top of the
   image — where a title/logo lockup usually sits — in frame; a center
   crop was cutting into it once the aspect-ratio was shortened. */
.rai-podcast-featured-media img {
	display: block;
	width: 100%;
	height: 260px !important;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease;
}
.rai-podcast-featured-card:hover .rai-podcast-featured-media img { transform: scale(1.06); }
.rai-podcast-featured-card:hover .rai-play-btn { background-color: #EF4444; transform: translate(-50%, -50%) scale(1.08); }
.rai-podcast-featured-card:hover .rai-play-btn i { color: #FFFFFF; }

.rai-podcast-featured-title {
	font-family: 'DM Serif Display', serif;
	font-size: 30px;
	line-height: 36px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0;
}
.rai-podcast-featured-divider { display: block; width: 80px; height: 1px; background: #FFFFFF; margin: 20px 0; }
.rai-podcast-featured-guest {
	font-family: 'Poppins', var(--rai-font);
	font-size: 30px;
	line-height: 36px;
	color: #00F0C8;
	font-weight: 600;
	margin: 0 0 8px;
}
.rai-podcast-featured-guest-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 12px;
}
.rai-podcast-featured-guest-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 0;
}

/* ---- Top picks ---- */
/* justify-content:space-between (not flex-start) matters here — growing
   this container via flex:1 1 auto (above) only stretches an invisible
   box, since the pick cards each have their own visible border and
   nothing wraps them in one. Distributing the extra height as space
   *between* the cards is what actually moves the last card's bottom
   edge down to line up with the featured card. */
.rai-podcast-top-picks { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }

.rai-podcast-pick-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #28508C;
	background-color: #FFFFFF;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rai-podcast-pick-card:hover {
	box-shadow: var(--rai-shadow-md);
	transform: translateY(-4px);
	border-color: #00F0C8;
}
.rai-podcast-pick-title { transition: color .2s ease; }
.rai-podcast-pick-card:hover .rai-podcast-pick-title { color: var(--rai-navy); }
/* The badge is pulled out of the flex flow and pinned to a fixed corner
   position instead — as a normal flex/flow item its exact inset shifted
   slightly depending on line-height/font metrics, which read as
   misaligned; absolute positioning makes it landed the same way on
   every card regardless of content. */
/* :has() is the "ideal" version of this rule but isn't supported on
   every mobile browser still in use — where it silently fails, the
   badge's padding-top compensation never applies and it overlaps the
   title instead. The explicit class (added in markup wherever a badge
   is actually rendered) gives the same result with no browser-support
   risk; :has() stays too since it's harmless where it does work. */
.rai-podcast-pick-card:has(.rai-podcast-pick-badge),
.rai-podcast-pick-card-has-badge { padding-top: 40px; }

/* Only the first ("top") pick gets this badge — the given spec calls it
   out specifically as "card 1", distinct from the shared border/radius
   rule every pick card otherwise uses; picks 2 and 3 have no badge. */
.rai-podcast-pick-badge {
	position: absolute;
	top: 5px;
	left: 0;
	display: inline-block;
	border-radius: 3px;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	margin: 0;
}

.rai-podcast-pick-title {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #28508C;
	font-weight: 400;
}
.rai-podcast-pick-guest {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	color: #000000;
	font-weight: 600;
}
.rai-podcast-pick-meta-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}
.rai-podcast-pick-guest-title,
.rai-podcast-pick-date {
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	color: #1C0101;
	font-weight: 400;
}

/* =========================================================
   24. EVENTS & SUMMITS (built in Elementor — [upcoming-events-summit-listing]
   shortcode renders the card list inside #upcoming-events-list)
   ========================================================= */
/* Dotted background is on its own ::before (rather than a plain
   background-image on the section) so opacity fades only the dots —
   same technique used for #our-mission-section/#rai-timeline-section. */
#events-summits-section {
	position: relative;
	background-color: #F8FAFE;
	padding: 50px 80px;
}
#events-summits-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}

#events-summits-text {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #f49e0c;
	font-weight: 500;
	margin-bottom: 16px;
}
#events-summits-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #f49e0c; flex: none; }

/* The heading + "Full Calendar" button share an unnamed Elementor
   wrapper — :has() targets it structurally since it has no id/class of
   its own to hook (same technique used for the hero section earlier). */
#events-summits-section > div:has(> #events-summits-heading) {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

#events-summits-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0;
}

.full-calendar-button .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	background-color: transparent !important;
	border: 1px solid #0167FF !important;
	color: #000000 !important;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.full-calendar-button .elementor-button:hover {
	background-color: rgba(1, 103, 255, .18) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(1, 103, 255, .25);
}

/* align-items:flex-start (not stretch) — with stretch, whichever column
   has less content (usually the event list) got pulled taller to match
   its sibling, leaving a gap of exposed section background below its
   last card instead of the card just ending with the section's own
   padding providing the bottom space. */
#events-summit-column-section { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: flex-start; gap: 40px; padding: 0; }
#upcoming-events-list { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 0; }
#events-summit-monitoring { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; gap: 30px; padding: 0; }

/* The heading + "Full Calendar" button wrapper — same element targeted
   structurally via :has() above, this adds the literal Elementor-
   generated class selector directly. */
.elementor-element.elementor-element-bf91ced.e-con.e-atomic-element.e-div-block-base { padding: 10px 0; }

/* ---- Event card (rendered by the shortcode) ---- */
.rai-events-listing-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background-color: #FFFFFF;
	padding: 0;
	gap: 15px;
	border: 1px solid rgb(0 0 0 / 30%);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	margin-bottom: 15px;
}
.rai-events-listing-card:hover { transform: translateY(-3px); box-shadow: var(--rai-shadow-md); border-color: #00F0C8; }

.rai-events-listing-date {
	flex: none;
	width: 56px;
	background-color: #00F0C8;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 4px;
	overflow: hidden;
}
/* Rotated -90deg so the whole day+month group reads bottom-to-top as
   one line, filling the vertical strip, instead of stacking as two
   separate horizontal lines. */
.rai-events-listing-date-inner {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
	transform: rotate(-90deg);
}
.rai-events-listing-date-day,
.rai-events-listing-date-month {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #28508C;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
/* Cross-month ranges ("26 JUN" - "3 JUL") don't fit the single large
   day + month split, so they get two smaller labels instead, still
   rotated as one group by .rai-events-listing-date-inner above. */
.rai-events-listing-date-range-line {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	color: #28508C;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}
.rai-events-listing-date-range-sep {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	color: #28508C;
	font-weight: 700;
	line-height: 1;
}

.rai-events-listing-body { flex: 1 1 auto; min-width: 0; padding: 19px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rai-events-listing-type {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	color: #EF4444;
	font-weight: 600;
}
.rai-events-listing-title { margin: 0; }
.rai-events-listing-title a {
	font-family: 'DM Serif Display', serif;
	font-size: 20px;
	line-height: 24px;
	color: #28508C;
	font-weight: 400;
}
.rai-events-listing-location {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	color: #9DA3AF;
	font-weight: 500;
}
.rai-events-listing-register-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #FFFFFF;
	font-weight: 600;
	text-align: center;
	border-radius: 2px;
	background-color: #0167FF;
	padding: 8px 16px;
	margin-top: 4px;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rai-events-listing-register-btn:hover {
	background-color: #0052D6;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(1, 103, 255, .35);
}

/* Sits as an inset thumbnail with its own rounded corners and a margin
   on all sides (matching the reference design) rather than a full-bleed
   photo flush against the card's own edges. */
.rai-events-listing-media {
	flex: none;
	width: 235px;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	align-self: stretch;
}
.rai-events-listing-media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: fill;
	transition: transform .4s ease;
}
.rai-events-listing-card:hover .rai-events-listing-media img { transform: scale(1.06); }

/* ---- Real-Time Legislative Monitoring (white card) ---- */
#real-time-legislative-monitoring {
	border-radius: 12px;
	background-color: #FFFFFF;
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid rgb(0 0 0 / 30%);
}
#real-time-legislative-text {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	text-transform: uppercase;
	color: #28508C;
	font-weight: 500;
	text-align: center;
	margin: 0 0 16px;
}
#real-time-legislative-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 38px;
	line-height: 46px;
	color: #28508C;
	font-weight: 400;
	text-align: center;
	margin: 0 0 16px;
}
#real-time-legislative-content {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	color: #140000;
	font-weight: 300;
	text-align: center;
	max-width: 420px;
	margin: 0 0 24px;
}
#real-time-legislative-monitoring .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	text-align: center;
	padding: 12px 24px;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#real-time-legislative-monitoring .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}

/* ---- Host an Event with Us (gradient card) ---- */
#host-with-us-section {
	border-radius: 12px;
	background-image: linear-gradient(90deg, #06DDC5 0%, #005FF3 100%);
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	justify-content: center;
}
.host-event-with-us .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background-color: #FFFFFF !important;
	color: #000000 !important;
	border: none !important;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 12px 22px;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.host-event-with-us .elementor-button:hover {
	background-color: #0A0F2D !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
#host-with-us-content {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFAFA;
	font-weight: 500;
	text-align: center;
	max-width: 420px;
	margin: 0;
}
.get-in-touch-btn .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	background-color: transparent !important;
	border: 1px solid #FFFFFF !important;
	color: #FFFFFF !important;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.get-in-touch-btn .elementor-button:hover {
	background-color: rgba(255, 255, 255, .12) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

/* =========================================================
   25. REPORTS & ANALYSIS (header row — eyebrow/heading left, "All
   Insights" button right; same pattern as the Events & Summits header)
   ========================================================= */
#reports-analysis-section { padding: 50px 80px; }

#reports-analysis-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#reports-analysis-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

/* The heading + "All Insights" button share an unnamed Elementor
   wrapper — :has() targets it structurally, same technique used for the
   hero and Events & Summits header rows. */
#reports-analysis-section > div:has(> #reports-analysis-heading) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

#reports-analysis-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0;
}

/* .btn-transparent-blue-border is already styled globally (see the
   PolicyOra section) and reused here as-is — base geometry set directly
   since this button isn't wrapped in its own #id container. */
#reports-analysis-section .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* =========================================================
   26. REPORTS & ANALYSIS LISTING ([reports-analysis-listing] shortcode)
   ========================================================= */
.rai-reports-listing {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 48px;
	margin-top: 40px;
}

.rai-reports-listing-card { flex: 1 1 calc(50% - 24px); min-width: 280px; }

.rai-reports-listing-media {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}
.rai-reports-listing-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; }
.rai-reports-listing-card:hover .rai-reports-listing-media img { transform: scale(1.06); }

.rai-reports-listing-badge {
	position: absolute;
	top: 16px;
	right: 0;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 5px 0 0 5px;
}

.rai-reports-listing-title { margin: 0 0 12px; }
.rai-reports-listing-title a {
	font-family: 'DM Serif Display', serif;
	font-size: 28px;
	line-height: 1.3;
	color: #000000;
	font-weight: 400;
	transition: color .2s ease;
}
.rai-reports-listing-title a:hover { color: #28508C; }

.rai-reports-listing-meta {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 14px;
	color: #667085;
	margin-bottom: 12px;
}

.rai-reports-listing-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	font-weight: 600;
	color: #0167FF;
	transition: color .2s ease, gap .2s ease;
}
.rai-reports-listing-link:hover { color: #0052D6; gap: 12px; }
/* Same shared CSS-only arrow as .rai-resource-card-link on the
   Resources page — one solid currentColor shape (thin shaft + head)
   cut with clip-path, so both sections render an identical arrow
   instead of two different techniques (this used to be a Font
   Awesome <i> icon here) that could never quite match each other. */
.rai-reports-listing-link::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 8px;
	background-color: currentColor;
	clip-path: polygon( 0% 42%, 65% 42%, 65% 10%, 100% 50%, 65% 90%, 65% 58%, 0% 58% );
	transition: transform .2s ease;
}
.rai-reports-listing-link:hover::after { transform: translateX(2px); }

/* =========================================================
   27. WHAT WE DO LIST ([what-we-do-list] shortcode)
   ========================================================= */
.rai-wwd-list { display: flex; flex-direction: column; }

.rai-wwd-item { padding: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.rai-wwd-list > .rai-wwd-item:first-child { padding-top: 0; }

.rai-wwd-item-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	line-height: 31px;
	color: #000000;
	font-weight: 600;
	margin: 0;
}
.rai-wwd-item-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 21px;
	color: #000000;
	font-weight: 300;
	margin: 0;
}
.rai-wwd-item-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 21px;
	color: #0167FF;
	font-weight: 400;
	transition: gap .2s ease;
}
.rai-wwd-item-link:hover { gap: 12px; }
/* Arrow drawn with an inline SVG (thin line + chevron) rather than an
   icon font glyph or unicode "→", which render inconsistently thick —
   same technique used for the Build/Compare/Find arrows. */
.rai-wwd-item-arrow {
	display: inline-block;
	width: 44px;
	height: 12px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12' fill='none' stroke='%230167FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='6' x2='36' y2='6'/><polyline points='30 1 36 6 30 11'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* A plain border can't fade, so this is a 1px gradient bar instead —
   light (transparent) on the left fading to dark on the right. */
.rai-wwd-divider {
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
	border: none;
}

/* =========================================================
   28. WHAT WE DO SECTION + PILLARS ([what-we-do-pillars] shortcode)
   ========================================================= */
/* Dotted background is on its own ::before (rather than a plain
   background-image on the section) so opacity fades only the dots —
   same technique used for #our-mission-section/#events-summits-section. */
#what-we-do-section {
	position: relative;
	background-color: #F8FAFE;
	padding: 50px 80px 0;
}
#what-we-do-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}

#what-we-our-work-text {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #f49e0c;
	font-weight: 500;
	margin-bottom: 16px;
}
#what-we-our-work-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #f49e0c; flex: none; }

#what-we-do-heading {
	position: relative;
	z-index: 1;
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 32px;
}

#what-we-do-two-col-view {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
}

/* ---- Pillars overlay ----
   Badge positions are percentages of #what-we-do-pillars' own box, which
   is exactly as tall as pillar-structure.png is wide (the image is
   1:1 and rendered at width:100%) — so they track the image at any
   size. Coordinates are estimated from the source image and may need a
   nudge once viewed live. */
.rai-wwd-pillars { position: relative; width: 100%; }
.rai-wwd-pillars-bg { display: block; width: 100%; height: auto; }

/* Pediment — the site's header logo, shown once in the temple's
   triangular roof. */
.rai-wwd-pillars-pediment {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 25%;
	text-align: center;
}
.rai-wwd-pillars-pediment-logo { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.rai-wwd-pillars-item {
	position: absolute;
	bottom: 21%;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
.rai-wwd-pillars-item-1 { left: 16%; gap: 77px; }
.rai-wwd-pillars-item-2 { left: 36%; }
.rai-wwd-pillars-item-3 { left: 56.5%; gap: 71px; }
.rai-wwd-pillars-item-4 { left: 76%; gap: 53px; }

.rai-wwd-pillars-icon {
	flex: none;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #28508C;
	border: 2px solid #00F0C8;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* Assumes a simple single-tone icon upload (like a line icon on a
   transparent background) and forces it white to match the reference
   design — a multi-color icon won't look right through this filter. */
.rai-wwd-pillars-icon img { width: 60%; height: 60%; object-fit: contain; filter: brightness(0) invert(1); }

/* No overflow:hidden here on purpose — rotate() only affects paint, not
   layout, so a fixed-height clipped box cut off whatever the (unrotated,
   much wider) text box didn't fit, garbling longer labels. writing-mode
   lets the browser size the box to the actual vertical text run, so
   nothing gets clipped regardless of label length. */
.rai-wwd-pillars-label {
	flex: none;
	width: 100%;
	min-height: 30%;
	background-color: #28508C;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 2px;
}
.rai-wwd-pillars-label-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-family: 'Poppins', var(--rai-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	color: #FFFFFF;
}

/* =========================================================
   29. GOVERNMENT HEARINGS / CAPITOL HILL ([latest-videos-listing] shortcode)
   ========================================================= */
#capital-hill-video-section { padding: 50px 80px; }

#capital-hill-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#capital-hill-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

/* Heading + "All Videos" button share an unnamed Elementor wrapper —
   :has() targets it structurally, same technique used for Events &
   Summits and Reports & Analysis. #reports-analysis-heading is reused
   verbatim on this section's <h2> (same black serif style), per the
   markup the user supplied. */
#capital-hill-video-section > div:has(> #reports-analysis-heading) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* CSS Grid (not flex) on purpose: the player is a plain DOM sibling of
   the items, initially placed right after the first one, and
   latest-videos.js moves it (via .after()) to sit right after whichever
   item is clicked — that's what opens the "accordion" at ≤991px, once
   the responsive override below drops the positioning set here. At this
   (desktop) width, the player is taken out of grid flow entirely
   (position:absolute, pinned to the top-right) so it always renders as
   a persistent right-hand column regardless of where it sits in the
   DOM or how tall the active item's card is — it does NOT span grid
   rows (an earlier attempt at that inflated every row to make room for
   the player's height, leaving a large blank gap under any item
   shorter than it). Only the items participate in the grid, which is
   why column 1 stacks them correctly while column 2 stays reserved
   (empty grid tracks still take up their share of the width). */
.rai-hearings-listing {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 64px;
	margin-top: 48px;
}

/* The items stack together as a single grid cell (rather than each item
   being its own grid row) so that the height reserved for the player
   image (see .rai-hearings-listing::after below) is compared once against
   the whole stack, not row-by-row — any leftover height then lands once,
   below the last item, instead of being sprinkled under whichever item
   happens to share a row with the image. */
.rai-hearings-items {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.rai-hearings-player {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(50% - 32px);
}

/* Since the player is taken out of grid flow (see note above), the grid's
   own height would otherwise be driven only by the (shorter) items column,
   letting the section below start before the taller player image actually
   ends. This invisible spacer sits in the player's own grid cell — same
   column, same width, same aspect ratio as video-background.png — purely
   to make the grid reserve enough height for it. */
.rai-hearings-listing::after {
	content: '';
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	aspect-ratio: 681 / 615;
	visibility: hidden;
	pointer-events: none;
}

.rai-hearings-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px 24px 20px;
	border-radius: 12px;
	background-color: #F8FAFE;
	cursor: pointer;
}
.rai-hearings-item.is-active { background-color: #E5E6EC; }

/* Straddles the card's top edge (half above, half below) rather than
   sitting in normal flow above the title — matches the reference. */
.rai-hearings-item-number {
	position: absolute;
	top: 0;
	left: 24px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 4px;
	background-color: #00F0C8;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000000;
	font-weight: 500;
}

.rai-hearings-item-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 26px;
	color: #28508C;
	font-weight: 600;
	margin: 0;
}

.rai-hearings-item-category {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #000000;
	font-weight: 400;
}

/* Player — video-background.png is a pre-shaped, pre-rotated blue
   graphic (not a photo), permanently in place behind the media box; it
   never changes. .rai-hearings-player-media (the active item's own
   featured image + play button) sits centered on top of it, smaller so
   the blue shape peeks out at the corners, and is the only part
   latest-videos.js swaps for a live YouTube embed on play. (.rai-hearings-player
   itself already has position:absolute/relative set above depending on
   breakpoint — either way it's a valid containing block for this.) */
.rai-hearings-player-blue-bg { display: block; width: 100%; height: auto; }
.rai-hearings-player-media {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 86%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
}
.rai-hearings-player-thumb,
.rai-hearings-player-frame {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
img.rai-hearings-player-thumb { width: 100%; height: 100% !important; }
.rai-hearings-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #28508C;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
	transition: background-color .2s ease, transform .2s ease;
}
.rai-hearings-play-btn:hover { background-color: #00F0C8; transform: translate(-50%, -50%) scale(1.06); }

/* =========================================================
   30. JOIN THE MOVEMENT
   ========================================================= */
#join-movement-section {
	display: flex;
	align-items: stretch;
	padding: 0;
	background-image: url('assets/images/doted.png'), linear-gradient(90deg, #06DDC5 0%, #005EF3 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right top, center;
	background-size: contain, cover;
	overflow: hidden;
}

/* The image bleeds edge-to-edge on the left and matches the content
   column's height (stretch), unlike every other section here which
   keeps a uniform padding on all sides. */
#join-left-image { flex: 0 0 40%; overflow: hidden; padding: 0; }
#join-left-image .elementor-widget-image { height: 100%; }
#join-left-image img { display: block; width: 100%; height: 100%; object-fit: none; object-position: right bottom; }

#join-right-content-section {
	flex: 1 1 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 80px 80px 50px;
}

#join-movement-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: 500;
	margin-bottom: 16px;
}
#join-movement-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #FFFFFF; flex: none; }

#join-movement-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 20px;
	padding-right: 40px;
}

#join-content-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 300;
	max-width: 100%;
	margin: 0 0 32px;
}

#join-movement-btns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 0;
}
#join-movement-btns .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* .blue-redirection-btn and .get-in-touch-btn are already styled
   globally (see the hero and Real-Time Legislative sections) and reused
   here as-is; .policy-ora-btn is the one new color variant. */
.policy-ora-btn .elementor-button { background-color: #FFFFFF !important; color: #000000 !important; }
.policy-ora-btn .elementor-button:hover {
	background-color: #E5E6EC !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

/* =========================================================
   31. STAY INFORMED (Contact Form 7 newsletter signup)
   ========================================================= */

/* Redesigned as a single centered column — eyebrow/heading/description
   stacked and centered, with the form as one full-width left-aligned
   row underneath (Full Name / Work Email / Organization / Subscribe,
   all inline) instead of the earlier heading-left/description-right/
   form-left/image-right crisscross. The avatar-cluster image from that
   older layout is hidden (not deleted) in case it's wanted elsewhere
   later. This CSS assumes the updated Contact Form 7 "Form" template
   (full-name replaces the old first-name/last-name split, About
   Yourself dropped): all fields are now sibling .form-groups inside
   one .form-row instead of each field having its own .form-row. */
#stay-informed-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#stay-informed-section-1 { width: 100%; max-width: 780px; }
#stay-informed-section-2 { width: 100%; }

#stay-informed-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#stay-informed-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#stay-informed-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}

#stay-informed-content-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	max-width: 100%;
	margin: 0;
}

/* The form's Elementor shortcode-widget wrapper has no custom ID, so
   its own auto-generated per-element class is used (same technique as
   elsewhere in this theme when Elementor doesn't give us a named hook). */
.elementor-element-64dd1dc { width: 100%; margin-top: 40px; text-align: left; }
.stay-informed-contact-img { display: none; }

/* ---- Contact Form 7 ---- */
#stay-informed-section .newsletter-form { display: block; }
#stay-informed-section .form-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
#stay-informed-section .form-group { flex: 1 1 0; min-width: 160px; }
#stay-informed-section .form-group-submit { flex: 0 0 auto; }
#stay-informed-section .form-group p { margin: 0; }
#stay-informed-section .wpcf7-form-control-wrap { display: block; margin-top: 8px; }

#stay-informed-section label {
	display: block;
	font-family: 'Poppins', var(--rai-font);
	font-size: 15px;
	line-height: 19px;
	color: #000000;
	font-weight: 500;
}

#stay-informed-section .wpcf7-form-control.form-control {
	display: block;
	width: 100%;
	background-color: #E9EBF0;
	border: none;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 17px;
	color: #000000;
	font-weight: 300;
}
#stay-informed-section .wpcf7-form-control.form-control::placeholder {
	opacity: .502;
	font-family: 'Poppins', var(--rai-font);
	font-size: 17px;
	color: #000000;
	font-weight: 300;
}

#stay-informed-section input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	background-color: #0167FF;
	color: #FFFFFF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	border: none;
	border-radius: 8px;
	padding: 14px 28px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#stay-informed-section input.wpcf7-submit:hover {
	background-color: #0052D6;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}

/* Podcast page's "Be Our Guest" form (Contact Form 7 #1247) reuses the
   same #stay-informed-section id/newsletter-form markup as the homepage
   newsletter signup above, but needs its own two-row-of-fields + a
   submit button pinned to the right (spanning both rows) instead of the
   homepage's single inline row. Since the id is identical on both pages
   (only one is ever loaded at a time, so that's valid HTML, but it means
   a plain #stay-informed-section selector can't tell them apart), this
   is scoped to the Podcast page specifically via body_class(). */
body.page-id-24 #stay-informed-section .newsletter-form {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 40px;
	text-align: left;
}
body.page-id-24 #stay-informed-section .rai-guest-form-fields {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
body.page-id-24 #stay-informed-section .rai-guest-form-submit { flex: none; align-self: center; }
body.page-id-24 #stay-informed-section input.wpcf7-submit { white-space: nowrap; margin: 0; }
/* #stay-informed-section .form-group is shared with the homepage
   newsletter row above — both now grow to fill their row (flex:1 1 0),
   but this form's two-col field rows still need their own explicit
   basis:0 override just below (the homepage row's is min-width-based),
   otherwise the whole .rai-guest-form-fields column collapses too
   narrow and the submit button (flex:none, pinned to the far right of
   the full-width flex row) ends up stranded with a large empty gap
   before it. */
/* flex-basis:0 (not auto) so growth is purely ratio-based from a zero
   baseline, filling the row's full available width — flex-basis:auto
   was sizing each group off its input's own natural content width
   first, leaving them narrower than the row could actually fit. */
body.page-id-24 #stay-informed-section .rai-guest-form-fields .form-group { flex: 1 1 0; min-width: 0; }

/* =========================================================
   32. ABOUT US HERO
   ========================================================= */
#about-us-hero-section {
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#about-us-hero-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#about-us-hero-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#about-us-hero-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 84px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 24px;
}
/* The reference design colors only the opening words ("AI Governance")
   with the brand teal-to-blue gradient (same one used for
   #introducing-policyora-heading), while the rest of the heading stays
   black. CSS can't target "the first two words" of a text node on its
   own — this class needs to wrap them in the actual Elementor content:
   <span class="rai-heading-gradient-accent">AI Governance</span> Gap is
   the most Consequential Policy Challenge of this Decade */
.rai-heading-gradient-accent {
	background: linear-gradient(90deg, #00D9C5 0%, #00AEEF 55%, #0167FF 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

#about-us-hero-content {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

/* =========================================================
   33. OUR MISSION
   ========================================================= */
/* Background image is on its own ::before (rather than a plain
   background-image on the section) so opacity fades only the dots —
   opacity on the section itself would fade the heading/text too. */
#our-mission-section {
	position: relative;
	background-color: #F8FAFE;
	display: flex;
	align-items: flex-start;
	gap: 64px;
	padding: 50px 80px;
}
#our-mission-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#our-mission-content-section,
#our-mission-image-section { position: relative; z-index: 1; }

#our-mission-content-section { flex: 1 1 45%; }

#our-mission-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#our-mission-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#our-mission-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 24px;
}

#our-mission-content-1,
#our-mission-content-2,
#our-mission-content-3 {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	margin: 0 0 20px;
}
#our-mission-content-3 { margin-bottom: 0; }

#our-mission-image-section { flex: 1 1 55%; position: relative; }
#our-mission-image-section img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* =========================================================
   34. HOW WE WORK ([our-mission-pillar] shortcode)
   ========================================================= */
#how-we-work-section { padding: 50px 80px; }

#how-we-work-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#how-we-work-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#how-we-work-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 40px;
}

/* align-items:stretch + flex:1 on each tab — the tabs column always
   matches .rai-mp-content-wrap's height exactly, and each tab
   distributes that stretched height evenly, so there's no gap
   regardless of description length AND no overflow (unlike a CSS Grid
   + position:absolute version tried earlier — that took the content
   out of flow entirely, which fixed the gap but let long descriptions
   overflow past the tabs-only-driven container height instead). At
   ≤991px assets/js/our-mission-pillar.js re-parents each content panel
   to sit right after its own tab (see that file for why this needs
   JS, not just CSS, to do both layouts correctly from one DOM). */
.rai-mission-pillar { display: flex; align-items: stretch; border: 1px solid #28508C; }

.rai-mp-tabs { flex: 0 0 400px; display: flex; flex-direction: column; }
.rai-mp-tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	padding: 24px;
	border-bottom: 1px solid #28508C;
	font-family: 'Poppins', var(--rai-font);
	font-size: 28px;
	line-height: 1.2;
	color: #000000;
	font-weight: 400;
	cursor: pointer;
}
.rai-mp-tab.is-last { border-bottom: none; }
.rai-mp-tab.is-active { background-color: #28508C; border: 1px solid #28508C; color: #FFFFFF; }

.rai-mp-content-wrap { flex: 1 1 auto; position: relative; border-left: 1px solid #28508C; }
.rai-mp-content { display: none; padding: 40px; }
.rai-mp-content.is-active { display: block; }

.rai-mp-badge {
	display: inline-block;
	background-color: #00F0C8;
	border-radius: 4px;
	padding: 4px 10px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #000000;
	font-weight: 500;
	margin-bottom: 16px;
}

.rai-mp-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 34px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}

.rai-mp-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	color: #140000;
	font-weight: 300;
	max-width: 700px;
	margin: 0;
}

/* =========================================================
   35. RAI TIMELINE ([rai-milestone-timeline] shortcode)
   ========================================================= */
/* Background image is on its own ::before (rather than a plain
   background-image on the section) so opacity fades only the dots —
   same technique used for #our-mission-section. */
#rai-timeline-section {
	position: relative;
	background-color: #F8FAFE;
	padding: 50px 80px;
}
#rai-timeline-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .05;
	z-index: 0;
	pointer-events: none;
}
#rai-timeline-text, #rai-timeline-heading, .rai-timeline-list { position: relative; z-index: 1; }

#rai-timeline-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#rai-timeline-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#rai-timeline-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 40px;
}

.rai-timeline-list { position: relative; margin: 0 100px; }

.rai-timeline-item { position: relative; display: flex; align-items: flex-start; margin-bottom: 48px; }
.rai-timeline-item:last-child { margin-bottom: 0; }

/* The vertical black line is drawn per-item (not as one line spanning
   the whole list, and not a fixed height guessing at "badge + margin")
   — each item's actual rendered height varies with its description
   length, so the line has to be height:100% of ITS OWN item (which
   tracks that height automatically) plus a fixed extension equal to
   the item's margin-bottom, landing exactly at the top of the next
   badge regardless of how tall this item's text happens to be. Anchored
   to .rai-timeline-item (not .rai-timeline-number) specifically so
   height:100% resolves against the full item — including its
   description — not just the 44px badge. Skipped on the last item. */
.rai-timeline-item:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 22px;
	width: 2px;
	height: calc(100% + 48px);
	background-color: #000000;
	z-index: 0;
}

.rai-timeline-number {
	position: relative;
	z-index: 1;
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background-color: #00F0C8;
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	color: #140000;
	font-weight: 500;
	text-align: center;
}

.rai-timeline-connector {
	flex: none;
	position: relative;
	width: 80px;
	height: 0;
	margin-top: 22px;
	border-top: 1px solid #000000;
	opacity: .5;
}
.rai-timeline-dot {
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translate(0, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #00F0C8;
}

.rai-timeline-content { flex: 1 1 auto; padding-left: 16px; }

.rai-timeline-year {
	font-family: 'DM Serif Display', serif;
	font-size: 54px;
	line-height: 65px;
	color: #28508C;
	font-weight: 400;
	margin: 0;
}

.rai-timeline-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	color: #140000;
	font-weight: 300;
	margin: 8px 0 0;
}

/* =========================================================
   36. ADVISORY BOARD HERO
   ========================================================= */
/* No background-image here — the grayscale photo + light overlay in
   the reference is already set as this section's own Elementor
   background (no image URL was given for it, unlike every other
   section built from a raw HTML dump); this only styles the text. */
#advisory-board-hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#advisory-board-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#advisory-board-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#advisory-board-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 84px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 24px;
}

#advisory-board-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

/* =========================================================
   37. ADVISORY BOARD LIST ([advisory-board-list] shortcode)
   ========================================================= */
/* No bottom padding — the CTA banner directly below this section
   already carries its own 80px top padding, so keeping a full 80px
   here too doubled the visible gap to 160px. Same fix applied to
   .rai-experts-listing, #partners-listing-section, and
   #program-initiative-listing, all of which sit directly above a
   banner section with its own top padding. */
#advisory-board-list-section { padding: 50px 0 0; }

/* Full-bleed background — same width:100vw/negative-margin technique
   as .rai-resources-featured/.alignfull, since this row sits nested
   inside .rai-advisory-board-list, not as a direct top-level Elementor
   section. .rai-advisory-board-row-inner re-applies the 100px side
   padding so the actual content lines back up with the rest of the
   page instead of stretching edge-to-edge with the background. */
.rai-advisory-board-row {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #FFFFFF;
}
/* Odd/even here means 1st, 3rd, 5th... row vs 2nd, 4th, 6th... —
   :nth-child so left/right and background alternate automatically with
   however many advisory-board posts exist, no PHP index needed. */
.rai-advisory-board-row:nth-child(even) { background-color: #F8FAFE; }

.rai-advisory-board-row-inner {
	display: flex;
	align-items: center;
	gap: 50px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 50px 100px;
}
.rai-advisory-board-row:nth-child(even) .rai-advisory-board-row-inner { flex-direction: row-reverse; }

/* video-background.png is a pre-shaped, pre-rotated blue graphic (not
   a photo) — same asset/technique as .rai-hearings-player-blue-bg —
   sitting behind the member's own featured image, which is layered on
   top slightly smaller so the blue shape only peeks out a little at
   the corners. */
/* flex-basis:0% + grow ratio (not a plain 40%/60% flex-basis) — with
   the row's own 50px gap, two children whose flex-basis already summed
   to 100% had no room left to actually fit that gap (flex-shrink:0
   blocks the browser from stealing space back to make room), so the
   row overflowed its container by exactly the gap width. Basis:0 makes
   the browser subtract the gap from the available space *before*
   splitting it 40:60 between these two, so the math can't overflow. */
.rai-advisory-board-media {
	position: relative;
	flex: 4 1 0%;
	max-width: 40%;
}
.rai-advisory-board-media-bg {
	display: block;
	width: 100%;
	height: auto !important;
	align-items: center;
	text-align: center;
}
.rai-advisory-board-media-photo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px !important;
	box-shadow: 0 20px 40px rgba(11, 30, 60, .18);
}

.rai-advisory-board-content { flex: 6 1 0%; max-width: 60%; min-width: 0; }

.rai-advisory-board-name {
	font-family: 'Poppins', var(--rai-font);
	font-size: 32px;
	line-height: 38px;
	color: #28508C;
	font-weight: 600;
	margin: 0 0 8px;
}

.rai-advisory-board-designation {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	color: #000000;
	font-weight: 400;
	margin-bottom: 16px;
}

.rai-advisory-board-divider {
	display: block;
	width: 60px;
	height: 0;
	border: 2px solid #F49E0C;
	margin-bottom: 20px;
}

.rai-advisory-board-description,
.rai-advisory-board-description p {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 1.7;
	color: #140000;
	font-weight: 300;
}
.rai-advisory-board-description p:last-child { margin-bottom: 0; }

/* =========================================================
   38. JOIN THE ADVISORY BOARD (get involved banner)
   ========================================================= */
/* Three levels: #advisory-get-involoved-section is a plain padding
   wrapper (white background, standard section gutter); its child
   #background-section-for-get-involved is the actual visible gradient
   card; #join-advisory-section (inside that) is just the text column,
   a flex sibling of the button. (A second raw-HTML dump revealed this
   middle wrapper — an earlier pass, made without seeing it, put the
   card styling directly on the outer section instead.) */
#advisory-get-involoved-section { padding: 50px 0; }

/* !important on display/flex-direction here — Elementor's own e-con
   container defaults to flex-direction: column, and since that's set
   in the visual builder it was winning over this plain theme rule,
   collapsing the row into a stack where both children stretched to
   the container's full width (the text wrapping to a near-zero-width
   column and the buttons spanning edge-to-edge) instead of sitting
   side by side. */
#background-section-for-get-involved {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background-image: url('assets/images/doted.png'), linear-gradient(270deg, #06DDC5 0%, #005EF3 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 30px 80px;
	overflow: hidden;
}

/* Left content column pinned to ~60% of the card width; the button
   column stays content-sized and gets pushed flush to the right edge
   by the row's justify-content: space-between above. */
#join-advisory-section { flex: 0 1 80% !important; max-width: 80%; min-width: 0; }

#join-advisory-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: 500;
	margin-bottom: 16px;
}
#join-advisory-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #FFFFFF; flex: none; }

#join-advisory-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 52px;
	line-height: 60px;
	color: #FFFFFF;
	font-weight: 400;
	max-width: 700px;
	margin: 0 0 16px;
}

#join-advisory-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 26px;
	color: rgba(255, 255, 255, .85);
	font-weight: 300;
	margin: 0;
	max-width: 700px;
}

/* #experts-btn-section is the flex column that stacks the two buttons
   on the right (Apply to Join / Request an Expert). align-items:stretch
   makes both widget wrappers — and so both .elementor-button anchors,
   via their own width:100% below — share the column's width, which is
   sized to the wider "Request an Expert" label. Matches every other
   custom-color button in this theme: .classname .elementor-button,
   since Elementor nests the actual clickable element inside a wrapper
   carrying the custom class. */
#experts-btn-section,
/* Fallback for other instances of this banner (e.g. the Advisory Board
   page) whose raw Elementor markup doesn't carry the
   #experts-btn-section id on the button wrapper at all — only
   #join-advisory-section is guaranteed present in every variant, so
   its next sibling (always the button column, whether it holds one
   button or two) is targeted structurally instead. Without this, that
   id-less wrapper falls back to Elementor's own default e-con sizing
   and stretches to fill the rest of the row instead of staying
   content-sized. */
#join-advisory-section + div {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch;
	justify-content: center;
	gap: 16px;
	flex: 0 0 auto !important;
	width: auto !important;
}

.aply-network-btn,
.request-expert-btn { flex: none; }

.aply-network-btn .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 10px;
	background-color: #0167FF !important;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	color: #FFFFFF !important;
	font-weight: 600;
	text-align: center;
	padding: 18px 32px;
	white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.aply-network-btn .elementor-button:hover {
	background-color: #0052D6 !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}

.request-expert-btn .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 10px;
	background-color: #FFFFFF !important;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	color: #000000 !important;
	font-weight: 600;
	text-align: center;
	padding: 18px 32px;
	white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.request-expert-btn .elementor-button:hover {
	background-color: #E6E6E6 !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}

/* =========================================================
   39. PARTNERS HERO
   ========================================================= */
/* No background-image here — same situation as #advisory-board-hero-section:
   the grayscale cityscape photo + light overlay is already set as this
   section's own Elementor background (no image URL was given for it);
   this only styles the text. */
#partners-hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#partners-hero-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#partners-hero-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#partners-hero-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 76px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 24px;
}

#partners-hero-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

/* =========================================================
   40. PARTNERS LISTING ([partners-listing-with-pagination] shortcode)
   ========================================================= */
#partners-listing-section {
	padding: 50px 80px 0;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* The eyebrow <p> in the raw Elementor markup has no id attribute at
   all (every other section's eyebrow does) — this selector is ready
   for when #institutional-partners-text is added to it in Elementor. */
#institutional-partners-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#institutional-partners-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#partner-list-title {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 40px;
}

/* Both need an explicit width:100% — #partners-listing-section is now
   flex + align-items:center for the eyebrow/heading centering above,
   which would otherwise shrink-wrap this (and the grid inside it) down
   to their own content width instead of filling the row. */
.rai-partners-listing { width: 100%; }

/* flex (not grid) specifically so a leftover row of 1-3 cards centers
   itself for free via justify-content:center — same technique used for
   [advisory-board-list]. CSS Grid's 1fr columns always fill the full
   row width regardless of item count, so a partial last row would stay
   left-aligned instead of centering. */
.rai-partners-grid {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/* flex-basis is back — without it, cards shrink-to-fit their own logo's
   intrinsic width instead of splitting the row into 4 even columns, so
   a couple of wide logos push the 4th card onto its own row (only 3
   fit). flex:0 0 (not 0 1) this time so a wide logo can't still shrink
   a card away from its share either. (The earlier removal turned out
   to be chasing the wrong cause — a logo not rendering at all was a
   missing featured image on that post, not this property; a flex-basis
   can't hide a DOM node that was never generated server-side.) */
.rai-partners-card {
	flex: 0 0 calc((100% - 72px) / 4);
	border: 1px solid #000000;
	border-radius: 12px;
	aspect-ratio: 2.1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: #FFFFFF;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rai-partners-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .15);
	border-color: #28508C;
}
.rai-partners-card img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s ease; }
.rai-partners-card:hover img { transform: scale(1.05); }

.rai-partners-load-more-wrap { text-align: center; margin-top: 40px; }
.rai-partners-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 20px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rai-partners-load-more:hover {
	background-color: #0052D6;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}
.rai-partners-load-more:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* =========================================================
   41. OUR EXPERTS HERO
   ========================================================= */
/* No background-image here — same situation as the other hero
   sections (About Us, Advisory Board, Partners): the globe/cityscape
   photo + light overlay is already set as this section's own Elementor
   background; this only styles the text and stat boxes on top of it. */
#our-expert-hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#our-expert-hero-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#our-expert-hero-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#our-expert-hero-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 76px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 24px;
}

#our-expert-hero-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
}

/* Boxes are sized to their own content (not equal-width) — "Industries"
   has the longest line and is visibly wider than "Network"/"Countries"
   in the reference, not stretched to match. */
/* !important on the layout properties here — Elementor's own configured
   direction/width for these containers (set in the visual builder) was
   winning over this plain rule, stacking the 3 boxes into full-width
   rows instead of a single line, at every viewport width including
   this unconstrained base one. */
#net-ind-cou-section {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
}

#network-section,
#industry-section,
#countries-section {
	flex: 0 0 auto !important;
	width: auto !important;
	border-radius: 8px;
	background-color: #28508C;
	padding: 24px 40px;
}

.net-ind-cou-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	text-transform: uppercase;
	color: #06D2C9;
	font-weight: 600;
	text-align: center;
	margin: 0 0 8px;
}

.net-ind-cou-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 22px;
	color: #FFFFFF;
	font-weight: 300;
	text-align: center;
	margin: 0;
}

/* =========================================================
   42. EXPERTS LISTING ([experts-listing-pagination-filter] shortcode)
   ========================================================= */
.rai-experts-listing { padding: 50px 80px 0; }

.rai-experts-filters {
	display: flex;
	background-color: #0167FF;
	border-radius: 0;
	padding: 30px;
	margin-bottom: 40px;
}

.rai-experts-search-form {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.rai-experts-search-input-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.rai-experts-search-input {
	width: 100%;
	border: none;
	border-radius: 4px;
	background-color: #F3EFE8;
	padding: 14px 44px 14px 20px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 27px;
	color: #000000;
	font-weight: 300;
}
.rai-experts-search-input::placeholder { color: #000000; opacity: .6; }

/* Hidden by default (assets/js/experts-listing.js toggles it with
   jQuery's show/hide, which uses "inline-block" for a <button> — text-
   align/line-height center the "×" instead of relying on flexbox, which
   jQuery's restored display value wouldn't preserve). Only shown once
   the input has a value, so there's nothing to clear when it's empty. */
.rai-experts-search-clear {
	display: none;
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #000000;
	opacity: .5;
	font-size: 22px;
	line-height: 26px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	transition: opacity .2s ease, background-color .2s ease;
}
.rai-experts-search-clear:hover { opacity: .85; background-color: rgba(0, 0, 0, .08); }

.rai-experts-search-submit {
	flex: none;
	border: none;
	border-radius: 2px;
	background-color: #F49E0C;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	color: #FFFFFF;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	padding: 14px 40px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-experts-search-submit:hover { background-color: #D98A00; transform: translateY(-2px); }

.rai-experts-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
}

.rai-experts-tab {
	border: none;
	border-radius: 4px;
	background-color: #EDEDED;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 24px;
	color: #000000;
	font-weight: 500;
	padding: 10px 20px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.rai-experts-tab:hover { background-color: #DCDCDC; transform: translateY(-2px); }
.rai-experts-tab.is-active,
.rai-experts-tab.is-active:hover {
	background-color: #28508C;
	color: #FFFFFF;
}
.rai-experts-tabs-toggle {
	border: 1px solid #28508C;
	border-radius: 4px;
	background-color: transparent;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 24px;
	color: #28508C;
	font-weight: 500;
	padding: 9px 20px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.rai-experts-tabs-toggle:hover { background-color: #28508C; color: #FFFFFF; transform: translateY(-2px); }
/* Nothing to expand (every tab already fits on one row) — JS adds this
   instead of leaving a functionless button in the layout. */
.rai-experts-tabs-toggle.is-unnecessary { display: none; }

.rai-experts-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	min-height: 120px;
}
.rai-experts-grid-loading { opacity: .5; pointer-events: none; }

/* Whole card is a single <a> (see the shortcode) — "View Profile" is a
   plain <span>, not a nested anchor, since the card itself already
   goes to the same place a click on that text would. */
.rai-expert-card {
	flex: 0 0 calc((100% - 90px) / 4);
	min-width: 220px;
	border: 1px solid #28508C;
	border-radius: 4px;
	background-color: #FFFFFF;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rai-expert-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(40, 80, 140, .2); border-color: #0167FF; }
.rai-expert-card:hover .rai-expert-card-view-profile { background-color: #0052D6; }
.rai-expert-card:hover .rai-expert-card-view-profile::after { transform: translateX(4px); }

/* !important on the radius/overflow here and on the <img> below — this
   is the same Elementor-vs-plain-CSS conflict already seen elsewhere
   in this theme (see #net-ind-cou-section): without it the avatar was
   rendering as a plain square instead of a circle. */
.rai-expert-card-media {
	width: 120px;
	height: 120px;
	border-radius: 50% !important;
	overflow: hidden !important;
	background-color: #EDEDED;
	margin-bottom: 16px;
	flex: none;
}
.rai-expert-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; }

.rai-expert-card-org {
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 8px;
}

.rai-expert-card-name {
	margin: 0 0 4px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 25px;
	line-height: 30px;
	color: #000000;
	font-weight: 600;
}

.rai-expert-card-designation {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	font-weight: 400;
	margin-bottom: 16px;
}

.rai-expert-card-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}
.rai-expert-card-tag {
	border-radius: 4px;
	background-color: #EDEDED;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	font-weight: 500;
	padding: 6px 12px;
}

.rai-expert-card-view-profile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: auto;
	background-color: #0167FF;
	border-radius: var(--rai-radius-pill);
	padding: 14px 28px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 20px;
	color: #FFFFFF;
	font-weight: 600;
	transition: background-color .2s ease;
}
/* Same shared CSS-only arrow used by .rai-reports-listing-link/
   .rai-resource-card-link — one solid currentColor shape (thin shaft +
   head) cut with clip-path, sized to match those, instead of a Font
   Awesome <i> icon that never quite matched the reference width. */
.rai-expert-card-view-profile::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 8px;
	background-color: currentColor;
	clip-path: polygon( 0% 42%, 65% 42%, 65% 10%, 100% 50%, 65% 90%, 65% 58%, 0% 58% );
	transition: transform .2s ease;
}

.rai-experts-no-results {
	width: 100%;
	text-align: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #667085;
	padding: 40px 0;
}

.rai-experts-load-more-wrap { width: 100%; text-align: center; margin-top: 40px; }
.rai-experts-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-experts-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-experts-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   43. PROGRAMS & INITIATIVES LISTING
   ([programs-initiatives-listing-pagination] shortcode)
   ========================================================= */
#program-initiative-listing { padding: 50px 80px 0; background-color: #FFFFFF; }

.rai-programs-list {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.rai-program-row {
	display: flex;
	gap: 64px;
	align-items: flex-start;
}

.rai-program-media-col,
.rai-program-content-col {
	flex: 1 1 0;
	min-width: 0;
}

.rai-program-number {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
.rai-program-number::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

.rai-program-title {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}

.rai-program-short-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	margin: 0 0 24px;
}

.rai-program-image img {
	display: block;
	width: 100%;
	border-radius: 10px !important;
	object-fit: cover;
}

/* Any heading level an editor adds inside the program's own content
   gets this same style — the reference design calls out "WHAT WE DO"/
   "WHO IS INVOLVED" as identical, generic section headings, not
   one-off styled text. */
.rai-program-listing-content h1,
.rai-program-listing-content h2,
.rai-program-listing-content h3,
.rai-program-listing-content h4,
.rai-program-listing-content h5,
.rai-program-listing-content h6 {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	line-height: 29px;
	text-transform: uppercase;
	color: #06D2C9;
	font-weight: 600;
	margin: 32px 0 16px;
}
.rai-program-listing-content > :first-child { margin-top: 0; }

.rai-program-listing-content p {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	margin: 0 0 24px;
}

.rai-program-listing-content ul {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rai-program-listing-content ul li {
	position: relative;
	padding-left: 24px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
}
.rai-program-listing-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	background-color: #28508C;
}

.rai-program-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rai-program-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
	padding: 15px 30px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rai-program-btn-solid {
	color: #FFFFFF;
	background-color: #0167FF;
}
.rai-program-btn-solid:hover {
	background-color: #0052D6;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}
.rai-program-btn-outline {
	color: #0167FF;
	background-color: transparent;
	border: 1px solid #0167FF;
}
.rai-program-btn-outline:hover {
	background-color: #0167FF;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.rai-programs-no-results {
	width: 100%;
	text-align: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #667085;
	padding: 40px 0;
}

.rai-programs-load-more-wrap { text-align: center; margin-top: 48px; }
.rai-programs-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-programs-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-programs-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   44. EVENTS PAGE
   ========================================================= */
/* No background-image here — same situation as the other hero
   sections (About Us, Advisory Board, Partners, Our Experts): the
   summit-stage photo + dark overlay is already set as this section's
   own Elementor background; this only styles the text on top of it. */
#events-hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#events-hero-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#events-hero-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#events-hero-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 76px;
	color: #FFFFFF;
	font-weight: 400;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 24px;
}

#events-hero-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 300;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

/* Event Highlights — eyebrow + heading header for the (not yet built)
   [events-highlights-listing-pagination] shortcode, same pattern as
   #partners-listing-section's own eyebrow/heading. */
#events-highlights-list-section {
	padding: 50px 80px;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#highlights-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#highlights-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#highlights-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	margin: 0;
}

/* Upcoming — same eyebrow/heading header pattern, plus the same
   dotted-background-on-its-own-::before technique as #our-mission-section:
   opacity on a separate layer so it fades only the dots, not the
   heading/text sitting above it. */
#upcoming-events-list-section {
	position: relative;
	padding: 50px 80px;
	background-color: #F8FAFE;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	overflow: hidden;
}
#upcoming-events-list-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#upcoming-events-list-section > * { position: relative; z-index: 1; }

#upcoming-events-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#upcoming-events-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#upcoming-events-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	margin: 0;
}

/* Event Highlights listing ([events-highlights-listing-pagination]
   shortcode), inside #events-highlights-list-section above. */
.rai-event-highlights-listing { width: 100%; margin-top: 40px; }

.rai-event-highlights-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/* Square card: the post's featured image as background-image, with a
   solid color ::before-less overlay <span> (not a pseudo-element,
   since the card itself already needs background-image for the
   photo) at .8 opacity tinting it navy/blue on alternating cards, and
   the ACF logo + title layered above that via z-index. */
/* max-width caps each square at a modest tile size instead of letting
   flex-basis (a third of the row) stretch it to match the row's full
   width. No max-height here — it was fighting aspect-ratio: 1/1,
   capping the box down to its own content's short intrinsic height
   instead of letting it grow into a full square at this width, which
   is why the block was rendering much smaller/shorter than intended. */
.rai-event-highlight-card {
	position: relative;
	flex: 0 0 calc((100% - 60px) / 3);
	max-width: 550px;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	overflow: hidden;
	background-color: #28508C;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease;
}
.rai-event-highlight-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }

.rai-event-highlight-overlay {
	position: absolute;
	inset: 0;
	opacity: .8;
	z-index: 0;
}
.rai-event-highlight-card-navy .rai-event-highlight-overlay { background-color: #28508C; }
.rai-event-highlight-card-blue .rai-event-highlight-overlay { background-color: #0167FF; }

/* Centered in the card via the card's own flex align/justify-center
   above — the title below is taken out of flow (position:absolute),
   so it doesn't pull this off-center. */
.rai-event-highlight-logo {
	position: relative;
	z-index: 1;
	max-width: 70%;
	max-height: 100px;
	object-fit: contain;
}

/* Pinned to the card's bottom edge, independent of the logo's own
   centering above. */
.rai-event-highlight-title {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	font-family: 'Poppins', var(--rai-font);
	font-size: 25px;
	line-height: 28px;
	color: #FFFFFF;
	font-weight: 400;
	text-align: center;
	margin: 0;
}

.rai-event-highlights-no-results {
	width: 100%;
	text-align: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #667085;
	padding: 40px 0;
}

.rai-event-highlights-load-more-wrap { width: 100%; text-align: center; margin-top: 48px; }
.rai-event-highlights-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-event-highlights-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-event-highlights-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   45. UPCOMING EVENTS LISTING
   ([upcoming-events-listing-pagination] shortcode), inside
   #upcoming-events-list-section above.
   ========================================================= */
.rai-upcoming-events-listing { width: 100%; margin-top: 40px; position: relative; z-index: 1; }

.rai-upcoming-events-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/* Whole card is a single <a> (see rai-partners-card/rai-expert-card
   for the same pattern), so "View Details" is a plain <span> rather
   than a nested anchor. */
.rai-upcoming-event-card {
	flex: 0 0 calc((100% - 60px) / 3);
	min-width: 280px;
	border: 1px solid #28508C;
	border-radius: 12px;
	background-color: #28508C;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	text-align: left;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rai-upcoming-event-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); border-color: #0167FF; }
.rai-upcoming-event-card:hover .rai-upcoming-event-arrow { transform: translateX(4px); }

.rai-upcoming-event-media { background-color: #FFFFFF; }
.rai-upcoming-event-media img { display: block; width: 100%; aspect-ratio: auto; object-fit: cover; }

.rai-upcoming-event-body { padding: 24px; display: flex; flex-direction: column; }

.rai-upcoming-event-category {
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 12px;
}

.rai-upcoming-event-title {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 24px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 24px;
}

.rai-upcoming-event-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.rai-upcoming-event-date-location {
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	text-transform: uppercase;
	color: #B5B5B5;
	font-weight: 500;
}

.rai-upcoming-event-view-details {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #06D2C9;
	font-weight: 500;
	white-space: nowrap;
}
/* Arrow drawn with an inline SVG (thin line + chevron), same technique
   as .rai-wwd-item-arrow, recolored to match this text's teal. */
.rai-upcoming-event-arrow {
	display: inline-block;
	width: 24px;
	height: 10px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10' fill='none' stroke='%2306D2C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='5' x2='19' y2='5'/><polyline points='14 1 19 5 14 9'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform .2s ease;
}

.rai-upcoming-events-no-results {
	width: 100%;
	text-align: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #667085;
	padding: 40px 0;
}

.rai-upcoming-events-load-more-wrap { width: 100%; text-align: center; margin-top: 48px; }
.rai-upcoming-events-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-upcoming-events-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-upcoming-events-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   46. PODCAST HERO
   ========================================================= */
/* Same two-column split as #rai-home-hero-section (homepage hero):
   #podcast-hero-section is the actual flex container, its direct
   children are the text block and the [home-latest-episode] card —
   not separate siblings under some other shared wrapper. */
#podcast-hero-section {
	background-color: #FFFFFF;
	padding: 50px 80px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 64px;
}
#leading-podcast-content-section { flex: 1 1 0%; min-width: 0; }
#featured-latest-podcast { flex: 0 0 auto; width: 480px; max-width: 100%; }

#podcast-leading-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#podcast-leading-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#podcast-leading-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 77px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 24px;
}

#podcast-leading-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	max-width: 100%;
	margin: 0 0 32px;
}

#listen-on-btns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 48px;
	padding: 0;
}
#listen-on-btns .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	padding: 14px 28px;
	background-color: transparent !important;
	border: 1px solid #0167FF !important;
	color: #0167FF !important;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#listen-on-btns .elementor-button:hover {
	background-color: #0167FF !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(1, 103, 255, .3);
}

#podcast-stats-section {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 32px;
}
#podcast-stats-section > div { padding-left: 32px; border-left: 1px solid #0167FF; flex: 1 1 0; min-width: 0; }
#podcast-stats-section > div:first-child { padding-left: 0; border-left: none; }

.pod-stats-count {
	font-family: 'Poppins', var(--rai-font);
	font-size: 45px;
	line-height: 1.1;
	color: #28508C;
	font-weight: 700;
	margin: 0 0 4px;
	white-space: nowrap;
}
.pod-stats-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #000000;
	font-weight: 400;
	margin: 0;
	margin-top: 10px !important;
}

/* =========================================================
   47. PODCAST FOUNDER SECTION
   ========================================================= */
/* Dotted background on its own ::before (same technique as
   #our-mission-section/#upcoming-events-list-section) so opacity fades
   only the dots, not the heading/text sitting above it. */
#podcast-founder-section {
	position: relative;
	background-color: #F8FAFE;
	display: flex;
	align-items: center;
	gap: 64px;
	padding: 50px 80px;
	overflow: hidden;
}
#podcast-founder-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#founder-back-sec, #about-founder-sec { position: relative; z-index: 1; }

/* No background-image here — the founder photo is already set as this
   element's own Elementor background (no image URL was given for it;
   the raw markup's #founder-back-sec div is otherwise empty). */
#founder-back-sec {
	flex: 0 0 45%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	transform: none;
	margin: 0;
}

#about-founder-sec { flex: 0 0 55%; min-width: 0; }

#founder-name {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 12px;
}

/* Small divider bar under the designation, drawn with a ::after rather
   than a separate element — nothing in the raw markup for it. */
#founder-designation {
	position: relative;
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	color: #F49E0C;
	font-weight: 400;
	margin: 0 0 24px;
	padding-bottom: 20px;
}
#founder-designation::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 1px;
	background-color: #28508C;
}

/* Both description paragraphs share this id in the raw markup (a
   duplicate-id quirk in the Elementor export) — harmless for CSS,
   since #id selectors match every element with that id, not just the
   first, so both paragraphs still get styled identically. */
#founder-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	margin: 0 0 24px;
}
#founder-description:last-child { margin-bottom: 0; }

/* =========================================================
   48. PODCAST GUEST LIST ([podcast-guest-list] shortcode)
   ========================================================= */
#podcast-guest-list-section { padding: 50px 80px; background-color: #FFFFFF; }

#guest-list-title {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#guest-list-title::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

/* #guest-content-section holds both the heading and the description
   side by side (per the raw markup, they're siblings inside this one
   wrapper, not stacked) — a two-column row, not a centered stack like
   most other section headers in this theme. !important on display/
   flex-direction — same Elementor-vs-plain-CSS conflict seen
   elsewhere in this project: its own e-con default (column) was
   winning over this plain rule, stacking the heading above the
   description instead of side by side. */
#guest-content-section {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 64px;
	margin-bottom: 48px;
}

/* Capped to a narrower column (not an equal flex:1 1 0 split) so it
   wraps to two lines like the reference image, instead of stretching
   across the full available width on one line. */
#guest-list-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 440px;
}

#guest-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	margin: 0;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
	max-width: 600px;
}

/* flex (not grid) specifically so a leftover row of 1 or 2 cards
   centers itself for free via justify-content:center — same reasoning
   as .rai-advisory-board-list. */
.rai-podcast-guest-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.rai-podcast-guest-list-more-wrap { width: 100%; text-align: center; margin-top: 40px; }
.rai-podcast-guest-list-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-podcast-guest-list-more-btn:hover { background-color: #0052D6; color: #FFFFFF; transform: translateY(-2px); }

/* The whole card is a single <a> (see the shortcode) rather than
   separate links on the name and the rest — text-decoration/color
   reset here since an anchor would otherwise underline and re-color
   everything inside it. Same visual pattern as .rai-advisory-board-card. */
.rai-podcast-guest-card {
	flex: 0 1 calc((100% - 60px) / 3);
	min-width: 260px;
	border-radius: 8px;
	background-color: #28508C;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.rai-podcast-guest-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }

.rai-podcast-guest-card-media { overflow: hidden; }
.rai-podcast-guest-card-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.rai-podcast-guest-card:hover .rai-podcast-guest-card-media img { transform: scale(1.06); }

.rai-podcast-guest-card-body { padding: 24px; }

.rai-podcast-guest-card-name {
	margin: 0;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	color: #06D2C9;
	font-weight: 600;
}

/* Small divider bar under the designation, same technique as
   #founder-designation::after — nothing in the source data for it,
   it's purely decorative. */
/* Fixed-width divider bar (80px, not the full text width) below the
   designation — a ::after rather than a border-bottom, since a border
   on the text element itself would span the text's own width instead
   of a constant 80px regardless of how long the designation is. */
.rai-podcast-guest-card-designation {
	position: relative;
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	color: #F49E0C;
	font-weight: 500;
	margin-top: 4px;
	padding-bottom: 15px;
}
.rai-podcast-guest-card-designation::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 1px;
	background-color: #FFFFFF;
}

.rai-podcast-guest-card-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 18px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 10px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================
   49. LATEST CONVERSATIONS
   ([latest-podcast-episode-listing] shortcode)
   ========================================================= */
/* Dotted background on its own ::before (same technique as
   #our-mission-section/#upcoming-events-list-section) so opacity fades
   only the dots, not the heading/cards sitting above it. */
#latest-episode-section {
	position: relative;
	background-color: #F8FAFE;
	padding: 50px 80px;
	overflow: hidden;
}
#latest-episode-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#latest-episode-text, #latest-episode-heading, .rai-latest-episodes-grid { position: relative; z-index: 1; }

#latest-episode-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#latest-episode-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#latest-episode-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 40px;
}

.rai-latest-episodes-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* Whole card is a single <a> (see rai-partners-card/rai-expert-card
   for the same pattern). */
.rai-latest-episode-item {
	position: relative;
	flex: 0 0 calc((100% - 24px) / 2);
	min-width: 280px;
	border: 1px solid #28508C;
	border-radius: 8px;
	background-color: #FFFFFF;
	padding: 20px;
	padding-top: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.rai-latest-episode-item:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(40, 80, 140, .18); }

/* Straddles the card's top border — half the badge sits above the box,
   half below — rather than sitting fully inside it, same technique as
   the homepage's .rai-podcast-pick-badge but positioned here instead. */
.rai-latest-episode-badge {
	position: absolute;
	top: 5px;
	left: 0;
	display: inline-block;
	border-radius: 3px;
	background-color: #00F0C8;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	color: #000000;
	font-weight: 500;
	padding: 6px 10px;
	margin: 0;
}

.rai-latest-episode-item-title {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #28508C;
	font-weight: 400;
	margin: 0;
}

.rai-latest-episode-item-guest {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	color: #000000;
	font-weight: 600;
	margin: 0;
}

.rai-latest-episode-item-meta-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
	margin-top: auto;
}

.rai-latest-episode-item-guest-title,
.rai-latest-episode-item-date {
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	color: #1C0101;
	font-weight: 400;
}
.rai-latest-episode-item-date { flex: none; white-space: nowrap; }

/* =========================================================
   50. RESOURCES HERO
   ========================================================= */
/* No background-image here — same situation as the other hero
   sections (About Us, Advisory Board, Partners, Our Experts, Events):
   the grayscale office photo + light overlay is already set as this
   section's own Elementor background; this only styles the text on
   top of it. */
#resources-hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 50px 80px;
}

#resources-hero-text {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin-bottom: 16px;
}
#resources-hero-text::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }

#resources-hero-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 75px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 24px;
}

#resources-hero-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

/* =========================================================
   51. RESOURCES LISTING ([resources-category-listing] shortcode)
   ========================================================= */
.rai-resources-listing { max-width: 1400px; margin: 0 auto; padding: 50px 80px !important; box-sizing: border-box; }

.rai-resources-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 48px;
	padding: 0 50px;
}

.rai-resources-tab {
	flex: 1 1 0;
	min-width: 200px;
	border: none;
	border-radius: 0;
	background-color: #EDEDED;
	color: #000000;
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 50px;
	font-weight: 400;
	text-align: center;
	padding: 20px 32px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.rai-resources-tab:hover { background-color: #DCDCDC; }
.rai-resources-tab.is-active,
.rai-resources-tab.is-active:hover {
	background-color: #28508C;
	color: #FFFFFF;
}

/* 2-per-row grid — same layout math as .rai-reports-listing (flex,
   not CSS grid, wrapping via flex-basis). */
.rai-resources-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 48px;
}
.rai-resources-list-loading { opacity: .5; pointer-events: none; }

/* Same visual pattern as .rai-reports-listing-card. */
/* flex-grow:0 (not 1) — a single card (or a leftover odd one) should
   stay capped at its ~50% share, not stretch to fill the whole row
   when there's no sibling card next to it. */
.rai-resource-card { flex: 0 1 calc(50% - 24px); min-width: 280px; }

.rai-resource-card-media {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}
.rai-resource-card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; }
.rai-resource-card:hover .rai-resource-card-media img { transform: scale(1.06); }

.rai-resource-card-title { margin: 0 0 8px; }
.rai-resource-card-title a {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #000000;
	font-weight: 400;
	transition: color .2s ease;
}
.rai-resource-card-title a:hover { color: #28508C; }

.rai-resource-card-meta {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 18px;
	color: #797474;
	font-weight: 500;
	margin-bottom: 12px;
	margin-top: 15px;
}

.rai-resource-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #0167FF;
	border-radius: 6px;
	padding: 10px 16px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	color: #FFFFFF;
	transition: background-color .2s ease, gap .2s ease, transform .2s ease;
}
/* Arrow drawn with a plain ::after — a single currentColor shape (a
   thin shaft plus a triangular head) cut with clip-path, so it's one
   solid arrow like "→" rather than just a chevron. No SVG, no icon
   font, no image of any kind; currentColor keeps it in sync with the
   link's own color, including on hover, without a separate color rule. */
.rai-resource-card-link::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 8px;
	background-color: currentColor;
	clip-path: polygon( 0% 42%, 65% 42%, 65% 10%, 100% 50%, 65% 90%, 65% 58%, 0% 58% );
	transition: transform .2s ease;
}
.rai-resource-card-link:hover { background-color: #0052D6; color: #FFFFFF; gap: 12px; transform: translateY(-2px); }
.rai-resource-card-link:hover::after { transform: translateX(2px); }

/* "Press Release" category — a single-column list instead of the
   2-per-row card grid above, each item full-width (flex:1 1 100% so
   it always takes the whole row inside the same flex-wrap
   .rai-resources-list container the card grid uses), separated by a
   divider rule rather than sitting in its own bordered box. */
.rai-resource-press-item {
	flex: 1 1 100%;
	padding-bottom: 30px;
	margin-bottom: 0;
	border-bottom: 1px solid #28508C;
}
.rai-resource-press-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.rai-resource-press-media {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}
/* !important on aspect-ratio/object-fit/height/max-height — same
   Elementor-vs-plain-CSS conflict seen elsewhere in this project. The
   max-height is a hard safety cap on top of the 16:9 ratio: at a wide
   viewport the whole listing was rendering edge-to-edge (its own
   80px padding wasn't holding either — see .rai-resources-listing
   above), so even a "correct" 16:9 ratio was still enormous in
   absolute pixels; this keeps the image from ever exceeding a sane
   height regardless of how wide its container ends up being. */
.rai-resource-press-media img {
	display: block;
	width: 100%;
	height: auto !important;
	max-height: 500px !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover;
	transition: transform .4s ease;
	object-position: center;
}
.rai-resource-press-item:hover .rai-resource-press-media img { transform: scale(1.03); }

.rai-resource-press-badge {
	position: absolute;
	top: 20px;
	right: 0;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	font-weight: 400;
	padding: 8px 16px;
}

/* Title left, "Read Full Analysis" button right, date below this row. */
.rai-resource-press-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 8px;
}

.rai-resource-press-title { margin: 0; }
.rai-resource-press-title a {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #000000;
	font-weight: 400;
	transition: color .2s ease;
}
.rai-resource-press-title a:hover { color: #28508C; }

.rai-resource-press-meta {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 18px;
	color: #797474;
	font-weight: 500;
	margin-bottom: 12px;
}

/* Same shared CSS-only arrow (currentColor shape cut with clip-path)
   as .rai-resource-card-link/.rai-reports-listing-link. */
.rai-resource-press-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #0167FF;
	border-radius: 6px;
	padding: 10px 16px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	color: #FFFFFF;
	transition: background-color .2s ease, gap .2s ease, transform .2s ease;
}
.rai-resource-press-link::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 8px;
	background-color: currentColor;
	clip-path: polygon( 0% 42%, 65% 42%, 65% 10%, 100% 50%, 65% 90%, 65% 58%, 0% 58% );
	transition: transform .2s ease;
}
.rai-resource-press-link:hover { background-color: #0052D6; color: #FFFFFF; gap: 12px; transform: translateY(-2px); }
.rai-resource-press-link:hover::after { transform: translateX(2px); }

/* "News" tab — "Recent News" featured block (latest News post) above
   an "All Insights" heading and its own badged card grid. */
/* Full-bleed background (same technique as .alignfull below, since
   .rai-resources-featured sits nested inside .rai-resources-listing's
   own centered max-width:1400px box, not as a direct top-level
   Elementor section) — .rai-resources-featured-inner re-applies that
   same max-width/padding so the actual content lines back up with the
   rest of the page instead of stretching edge-to-edge with it. */
.rai-resources-featured {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #F8FAFE;
	padding: 48px 0;
	margin-bottom: 48px;
}
.rai-resources-featured-inner {
	display: flex;
	align-items: center;
	gap: 48px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 80px;
	box-sizing: border-box;
}
.rai-resources-featured-text { flex: 1 1 0; min-width: 0; }
.rai-resources-featured-media { flex: 0 0 45%; display: block; }
.rai-resources-featured-media img {
	display: block;
	width: 100%;
	border-radius: 10px !important;
}

.rai-resources-featured-heading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 22px;
	line-height: 28px;
	color: #F49E0C;
	font-weight: 700;
	margin-bottom: 12px;
}

.rai-resources-featured-byline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.rai-resources-featured-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.rai-resources-featured-byline img { border-radius: 50%; }
.rai-resources-featured-author {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 24px;
	color: #747787;
	font-weight: 300;
}
.rai-resources-featured-sep { color: #D0D3DC; font-size: 16px; }
.rai-resources-featured-category {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 24px;
	color: #2A548C;
	font-weight: 400;
}

.rai-resources-featured-title { margin: 0 0 15px; }
.rai-resources-featured-title a {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #000000;
	font-weight: 400;
	transition: color .2s ease;
}
.rai-resources-featured-title a:hover { color: #28508C; }

.rai-resources-featured-date {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 18px;
	color: #797474;
	font-weight: 500;
	margin-bottom: 16px;
}

.rai-resources-featured-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 1.6;
	color: #404453;
	font-weight: 300;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rai-resources-all-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	margin: 0 0 40px;
}

/* "All Insights" grid card — same card as .rai-resource-card, plus a
   category-name badge over the image's top-right corner (same badge
   technique as .rai-reports-listing-badge/.rai-resource-press-badge). */
.rai-resource-news-card { flex: 0 1 calc(50% - 24px); min-width: 280px; }

.rai-resource-news-media {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}
.rai-resource-news-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; }
.rai-resource-news-card:hover .rai-resource-news-media img { transform: scale(1.06); }

.rai-resource-news-badge {
	position: absolute;
	top: 16px;
	right: 0;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 5px 0 0 5px;
}

.rai-resource-news-title { margin: 0 0 12px; }
.rai-resource-news-title a {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #000000;
	font-weight: 400;
	transition: color .2s ease;
}
.rai-resource-news-title a:hover { color: #28508C; }

.rai-resource-news-meta {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 18px;
	color: #797474;
	font-weight: 500;
	margin-bottom: 12px;
}

/* Same shared CSS-only arrow (currentColor shape cut with clip-path)
   as .rai-resource-card-link/.rai-reports-listing-link. */
.rai-resource-news-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #0167FF;
	border-radius: 6px;
	padding: 10px 16px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	color: #FFFFFF;
	transition: background-color .2s ease, gap .2s ease, transform .2s ease;
}
.rai-resource-news-link::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 8px;
	background-color: currentColor;
	clip-path: polygon( 0% 42%, 65% 42%, 65% 10%, 100% 50%, 65% 90%, 65% 58%, 0% 58% );
	transition: transform .2s ease;
}
.rai-resource-news-link:hover { background-color: #0052D6; color: #FFFFFF; gap: 12px; transform: translateY(-2px); }
.rai-resource-news-link:hover::after { transform: translateX(2px); }

.rai-resources-no-results {
	text-align: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #667085;
	padding: 40px 0;
}

.rai-resources-load-more-wrap { text-align: center; margin-top: 40px; }
.rai-resources-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-resources-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-resources-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   52. CONTACT US ([contact-form-7 id="1549"] "Contact Us" form)
   ========================================================= */
/* Two columns: #reach-us-directly-section (contact methods + "We can
   help with" list) and its sibling (the dark "Send Us a Message" card,
   which has no custom id in the raw Elementor markup, so it's targeted
   structurally — same technique already used for #join-advisory-section
   + div/#experts-btn-section). align-items:flex-start (not stretch) so
   each column sizes to its own content instead of being pulled to
   match its sibling's height. */
#contact-us-section {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 64px;
	padding: 50px 80px 0;
}

#reach-us-directly-section {
	flex: 1 1 42%;
	min-width: 320px;
	display: flex !important;
	flex-direction: column !important;
}

#reach-us-directly-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}

#reach-us-directly-text {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	margin: 0 0 32px;
}

#email-address-section,
#address-location-section,
#business-days-section {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 16px;
	margin-bottom: 0;
	padding: 10px 0;
}
div#business-days-section {
	margin-bottom: 10px;
}

#email-address-section p,
#address-location-section p,
#business-days-section p {
	font-family: 'Poppins', var(--rai-font);
	font-size: 22px;
	color: #000000;
	font-weight: 400;
	opacity: .898;
	margin: 0;
}

/* The icon glyph PNGs (Email/Location/Time) are plain white shapes on a
   transparent background, sized to sit inset within this colored
   square rather than filling it edge to edge. */
.contact-logo {
	flex: none;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #F58523;
}
.contact-logo img { display: block; width: 100%; height: auto; }

#divider-section {
	display: block;
	width: 64px;
	height: 0;
	border: 2px solid #28508C;
	margin: 12px 0 32px;
}

#reach-us-directly-section h4 {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	line-height: 29px;
	text-transform: uppercase;
	color: #000000;
	font-weight: 600;
	margin: 0 0 20px;
}

#reach-us-directly-section ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
#reach-us-directly-section li {
	position: relative;
	padding-left: 22px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
}
#reach-us-directly-section li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #28508C;
}

/* ---- "Send Us a Message" card ---- */
#reach-us-directly-section + div {
	flex: 1 1 55%;
	min-width: 320px;
	border-radius: 12px;
	background-color: #28508C;
	padding: 30px;
}

.rai-contact-form-heading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 48px;
	line-height: 53px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 12px;
}

.rai-contact-form-subheading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 0 0 32px;
}

/* ---- Contact Form 7 ---- */
#contact-us-section .newsletter-form { display: flex; flex-direction: column; gap: 24px; }
#contact-us-section .form-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; }
#contact-us-section .form-group { flex: 1 1 0; min-width: 220px; }
#contact-us-section .form-group p { margin: 0; }
#contact-us-section .wpcf7-form-control-wrap { display: block; margin-top: 8px; }

#contact-us-section label {
	display: block;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	line-height: 26px;
	color: #FFFFFF;
	font-weight: 400;
}

#contact-us-section .wpcf7-form-control.form-control {
	display: block;
	width: 100%;
	background-color: #FFFFFF;
	border: none;
	border-radius: 6px;
	padding: 14px 18px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 15px;
	color: #000000;
	font-weight: 300;
}
#contact-us-section textarea.wpcf7-form-control.form-control { min-height: 116px; resize: vertical; }
#contact-us-section .wpcf7-form-control.form-control::placeholder {
	opacity: .502;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	color: #000000;
	font-weight: 300;
}

#contact-us-section select.wpcf7-form-control {
	appearance: none;
	color: rgba(0, 0, 0, .502);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	padding-right: 40px;
}

.rai-contact-form-actions {
	align-items: center;
	gap: 24px;
	margin-top: 8px;
}

#contact-us-section input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	background-color: #F49E0C;
	border: none;
	border-radius: 8px;
	padding: 14px 32px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	color: #FFFFFF;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#contact-us-section input.wpcf7-submit:hover {
	background-color: #D98A00;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(244, 158, 12, .35);
}

.rai-contact-form-privacy {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 300;
}

/* =========================================================
   53. SINGLE POST DETAIL (single.php — Press Release / News / Article)
   ========================================================= */
/* No sidebar column reserving width anymore — the post content spans
   the full .rai-container width instead of a narrower Bootstrap
   col-lg-8. */
.rai-single-post-container { max-width: 100%; }

.rai-single-title {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 30px;
}

.rai-post-hero-media {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
}
.rai-post-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.rai-post-hero-badge {
	position: absolute;
	top: 20px;
	right: 0;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	font-weight: 400;
	padding: 8px 16px;
}

/* Press Release only — plain date on the left, "Share on" + icons on
   the right, sharing one row (see single.php). */
.rai-post-meta-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}
.rai-post-plain-date {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 18px;
	color: #797474;
	font-weight: 500;
	text-align: center;
}

/* News/Article — "Published by X | Y" byline. */
.rai-post-byline {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 24px;
	color: #747787;
	font-weight: 300;
	margin-bottom: 16px;
}

.rai-post-share {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.rai-post-share-label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 22px;
	line-height: 34px;
	color: #000000;
	font-weight: 300;
	text-align: center;
}
.rai-post-share-links { display: flex; align-items: center; gap: 10px; }
.rai-post-share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--rai-border);
	background: none;
	color: #000000;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.rai-post-share-link i { font-size: 15px; }
.rai-post-share-link:hover { background-color: #0167FF; border-color: #0167FF; color: #FFFFFF; transform: translateY(-2px); }
.rai-post-share-link.is-copied { background-color: var(--rai-green); border-color: var(--rai-green); color: #FFFFFF; }

/* ---- Content typography ---- */
.rai-entry-content h2 {
	font-family: 'Poppins', var(--rai-font);
	font-size: 34px;
	line-height: 1.3;
	color: #000000;
	font-weight: 600;
	margin: 32px 0 16px;
}
.rai-entry-content p {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 27px;
	color: #000000;
	font-weight: 300;
}
.rai-entry-content ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rai-entry-content li {
	position: relative;
	padding-left: 22px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 27px;
	color: #000000;
	font-weight: 300;
}
.rai-entry-content li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .6em;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #0167FF;
}

/* =========================================================
   54. EXPERT DETAIL PAGE (single-experts.php)
   ========================================================= */
.expert-section-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	margin: 0 0 40px;
}

/* Shared button family — reused for the hero and the closing CTA. */
.expert-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
	padding: 14px 28px;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.expert-btn-primary { background-color: #0167FF; color: #FFFFFF; border: 1px solid #0167FF; }
.expert-btn-primary:hover { background-color: #0052D6; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(1, 103, 255, .3); }
.expert-btn-outline { background-color: #FFFFFF; color: #000000; border: 1px solid #000000; }
.expert-btn-outline:hover { background-color: #F5F5F5; transform: translateY(-2px); }
.expert-btn-outline-white { background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.expert-btn-outline-white:hover { background-color: rgba(255, 255, 255, .12); transform: translateY(-2px); }

/* ---- Hero ---- */
#expert-hero-section {
	background-image: url('assets/images/expert-background.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: #FFFFFF;
	padding: 50px 0;
}
#expert-hero-section .rai-container { display: flex; align-items: center; gap: 40px; }

#expert-hero-media { flex: 0 0 420px; max-width: 420px; }
#expert-hero-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 40px rgba(11, 30, 60, .18); }

#expert-hero-content { flex: 1 1 auto; min-width: 0; }

#expert-hero-eyebrow {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #28508C;
	font-weight: 500;
	margin: 0 0 12px;
}

#expert-hero-name {
	font-family: 'Poppins', var(--rai-font);
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 600;
	margin: 0 0 15px;
}

#expert-hero-designation {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 15px;
}

#expert-hero-meta {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #28508C;
	font-weight: 400;
	margin: 0 0 15px;
}
.expert-hero-meta-sep { margin: 0 8px; }

#expert-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* Spec calls for background-color:#28508C at opacity:.2 — applying
   opacity to the tag itself would fade its text too, so this is done
   as an rgba background instead (same technique as .rai-tag-teal),
   keeping the text at full, readable strength. */
.expert-hero-tag {
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #0167FF;
	font-weight: 500;
	background-color: rgba(40, 80, 140, .2);
	border-radius: 4px;
	padding: 6px 12px;
}

#expert-hero-tagline {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	line-height: 29px;
	color: #000000;
	font-weight: 500;
	font-style: italic;
	margin: 0 0 28px;
	max-width: 640px;
}

#expert-hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---- Stats ---- */
#expert-stats-section { background-color: #FFFFFF; padding: 50px 0 0; }
#expert-stats-row { display: flex; align-items: stretch; }
.expert-stat { flex: 1 1 0; min-width: 0; padding: 0 24px; border-left: 1px solid #0167FF; }
.expert-stat:first-child { border-left: none; padding-left: 0; }
.expert-stat-count {
	font-family: 'Poppins', var(--rai-font);
	font-size: 45px;
	color: #28508C;
	font-weight: 700;
	text-align: center;
	line-height: 1.1;
	margin-bottom: 8px;
}
.expert-stat-label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #000000;
	font-weight: 400;
	text-align: center;
}

/* ---- About ---- */
#expert-about-section { background-color: #FFFFFF; padding: 50px 0; }
#expert-about-content {
	max-width: 100%;
	margin: 0 auto;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	text-align: center;
}
#expert-about-content p:last-child { margin-bottom: 0; }
/* A trailing blank line in the editor becomes an empty <p> after
   wpautop — that empty paragraph (not the real last line of text)
   was the actual :last-child, so it kept its full margin-bottom and
   left a large gap before the next section. */
#expert-about-content p:empty { display: none; }

/* The rest of this container is centered text, but a centered *list*
   with default bullet markers pins those markers to the far-left edge
   of the full-width container while each line's (centered) text drifts
   away from them. inline-block shrink-wraps the list to its own
   content width so the container's text-align:center centers the whole
   list as one block, while text-align:left inside it keeps each
   bullet sitting directly next to its own line. */
#expert-about-content ul {
	display: inline-block;
	text-align: center;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
#expert-about-content li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 20px;
}
#expert-about-content li::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #0167FF;
	left: 0;
}

/* ---- Areas of Expertise ---- */
/* Dotted background is on its own ::before (rather than a plain
   background-image on the section) so opacity fades only the dots —
   same technique used for #our-mission-section/#rai-timeline-section. */
#expert-expertise-section { position: relative; background-color: #F8FAFE; padding: 50px 0; }
#expert-expertise-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#expert-expertise-section .rai-container { position: relative; z-index: 1; }
#expert-expertise-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 30px; }
/* flex-grow:0 (not 1) — with grow enabled, a lone leftover card on the
   last row (e.g. a 4th card after two full rows of 3) stretched to
   fill the entire row instead of staying the same size as the others
   and centering via the grid's own justify-content above. */
.expert-expertise-card {
	position: relative;
	flex: 0 1 calc((100% - 60px) / 3);
	min-width: 260px;
	background-color: #28508C;
	border-radius: 8px;
	padding: 32px 24px 24px;
}
/* Straddles the card's top edge — same technique as .rai-hearings-item-number. */
.expert-expertise-count {
	position: absolute;
	top: 0;
	left: 24px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 4px;
	background-color: #00F0C8;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000000;
	font-weight: 500;
}
.expert-expertise-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 34px;
	line-height: 41px;
	color: #F49E0C;
	font-weight: 700;
	margin: 8px 0 12px;
}
.expert-expertise-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 0;
}

/* ---- Experience ---- */
#expert-experience-section { background-color: #FFFFFF; padding: 50px 0; }
#expert-experience-timeline {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-top: 20px;
}
/* Line runs only between the first and last dot, not edge to edge —
   each item is an equal 1/N-width flex column and its dot sits at that
   column's own center, so the line's endpoints are half a column's
   width in from each side: 100% / (N * 2). --expert-exp-count is set
   inline per-expert in single-experts.php since N varies. */
#expert-experience-timeline::before {
	content: '';
	position: absolute;
	top: 25%;
	left: calc(100% / (var(--expert-exp-count, 1) * 2));
	right: calc(100% / (var(--expert-exp-count, 1) * 2));
	border-top: 2px dashed #0167FF;
	z-index: 0;
}
.expert-experience-item { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; text-align: center; }
.expert-experience-dot {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 5px solid #00F0C8;
	box-sizing: border-box;
}
.expert-experience-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 24px;
	line-height: 29px;
	text-transform: uppercase;
	color: #0167FF;
	font-weight: 600;
	text-align: center;
	margin: 0 0 8px;
}
.expert-experience-meta {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	text-align: center;
	margin: 0;
}

/* width (not padding) creates the 80px side gutter — an <hr> has no
   content to push against padding, so its border-top always spans the
   full border-box regardless of padding; only shrinking the box itself
   insets the line. */
.expert-section-divider {
	width: calc(100% - 160px);
	max-width: 1400px;
	margin: 0 auto;
	border: none;
	border-top: 1px solid #000000;
	opacity: .502;
}

/* ---- Credentials & Affiliations ---- */
#expert-credentials-section { background-color: #FFFFFF; padding: 50px 0; }
#expert-credentials-box {
	background-image: linear-gradient(270deg, #06DDC5 0%, #005EF3 100%);
	border-radius: 16px;
	padding: 40px 50px;
}
#expert-credentials-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 40px;
}
#expert-credentials-list li {
	position: relative;
	padding-left: 26px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 400;
}
#expert-credentials-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #FFFFFF;
}

/* ---- How [Name] Can Help ---- */
/* Dotted background on its own ::before (rather than a plain
   background-image on the section) so opacity fades only the dots —
   same technique used for #expert-expertise-section. */
#expert-help-section { position: relative; background-color: #F8FAFE; padding: 50px 0; }
#expert-help-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#expert-help-section .rai-container { position: relative; z-index: 1; }
#expert-help-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
/* flex-grow:0 (not 1) — same reasoning as .expert-expertise-card: a
   lone leftover card on the last row would otherwise stretch to fill
   the entire row instead of staying the same size as the others and
   centering via the grid's own justify-content above. */
.expert-help-card {
	flex: 0 1 calc((100% - 24px) / 2);
	min-width: 280px;
	border: 1px solid #28508C;
	border-radius: 8px;
	padding: 28px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}
.expert-help-content { flex: 1 1 auto; min-width: 0; }
.expert-help-title {
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 29px;
	color: #28508C;
	font-weight: 400;
	margin: 0 0 10px;
}
.expert-help-divider {
	display: block;
	width: 40px;
	height: 0;
	border-top: 2px solid #F49E0C;
	margin-bottom: 12px;
}
.expert-help-description {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	margin: 0;
}
.expert-help-request {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #0167FF;
	border: 1px solid #0167FF;
	border-radius: 6px;
	padding: 10px 18px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #FFFFFF;
	font-weight: 500;
	transition: background-color .2s ease, gap .2s ease;
}
.expert-help-request::after {
	content: '';
	display: inline-block;
	width: 18px;
	height: 7px;
	background-color: currentColor;
	clip-path: polygon( 0% 42%, 65% 42%, 65% 10%, 100% 50%, 65% 90%, 65% 58%, 0% 58% );
	transition: transform .2s ease;
}
.expert-help-request:hover { background-color: #0052D6; gap: 12px; }
.expert-help-request:hover::after { transform: translateX(2px); }

/* ---- Explore More Experts ---- */
#expert-related-section { background-color: #FFFFFF; padding: 50px 0; }

/* ---- CTA ---- */
#expert-cta-section {
	background-image: url('assets/images/doted.png'), linear-gradient(270deg, #06DDC5 0%, #005EF3 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 30px 80px;
	margin-bottom: 50px;
}
#expert-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
}
#expert-cta-content { flex: 1 1 500px; min-width: 0; }
#expert-cta-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: 500;
	margin: 0 0 16px;
}
#expert-cta-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #FFFFFF; flex: none; }
#expert-cta-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0;
	max-width: 100%;
}
#expert-cta-btns { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }

/* =========================================================
   55. EVENT DETAIL CONTACT CTA (single-events-summits.php)
   ========================================================= */
/* Same full-bleed gradient/dotted-background recipe used elsewhere
   (#background-section-for-get-involved, #expert-cta-section) — button
   reuses .expert-btn/.expert-btn-primary as-is since it's pixel-
   identical to what's needed here, rather than duplicating the rule. */
#event-contact-section {
	background-image: url('assets/images/doted.png'), linear-gradient(270deg, #06DDC5 0%, #005EF3 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 30px 80px;
	margin-bottom: 50px;
}
#event-contact-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
}
#event-contact-content { flex: 1 1 500px; min-width: 0; }
#event-contact-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: 500;
	margin: 0 0 16px;
}
#event-contact-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #FFFFFF; flex: none; }
#event-contact-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 12px;
	max-width: 700px;
}
#event-contact-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: rgba(255, 255, 255, .85);
	font-weight: 300;
	margin: 0;
	max-width: 640px;
}

/* =========================================================
   56. EVENT DETAIL HERO / COUNTDOWN / ABOUT (single-events-summits.php)
   ========================================================= */
/* ---- Hero ---- */
#event-hero-section {
	position: relative;
	background-image: url('assets/images/events-detail-banner.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 50px 0;
	background-color: #28508C;
}
/* Tints the crowd photo navy so the white hero text stays readable. */
#event-hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #28508C;
	opacity: 0.8;
	z-index: 0;
}
#event-hero-section .rai-container { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; }
#event-hero-content { flex: 1 1 480px; min-width: 0; }
#event-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#event-hero-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }
#event-hero-title {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 77px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 20px;
}
#event-hero-subtitle {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 0;
	max-width: 600px;
}
#event-hero-media { flex: 0 0 44%; max-width: 44%; }
#event-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .2);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}

/* ---- Countdown ---- */
#event-countdown-section { background-color: #F49E0C; padding: 24px 0; }
#event-countdown-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
#event-countdown-eyebrow {
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	color: #000000;
	font-weight: 500;
	margin: 0 0 4px;
}
#event-countdown-title {
	font-family: 'DM Serif Display', serif;
	font-size: 40px;
	line-height: 48px;
	color: #000000;
	font-weight: 400;
	margin: 0;
}
#event-countdown-timer { display: flex; align-items: center; gap: 20px; }
.event-countdown-divider { width: 0; height: 50px; border-left: .5px solid #FFFFFF; opacity: .302; }
.event-countdown-unit {
	width: 88px;
	background-color: rgba(255, 255, 255, .6);
	border-radius: 12px;
	padding: 12px 8px;
	text-align: center;
}
.event-countdown-count {
	font-family: 'Poppins', var(--rai-font);
	font-size: 43px;
	color: #000000;
	font-weight: 600;
	line-height: 1.1;
}
.event-countdown-count::after {
	content: '';
	display: block;
	width: 48px;
	margin: 8px auto 0;
	border-top: .5px solid #000000;
	opacity: .302;
}
.event-countdown-unit-label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	color: #000000;
	font-weight: 300;
	margin-top: 8px;
}

/* ---- About the Event ---- */
#event-about-section { background-color: #FFFFFF; padding: 50px 0; }
#event-about-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 24px;
}
#event-about-content {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
}
#event-about-content p:last-child { margin-bottom: 0; }
#event-about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* Spec calls for background-color:#28508C — applied as an rgba tint
   (same technique as .expert-hero-tag) instead of solid, matching the
   pale pill look in the reference design rather than a solid navy fill. */
.event-tag {
	display: inline-flex;
	align-items: center;
	border-radius: 4px;
	background-color: rgba(40, 80, 140, .2);
	padding: 6px 12px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	line-height: 14px;
	color: #0167FF;
	font-weight: 500;
}

/* ---- Event Details box ---- */
#event-details-box {
	position: relative;
	overflow: hidden;
	background-color: #28508C;
	border-radius: 8px;
	padding: 50px;
	margin-top: 50px;
}
#event-details-box::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/doted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0.5;
	z-index: 0;
	pointer-events: none;
}
#event-details-box > * { position: relative; z-index: 1; }
#event-details-heading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
	color: #06D2C9;
	font-weight: 600;
	text-align: left;
	margin: 0 0 32px;
}
#event-details-grid { display: flex; flex-wrap: wrap; gap: 40px 30px; margin-bottom: 40px; }
.event-detail-item {
	flex: 0 1 calc((100% - 60px) / 3);
	min-width: 220px;
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: #FFFFFF;
	border-radius: 16px;
	padding: 24px;
}
.event-detail-icon { flex: none; width: 44px; height: 44px; }
.event-detail-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.event-detail-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-left: 16px;
	border-left: 1px solid rgba(192, 192, 192, .502);
	align-self: stretch;
	justify-content: center;
}
.event-detail-label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 20px;
	text-transform: uppercase;
	color: #0167FF;
	font-weight: 600;
}
.event-detail-value {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	line-height: 20px;
	color: #000000;
	font-weight: 400;
}
#event-details-register-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', var(--rai-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: #F49E0C;
	border: 1px solid #F49E0C;
	border-radius: 8px;
	padding: 14px 28px;
	margin: 0 auto;
	max-width: 260px;
	text-align: center;
	transition: background-color .2s ease, transform .2s ease;
}
#event-details-register-btn:hover { background-color: #D6870A; color: #FFFFFF; transform: translateY(-2px); }

/* =========================================================
   57. MORE EPISODES (single-episodes.php)
   ========================================================= */
#episode-related-section { position: relative; background-color: #F8FAFE; padding: 50px 0; }
#episode-related-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#episode-related-section .rai-container { position: relative; z-index: 1; }
#episode-related-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#episode-related-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }
#episode-related-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 40px;
}
#episode-related-grid { display: flex; flex-wrap: wrap; gap: 24px; }
/* Reuses .rai-podcast-pick-card as-is (per spec: identical to the
   homepage "Top Picks" card) — only the wrapping grid is new, laid out
   2-per-row instead of the homepage's single stacked column. */
#episode-related-grid .rai-podcast-pick-card { flex: 0 1 calc((100% - 24px) / 2); min-width: 280px; }

/* =========================================================
   58. PODCAST GUEST CTA (single-episodes.php)
   ========================================================= */
/* Same full-bleed gradient/dotted-background recipe used elsewhere
   (#event-contact-section, #expert-cta-section) — button reuses
   .expert-btn/.expert-btn-primary as-is rather than duplicating it. */
#podcast-guest-cta-section {
	background-image: url('assets/images/doted.png'), linear-gradient(270deg, #06DDC5 0%, #005EF3 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 30px 80px;
	margin-bottom: 50px;
}
#podcast-guest-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
}
#podcast-guest-cta-content { flex: 1 1 500px; min-width: 0; }
#podcast-guest-cta-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	line-height: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: 500;
	margin: 0 0 16px;
}
#podcast-guest-cta-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #FFFFFF; flex: none; }
#podcast-guest-cta-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 12px;
	max-width: 700px;
}
#podcast-guest-cta-desc {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: rgba(255, 255, 255, .85);
	font-weight: 300;
	margin: 0;
	max-width: 640px;
}

/* =========================================================
   59. PODCAST EPISODE HERO (single-episodes.php)
   ========================================================= */
#single-podcast-hero-section {
	position: relative;
	background-image: url('assets/images/podcast-detail-banner.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 50px 0;
}
/* Tints the banner photo so the white hero text stays readable. */
#single-podcast-hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #28508C;
	opacity: 0.9;
	z-index: 0;
}
#single-podcast-hero-section .rai-container { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; }
#podcast-hero-content { flex: 1 1 480px; min-width: 0; }
#podcast-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#podcast-hero-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; flex: none; }
#podcast-hero-title {
	font-family: 'DM Serif Display', serif;
	font-size: 70px;
	line-height: 77px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 28px;
}
#podcast-hero-guest { display: flex; align-items: center; gap: 20px; text-decoration: none; color: inherit; }
#podcast-hero-guest-photo { flex: none; align-self: stretch; width: 100px; border-radius: 12px; overflow: hidden; }
#podcast-hero-guest-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#podcast-hero-guest-info { flex: 1 1 auto; min-width: 0; }
#podcast-hero-guest-name {
	font-family: 'Poppins', var(--rai-font);
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
	color: #06D2C9;
	font-weight: 600;
	margin: 0 0 4px;
}
#podcast-hero-guest-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 0;
}
#podcast-hero-divider { display: block; width: 40px; height: 0; margin: 12px 0; border-top: 1px solid #F49E0C; }
#podcast-hero-meta {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 300;
	margin: 0;
}

#podcast-hero-media { flex: 0 0 44%; max-width: 44%; }
#podcast-hero-media-frame { position: relative; }
#podcast-hero-media-frame img,
#podcast-hero-media-frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .2);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}
#podcast-hero-media-frame:hover .rai-play-btn { background-color: #EF4444; transform: translate(-50%, -50%) scale(1.08); }
#podcast-hero-media-frame:hover .rai-play-btn i { color: #FFFFFF; }
#podcast-hero-listen-on { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
#podcast-hero-listen-on-label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 400;
}
.podcast-hero-listen-on-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .15);
	color: #FFFFFF;
	font-size: 15px;
	transition: background-color .2s ease, transform .2s ease;
}
.podcast-hero-listen-on-icon:hover { background-color: rgba(255, 255, 255, .3); color: #FFFFFF; transform: translateY(-2px); }
/* The global .fa-brands/.fa-solid rule (line 86) sets color directly on
   the <i>, which wins over the ancestor's color:#FFFFFF regardless of
   specificity — same fix as .rai-latest-episode-listen a i. */
.podcast-hero-listen-on-icon i { color: inherit; }

/* ---- About This Episode ---- */
#podcast-content-section { background-color: #FFFFFF; padding: 50px 0; }
#podcast-about-inner { display: flex; align-items: flex-start; gap: 60px; }
#podcast-about-content-col { flex: 1 1 0%; min-width: 0; }
#podcast-about-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	line-height: 58px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 24px;
}
#podcast-about-content {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	margin-bottom: 40px;
}
#podcast-about-content p:last-child { margin-bottom: 0; }
/* Same blue-square bullet treatment as .rai-entry-content (article
   detail pages) — this content had no custom list styling of its own,
   so it was falling back to the browser's default round bullets. */
#podcast-about-content ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#podcast-about-content li {
	position: relative;
	padding-left: 22px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
}
#podcast-about-content li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .6em;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #0167FF;
}

#podcast-chapters { margin-top: 40px; }
#podcast-chapters-heading {
	font-family: 'Poppins', var(--rai-font);
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
	color: #06D2C9;
	font-weight: 600;
	margin: 0 0 16px;
}
/* width:fit-content so the row dividers only span as wide as the
   longest chapter line needs, instead of stretching edge-to-edge of
   the whole content column regardless of how short the text is. */
#podcast-chapters-list { list-style: none; margin: 0; padding: 0; width: fit-content; max-width: 100%; }
.podcast-chapter-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid #E3E8EF;
}
.podcast-chapter-row:first-child { border-top: none; padding-top: 0; }
.podcast-chapter-time {
	flex: none;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #0167FF;
	font-weight: 600;
	min-width: 44px;
}
.podcast-chapter-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
}

/* ---- Guest card ---- */
#podcast-about-guest-card {
	position: relative;
	overflow: hidden;
	flex: 0 0 360px;
	max-width: 360px;
	border: 1px solid #0167FF;
	border-radius: 16px;
	padding: 32px;
}
#podcast-about-guest-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: 150px;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 300px;
	opacity: .15;
	z-index: 0;
	pointer-events: none;
}
#podcast-about-guest-card > * { position: relative; z-index: 1; }
#podcast-about-guest-photo { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
#podcast-about-guest-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#podcast-about-guest-eyebrow {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 12px;
}
#podcast-about-guest-name {
	font-family: 'Poppins', var(--rai-font);
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
	color: #0167FF;
	font-weight: 600;
	margin: 0 0 12px;
}
#podcast-about-guest-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #000000;
	font-weight: 300;
	margin: 0;
}
#podcast-about-guest-divider { display: block; width: 40px; height: 0; margin: 20px 0; border-top: 1px solid #F49E0C; }
#podcast-about-guest-bio {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
}
#podcast-about-guest-bio p { margin: 0 0 12px; }
#podcast-about-guest-bio p:last-child { margin-bottom: 0; }

/* =========================================================
   60. PODCAST GUEST DETAIL PAGE (single-podcast-guest.php)
   ========================================================= */
#podcast-guest-hero-section { background-color: #FFFFFF; padding: 60px 0; }
#podcast-guest-hero-section .rai-container { display: flex; align-items: flex-start; gap: 64px; }

/* Same pre-shaped decorative-background technique as
   .rai-advisory-board-media/.rai-hearings-player-blue-bg —
   video-background.png is a pre-rotated graphic (not a photo), rendered
   in normal flow so its own aspect ratio sets the container height; the
   guest's actual photo is layered on top, centered and slightly smaller. */
#podcast-guest-hero-media { position: relative; flex: 0 0 380px; max-width: 380px; }
.podcast-guest-hero-media-bg { display: block; width: 100%; height: auto; }
.podcast-guest-hero-media-photo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 20px 40px rgba(11, 30, 60, .18);
}

#podcast-guest-hero-content { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
#podcast-guest-hero-name {
	font-family: 'Poppins', var(--rai-font);
	font-size: 40px;
	line-height: 1.2;
	color: #28508C;
	font-weight: 700;
	margin: 0 0 8px;
}
#podcast-guest-hero-designation {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #000000;
	font-weight: 600;
	margin: 0;
}
#podcast-guest-hero-divider { display: block; width: 60px; height: 0; margin: 20px 0; border-top: 3px solid #F49E0C; }
#podcast-guest-hero-bio {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 1.7;
	color: #000;
	font-weight: normal;
}
#podcast-guest-hero-bio p { margin: 0 0 20px; }
#podcast-guest-hero-bio p:last-child { margin-bottom: 0; }

/* =========================================================
   61. ALL EPISODES PAGE (page-all-episodes.php)
   ========================================================= */
#all-episodes-header { position: relative; background-color: #F8FAFE; padding: 60px 0; text-align: center; }
#all-episodes-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#all-episodes-header .rai-container { position: relative; z-index: 1; }
#all-episodes-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#all-episodes-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
#all-episodes-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 56px;
	line-height: 64px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}
#all-episodes-intro {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	max-width: 640px;
	margin: 0 auto;
}

.all-episodes-section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 12px;
	text-align: center;
}
.all-episodes-section-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
.all-episodes-section-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 40px;
	line-height: 48px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	margin: 0 0 40px;
}

/* ---- Episode card (featured slider / all-episodes grid / guest's
   episodes grid all share this) ---- */
.rai-episode-listing-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #28508C;
	border-radius: 8px;
	background-color: #FFFFFF;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rai-episode-listing-card:hover {
	box-shadow: var(--rai-shadow-md);
	transform: translateY(-4px);
	border-color: #00F0C8;
}
.rai-episode-listing-media { position: relative; }
.rai-episode-listing-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rai-episode-listing-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-block;
	border-radius: 3px;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
}
.rai-episode-listing-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; padding: 20px; }
/* align-items:stretch only equalizes card heights within the same flex-
   wrap row, not across every row in the grid — reserving fixed space
   for up to 3 title lines (clamping anything longer) keeps every card
   the same height regardless of which row it lands in. */
.rai-episode-listing-title {
	font-family: 'DM Serif Display', serif;
	font-size: 22px;
	line-height: 27px;
	color: #28508C;
	font-weight: 400;
	margin: 0;
	min-height: 81px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}
.rai-episode-listing-card:hover .rai-episode-listing-title { color: var(--rai-navy); }
.rai-episode-listing-guest {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	line-height: 19px;
	color: #000000;
	font-weight: 600;
}
.rai-episode-listing-meta-row {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.rai-episode-listing-guest-title,
.rai-episode-listing-date {
	font-family: 'Poppins', var(--rai-font);
	font-size: 10px;
	line-height: 12px;
	color: #1C0101;
	font-weight: 400;
}

/* ---- Top Picks slider ---- */
#all-episodes-featured-section { background-color: #FFFFFF; padding: 60px 0; }
.rai-featured-episodes-slider { margin: 0 -12px; }
.rai-featured-episodes-slider .slick-list { padding: 4px 0; }
/* Slick doesn't stretch slides to equal height on its own — the track
   is a plain floated/positioned layout, not a flex row — so without
   this, cards next to a longer title look visibly shorter. */
.rai-featured-episodes-slider .slick-track { display: flex !important; align-items: stretch; }
.rai-featured-episodes-slider .slick-slide { height: auto; }
.rai-featured-episode-slide { height: 100%; padding: 0 12px; box-sizing: border-box; }

/* Slick ships no arrow/dot theme of its own beyond slick-theme.min.css's
   plain defaults — restyled here to match the site's blue accent. */
.rai-featured-episodes-slider .slick-arrow {
	width: 44px;
	height: 44px;
	background-color: #0167FF;
	border-radius: 50%;
	z-index: 1;
}
.rai-featured-episodes-slider .slick-arrow:before { font-family: 'slick'; opacity: 1; font-size: 18px; }
.rai-featured-episodes-slider .slick-arrow:hover { background-color: #0052D6; }
.rai-featured-episodes-slider .slick-prev { left: -22px; }
.rai-featured-episodes-slider .slick-next { right: -22px; }

/* ---- All Episodes grid ---- */
#all-episodes-grid-section { background-color: #F8FAFE; padding: 60px 0; }
.rai-all-episodes-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 30px; }
.rai-all-episodes-grid .rai-episode-listing-card { flex: 0 1 calc((100% - 60px) / 3); min-width: 280px; }
.rai-all-episodes-no-results { text-align: center; font-family: 'Poppins', var(--rai-font); font-size: 16px; color: #140000; width: 100%; }

.rai-all-episodes-load-more-wrap { width: 100%; text-align: center; margin-top: 48px; }
.rai-all-episodes-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-all-episodes-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-all-episodes-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   62. EPISODES WITH THIS GUEST (single-podcast-guest.php)
   ========================================================= */
/* Reuses rai_render_episode_listing_card()/.rai-episode-listing-card
   as-is (same card as the All Episodes page) — a plain bordered white
   box with a featured image, not the homepage's dark full-bleed
   .rai-podcast-featured-card, which would read as too heavy repeated
   across a whole grid on this page. Only the wrapping grid is new. */
#podcast-guest-episodes-section { background-color: #F8FAFE; padding: 60px 0; }
.podcast-guest-episodes-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
.podcast-guest-episodes-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
.podcast-guest-episodes-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 40px;
	line-height: 48px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 40px;
}
#podcast-guest-episodes-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 30px; }
#podcast-guest-episodes-grid .rai-episode-listing-card { flex: 0 1 calc((100% - 60px) / 3); min-width: 280px; }

/* =========================================================
   63. PODCAST GUESTS PAGE (page-podcast-guests.php)
   ========================================================= */
#podcast-guests-header { position: relative; background-color: #F8FAFE; padding: 60px 0; text-align: center; }
#podcast-guests-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#podcast-guests-header .rai-container { position: relative; z-index: 1; }
#podcast-guests-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#podcast-guests-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
#podcast-guests-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 56px;
	line-height: 64px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}
#podcast-guests-intro {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	max-width: 640px;
	margin: 0 auto;
}

#podcast-guests-listing-section { background-color: #FFFFFF; padding: 60px 0; }
.rai-podcast-guest-listing-no-results { text-align: center; font-family: 'Poppins', var(--rai-font); font-size: 16px; color: #140000; width: 100%; }
.rai-podcast-guest-listing-load-more-wrap { width: 100%; text-align: center; margin-top: 48px; }
.rai-podcast-guest-listing-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-podcast-guest-listing-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-podcast-guest-listing-load-more:disabled { opacity: .6; cursor: default; }

/* =========================================================
   64. ALL VIDEOS PAGE (page-all-videos.php)
   ========================================================= */
#all-videos-header { position: relative; background-color: #F8FAFE; padding: 60px 0; text-align: center; }
#all-videos-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#all-videos-header .rai-container { position: relative; z-index: 1; }
#all-videos-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#all-videos-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
#all-videos-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 56px;
	line-height: 64px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}
#all-videos-intro {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	max-width: 640px;
	margin: 0 auto;
}

#all-videos-grid-section { background-color: #FFFFFF; padding: 60px 0; }
.rai-all-videos-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 30px; }
.rai-all-videos-no-results { text-align: center; font-family: 'Poppins', var(--rai-font); font-size: 16px; color: #140000; width: 100%; }

.rai-all-videos-load-more-wrap { width: 100%; text-align: center; margin-top: 48px; }
.rai-all-videos-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-all-videos-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-all-videos-load-more:disabled { opacity: .6; cursor: default; }

/* ---- Video card — a <button>, not a link, since there's no single
   page to navigate to; clicking opens #rai-video-modal instead. ---- */
.rai-video-listing-card {
	display: flex;
	flex-direction: column;
	flex: 0 1 calc((100% - 60px) / 3);
	min-width: 280px;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #28508C;
	border-radius: 8px;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rai-video-listing-card:hover { box-shadow: var(--rai-shadow-md); transform: translateY(-4px); border-color: #00F0C8; }
.rai-video-listing-media { position: relative; display: block; }
.rai-video-listing-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.rai-video-listing-card:hover .rai-video-listing-media img { transform: scale(1.06); }
.rai-video-listing-card:hover .rai-play-btn { background-color: #EF4444; transform: translate(-50%, -50%) scale(1.08); }
.rai-video-listing-card:hover .rai-play-btn i { color: #FFFFFF; }
.rai-video-listing-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.rai-video-listing-category {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 14px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
}
.rai-video-listing-title {
	font-family: 'DM Serif Display', serif;
	font-size: 20px;
	line-height: 25px;
	color: #28508C;
	font-weight: 400;
	min-height: 50px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Video modal ---- */
.rai-video-modal-dialog { max-width: 900px; }
.rai-video-modal-content { background-color: #0B1E3C; border: none; border-radius: 12px; overflow: hidden; }
.rai-video-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.rai-video-modal-title {
	font-family: 'Poppins', var(--rai-font);
	font-size: 18px;
	color: #FFFFFF;
	font-weight: 600;
	margin: 0;
}
.rai-video-modal-close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .12);
	color: #FFFFFF;
	font-size: 16px;
	cursor: pointer;
	transition: background-color .2s ease;
}
.rai-video-modal-close:hover { background-color: rgba(255, 255, 255, .25); }
.rai-video-modal-frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000000; }
.rai-video-modal-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* =========================================================
   65. EVENTS PAGE (page-events.php)
   ========================================================= */
#events-page-header { position: relative; background-color: #F8FAFE; padding: 60px 0; text-align: center; }
#events-page-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/about-us-dotted.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: .059;
	z-index: 0;
	pointer-events: none;
}
#events-page-header .rai-container { position: relative; z-index: 1; }
#events-page-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 16px;
}
#events-page-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
#events-page-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 56px;
	line-height: 64px;
	color: #000000;
	font-weight: 400;
	margin: 0 0 16px;
}
#events-page-intro {
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #140000;
	font-weight: 300;
	max-width: 640px;
	margin: 0 auto;
}

.events-section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'DM Mono', var(--rai-font);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
	margin: 0 0 12px;
	text-align: center;
}
.events-section-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #F49E0C; }
.events-section-heading {
	font-family: 'DM Serif Display', serif;
	font-size: 40px;
	line-height: 48px;
	color: #000000;
	font-weight: 400;
	text-align: center;
	margin: 0 0 40px;
}

/* ---- Event card (upcoming slider / past events grid) ---- */
.rai-event-listing-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #28508C;
	border-radius: 8px;
	background-color: #FFFFFF;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rai-event-listing-card:hover { box-shadow: var(--rai-shadow-md); transform: translateY(-4px); border-color: #00F0C8; }
.rai-event-listing-media { position: relative; }
.rai-event-listing-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rai-event-listing-type {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-block;
	border-radius: 3px;
	background-color: #00F0C8;
	color: #000000;
	font-family: 'Poppins', var(--rai-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
}
.rai-event-listing-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.rai-event-listing-category {
	font-family: 'DM Mono', var(--rai-font);
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 14px;
	text-transform: uppercase;
	color: #F49E0C;
	font-weight: 500;
}
.rai-event-listing-title {
	font-family: 'DM Serif Display', serif;
	font-size: 20px;
	line-height: 25px;
	color: #28508C;
	font-weight: 400;
	margin: 0;
	min-height: 50px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rai-event-listing-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 13px;
	color: #140000;
	font-weight: 400;
}
.rai-event-listing-meta i { color: #0167FF; font-size: 12px; }
.rai-event-listing-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---- Upcoming Events slider ---- */
#events-upcoming-section { background-color: #FFFFFF; padding: 60px 0; }
.rai-upcoming-events-slider { margin: 0 -12px; }
.rai-upcoming-events-slider .slick-list { padding: 4px 0; }
.rai-upcoming-events-slider .slick-track { display: flex !important; align-items: stretch; }
.rai-upcoming-events-slider .slick-slide { height: auto; }
.rai-upcoming-event-slide { height: 100%; padding: 0 12px; box-sizing: border-box; }
.rai-upcoming-events-slider .slick-arrow {
	width: 44px;
	height: 44px;
	background-color: #0167FF;
	border-radius: 50%;
	z-index: 1;
}
.rai-upcoming-events-slider .slick-arrow:before { font-family: 'slick'; opacity: 1; font-size: 18px; }
.rai-upcoming-events-slider .slick-arrow:hover { background-color: #0052D6; }
.rai-upcoming-events-slider .slick-prev { left: -22px; }
.rai-upcoming-events-slider .slick-next { right: -22px; }

/* ---- Past Events ---- */
#events-past-section { background-color: #F8FAFE; padding: 60px 0; }

.rai-past-events-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px;
	background-color: #FFFFFF;
	border: 1px solid #E3E8EF;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 40px;
}
.rai-past-events-filter-field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; min-width: 160px; }
.rai-past-events-filter-field label {
	font-family: 'Poppins', var(--rai-font);
	font-size: 13px;
	color: #28508C;
	font-weight: 600;
}
.rai-past-events-filter-field input,
.rai-past-events-filter-field select {
	appearance: none;
	width: 100%;
	box-sizing: border-box;
	background-color: #F8FAFE;
	border: 1px solid #E3E8EF;
	border-radius: 6px;
	padding: 12px 14px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	color: #000000;
	font-weight: 400;
}
.rai-past-events-filter-field select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328508C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	padding-right: 36px;
}
.rai-past-events-filter-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rai-past-events-filter-submit,
.rai-past-events-filter-reset {
	border-radius: 6px;
	font-family: 'Poppins', var(--rai-font);
	font-size: 14px;
	font-weight: 600;
	padding: 12px 24px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-past-events-filter-submit { border: none; background-color: #0167FF; color: #FFFFFF; }
.rai-past-events-filter-submit:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-past-events-filter-reset { border: 1px solid #28508C; background-color: transparent; color: #28508C; }
.rai-past-events-filter-reset:hover { background-color: #F8FAFE; }

.rai-past-events-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 30px; transition: opacity .2s ease; }
.rai-past-events-grid .rai-event-listing-card { flex: 0 1 calc((100% - 60px) / 3); min-width: 280px; }
.rai-past-events-no-results { text-align: center; font-family: 'Poppins', var(--rai-font); font-size: 16px; color: #140000; width: 100%; }

.rai-past-events-load-more-wrap { width: 100%; text-align: center; margin-top: 48px; }
.rai-past-events-load-more {
	border: none;
	border-radius: 4px;
	background-color: #0167FF;
	font-family: 'Poppins', var(--rai-font);
	font-size: 16px;
	color: #FFFFFF;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.rai-past-events-load-more:hover { background-color: #0052D6; transform: translateY(-2px); }
.rai-past-events-load-more:disabled { opacity: .6; cursor: default; }

div#government-videos-section { padding: 0; }
.elementor-element.elementor-element-2a5af59.e-con.e-atomic-element.e-div-block-base { padding: 0; }

/* WordPress core alignment helpers */
.alignwide { margin-left: -5%; margin-right: -5%; max-width: 110%; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignleft { float: left; margin-right: 24px; }
.alignright { float: right; margin-left: 24px; }