/*
Theme Name: TheGem Child - Collabolutions
Description: Collabolutions child theme for TheGem. All site customizations live here so TheGem parent updates never overwrite them. v1: brand palette + header/menu restyle.
Author: Collabolutions
Template: thegem-elementor
Version: 3.25.0
Text Domain: thegem-child
*/

/* ==========================================================================
   Display fonts (used by themed event pages)
   ========================================================================== */
@font-face {
	font-family: "Pirata One";
	src: url("assets/fonts/PirataOne-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Collabolutions brand palette
   ========================================================================== */
:root {
	--clb-navy: #2b2a5c;        /* headlines, nav links, dark sections */
	--clb-navy-deep: #232150;   /* footer / darkest */
	--clb-indigo: #55519e;      /* primary purple */
	--clb-indigo-light: #7b77c4;
	--clb-lavender: #e9e7f7;    /* light section wash */
	--clb-yellow: #f7a823;      /* accent / CTA */
	--clb-white: #ffffff;
	--clb-text: #3a3a4a;
	--clb-font: "Montserrat", "Source Sans Pro", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   Header bar — white, clean (per homepage mockup: no top utility bar)
   ========================================================================== */
.top-area-background,
#top-area {
	display: none; /* mockup has no top bar; remove this rule to bring it back */
}

#site-header .header-main,
#site-header {
	background-color: var(--clb-white);
}

#site-header .header-main {
	box-shadow: 0 1px 0 rgba(43, 42, 92, 0.08);
}

/* Text-logo fallback (live site uses the Collabolutions logo image) */
#site-header .site-title a {
	color: var(--clb-navy);
	font-family: var(--clb-font);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ==========================================================================
   Primary menu — compact, uppercase, navy (per homepage mockup)
   ========================================================================== */
#site-header #primary-menu.nav-menu > li > a {
	font-family: var(--clb-font);
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--clb-navy) !important;
	position: relative;
	border: none !important; /* remove TheGem's box around the active item */
	background: transparent !important;
}

/* Hover / active state — purple text */
#site-header #primary-menu.nav-menu > li:hover > a,
#site-header #primary-menu.nav-menu > li.menu-item-current > a,
#site-header #primary-menu.nav-menu > li.menu-item-active > a,
#site-header #primary-menu.nav-menu > li.current-menu-item > a,
#site-header #primary-menu.nav-menu > li.current-menu-ancestor > a {
	color: var(--clb-indigo) !important;
}

/* Yellow underline accent on hover/current */
#site-header #primary-menu.nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -7px; /* clear gap between the text and the underline */
	height: 3px;
	background: #582890; /* logo purple */
	transition: right 0.25s ease;
}
#site-header #primary-menu.nav-menu > li:hover > a::after,
#site-header #primary-menu.nav-menu > li.menu-item-current > a::after,
#site-header #primary-menu.nav-menu > li.current-menu-item > a::after {
	right: 0;
}

/* ==========================================================================
   Dropdown (Resources submenu)
   ========================================================================== */
#site-header #primary-menu.nav-menu ul.sub-menu {
	background-color: var(--clb-white);
	border-top: 3px solid var(--clb-yellow);
	box-shadow: 0 10px 30px rgba(43, 42, 92, 0.15);
}

#site-header #primary-menu.nav-menu ul.sub-menu li {
	background: transparent;
}

#site-header #primary-menu.nav-menu ul.sub-menu li > a {
	font-family: var(--clb-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clb-navy) !important;
	background-color: var(--clb-white);
}

#site-header #primary-menu.nav-menu ul.sub-menu li:hover > a {
	color: var(--clb-indigo) !important;
	background-color: var(--clb-lavender);
}

/* ==========================================================================
   Mobile menu (hamburger overlay / dl-menu)
   ========================================================================== */
.primary-navigation.responsive .menu-wrapper,
.primary-navigation.responsive .nav-menu.dl-menu,
.primary-navigation.responsive .nav-menu.dl-menu ul,
.mobile-menu-slide-wrapper {
	background-color: var(--clb-white);
}

.primary-navigation.responsive .nav-menu.dl-menu li > a,
.primary-navigation.responsive .nav-menu.dl-menu li li > a,
.mobile-menu-slide-wrapper .nav-menu li > a,
.thegem-perspective-menu-wrapper .nav-menu li > a {
	font-family: var(--clb-font);
	font-size: 14px;
	color: var(--clb-navy) !important;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.primary-navigation.responsive .nav-menu.dl-menu li:hover > a,
.primary-navigation.responsive .nav-menu.dl-menu li.menu-item-current > a,
.primary-navigation.responsive .nav-menu.dl-menu li.current-menu-item > a {
	color: var(--clb-indigo) !important;
}

/* Hamburger icon color */
.menu-toggle .menu-line-1,
.menu-toggle .menu-line-2,
.menu-toggle .menu-line-3 {
	background-color: var(--clb-navy) !important;
}

/* Mobile: no hover-underline (touch) */
@media (max-width: 1212px) {
	#site-header #primary-menu.nav-menu > li > a::after {
		display: none;
	}
}

/* ==========================================================================
   Contact form (Contact Form 7) — brand styling
   ========================================================================== */
.wpcf7 {
	font-family: var(--clb-font);
}

.wpcf7 .clb-form-row {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}

.wpcf7 .clb-form-2col .clb-form-field,
.wpcf7 .clb-form-row .clb-form-field {
	flex: 1;
	min-width: 0;
}

.wpcf7 .clb-form-field > label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clb-navy);
	margin-bottom: 6px;
}

/* Checkbox and radio captions are ordinary sentence case, not field labels. */
.wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--clb-text);
	margin-bottom: 0;
	cursor: pointer;
}

.wpcf7 .clb-req {
	color: var(--clb-yellow);
	margin-left: 3px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	background: #faf9fe;
	border: 1.5px solid var(--clb-lavender);
	border-radius: 10px;
	padding: 12px 15px;
	font-family: var(--clb-font);
	font-size: 14px;
	color: var(--clb-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	height: auto;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: #582890;
	box-shadow: 0 0 0 3px rgba(88, 40, 144, 0.12);
	background: #ffffff;
}

.wpcf7 textarea {
	resize: vertical;
	min-height: 110px;
}

.wpcf7 .clb-form-submit {
	margin-bottom: 0;
}

.wpcf7 input[type="submit"] {
	width: 100%;
	background: #582890;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 15px 20px;
	font-family: var(--clb-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
	box-shadow: 0 10px 26px rgba(88, 40, 144, 0.3);
}

.wpcf7 input[type="submit"]:hover {
	background: #6c3aae;
}

.wpcf7 input[type="submit"]:active {
	transform: translateY(1px);
}

.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 8px auto 0;
}

/* validation + response messages */
.wpcf7 .wpcf7-not-valid {
	border-color: #d9534f !important;
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 11.5px;
	color: #d9534f;
	margin-top: 4px;
}

.wpcf7 .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--clb-indigo) !important;
	background: var(--clb-lavender);
	color: var(--clb-navy);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #3f9d63 !important;
	background: #e8f6ee;
	color: #24623e;
}

/* stack the two-column rows on phones */
@media (max-width: 640px) {
	.wpcf7 .clb-form-row {
		flex-direction: column;
		gap: 0;
	}

	.wpcf7 .clb-form-row .clb-form-field {
		margin-bottom: 16px;
	}
}

/* ==========================================================================
   Event pages — immersive mode: no footer, floating Home/Top buttons
   ========================================================================== */
body.clb-event-page .custom-footer,
body.clb-event-page #footer-nav,
body.clb-event-page #colophon,
body.clb-event-page .scroll-top-button {
	display: none !important;
}

.clb-event-nav {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clb-event-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(201, 153, 43, 0.6);
	background: rgba(9, 11, 16, 0.85);
	color: #c9992b !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease;
	padding: 0;
}

.clb-event-nav-btn:hover {
	background: #c9992b;
	color: #090b10 !important;
	border-color: #c9992b;
}

/* ==========================================================================
   Footer bottom bar — blend into the navy CTA band (per homepage mockup)
   ========================================================================== */
#footer-nav.site-footer {
	background-color: var(--clb-navy-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.6); /* white divider above the bottom bar */
}

/* Social icons (Facebook + LinkedIn) — bottom bar, right corner */
#footer-nav #footer-socials .socials-item-icon {
	color: #c9c6e4;
	font-size: 16px;
	transition: color 0.2s ease;
}

#footer-nav #footer-socials .socials-item:hover .socials-item-icon {
	color: var(--clb-yellow);
}

#footer-nav .site-info,
#footer-nav .site-info a {
	color: #a3a0c8;
	font-family: var(--clb-font);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Breadcrumbs — orange links (brand yellow) in the page-title band */
body .breadcrumbs a,
body .bc-devider:before,
.page-breadcrumbs ul li a,
.page-breadcrumbs ul li:not(:last-child):after {
	color: var(--clb-yellow) !important;
}

body .breadcrumbs .current {
	color: #ffffff !important;
	border-bottom-color: var(--clb-yellow) !important;
}

body .breadcrumbs a:hover,
.page-breadcrumbs ul li a:hover {
	color: #ffc95e !important;
}

/* Page-title band: white heading over the purple photo banner */
#page-title .page-title-title,
#page-title .page-title-title h1 {
	color: #ffffff !important;
}

#page-title .page-title-excerpt {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Our design uses the custom footer template; retire the widget footer */
#colophon.site-footer {
	display: none !important;
}

/* Footer bottom bar: menu links + layout polish */
#footer-nav #footer-menu li a,
#footer-nav .footer-site-menu li a,
#footer-nav .nav-menu li a {
	color: #c9c6e4 !important;
	font-family: var(--clb-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

#footer-nav #footer-menu li a:hover,
#footer-nav .nav-menu li a:hover {
	color: var(--clb-yellow) !important;
}

/* Custom footer (TheGem footer template) link styling */
.custom-footer .clb-footer-links a {
	color: #c9c6e4;
	text-decoration: none;
	transition: color 0.2s ease;
}

.custom-footer .clb-footer-links a:hover {
	color: var(--clb-yellow);
}

/* CF7 submit: win over TheGem's global button styles */
.wpcf7 input[type="submit"] {
	background: #582890 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-family: var(--clb-font) !important;
	font-weight: 800 !important;
	font-size: 13px !important;
}

.wpcf7 input[type="submit"]:hover {
	background: #6c3aae !important;
}

/* --------------------------------------------------------------------------
 * Registration form — /register/ questionnaire signup
 * ------------------------------------------------------------------------ */
.clb-reg,
.clb-reg-done {
	max-width: 640px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 20px 55px rgba(43, 42, 92, 0.13);
	padding: 38px 40px 34px;
	font-family: var(--clb-font);
}

.clb-reg [hidden] {
	display: none !important;
}

.clb-reg .clb-hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	width: 0;
}

.clb-reg label {
	display: block;
	font-weight: 700;
	font-size: 13px;
	color: var(--clb-navy);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 7px;
}

.clb-reg .clb-req {
	color: #d4442e;
	margin-left: 3px;
}

.clb-reg-legend {
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-bottom: 12px !important;
}

.clb-reg-rolecards {
	display: flex;
	gap: 14px;
	margin-bottom: 22px;
}

.clb-reg-rolecard {
	flex: 1;
	margin: 0 !important;
	cursor: pointer;
}

.clb-reg-rolecard input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.clb-reg-rolecard-inner {
	display: block;
	border: 2px solid #d8d4ee;
	border-radius: 14px;
	padding: 18px 16px;
	text-align: center;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.clb-reg-rolecard:hover .clb-reg-rolecard-inner {
	border-color: #582890;
}

.clb-reg-rolecard input:checked + .clb-reg-rolecard-inner {
	border-color: #582890;
	background: #f4effc;
	box-shadow: 0 6px 18px rgba(88, 40, 144, 0.14);
}

.clb-reg-rolecard input:focus-visible + .clb-reg-rolecard-inner {
	outline: 3px solid rgba(88, 40, 144, 0.35);
	outline-offset: 2px;
}

.clb-reg-rolecard-title {
	display: block;
	font-weight: 800;
	font-size: 16px;
	color: var(--clb-navy);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 5px;
}

.clb-reg-rolecard-text {
	display: block;
	font-size: 12.5px;
	color: #4a4a5e;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	line-height: 1.45;
}

.clb-reg input[type="text"],
.clb-reg input[type="email"],
.clb-reg input[type="tel"],
.clb-reg input[type="password"],
.clb-reg select,
.clb-reg textarea {
	width: 100%;
	border: 1.5px solid #d8d4ee;
	border-radius: 10px;
	background: #fbfaff;
	padding: 11px 14px;
	font-family: var(--clb-font);
	font-size: 14px;
	color: #2b2a5c;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}

.clb-reg input:focus,
.clb-reg select:focus,
.clb-reg textarea:focus {
	border-color: #582890;
	box-shadow: 0 0 0 3px rgba(88, 40, 144, 0.14);
	outline: none;
	background: #ffffff;
}

.clb-reg select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23582890' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.clb-reg-branch {
	margin-bottom: 18px;
}

.clb-reg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
	margin-bottom: 18px;
}

.clb-reg-full {
	margin-bottom: 18px;
}

.clb-reg-hint {
	font-size: 12px;
	color: #7a7794;
	margin: 6px 0 0;
}

.clb-reg-check {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 13.5px !important;
	color: #4a4a5e !important;
	margin: 0 0 22px !important;
	cursor: pointer;
}

.clb-reg-check input {
	width: 17px;
	height: 17px;
	margin-top: 1px;
	accent-color: #582890;
	flex-shrink: 0;
}

.clb-reg-submit {
	display: block;
	width: 100%;
	background: #582890 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 15px 20px !important;
	font-family: var(--clb-font) !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	cursor: pointer;
	transition: background 0.18s ease;
}

.clb-reg-submit:hover {
	background: #6c3aae !important;
}

.clb-reg-error {
	background: #fdeeec;
	border: 1.5px solid #e8b4ab;
	color: #a03325;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13.5px;
	margin-bottom: 18px;
}

.clb-reg-error a {
	color: #582890;
	font-weight: 700;
}

.clb-reg-login {
	text-align: center;
	font-size: 13.5px;
	color: #4a4a5e;
	margin: 16px 0 0;
}

.clb-reg-login a {
	color: #582890;
	font-weight: 700;
}

.clb-reg-done {
	text-align: center;
	font-size: 15px;
	color: var(--clb-navy);
}

.clb-reg-done .clb-btn {
	display: inline-block;
	background: #582890;
	color: #ffffff;
	border-radius: 10px;
	padding: 13px 26px;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
}

@media (max-width: 640px) {
	.clb-reg,
	.clb-reg-done {
		padding: 26px 20px 24px;
	}

	.clb-reg-rolecards {
		flex-direction: column;
	}

	.clb-reg-grid {
		grid-template-columns: 1fr;
	}
}

.clb-reg-notice {
	background: #f0edfb;
	border: 1.5px solid #c9bfe8;
	color: #3f2d68;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13.5px;
	margin-bottom: 18px;
}

.clb-reg-notice a {
	color: #582890;
	font-weight: 700;
}

.clb-reg-done h3 {
	font-family: var(--clb-font);
	font-weight: 800;
	color: var(--clb-navy);
	margin: 0 0 10px;
}

.clb-reg-done .clb-reg-hint a {
	color: #582890;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
 * Header account icon (next to search) + footer powered-by
 * ------------------------------------------------------------------------ */
#site-header #primary-menu.nav-menu > li.menu-item-account > a {
	display: inline-flex;
	align-items: center;
}

#site-header #primary-menu.nav-menu > li.menu-item-account > a::after {
	display: none !important;
}

#primary-menu.nav-menu li.menu-item-account .clb-account-icon {
	width: 17px;
	height: 17px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: 4px;
}

#primary-menu.nav-menu li.menu-item-account .clb-account-label {
	display: none;
}

/* Mobile menu: show the label next to the icon */
@media (max-width: 1212px) {
	#primary-menu.nav-menu li.menu-item-account .clb-account-label {
		display: inline-block;
		margin-left: 9px;
	}

	#primary-menu.nav-menu li.menu-item-account .clb-account-icon {
		vertical-align: -3px;
	}
}

#footer-nav .footer-site-info .clb-powered {
	display: inline;   /* sits on the same line as the copyright */
	font-size: 13px;
	opacity: 0.85;
}

#footer-nav .footer-site-info .clb-powered a {
	color: #c9c6e4;
	text-decoration: none;
	transition: color 0.2s ease;
}

#footer-nav .footer-site-info .clb-powered a:hover {
	color: var(--clb-yellow);
}

/* --------------------------------------------------------------------------
 * Sponsor carousel ([clb_sponsors])
 * ------------------------------------------------------------------------ */
.clb-sponsors {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* soften both edges so logos glide in and out instead of popping */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.clb-sponsors-track {
	display: flex;
	width: max-content;
	animation: clb-marquee var(--clb-marquee-duration, 40s) linear infinite;
}

.clb-sponsors:hover .clb-sponsors-track,
.clb-sponsors:focus-within .clb-sponsors-track {
	animation-play-state: paused;
}

.clb-sponsors-set {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.clb-sponsor {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
	min-width: 200px;
	min-height: 92px;
	opacity: 0.88;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

a.clb-sponsor:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.clb-sponsor img {
	display: block;
	width: auto;
	max-width: 240px;
	object-fit: contain;
}

@keyframes clb-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
	.clb-sponsors {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
	}

	.clb-sponsor {
		padding: 0 20px;
		min-width: 130px;
		min-height: 74px;
	}

	.clb-sponsor img {
		max-width: 165px;
	}
}

/* Visitors who ask for less motion get a static, centered set instead */
@media (prefers-reduced-motion: reduce) {
	.clb-sponsors-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.clb-sponsors-set[aria-hidden="true"] {
		display: none;
	}

	.clb-sponsors-set {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px 0;
	}
}

/* --------------------------------------------------------------------------
 * Review carousel ([clb_testimonials]) — cards on the dark band
 * ------------------------------------------------------------------------ */
/* The reviews drift on their own, like the sponsor logos, rather than waiting
   for someone to find a pair of arrows. Hovering, or tabbing into a card,
   pauses the whole track so a quote can actually be read. */
.clb-reviews {
	position: relative;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.clb-reviews-track {
	display: flex;
	width: max-content;
	animation: clb-marquee var(--clb-reviews-duration, 60s) linear infinite;
}

.clb-reviews:hover .clb-reviews-track,
.clb-reviews:focus-within .clb-reviews-track,
.clb-reviews:active .clb-reviews-track {
	animation-play-state: paused;
}

.clb-reviews-set {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	gap: 22px;
	padding: 6px 11px 18px;
}

.clb-review {
	flex: 0 0 auto;
	width: 340px;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(15, 14, 45, 0.28);
	padding: 26px 26px 20px;
	text-align: left;
	position: relative;
}

.clb-review::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	right: 22px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 76px;
	line-height: 1;
	color: #582890;
}

.clb-review-quote {
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0;
	border: none;
	font-family: var(--clb-font);
	font-size: 14px;
	line-height: 1.72;
	color: #4a4a5e;
}

.clb-review-quote p {
	margin: 0 0 10px;
}

.clb-review-quote p:last-child {
	margin-bottom: 0;
}

.clb-review-by {
	display: flex;
	align-items: center;
	gap: 13px;
	border-top: 1px solid #ece9f8;
	padding-top: 14px;
	margin-top: auto;
}

.clb-review-pic {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--clb-lavender);
	display: flex;
	align-items: center;
	justify-content: center;
}

.clb-review-pic img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.clb-review-initials {
	font-family: var(--clb-font);
	font-weight: 800;
	font-size: 15px;
	color: var(--clb-indigo);
	letter-spacing: 0.04em;
}

.clb-review-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.clb-review-name {
	font-family: var(--clb-font);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clb-navy);
}

.clb-review-role {
	font-family: var(--clb-font);
	font-size: 12px;
	color: #6f6c8c;
	margin-top: 3px;
	line-height: 1.4;
}

.clb-review-dot {
	margin: 0 6px;
	color: #b9b5d6;
}

/* A phone gives the row about 300px, which fits barely more than one card.
   A continuous drift can never park a card in that window: at any instant you
   are looking at the right half of one quote and the left half of the next.
   So on phones the row stops drifting and becomes a swipe, snapping one whole
   card into view at a time. The sponsor logos make the same concession, going
   static below this width for the same reason.  */
@media (max-width: 860px) {
	.clb-reviews {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.clb-reviews::-webkit-scrollbar {
		display: none;
	}

	.clb-reviews-track {
		animation: none;
	}

	/* The duplicate run exists only to make the drift loop seamlessly. With no
	   drift it would just be every quote printed twice. */
	.clb-reviews-set[aria-hidden="true"] {
		display: none;
	}

	.clb-reviews-set {
		gap: 14px;
		padding: 6px 12px 16px;
	}

	.clb-review {
		width: 72vw;
		max-width: 330px;
		scroll-snap-align: center;
		padding: 24px 20px 18px;
	}

	.clb-review::before {
		font-size: 60px;
		right: 16px;
	}
}

/* TheGem styles bare <blockquote> with a grey panel and its own quote glyph.
   Strip all of that inside review cards so only our card design shows. */
.clb-review blockquote.clb-review-quote {
	background: none !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 22px !important;
	font-style: normal !important;
	quotes: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

.clb-review blockquote.clb-review-quote::before,
.clb-review blockquote.clb-review-quote::after,
.clb-review blockquote.clb-review-quote p::before,
.clb-review blockquote.clb-review-quote p::after {
	content: none !important;
	display: none !important;
}

/* Full-bleed photo bands (About page): equal height, cropped to fill */
.clb-band-photo img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

@media (max-width: 1024px) {
	.clb-band-photo img { height: 260px; }
}

@media (max-width: 767px) {
	.clb-band-photo img { height: 180px; }
}

/* --------------------------------------------------------------------------
 * Board cards + profile modal ([clb_board])
 * ------------------------------------------------------------------------ */
.clb-board { font-family: var(--clb-font); }

.clb-board-heading {
	text-align: center;
	font-family: var(--clb-font);
	font-weight: 800;
	font-size: 26px;
	color: var(--clb-navy);
	margin: 46px 0 28px;
}

.clb-bm-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.clb-bm-grid-big { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.clb-bm-grid-gov { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }

.clb-bm-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #ffffff;
	border: none;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(43, 42, 92, 0.10);
	padding: 26px 20px 22px;
	cursor: pointer;
	font-family: var(--clb-font);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clb-bm-card:hover,
.clb-bm-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(43, 42, 92, 0.18);
	outline: none;
}

.clb-bm-card-big { padding: 34px 30px 28px; }

.clb-bm-photo-wrap { display: block; margin-bottom: 14px; }

.clb-bm-card img.clb-bm-photo {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.clb-bm-card-big img.clb-bm-photo { width: 190px; height: 190px; }

.clb-bm-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--clb-lavender);
	color: var(--clb-indigo);
	font-weight: 800;
	font-size: 40px;
	letter-spacing: 0.04em;
}

.clb-bm-name {
	font-weight: 800;
	font-size: 16px;
	color: var(--clb-navy);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.clb-bm-card-big .clb-bm-name { font-size: 20px; }

.clb-bm-role {
	font-weight: 800;
	font-size: 11px;
	color: var(--clb-indigo);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 5px;
}

.clb-bm-company { font-size: 12.5px; color: #6f6c8c; margin-top: 4px; }

.clb-bm-bio {
	font-size: 13.5px;
	line-height: 1.7;
	color: #4a4a5e;
	margin-top: 12px;
	text-align: left;
}

.clb-bm-more {
	margin-top: 14px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #582890;
}

.clb-bm-card:hover .clb-bm-more { text-decoration: underline; }

/* Modal */
.clb-bm-modal {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 18, 55, 0.72);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.clb-bm-modal[hidden] { display: none !important; }
.clb-bm-modal.clb-bm-visible { opacity: 1; }

.clb-bm-modal-inner {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	max-width: 620px;
	width: 100%;
	max-height: 86vh;
	overflow-y: auto;
	padding: 34px 36px 30px;
	font-family: var(--clb-font);
	transform: translateY(10px);
	transition: transform 0.22s ease;
}

.clb-bm-modal.clb-bm-visible .clb-bm-modal-inner { transform: translateY(0); }

.clb-bm-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 30px;
	line-height: 1;
	color: #9a96b8;
	cursor: pointer;
}

.clb-bm-close:hover { color: #582890; }

.clb-bm-modal-head { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }

.clb-bm-modal-pic img,
.clb-bm-modal-pic .clb-bm-initials {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	font-size: 30px;
	display: block;
}

.clb-bm-modal-pic .clb-bm-initials { display: flex; }

.clb-bm-modal-head h3 {
	margin: 0 0 5px;
	font-size: 22px;
	font-weight: 800;
	color: var(--clb-navy);
}

.clb-bm-modal-role {
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--clb-indigo);
}

.clb-bm-modal-company { margin: 0; font-size: 13.5px; color: #6f6c8c; }
.clb-bm-modal-company a { color: #582890; font-weight: 700; }

.clb-bm-modal-bio p {
	font-size: 14.5px;
	line-height: 1.8;
	color: #4a4a5e;
	margin: 0 0 12px;
}

.clb-bm-modal-kpis {
	background: #faf9fe;
	border: 1px solid #ece9f8;
	border-radius: 12px;
	padding: 18px 20px;
	margin-top: 6px;
}

.clb-bm-modal-kpis h4 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--clb-navy);
}

.clb-bm-modal-kpis ul { margin: 0; padding: 0; list-style: none; }

.clb-bm-modal-kpis li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 9px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #4a4a5e;
}

.clb-bm-modal-kpis li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #582890;
	font-weight: 800;
}

.clb-bm-modal-links { margin-top: 20px; }

.clb-bm-li {
	display: inline-block;
	background: #0a66c2;
	color: #ffffff !important;
	text-decoration: none;
	border-radius: 9px;
	padding: 11px 22px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.clb-bm-li:hover { background: #08508f; }

@media (max-width: 1024px) {
	.clb-bm-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.clb-bm-grid,
	.clb-bm-grid-big,
	.clb-bm-grid-gov { grid-template-columns: 1fr; gap: 16px; }
	.clb-bm-modal { padding: 12px; }
	.clb-bm-modal-inner { padding: 28px 22px 24px; max-height: 90vh; }
	.clb-bm-modal-head { flex-direction: column; text-align: center; gap: 14px; }
	.clb-bm-modal-pic img, .clb-bm-modal-pic .clb-bm-initials { width: 92px; height: 92px; }
}

/* Kill any stray horizontal overflow so full-bleed bands always reach the edge.
   Use clip rather than hidden: "hidden" makes the element a scroll container,
   which silently breaks position:sticky on anything inside it. "clip" trims the
   overflow without that side effect. The hidden fallback is only for browsers
   that do not understand clip (pre-2022). */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow-x: clip) {
	html, body { overflow-x: clip; }
}

/* Header logo: hold its height open before the image loads.
   Belt-and-braces for the width/height attributes the child theme stamps on the
   logo in functions.php, in case the file cannot be measured on disk. Only
   applies while the header is at full size so the shrink-on-scroll animation is
   untouched. */
#site-header:not(.shrink):not(.fixed) .site-logo .logo {
	min-height: 62px;
}
@media (min-width: 1213px) {
	#site-header:not(.shrink):not(.fixed) .site-logo .logo {
		min-height: 71px;
	}
}

/* TheGem pads the content wrapper by ~110px, which leaves a gap between the
   last Elementor section and the footer. Our sections manage their own
   spacing, so remove it on builder pages. */
body.elementor-page .block-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Footer call-to-action buttons (moved out of the old page-bottom band) */
.custom-footer .clb-footer-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 0;
}

.custom-footer .clb-footer-btn {
	display: inline-block;
	border-radius: 26px;
	padding: 13px 26px;
	font-family: var(--clb-font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.custom-footer .clb-footer-btn-primary {
	background: var(--clb-yellow);
	color: var(--clb-navy) !important;
}

.custom-footer .clb-footer-btn-primary:hover {
	background: #ffbe4d;
	color: var(--clb-navy) !important;
}

.custom-footer .clb-footer-btn-ghost {
	border: 2px solid rgba(255, 255, 255, 0.75);
	color: #ffffff !important;
}

.custom-footer .clb-footer-btn-ghost:hover {
	background: #ffffff;
	color: var(--clb-navy) !important;
}

@media (max-width: 767px) {
	.custom-footer .clb-footer-cta { justify-content: flex-start; }
	.custom-footer .clb-footer-btn { padding: 12px 20px; font-size: 11.5px; }
}

/* Contact form: Government / Industry branch fields */
.wpcf7 .clb-contact-branch[hidden] {
	display: none !important;
}

.wpcf7 .wpcf7-radio {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.wpcf7 .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-radio label {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--clb-text) !important;
	margin: 0 !important;
	cursor: pointer;
}

.wpcf7 .wpcf7-radio input[type="radio"] {
	width: 17px;
	height: 17px;
	accent-color: #582890;
	margin: 0;
}

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

/* Board modal: centre the LinkedIn button and use the brand purple */
.clb-bm-modal-links {
	text-align: center;
}

.clb-bm-li {
	background: #582890;
}

.clb-bm-li:hover {
	background: #6c3aae;
}

/* Review carousel: cards must never be wider than their container, and the
   arrows stay visible on phones so it is obvious the row scrolls. */
/* Step dividers now live with the rest of the step rules, further down, so
   the dark home band and the light About band can each get the right colour. */

/* Footer: compact on phones. Explore and Connect sit side by side instead of
   stacking into one very long column. */
@media (max-width: 767px) {
	.custom-footer .elementor-section > .elementor-container {
		flex-wrap: wrap;
	}

	.custom-footer .elementor-column:first-child {
		width: 100% !important;
	}

	.custom-footer .elementor-column:nth-child(2),
	.custom-footer .elementor-column:nth-child(3) {
		width: 50% !important;
	}

	.custom-footer .elementor-widget-image img {
		max-width: 148px !important;
	}

	.custom-footer p {
		line-height: 1.6 !important;
		font-size: 13px !important;
	}

	.custom-footer .clb-footer-links {
		line-height: 2.15 !important;
	}

	.custom-footer h4 {
		margin-bottom: 2px !important;
	}

	.custom-footer .elementor-widget:not(:last-child) {
		margin-bottom: 10px !important;
	}

	#footer-nav .footer-site-info {
		text-align: center;
	}
}

/* ==========================================================================
   Home hero slider ([clb_hero])
   ========================================================================== */
.clb-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--clb-navy-deep);
	font-family: var(--clb-font);
}

.clb-hero-track {
	position: relative;
	height: 620px;
}

.clb-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 35%;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.75s ease;
}

.clb-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Deep navy on the left fading right so the headline always reads */
.clb-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(35,33,80,0.95) 0%, rgba(35,33,80,0.88) 34%, rgba(35,33,80,0.42) 72%, rgba(35,33,80,0.34) 100%);
}

.clb-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
	padding: 0 96px;
	width: 100%;
	box-sizing: border-box;
}

.clb-hero-title {
	margin: 0 0 18px;
	font-weight: 800;
	font-size: 60px;
	line-height: 1.08;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.clb-hero-l1,
.clb-hero-l2 {
	display: block;
}

.clb-hero-l2 {
	color: var(--clb-yellow);
}

.clb-hero-sub {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.65;
	color: #d6d3ec;
	max-width: 560px;
}

.clb-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

.clb-hero-btn {
	display: inline-block;
	border-radius: 30px;
	padding: 15px 28px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.clb-hero-btn-primary {
	background: #582890;
	color: #ffffff !important;
}

.clb-hero-btn-primary:hover {
	background: #6c3aae;
	transform: translateY(-2px);
	color: #ffffff !important;
}

.clb-hero-btn-ghost {
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #ffffff !important;
}

.clb-hero-btn-ghost:hover {
	background: #ffffff;
	color: var(--clb-navy) !important;
	transform: translateY(-2px);
}

.clb-hero-ticker {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: var(--clb-navy);
	padding: 15px 96px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c9c6e4;
}

.clb-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	background: rgba(35, 33, 80, 0.5);
	color: #ffffff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.clb-hero-arrow:hover {
	background: #582890;
	border-color: #582890;
}

.clb-hero-prev { left: 24px; }
.clb-hero-next { right: 24px; }

.clb-hero-dots {
	position: absolute;
	right: 96px;
	bottom: 78px;
	z-index: 4;
	display: flex;
	gap: 10px;
}

.clb-hero-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.clb-hero-dot.is-active {
	background: var(--clb-yellow);
	width: 30px;
	border-radius: 6px;
}

/* Tablet */
@media (max-width: 1024px) {
	.clb-hero-track { height: 540px; }
	.clb-hero-inner { padding: 0 56px; }
	.clb-hero-title { font-size: 44px; }
	.clb-hero-sub { font-size: 16px; }
	.clb-hero-ticker { padding: 14px 56px; font-size: 11px; }
	.clb-hero-dots { right: 56px; bottom: 74px; }
}

/* Phone: text centred, buttons full width, no side arrows (swipe instead).
   The slide becomes a flex column so the ticker sits in normal flow at the
   bottom instead of leaving a gap under short slides. */
@media (max-width: 767px) {
	/* the hero gets a short navy strip at the very bottom for the dots */
	.clb-hero {
		padding-bottom: 38px;
	}

	.clb-hero-track {
		height: auto;
		min-height: 0;
	}

	.clb-hero-slide {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 0;
		min-height: 480px;
	}

	.clb-hero-slide:first-child {
		position: relative;
	}

	.clb-hero-slide::before {
		background: linear-gradient(180deg, rgba(35,33,80,0.84) 0%, rgba(35,33,80,0.92) 55%, rgba(35,33,80,0.96) 100%);
	}

	.clb-hero-inner {
		position: relative;
		z-index: 2;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 52px 24px 62px;
		max-width: none;
		text-align: center;
	}

	.clb-hero-title {
		font-size: 31px;
		line-height: 1.16;
		margin-bottom: 14px;
	}

	.clb-hero-sub {
		font-size: 15px;
		margin: 0 auto 22px;
		max-width: 420px;
	}

	.clb-hero-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.clb-hero-btn {
		padding: 14px 18px;
		font-size: 12px;
		text-align: center;
		white-space: normal;
	}

	.clb-hero-arrow {
		display: none;
	}

	.clb-hero-ticker {
		position: static;
		padding: 12px 18px;
		font-size: 10px;
		letter-spacing: 0.1em;
		text-align: center;
		line-height: 1.5;
	}

	.clb-hero-dots {
		right: 0;
		left: 0;
		bottom: 13px;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clb-hero-slide { transition: none; }
}

/* ==========================================================================
   Toolkits page: template cards, ground rules, download CTAs
   ========================================================================== */
.clb-kit-card {
	background: #ffffff;
	border: 2px solid #7a5bb0;   /* brand purple, lightened just enough to sit under the text */
	border-radius: 16px;
	box-shadow: 0 2px 0 rgba(43, 42, 92, 0.03);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.clb-kit-card:hover {
	transform: translateY(-4px);
	border-color: var(--clb-purple, #582890);
	box-shadow: 0 16px 38px rgba(43, 42, 92, 0.12);
}

/* Template preview: a sheet of paper on the page */
.clb-kit-shot img {
	width: 100%;
	height: auto;
	border: 1px solid #e2e0f0;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(43, 42, 92, 0.11);
	background: #ffffff;
	transition: box-shadow 0.22s ease;
}

.clb-kit-shot a:hover img {
	box-shadow: 0 12px 30px rgba(43, 42, 92, 0.2);
}

.clb-kit-meta,
.clb-kit-parts {
	margin: 0;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.clb-kit-parts {
	letter-spacing: 0.03em;
	text-transform: none;
}

.clb-rule-n {
	margin: 0;
	letter-spacing: 0.16em;
}

/* The two CTA buttons at the page foot share a width so they stack cleanly */
.clb-kit-cta-btn .elementor-button {
	width: 100%;
	justify-content: center;
	text-align: center;
}

@media (max-width: 1024px) {
	.clb-kit-card {
		margin-bottom: 22px;
	}
}

@media (max-width: 767px) {
	.clb-kit-card {
		margin-bottom: 18px;
	}
	.clb-kit-shot img {
		max-width: 420px;
		margin: 0 auto;
		display: block;
	}
	/* Full width download button so the tap target spans the card */
	.clb-kit-card .elementor-widget-button .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* Equal height toolkit cards: the download button sits on the baseline of the
   tallest card, so the three read as one row rather than three ragged blocks. */
@media (min-width: 1025px) {
	.clb-kit-card > .elementor-widget-wrap,
	.clb-kit-card > .elementor-column-wrap > .elementor-widget-wrap {
		height: 100%;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.clb-kit-card .elementor-widget-button {
		margin-top: auto;
	}
}

/* Toolkit cards sit 5px apart. Elementor's column gap is padding inside each
   column, which is why the cards looked flush; this sets the real gutter. */
@media (min-width: 768px) {
	.clb-kit-card {
		margin-left: 2.5px;
		margin-right: 2.5px;
	}
}

/* Facilitator Guide: one raised panel, purple tint, lifted off the page. */
.clb-kit-guide {
	background: linear-gradient(160deg, #f3f0fb 0%, #e9e5f8 100%);
	border: 1.5px solid #ddd6f2;
	border-radius: 26px;
	box-shadow: 0 26px 60px rgba(43, 42, 92, 0.17),
	            0 4px 12px rgba(43, 42, 92, 0.06);
	position: relative;
	overflow: hidden;
}

/* A soft purple bloom in the top corner so the panel reads as lit, not flat. */
.clb-kit-guide::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -90px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(88, 40, 144, 0.16) 0%, rgba(88, 40, 144, 0) 70%);
	pointer-events: none;
}

.clb-kit-guide > .elementor-column-wrap,
.clb-kit-guide > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

/* The guide preview leans out of the panel a little, which sells the depth. */
.clb-kit-guide .clb-kit-shot img {
	box-shadow: 0 18px 44px rgba(43, 42, 92, 0.22);
	border-radius: 10px;
}

@media (max-width: 767px) {
	.clb-kit-guide {
		border-radius: 20px;
	}
	.clb-kit-guide::before {
		width: 220px;
		height: 220px;
		top: -90px;
		right: -70px;
	}

	/* Side by side, the words sit left of the cover shot and the ragged right
	   edge is fine. Stacked on a phone the same block reads as pushed into the
	   left wall, so the whole panel centres. */
	.clb-kit-guide .elementor-widget-heading,
	.clb-kit-guide .elementor-widget-text-editor,
	.clb-kit-guide .elementor-widget-button {
		text-align: center;
	}
	.clb-kit-guide .elementor-widget-heading .elementor-heading-title,
	.clb-kit-guide .elementor-widget-text-editor p,
	.clb-kit-guide .elementor-widget-button .elementor-button-wrapper {
		text-align: center !important;
	}

	/* 17px at 1.75 turned the description into eleven lines and most of a
	   screen. Slightly smaller and tighter puts it back in proportion with
	   the heading above it. */
	/* Elementor writes its typography against the element id, so a plain class
	   rule loses. This is one of the few places worth the important. */
	.clb-kit-guide .elementor-widget-text-editor p {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}
	.clb-kit-guide .clb-kit-parts {
		font-size: 12.5px;
		line-height: 1.55;
	}

	/* The download button spans the panel rather than hugging the left edge. */
	.clb-kit-guide .elementor-widget-button .elementor-button {
		width: 100%;
		max-width: 320px;
		justify-content: center;
	}

	.clb-kit-guide .clb-kit-shot img {
		margin: 0 auto;
	}
}

/* ==========================================================================
   Session feedback form: upload fields and intro
   ========================================================================== */
.clb-fb-intro {
	font-size: 16px;
	line-height: 1.75;
	color: var(--clb-text);
	max-width: 700px;
	margin: 0 auto 32px;
	text-align: center;
}

.wpcf7 .clb-upload-hint {
	font-size: 12px;
	color: #8b88a3;
	margin: -2px 0 10px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* Style the file inputs to match the rest of the form rather than leaving
   three raw browser widgets stacked on top of each other. */
.wpcf7 input[type="file"] {
	width: 100%;
	background: #faf9fe;
	border: 1.5px dashed #cfc9ec;
	border-radius: 10px;
	padding: 12px 15px;
	font-family: var(--clb-font);
	font-size: 13px;
	color: var(--clb-text);
	margin-bottom: 9px;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.wpcf7 input[type="file"]:last-of-type { margin-bottom: 0; }

.wpcf7 input[type="file"]:hover,
.wpcf7 input[type="file"]:focus {
	border-color: #582890;
	background: #ffffff;
	outline: none;
}

.wpcf7 input[type="file"]::file-selector-button {
	font-family: var(--clb-font);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #ffffff;
	background: #582890;
	border: none;
	border-radius: 7px;
	padding: 8px 15px;
	margin-right: 13px;
	cursor: pointer;
}

.wpcf7 input[type="file"]::file-selector-button:hover { background: var(--clb-navy); }

/* Checkbox and radio groups stack rather than running off the edge */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-radio .wpcf7-list-item {
	display: block;
	margin: 0 0 8px;
}

.wpcf7 .wpcf7-list-item-label {
	font-size: 14px;
	color: var(--clb-text);
	padding-left: 7px;
}

.wpcf7 input[type="date"] {
	width: 100%;
	background: #faf9fe;
	border: 1.5px solid var(--clb-lavender);
	border-radius: 10px;
	padding: 12px 15px;
	font-family: var(--clb-font);
	font-size: 14px;
	color: var(--clb-text);
	box-sizing: border-box;
}

/* The session feedback page is a plain WordPress page on the full width
   template, so its content would otherwise run to both screen edges. */
.clb-fb-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 72px 22px 84px;
}

@media (max-width: 767px) {
	.clb-fb-wrap {
		padding: 44px 20px 54px;
	}
}

/* ==========================================================================
   Readability pass. Board asked for larger type: a good deal of our audience
   is older, and the theme's defaults sat at 13 to 14px. Body copy is now 17px
   with 15px as the floor for anything a visitor actually has to read.
   Uppercase micro labels stay small by design; they are wayfinding, not prose.
   ========================================================================== */
body,
.page-content,
.block-content p,
.entry-content p {
	font-size: 17px;
	line-height: 1.72;
}

/* Theme level lists and paragraphs outside the page builder */
.block-content li,
.entry-content li,
.widget p,
.widget li {
	font-size: 16px;
	line-height: 1.7;
}

/* Never let anything drop below the floor inside builder content */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
	font-size: inherit;
}

/* Forms are read carefully, so they get the body size too */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea,
.clb-reg input,
.clb-reg select,
.clb-reg textarea {
	font-size: 16px;
}

.wpcf7 .wpcf7-list-item-label,
.wpcf7 .wpcf7-list-item label {
	font-size: 16px;
}

/* Board and review cards */
.clb-bm-role { font-size: 13px; }
.clb-bm-company { font-size: 14px; }
.clb-bm-bio { font-size: 15.5px; line-height: 1.75; }
.clb-review blockquote { font-size: 16px; line-height: 1.8; }

/* Footer copy sits on a dark ground, where small type suffers most */
.custom-footer p,
.custom-footer .clb-footer-links a { font-size: 15px; }

/* ==========================================================================
   Footer bottom bar: copyright and LinkedIn on one line, less air

   TheGem builds this bar as a Bootstrap row of push and pull columns, which
   is what stacked the social icon above the copyright and left the bar twice
   as tall as it needed to be. Flatten the row into a single flex line.
   ========================================================================== */
#footer-nav {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

#footer-nav .row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0;
}

#footer-nav .row > div[class*="col-md"] {
	float: none !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
}

/* Push and pull reverse the source order; put reading order back. The
   copyright used to be pinned hard left with margin-right:auto. Centred reads
   better under a footer whose three columns are themselves centred, so the row
   centres and the social icons follow underneath. */
#footer-nav .row > div.col-md-pull-9 {
	order: 1;
	margin-right: 0 !important;
}
#footer-nav .row > .col-md-6      { display: none; }
#footer-nav .row > .col-md-push-9 { order: 2; }

#footer-nav .footer-site-info {
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}

/* The break between the copyright and the credit is what made the bar two
   rows tall; a middot separator carries the same meaning on one line. */
#footer-nav .footer-site-info br { display: none; }

#footer-nav .footer-site-info .clb-powered::before {
	content: "\00b7";
	margin: 0 9px;
	opacity: 0.45;
}

#footer-nav #footer-socials,
#footer-nav .socials { margin: 0 !important; }

@media (max-width: 767px) {
	#footer-nav .row {
		justify-content: center;
		text-align: center;
	}
	#footer-nav .footer-site-info {
		white-space: normal;
		font-size: 13px;
	}
	#footer-nav .footer-site-info .clb-powered::before {
		content: "";
		display: block;
		margin: 3px 0 0;
	}
}

/* ==========================================================================
   Homepage: Resources and Results panel (matches the Facilitator Guide)
   ========================================================================== */
.clb-res-panel {
	background: linear-gradient(160deg, #f3f0fb 0%, #e9e5f8 100%);
	border: 1.5px solid #ddd6f2;
	border-radius: 26px;
	box-shadow: 0 26px 60px rgba(43, 42, 92, 0.17),
	            0 4px 12px rgba(43, 42, 92, 0.06);
	position: relative;
	overflow: hidden;
}

.clb-res-panel::before {
	content: "";
	position: absolute;
	top: -130px;
	right: -100px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(88, 40, 144, 0.15) 0%, rgba(88, 40, 144, 0) 70%);
	pointer-events: none;
}

.clb-res-panel > .elementor-column-wrap,
.clb-res-panel > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

.clb-res-card {
	background: #ffffff;
	border: 1.5px solid #e4dff5;
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(43, 42, 92, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	margin-left: 2.5px;
	margin-right: 2.5px;
}

.clb-res-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(43, 42, 92, 0.14);
}

@media (min-width: 1025px) {
	.clb-res-card > .elementor-widget-wrap,
	.clb-res-card > .elementor-column-wrap > .elementor-widget-wrap {
		height: 100%;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.clb-res-card .elementor-widget-button { margin-top: auto; }
}

@media (max-width: 1024px) {
	.clb-res-card { margin-bottom: 16px; }
	.clb-res-panel { border-radius: 20px; }
}

/* ==========================================================================
   Branded login
   ========================================================================== */
.clb-page-narrow { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.clb-login { display: flex; justify-content: center; padding: 64px 20px 84px; }
.clb-login-card {
	width: 100%; max-width: 460px; background: #ffffff;
	border: 1.5px solid #e4dff5; border-radius: 22px;
	box-shadow: 0 26px 60px rgba(43, 42, 92, 0.13);
	padding: 44px 40px 40px; text-align: left;
}
.clb-login-title { font-size: 30px; font-weight: 800; color: var(--clb-navy); margin: 0 0 10px; line-height: 1.2; }
.clb-login-sub   { font-size: 16px; line-height: 1.65; color: #6b6a85; margin: 0 0 26px; }
.clb-login-note, .clb-login-error, .clb-wp-ok, .clb-wp-err {
	border-radius: 10px; padding: 12px 15px; font-size: 15px; line-height: 1.55; margin: 0 0 20px;
}
.clb-login-note, .clb-wp-ok { background: #eef7ee; color: #2c5c2f; border: 1px solid #cfe6d0; }
.clb-login-error, .clb-wp-err { background: #fdeeec; color: #a3372a; border: 1px solid #f3cfc9; }
.clb-login form p { margin: 0 0 16px; }
.clb-login label {
	display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--clb-navy); margin-bottom: 6px;
}
.clb-login input[type="text"], .clb-login input[type="password"] {
	width: 100%; background: #faf9fe; border: 1.5px solid var(--clb-lavender);
	border-radius: 10px; padding: 13px 15px; font-family: var(--clb-font);
	font-size: 16px; color: var(--clb-text); box-sizing: border-box;
}
.clb-login input:focus {
	outline: none; border-color: #582890;
	box-shadow: 0 0 0 3px rgba(88, 40, 144, 0.12); background: #ffffff;
}
.clb-login .login-remember label {
	display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
	letter-spacing: 0; text-transform: none; color: var(--clb-text);
}
.clb-login .login-submit input[type="submit"], .clb-login-btn {
	display: inline-block; width: 100%; text-align: center; background: #582890;
	color: #ffffff !important; border: none; border-radius: 10px; padding: 15px 26px;
	font-family: var(--clb-font); font-size: 13px; font-weight: 800; letter-spacing: 0.1em;
	text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background 0.2s ease; box-sizing: border-box;
}
.clb-login .login-submit input[type="submit"]:hover, .clb-login-btn:hover { background: var(--clb-navy); }
.clb-login-btn-ghost { background: #ffffff; color: var(--clb-navy) !important; border: 2px solid var(--clb-navy); }
.clb-login-btn-ghost:hover { background: var(--clb-navy); color: #ffffff !important; }
.clb-login-alt { text-align: center; margin: 18px 0 0; font-size: 15px; }
.clb-login-alt a { color: var(--clb-indigo); text-decoration: none; font-weight: 600; }
.clb-login-alt a:hover { color: #582890; text-decoration: underline; }
.clb-login-divider { position: relative; text-align: center; margin: 28px 0 18px; }
.clb-login-divider::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--clb-lavender);
}
.clb-login-divider span {
	position: relative; background: #ffffff; padding: 0 12px; font-size: 12px;
	font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9b9ab0;
}
.clb-login-done { text-align: center; }
.clb-login-done h2 { font-size: 24px; font-weight: 800; color: var(--clb-navy); margin: 0 0 10px; }
.clb-login-done p { font-size: 16px; color: #6b6a85; margin: 0 0 22px; }

/* ==========================================================================
   Member dashboard
   ========================================================================== */
.clb-dash { max-width: 1160px; margin: 0 auto; padding: 60px 22px 80px; }
.clb-dash-head { margin-bottom: 40px; }
.clb-dash-eyebrow {
	font-size: 12px; font-weight: 800; letter-spacing: 0.22em;
	text-transform: uppercase; color: #582890; margin: 0 0 12px;
}
.clb-dash-hello { font-size: 38px; font-weight: 800; color: var(--clb-navy); margin: 0 0 10px; line-height: 1.16; }
.clb-dash-lede  { font-size: 17px; color: #6b6a85; margin: 0; }
.clb-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.clb-dash-card {
	display: flex; flex-direction: column; background: #ffffff;
	border: 1.5px solid #e4dff5; border-radius: 18px; padding: 28px 26px 26px;
	text-decoration: none; box-shadow: 0 4px 14px rgba(43, 42, 92, 0.05);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.clb-dash-card:hover {
	transform: translateY(-4px); border-color: #cfc9ec;
	box-shadow: 0 18px 40px rgba(43, 42, 92, 0.14);
}
.clb-dash-icon-wrap {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 13px;
	background: var(--clb-lavender); color: #582890; margin-bottom: 18px;
}
.clb-dash-icon { width: 24px; height: 24px; }
.clb-dash-title { font-size: 19px; font-weight: 800; color: var(--clb-navy); margin-bottom: 9px; line-height: 1.3; }
.clb-dash-body  { font-size: 15px; line-height: 1.65; color: #6b6a85; flex: 1; }
.clb-dash-cta   {
	margin-top: 18px; font-size: 12.5px; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; color: #582890;
}
.clb-dash-signout { text-align: center; margin: 44px 0 0; font-size: 15px; }
.clb-dash-signout a { color: #8b88a3; text-decoration: none; }
.clb-dash-signout a:hover { color: #582890; text-decoration: underline; }
.clb-dash-gate { max-width: 520px; margin: 40px auto; text-align: center; }
.clb-dash-gate h2 { font-size: 26px; font-weight: 800; color: var(--clb-navy); margin: 0 0 10px; }
.clb-dash-gate p { font-size: 16px; color: #6b6a85; margin: 0 0 24px; }
@media (max-width: 1024px) { .clb-dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  {
	.clb-dash { padding: 40px 18px 56px; }
	.clb-dash-grid { grid-template-columns: 1fr; }
	.clb-dash-hello { font-size: 28px; }
}

/* ==========================================================================
   How registration works
   ========================================================================== */
.clb-howreg { max-width: 900px; margin: 0 auto; padding: 56px 20px 20px; }
.clb-howreg-title { font-size: 30px; font-weight: 800; color: var(--clb-navy); text-align: center; margin: 0 0 10px; }
.clb-howreg-lede  { font-size: 17px; color: #6b6a85; text-align: center; margin: 0 0 34px; }
.clb-howreg-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.clb-howreg-steps li {
	display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; background: #ffffff;
	border: 1.5px solid #e4dff5; border-radius: 14px; padding: 20px 22px;
}
.clb-howreg-n {
	grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
	background: #582890; color: #ffffff; font-size: 14px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.clb-howreg-steps strong { font-size: 17px; color: var(--clb-navy); }
.clb-howreg-steps span:not(.clb-howreg-n) { font-size: 15.5px; line-height: 1.65; color: #6b6a85; }
.clb-howreg-foot { text-align: center; font-size: 15px; color: #6b6a85; margin: 26px 0 0; }
.clb-howreg-foot a { color: #582890; font-weight: 600; }

/* ==========================================================================
   White paper library
   ========================================================================== */
.clb-wp-lib { max-width: 1160px; margin: 0 auto; padding: 54px 22px 84px; }

.clb-wp-sec {
	font-size: 12px; font-weight: 800; letter-spacing: 0.22em;
	text-transform: uppercase; color: #582890; margin: 0 0 16px;
}

.clb-wp-banner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 30px; flex-wrap: wrap;
	background: linear-gradient(160deg, #f3f0fb 0%, #e9e5f8 100%);
	border: 1.5px solid #ddd6f2; border-radius: 22px;
	padding: 32px 34px; margin-bottom: 46px;
}
.clb-wp-banner h2 { font-size: 24px; font-weight: 800; color: var(--clb-navy); margin: 0 0 8px; line-height: 1.25; }
.clb-wp-banner p  { font-size: 16px; line-height: 1.65; color: #5c5a78; margin: 0; max-width: 620px; }
.clb-wp-banner-actions { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }

.clb-wp-gate-link { font-size: 14px; color: var(--clb-indigo); text-decoration: none; text-align: center; font-weight: 600; }
.clb-wp-gate-link:hover { color: #582890; text-decoration: underline; }

/* Topic tiles */
.clb-wp-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 34px; }
.clb-wp-topic {
	display: flex; flex-direction: column; background: #ffffff;
	border: 1.5px solid #e4dff5; border-radius: 16px; padding: 22px 20px;
	text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.clb-wp-topic:hover { transform: translateY(-3px); border-color: #cfc9ec; box-shadow: 0 14px 32px rgba(43,42,92,0.12); }
.clb-wp-topic.is-active { border-color: #582890; box-shadow: 0 0 0 3px rgba(88,40,144,0.10); }
.clb-wp-topic-name  { font-size: 17px; font-weight: 800; color: var(--clb-navy); line-height: 1.3; margin-bottom: 8px; }
.clb-wp-topic-desc  { font-size: 14.5px; line-height: 1.6; color: #6b6a85; flex: 1; }
.clb-wp-topic-count {
	margin-top: 14px; font-size: 12px; font-weight: 800;
	letter-spacing: 0.09em; text-transform: uppercase; color: #582890;
}

/* Search */
.clb-wp-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; }
.clb-wp-search input[type="search"] {
	flex: 1; min-width: 0; background: #faf9fe; border: 1.5px solid var(--clb-lavender);
	border-radius: 10px; padding: 13px 16px; font-family: var(--clb-font);
	font-size: 16px; color: var(--clb-text); box-sizing: border-box;
}
.clb-wp-search input[type="search"]:focus {
	outline: none; border-color: #582890; box-shadow: 0 0 0 3px rgba(88,40,144,0.12); background: #fff;
}
.clb-wp-search button {
	background: #582890; color: #fff; border: none; border-radius: 10px; padding: 13px 26px;
	font-family: var(--clb-font); font-size: 12.5px; font-weight: 800;
	letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
}
.clb-wp-search button:hover { background: var(--clb-navy); }
.clb-wp-clear { font-size: 14px; color: #8b88a3; text-decoration: none; }
.clb-wp-clear:hover { color: #582890; text-decoration: underline; }

/* Cards */
.clb-wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.clb-wp-card {
	display: flex; flex-direction: column; background: #ffffff;
	border: 1.5px solid #e4dff5; border-radius: 16px; padding: 24px 22px 22px;
	box-shadow: 0 4px 14px rgba(43,42,92,0.05);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.clb-wp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(43,42,92,0.13); }
.clb-wp-card-topic {
	display: inline-block; align-self: flex-start; background: var(--clb-lavender);
	color: #582890; font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
	text-transform: uppercase; padding: 5px 11px; border-radius: 20px; margin-bottom: 14px;
}
.clb-wp-card-title { font-size: 19px; font-weight: 800; color: var(--clb-navy); margin: 0 0 8px; line-height: 1.3; }
.clb-wp-card-meta  { font-size: 12.5px; font-weight: 700; color: #582890; margin: 0 0 10px; letter-spacing: 0.03em; }
.clb-wp-card-sum   { font-size: 15px; line-height: 1.65; color: #6b6a85; margin: 0 0 12px; flex: 1; }
.clb-wp-card-src   { font-size: 13px; color: #9b9ab0; margin: 0 0 14px; font-style: italic; }
.clb-wp-card-cta   {
	font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em;
	text-transform: uppercase; color: #582890; text-decoration: none;
}
.clb-wp-card-cta:hover { text-decoration: underline; }
.clb-wp-card-dl { display: block; margin-top: 8px; font-size: 13.5px; color: #8b88a3; text-decoration: none; }
.clb-wp-card-dl:hover { color: #582890; }
.clb-wp-card-lock {
	display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
	font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9b9ab0;
}
.clb-wp-card-lock svg { width: 15px; height: 15px; }
.clb-wp-card-locked { background: #fbfaff; }

/* Gate */
.clb-wp-gate {
	max-width: 560px; margin: 40px auto; text-align: center; background: #ffffff;
	border: 1.5px solid #e4dff5; border-radius: 22px; padding: 44px 36px;
	box-shadow: 0 22px 50px rgba(43,42,92,0.12);
}
.clb-wp-gate-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--clb-lavender); color: #582890; margin-bottom: 20px;
}
.clb-wp-gate-icon svg { width: 28px; height: 28px; }
.clb-wp-gate h2 { font-size: 26px; font-weight: 800; color: var(--clb-navy); margin: 0 0 12px; }
.clb-wp-gate p  { font-size: 16px; line-height: 1.7; color: #6b6a85; margin: 0 0 24px; }
.clb-wp-gate-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* Empty state */
.clb-wp-empty {
	text-align: center; background: #faf9fe; border: 1.5px dashed #ddd6f2;
	border-radius: 18px; padding: 54px 30px;
}
.clb-wp-empty h3 { font-size: 22px; font-weight: 800; color: var(--clb-navy); margin: 0 0 10px; }
.clb-wp-empty p  { font-size: 16px; line-height: 1.7; color: #6b6a85; margin: 0 auto; max-width: 560px; }

/* Submission */
.clb-wp-submit {
	margin-top: 64px; background: linear-gradient(160deg, #f3f0fb 0%, #e9e5f8 100%);
	border: 1.5px solid #ddd6f2; border-radius: 26px; padding: 46px 44px;
	box-shadow: 0 26px 60px rgba(43,42,92,0.15);
}
.clb-wp-submit-title { font-size: 30px; font-weight: 800; color: var(--clb-navy); margin: 0 0 12px; line-height: 1.2; }
.clb-wp-submit-lede  { font-size: 16.5px; line-height: 1.7; color: #5c5a78; margin: 0 0 28px; max-width: 700px; }
.clb-wp-submit-gate  { background: #fff; border-radius: 14px; padding: 26px; text-align: center; max-width: 440px; }
.clb-wp-submit-gate p { font-size: 16px; color: #6b6a85; margin: 0 0 18px; }

.clb-wp-form-row { margin-bottom: 18px; }
.clb-wp-form-2 { display: flex; gap: 16px; flex-wrap: wrap; }
.clb-wp-form-2 label { flex: 1; min-width: 220px; }
.clb-wp-form label {
	display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--clb-navy);
}
.clb-wp-hint {
	display: block; font-size: 12.5px; font-weight: 500; letter-spacing: 0;
	text-transform: none; color: #8b88a3; margin: 3px 0 6px;
}
.clb-wp-form input[type="text"], .clb-wp-form select, .clb-wp-form textarea, .clb-wp-form input[type="file"] {
	width: 100%; margin-top: 6px; background: #ffffff; border: 1.5px solid #ded8f0;
	border-radius: 10px; padding: 13px 15px; font-family: var(--clb-font);
	font-size: 16px; color: var(--clb-text); box-sizing: border-box;
}
.clb-wp-form input[type="file"] { border-style: dashed; cursor: pointer; font-size: 14px; }
.clb-wp-form input[type="file"]::file-selector-button {
	font-family: var(--clb-font); font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
	text-transform: uppercase; color: #fff; background: #582890; border: none;
	border-radius: 7px; padding: 8px 15px; margin-right: 13px; cursor: pointer;
}
.clb-wp-form :focus { outline: none; border-color: #582890; box-shadow: 0 0 0 3px rgba(88,40,144,0.12); }
.clb-wp-consent label {
	display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500;
	letter-spacing: 0; text-transform: none; color: var(--clb-text); line-height: 1.6;
}
.clb-wp-consent input { margin-top: 3px; }
.clb-wp-form-btn {
	background: #582890; color: #fff; border: none; border-radius: 10px; padding: 15px 34px;
	font-family: var(--clb-font); font-size: 13px; font-weight: 800; letter-spacing: 0.1em;
	text-transform: uppercase; cursor: pointer; transition: background 0.2s ease;
}
.clb-wp-form-btn:hover { background: var(--clb-navy); }
.clb-req { color: var(--clb-yellow); margin-left: 3px; }

@media (max-width: 1024px) {
	.clb-wp-topics { grid-template-columns: repeat(2, 1fr); }
	.clb-wp-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.clb-wp-lib { padding: 38px 18px 60px; }
	.clb-wp-topics, .clb-wp-grid { grid-template-columns: 1fr; }
	.clb-wp-banner, .clb-wp-submit { padding: 26px 22px; border-radius: 18px; }
	.clb-wp-banner-actions { min-width: 0; width: 100%; }
	.clb-wp-submit-title { font-size: 24px; }
	.clb-wp-search { flex-direction: column; align-items: stretch; }
	.clb-wp-search button { width: 100%; }
}

/* Library intro sits under the section label */
.clb-wp-intro {
	font-size: 16.5px;
	line-height: 1.7;
	color: #6b6a85;
	max-width: 760px;
	margin: -6px 0 26px;
}

/* ==========================================================================
   Single white paper: the actual reading experience
   ========================================================================== */
.clb-paper { background: #ffffff; }
.clb-paper-inner { max-width: 940px; margin: 0 auto; padding: 46px 22px 84px; }
.clb-paper-back {
	display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
	text-transform: uppercase; color: #8b88a3; text-decoration: none; margin-bottom: 26px;
}
.clb-paper-back:hover { color: #582890; }
.clb-paper-head { border-bottom: 1.5px solid var(--clb-lavender); padding-bottom: 30px; margin-bottom: 34px; }
.clb-paper-topic {
	display: inline-block; background: var(--clb-lavender); color: #582890;
	font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
	padding: 6px 13px; border-radius: 20px; text-decoration: none; margin-bottom: 18px;
}
.clb-paper-topic:hover { background: #582890; color: #ffffff; }
.clb-paper-title { font-size: 40px; font-weight: 800; color: var(--clb-navy); line-height: 1.16; margin: 0 0 14px; }
.clb-paper-meta  { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; color: #582890; margin: 0 0 18px; }
.clb-paper-lede  { font-size: 19px; line-height: 1.65; color: #55556e; margin: 0; }
.clb-paper-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 24px 0 0; }
.clb-paper-facts div { margin: 0; }
.clb-paper-facts dt {
	font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
	text-transform: uppercase; color: #9b9ab0; margin: 0 0 3px;
}
.clb-paper-facts dd { font-size: 15.5px; color: var(--clb-navy); margin: 0; font-weight: 600; }
.clb-paper-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.clb-paper-dl {
	display: inline-flex; align-items: center; gap: 10px; background: #582890; color: #ffffff !important;
	border-radius: 10px; padding: 15px 28px; font-size: 13px; font-weight: 800;
	letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease;
}
.clb-paper-dl:hover { background: var(--clb-navy); }
.clb-paper-dl svg { width: 17px; height: 17px; }
.clb-paper-open { font-size: 15px; color: var(--clb-indigo); text-decoration: none; font-weight: 600; }
.clb-paper-open:hover { color: #582890; text-decoration: underline; }
.clb-paper-viewer {
	border: 1.5px solid var(--clb-lavender); border-radius: 16px; overflow: hidden;
	background: #f4f3fa; box-shadow: 0 16px 40px rgba(43, 42, 92, 0.10); margin-bottom: 40px;
}
.clb-paper-viewer object, .clb-paper-viewer iframe {
	display: block; width: 100%; height: 78vh; min-height: 520px; border: 0;
}
.clb-paper-fallback { padding: 40px 30px; text-align: center; font-size: 16px; color: #6b6a85; margin: 0; }
.clb-paper-fallback a { color: #582890; font-weight: 600; }
.clb-paper-body { font-size: 17px; line-height: 1.8; color: var(--clb-text); }
.clb-paper-body h2 { font-size: 25px; font-weight: 800; color: var(--clb-navy); margin: 38px 0 12px; line-height: 1.3; }
.clb-paper-body h3 { font-size: 20px; font-weight: 800; color: var(--clb-navy); margin: 30px 0 10px; }
.clb-paper-body p  { margin: 0 0 18px; }
.clb-paper-body ul, .clb-paper-body ol { margin: 0 0 20px; padding-left: 24px; }
.clb-paper-body li { margin-bottom: 9px; }
.clb-paper-body blockquote {
	border-left: 4px solid #582890; margin: 26px 0; padding: 6px 0 6px 22px;
	font-size: 18px; color: #55556e; font-style: normal;
}
.clb-paper-empty {
	background: #faf9fe; border: 1.5px dashed #ddd6f2; border-radius: 14px;
	padding: 32px; text-align: center; font-size: 16px; color: #6b6a85;
}
.clb-paper-empty p { margin: 0; }
.clb-paper-more { margin-top: 62px; padding-top: 40px; border-top: 1.5px solid var(--clb-lavender); }
.clb-paper-foot { text-align: center; margin: 44px 0 0; font-size: 15px; }
.clb-paper-foot a { color: #582890; font-weight: 700; text-decoration: none; }
.clb-paper-foot a:hover { text-decoration: underline; }
@media (max-width: 767px) {
	.clb-paper-inner { padding: 32px 18px 60px; }
	.clb-paper-title { font-size: 28px; }
	.clb-paper-lede  { font-size: 17px; }
	.clb-paper-viewer object, .clb-paper-viewer iframe { height: 62vh; min-height: 400px; }
	.clb-paper-actions { flex-direction: column; align-items: stretch; }
	.clb-paper-dl { justify-content: center; }
	.clb-paper-open { text-align: center; }
}

/* ==========================================================================
   Sign in submit button

   TheGem's .button class forces height:40px with line-height:40px and 25px
   side margins. Under our 15px vertical padding that clipped the label and
   pushed the button out past the edge of the card. Undo all of it.
   ========================================================================== */
.clb-login .login-submit input[type="submit"],
.clb-modal .login-submit input[type="submit"],
.clb-login input[type="submit"].button,
.clb-modal input[type="submit"].button {
	margin: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.25 !important;
	display: block !important;
	float: none !important;
	position: static !important;
}

.clb-login .login-submit,
.clb-modal .login-submit {
	margin: 4px 0 0 !important;
	padding: 0 !important;
	text-align: left;
}

/* ==========================================================================
   Sign in modal
   ========================================================================== */
body.clb-modal-open { overflow: hidden; }

.clb-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.clb-modal[hidden] { display: none; }

.clb-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(35, 33, 80, 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.clb-modal-panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 92vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 22px;
	box-shadow: 0 40px 90px rgba(23, 21, 60, 0.42);
	padding: 42px 38px 36px;
	animation: clb-modal-in 0.22s ease-out;
}

@keyframes clb-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.clb-modal-panel { animation: none; }
}

.clb-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: #9b9ab0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
}
.clb-modal-close:hover { background: var(--clb-lavender); color: var(--clb-navy); }

.clb-modal-title { font-size: 27px; font-weight: 800; color: var(--clb-navy); margin: 0 0 10px; line-height: 1.2; }
.clb-modal-sub   { font-size: 15.5px; line-height: 1.65; color: #6b6a85; margin: 0 0 24px; }

/* The modal reuses the login form styles */
.clb-modal form p { margin: 0 0 16px; }
.clb-modal label {
	display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--clb-navy); margin-bottom: 6px;
}
.clb-modal input[type="text"],
.clb-modal input[type="password"] {
	width: 100%; background: #faf9fe; border: 1.5px solid var(--clb-lavender);
	border-radius: 10px; padding: 13px 15px; font-family: var(--clb-font);
	font-size: 16px; color: var(--clb-text); box-sizing: border-box;
}
.clb-modal input:focus {
	outline: none; border-color: #582890;
	box-shadow: 0 0 0 3px rgba(88, 40, 144, 0.12); background: #ffffff;
}
.clb-modal .login-remember label {
	display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
	letter-spacing: 0; text-transform: none; color: var(--clb-text);
}
.clb-modal .login-submit input[type="submit"] {
	width: 100%; text-align: center; background: #582890; color: #ffffff;
	border: none; border-radius: 10px; padding: 15px 26px;
	font-family: var(--clb-font); font-size: 13px; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
	transition: background 0.2s ease; box-sizing: border-box;
}
.clb-modal .login-submit input[type="submit"]:hover { background: var(--clb-navy); }
.clb-modal .clb-login-divider span { background: #ffffff; }

@media (max-width: 480px) {
	.clb-modal-panel { padding: 34px 24px 28px; border-radius: 18px; }
	.clb-modal-title { font-size: 23px; }
}

/* ==========================================================================
   Navigation accents: purple, not yellow
   ========================================================================== */
#site-header #primary-menu.nav-menu ul.sub-menu {
	border-top-color: #582890 !important;
}

#page-title .breadcrumbs .current::after,
#page-title .breadcrumbs-container .current::after,
.page-title-block .breadcrumbs li.current::after {
	background-color: #582890 !important;
}

/* TheGem paints several small accents in the demo yellow. Bring them across. */
#site-header .sub-menu li.current-menu-item > a,
#site-header #primary-menu.nav-menu > li.menu-item-has-children:hover > a::after {
	border-color: #582890 !important;
}

/* "Resources" is a dropdown container now, so it should not look clickable */
#site-header #primary-menu.nav-menu > li > a[role="button"] {
	cursor: default;
}

/* ==========================================================================
   Member and library pages: tighten the gap under the title band
   ==========================================================================
   TheGem's content wrapper adds ~135px of top padding, which on these pages
   left a long empty stretch between the navy band and the first heading.
   ========================================================================== */
.clb-dash,
.clb-wp-lib,
.clb-login,
.clb-fb-wrap,
.clb-paper-inner,
.clb-howreg {
	padding-top: 24px;
}

body:not(.elementor-page) .block-content {
	padding-top: 0 !important;
}

@media (max-width: 767px) {
	.clb-dash, .clb-wp-lib, .clb-login, .clb-fb-wrap, .clb-paper-inner, .clb-howreg {
		padding-top: 18px;
	}
}

/* ==========================================================================
   Footer: line the copyright up with the logo and description above it
   ========================================================================== */
/* TheGem's bottom bar sits in a 1212px .container while the footer widgets
   above use Elementor's wider 1300px one, so the copyright sat 44px inside the
   logo. Matching the widths lines the two columns up. */
#footer-nav .container {
	/* Same geometry as the Elementor container holding the footer widgets:
	   70px inset each side, capped at 1300px. */
	max-width: 1300px !important;
	width: calc(100% - 140px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

/* Bootstrap gives .row a ::before/::after clearfix pair. Inside a flex
   container those become flex items and were pushing the copyright 40px in. */
#footer-nav .row::before,
#footer-nav .row::after {
	display: none !important;
}

#footer-nav .row > div.col-md-pull-9 {
	padding-left: 0 !important;
}

/* ==========================================================================
   Dashboard: profile card, notices, sign out button
   ========================================================================== */
.clb-dash-card-profile {
	border: none;
	font-family: var(--clb-font);
	text-align: left;
	cursor: pointer;
	background: #ffffff;
	border: 1.5px solid #e4dff5;
}

.clb-dash-shot {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}

.clb-dash-card-profile .clb-dash-icon-wrap {
	padding: 0;
	overflow: hidden;
}

.clb-dash-note {
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 15.5px;
	margin: 0 0 24px;
}
.clb-dash-note-ok  { background: #eef7ee; color: #2c5c2f; border: 1px solid #cfe6d0; }
.clb-dash-note-err { background: #fdeeec; color: #a3372a; border: 1px solid #f3cfc9; }

.clb-dash-signout { margin-top: 40px; }
.clb-dash-signout-btn {
	display: inline-block !important;
	width: auto !important;
	min-width: 220px;
	padding: 15px 40px;
}

/* ==========================================================================
   Profile modal
   ========================================================================== */
.clb-modal-panel-wide { max-width: 620px; }

.clb-profile-row { margin-bottom: 18px; }
.clb-profile-2 { display: flex; gap: 16px; flex-wrap: wrap; }
.clb-profile-2 > * { flex: 1; min-width: 200px; }

.clb-profile-form label,
.clb-profile-lab {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--clb-navy);
	margin-bottom: 6px;
}

.clb-profile-form input[type="text"],
.clb-profile-form input[type="url"] {
	width: 100%;
	margin-top: 6px;
	background: #faf9fe;
	border: 1.5px solid var(--clb-lavender);
	border-radius: 10px;
	padding: 12px 15px;
	font-family: var(--clb-font);
	font-size: 16px;
	color: var(--clb-text);
	box-sizing: border-box;
}
.clb-profile-form input:focus {
	outline: none;
	border-color: #582890;
	box-shadow: 0 0 0 3px rgba(88, 40, 144, 0.12);
	background: #ffffff;
}

.clb-profile-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	background: #faf9fe;
	border: 1.5px dashed #ddd6f2;
	border-radius: 12px;
	margin-bottom: 9px;
	overflow: hidden;
}
.clb-profile-shot { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.clb-profile-logo { max-width: 88%; max-height: 74px; object-fit: contain; }
.clb-profile-empty { font-size: 13px; color: #9b9ab0; }

.clb-profile-form input[type="file"] {
	width: 100%;
	background: #ffffff;
	border: 1.5px dashed #cfc9ec;
	border-radius: 10px;
	padding: 10px 12px;
	font-family: var(--clb-font);
	font-size: 13px;
	color: var(--clb-text);
	box-sizing: border-box;
	cursor: pointer;
}
.clb-profile-form input[type="file"]::file-selector-button {
	font-family: var(--clb-font); font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
	text-transform: uppercase; color: #ffffff; background: #582890; border: none;
	border-radius: 7px; padding: 8px 14px; margin-right: 12px; cursor: pointer;
}

.clb-profile-hint { font-size: 13px; color: #8b88a3; margin: -6px 0 22px; }

.clb-profile-save {
	width: 100%;
	background: #582890;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 15px 26px;
	font-family: var(--clb-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}
.clb-profile-save:hover { background: var(--clb-navy); }

/* ==========================================================================
   Contribute block and modal
   ========================================================================== */
.clb-wp-contribute {
	margin-top: 60px;
	background: linear-gradient(160deg, #f3f0fb 0%, #e9e5f8 100%);
	border: 1.5px solid #ddd6f2;
	border-radius: 26px;
	padding: 44px 42px;
	text-align: center;
	box-shadow: 0 26px 60px rgba(43, 42, 92, 0.15);
}
.clb-wp-contribute .clb-wp-sec { margin-bottom: 12px; }
.clb-wp-contribute .clb-wp-submit-lede { margin: 0 auto 28px; max-width: 640px; }

.clb-wp-contribute-btn {
	background: #582890;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 16px 44px;
	font-family: var(--clb-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.18s ease;
}
.clb-wp-contribute-btn:hover { background: var(--clb-navy); transform: translateY(-2px); }

/* Inside the modal the submit block loses its own panel styling */
#clb-contrib-modal .clb-wp-submit {
	margin: 0;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
#clb-contrib-modal .clb-wp-submit-gate { max-width: none; }

@media (max-width: 767px) {
	.clb-wp-contribute { padding: 30px 22px; border-radius: 18px; }
	.clb-wp-contribute-btn { width: 100%; }
	.clb-dash-signout-btn { width: 100% !important; min-width: 0; }
}

/* ==========================================================================
   Scrolling photo strip
   ========================================================================== */
.clb-strip {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: var(--clb-navy-deep);
	--clb-strip-h: 350px;
	--clb-strip-speed: 60s;
}

.clb-strip-track {
	display: flex;
	width: max-content;
	animation: clb-strip-scroll var(--clb-strip-speed) linear infinite;
}

.clb-strip:hover .clb-strip-track,
.clb-strip:focus-within .clb-strip-track {
	animation-play-state: paused;
}

.clb-strip-item {
	flex: 0 0 auto;
	height: var(--clb-strip-h);
}

.clb-strip-item img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

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

@media (prefers-reduced-motion: reduce) {
	.clb-strip-track { animation: none; }
	.clb-strip { overflow-x: auto; }
}

@media (max-width: 1024px) { .clb-strip { --clb-strip-h: 260px; } }
@media (max-width: 767px)  { .clb-strip { --clb-strip-h: 190px; } }

/* ==========================================================================
   Board page: intro copy and the join CTA
   ========================================================================== */
.clb-board-intro {
	font-size: 20px !important;
	line-height: 1.7 !important;
	max-width: 900px;
	margin: 0 auto !important;
	text-align: center;
}

@media (max-width: 767px) {
	.clb-board-intro { font-size: 17px !important; }
}


/* ==========================================================================
   Event photo galleries
   ========================================================================== */
.clb-gal-wrap { max-width: 1500px; margin: 0 auto; padding: 40px 18px 70px; }
.clb-gal-title { font-size: 32px; font-weight: 800; color: var(--clb-navy); margin: 0 0 12px; }
.clb-gal-intro {
	font-size: 17px; line-height: 1.7; color: #6b6a85; max-width: 800px;
	/* Pages built from the Event Photos screen drop this straight into
	   .fullwidth-content, which has no gutter of its own. */
	margin: 0 auto 10px; padding: 0 18px; box-sizing: border-box;
}
.fullwidth-content > .clb-gal-intro:first-child { margin-top: 46px; }
.clb-gal-count {
	font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
	text-transform: uppercase; color: #582890; margin: 0 0 22px;
}
.clb-gal-empty {
	background: #faf9fe; border: 1.5px dashed #ddd6f2; border-radius: 12px;
	padding: 24px; font-size: 15px; color: #6b6a85;
}

/* Justified rows: every photo in a row shares a height and the row fills the
   width. flex-grow set to each image's aspect ratio is what does the work. */
.clb-gal-row {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
	/* The row's width to height ratio is the sum of its photos' ratios, so
	   every photo in the row shares a height with no JavaScript involved. */
	aspect-ratio: var(--clb-row-sum, 3.6);
	/* A row holding one wide photo would otherwise be enormous. Capping the
	   height lets object-fit crop it instead. */
	max-height: 460px;
}
.clb-gal-item {
	position: relative; display: block; min-width: 0; overflow: hidden;
	border-radius: 4px; background: #ece9f7; cursor: zoom-in;
}
.clb-gal-item img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s ease, filter 0.3s ease;
}
.clb-gal-item:hover img { transform: scale(1.045); filter: saturate(1.06); }
.clb-gal-item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(35,33,80,0.35), rgba(35,33,80,0) 45%);
	opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.clb-gal-item:hover::after { opacity: 1; }
.clb-gal-item:focus-visible { outline: 3px solid #582890; outline-offset: 2px; }

@media (max-width: 767px) {
	.clb-gal-wrap { padding: 26px 12px 48px; }
	.clb-gal-row { gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
	.clb-gal-row { aspect-ratio: auto; flex-wrap: wrap; }
	.clb-gal-item { flex: 0 0 calc(50% - 2px) !important; aspect-ratio: 4 / 3; }
	.clb-gal-title { font-size: 24px; }
}

/* ==========================================================================
   Chapters
   ========================================================================== */
.clb-chapters { max-width: 1500px; margin: 0 auto; padding: 34px 18px 70px; }
.clb-chapters-intro { font-size: 19px; max-width: 860px; margin: 0 0 40px; }
.clb-chapter { margin-bottom: 62px; }
.clb-chapter-head { max-width: 820px; margin: 0 0 20px; }
.clb-chapter-time {
	display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
	text-transform: uppercase; color: #582890; margin-bottom: 10px;
}
.clb-chapter-title { font-size: 30px; font-weight: 800; color: var(--clb-navy); margin: 0 0 12px; line-height: 1.22; }
.clb-chapter-text  { font-size: 17px; line-height: 1.75; color: #55556e; margin: 0; }

@media (max-width: 767px) {
	.clb-chapters { padding: 22px 12px 48px; }
	.clb-chapter { margin-bottom: 42px; }
	.clb-chapter-title { font-size: 23px; }
	.clb-chapters-intro { font-size: 17px; margin-bottom: 28px; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.clb-lb {
	position: fixed; inset: 0; z-index: 100001; background: rgba(20,18,48,0.94);
	display: flex; align-items: center; justify-content: center; padding: 40px 70px;
}
.clb-lb[hidden] { display: none; }
.clb-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.clb-lb-close, .clb-lb-prev, .clb-lb-next {
	position: absolute; background: rgba(255,255,255,0.1); border: none; color: #ffffff;
	cursor: pointer; border-radius: 50%; transition: background 0.2s ease; line-height: 1;
}
.clb-lb-close:hover, .clb-lb-prev:hover, .clb-lb-next:hover { background: rgba(255,255,255,0.22); }
.clb-lb-close { top: 18px; right: 20px; width: 46px; height: 46px; font-size: 30px; }
.clb-lb-prev, .clb-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; }
.clb-lb-prev { left: 14px; }
.clb-lb-next { right: 14px; }
.clb-lb-count {
	position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
	color: rgba(255,255,255,0.72); font-size: 13px; letter-spacing: 0.08em;
	text-transform: uppercase; margin: 0;
}
@media (max-width: 767px) {
	.clb-lb { padding: 56px 10px 46px; }
	.clb-lb-prev, .clb-lb-next { width: 42px; height: 42px; font-size: 27px; }
	.clb-lb-close { width: 40px; height: 40px; font-size: 25px; top: 12px; right: 12px; }
}

/* Event photo index */
.clb-evidx {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px; max-width: 1300px; margin: 30px auto 0; padding: 0 18px;
}
.clb-evidx-card {
	display: block; background: #ffffff; border: 1.5px solid #e4dff5;
	border-radius: 16px; overflow: hidden; text-decoration: none;
	box-shadow: 0 4px 14px rgba(43,42,92,0.05);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.clb-evidx-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(43,42,92,0.15); }
.clb-evidx-shot { display: block; height: 210px; background: #ece9f7; overflow: hidden; }
.clb-evidx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clb-evidx-none {
	display: flex; align-items: center; justify-content: center; height: 100%;
	font-size: 14px; color: #9b9ab0;
}
.clb-evidx-body { display: block; padding: 20px 22px 22px; }
.clb-evidx-title { display: block; font-size: 19px; font-weight: 800; color: var(--clb-navy); line-height: 1.3; }
.clb-evidx-count {
	display: block; margin-top: 8px; font-size: 12px; font-weight: 800;
	letter-spacing: 0.09em; text-transform: uppercase; color: #582890;
}

/* ==========================================================================
   Donations

   The form has to feel like handing money to a person, not filling in a
   government form. Amounts read as buttons, the card block is visually set
   apart because it is the only part served from somewhere else, and the
   submit button always says the amount so nobody is guessing what they just
   agreed to.
   ========================================================================== */
.clb-don { max-width: 720px; margin: 0 auto; }
.clb-don-notready {
	max-width: 640px; margin: 0 auto; padding: 26px 28px; text-align: center;
	background: var(--clb-lavender); border-radius: 14px;
	font-size: 17px; line-height: 1.7; color: var(--clb-navy);
}
.clb-don-notready a { color: #582890; font-weight: 700; }
.clb-don-test {
	margin: 0 0 18px; padding: 11px 16px; border-radius: 10px;
	background: #fcefd6; color: #8a5a00; font-size: 14px; font-weight: 700; text-align: center;
}
.clb-don-form {
	background: #ffffff; border: 1.5px solid #e4dff5; border-radius: 18px;
	padding: 32px 34px 30px; box-shadow: 0 14px 44px rgba(43, 42, 92, 0.08);
}

/* How often */
.clb-don-freq {
	display: flex; gap: 10px; background: var(--clb-lavender);
	padding: 6px; border-radius: 12px; margin: 0 0 26px;
}
.clb-don-freq-opt { flex: 1 1 0; margin: 0; cursor: pointer; }
.clb-don-freq-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.clb-don-freq-opt span {
	display: block; text-align: center; padding: 12px 10px; border-radius: 9px;
	font-size: 15px; font-weight: 700; color: var(--clb-navy);
	transition: background 0.18s ease, color 0.18s ease;
}
.clb-don-freq-opt input:checked + span { background: #582890; color: #ffffff; }
.clb-don-freq-opt input:focus-visible + span { outline: 3px solid var(--clb-indigo-light); outline-offset: 2px; }

.clb-don-lab {
	margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
	text-transform: uppercase; color: #582890;
}

/* Amounts */
.clb-don-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.clb-don-amt { flex: 1 1 96px; margin: 0; cursor: pointer; }
.clb-don-amt input { position: absolute; opacity: 0; width: 0; height: 0; }
.clb-don-amt span {
	display: block; text-align: center; padding: 15px 8px; border-radius: 11px;
	border: 2px solid #e4dff5; background: #ffffff;
	font-size: 18px; font-weight: 800; color: var(--clb-navy);
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.clb-don-amt span:hover { border-color: var(--clb-indigo-light); }
.clb-don-amt input:checked + span { border-color: #582890; background: #582890; color: #ffffff; }
.clb-don-amt input:focus-visible + span { outline: 3px solid var(--clb-indigo-light); outline-offset: 2px; }
.clb-don-amt-other span { font-size: 15px; }
.clb-don-other { margin: 16px 0 0; }
.clb-don-other label {
	display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; color: var(--clb-navy);
}

/* Text inputs */
.clb-don-row { margin: 22px 0 0; }
.clb-don-2 { display: flex; gap: 16px; }
.clb-don-2 > label { flex: 1 1 0; }
.clb-don-form label {
	font-size: 14px; font-weight: 700; color: var(--clb-navy);
}
.clb-don-row label { display: block; }
.clb-don-form input[type="text"],
.clb-don-form input[type="email"],
.clb-don-form input[type="number"] {
	width: 100%; margin-top: 7px; padding: 13px 15px; box-sizing: border-box;
	border: 1.5px solid #ddd7ee; border-radius: 10px; background: #ffffff;
	font-family: var(--clb-font); font-size: 16px; font-weight: 500; color: var(--clb-text);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.clb-don-form input[type="text"]:focus,
.clb-don-form input[type="email"]:focus,
.clb-don-form input[type="number"]:focus {
	border-color: #582890; box-shadow: 0 0 0 3px rgba(88, 40, 144, 0.14); outline: none;
}
.clb-req { color: #a3372a; margin-left: 3px; }

/* Card block */
.clb-don-card { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.clb-don-field:first-child { flex: 1 1 100%; }
.clb-don-field { flex: 1 1 140px; }
.clb-don-flab {
	display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; color: var(--clb-navy);
}
.clb-don-field > div[id] {
	border: 1.5px solid #ddd7ee; border-radius: 10px; background: #ffffff;
	height: 50px; overflow: hidden;
}
.clb-don-field iframe { display: block; width: 100%; height: 100%; border: 0; }
.clb-don-secure {
	display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px;
	font-size: 13.5px; line-height: 1.6; color: #6b6a80;
}
.clb-don-secure svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #582890; }
.clb-don-form .clb-don-lab:not(:first-of-type) { margin-top: 30px; }

/* Feedback and submit */
.clb-don-msg {
	margin: 22px 0 0; padding: 13px 16px; border-radius: 10px;
	font-size: 15px; line-height: 1.6;
}
.clb-don-msg.is-error { background: #fdecea; color: #8c2c20; }
.clb-don-msg.is-ok { background: #e8f4e9; color: #2c5c2f; }
.clb-don-btn {
	display: block; width: 100%; margin: 26px 0 0; padding: 17px 26px;
	border: none; border-radius: 11px; background: #582890; color: #ffffff;
	font-family: var(--clb-font); font-size: 15px; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
	transition: background 0.2s ease;
}
.clb-don-btn:hover:not(:disabled) { background: var(--clb-navy); }
.clb-don-btn:disabled { opacity: 0.62; cursor: default; }
.clb-don-fine {
	margin: 14px 0 0; text-align: center; font-size: 13.5px; line-height: 1.6; color: #6b6a80;
}

/* Thank you */
.clb-thanks { max-width: 620px; margin: 0 auto; text-align: center; }
.clb-thanks-mark {
	width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 50%;
	background: var(--clb-lavender); color: #582890;
	display: flex; align-items: center; justify-content: center;
}
.clb-thanks-mark svg { width: 36px; height: 36px; }
.clb-thanks h1 { font-size: 40px; font-weight: 800; color: var(--clb-navy); margin: 0 0 16px; }
.clb-thanks-lead { font-size: 19px; line-height: 1.7; color: var(--clb-navy); margin: 0 0 18px; }
.clb-thanks-body { font-size: 16.5px; line-height: 1.85; color: var(--clb-text); margin: 0 0 30px; }
.clb-thanks-actions {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
}
.clb-thanks-actions .clb-login-btn { width: auto; }

/* Coming soon panel, used by Gov Integration */
.clb-soon {
	max-width: 760px; margin: 0 auto; padding: 52px 44px; text-align: center;
	background: #ffffff; border: 1.5px solid #e4dff5; border-radius: 18px;
	box-shadow: 0 14px 44px rgba(43, 42, 92, 0.07);
}
.clb-soon-tag {
	display: inline-block; margin: 0 0 18px; padding: 7px 16px; border-radius: 999px;
	background: var(--clb-lavender); color: #582890;
	font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.clb-soon h2 { font-size: 30px; font-weight: 800; color: var(--clb-navy); margin: 0 0 16px; }
.clb-soon p { font-size: 17px; line-height: 1.85; color: var(--clb-text); margin: 0 0 16px; }
.clb-soon-list {
	list-style: none; margin: 22px auto 26px; padding: 0; max-width: 520px; text-align: left;
}
.clb-soon-list li {
	position: relative; padding: 0 0 0 28px; margin: 0 0 12px;
	font-size: 16.5px; line-height: 1.7; color: var(--clb-text);
}
.clb-soon-list li::before {
	content: ""; position: absolute; left: 0; top: 10px;
	width: 9px; height: 9px; border-radius: 50%; background: #582890;
}

@media (max-width: 640px) {
	.clb-don-form { padding: 24px 20px 22px; border-radius: 14px; }
	.clb-don-2 { display: block; }
	.clb-don-2 > label + label { display: block; margin-top: 22px; }
	.clb-don-amt { flex: 1 1 calc(33.333% - 7px); }
	.clb-don-amt span { padding: 13px 6px; font-size: 16px; }
	.clb-don-freq-opt span { font-size: 14px; padding: 11px 8px; }
	.clb-thanks h1 { font-size: 30px; }
	.clb-thanks-lead { font-size: 17px; }
	.clb-thanks-actions .clb-login-btn { width: 100%; }
	.clb-soon { padding: 34px 22px; border-radius: 14px; }
	.clb-soon h2 { font-size: 24px; }
}

/* Plain (non Elementor) pages that host our shortcodes sit inside
   .fullwidth-content, which has no gutter and no vertical rhythm of its own. */
.clb-page-lede {
	max-width: 760px; margin: 0 auto 34px; padding: 0 20px; box-sizing: border-box;
	text-align: center; font-size: 17.5px; line-height: 1.85; color: var(--clb-text);
}
.clb-don, .clb-thanks, .clb-soon { box-sizing: border-box; }
.clb-don, .clb-soon { max-width: 760px; padding-left: 20px; padding-right: 20px; }
.clb-thanks { max-width: 660px; padding-left: 20px; padding-right: 20px; }
.clb-soon { padding-top: 52px; padding-bottom: 52px; }
.fullwidth-content > .clb-page-lede:first-child { margin-top: 58px; }
.fullwidth-content > .clb-don,
.fullwidth-content > .clb-thanks,
.fullwidth-content > .clb-soon { margin-top: 58px; margin-bottom: 76px; }
.fullwidth-content > .clb-page-lede + .clb-don { margin-top: 0; }

/* Paragraphs centred over three lines are hard work. Centre the furniture,
   left align the reading. */
.clb-soon p { text-align: left; }
.clb-soon a { color: #582890; font-weight: 700; text-decoration: underline; }
.clb-soon a:hover { color: var(--clb-navy); }

/* ==========================================================================
   Mobile vertical rhythm inside stacked panels

   Elementor gives every widget a 20px bottom margin AND we author a spacer
   widget between them, so a 15px gap actually renders as 55px: 20 for the
   widget, 15 for the spacer, 20 for the spacer's own margin. On a wide screen
   that reads as generous. On a phone the panel falls apart into disconnected
   fragments, and a numbered step loses contact with its own number.

   Dropping the widget margin leaves exactly the gaps we authored.
   ========================================================================== */
@media (max-width: 767px) {
	.clb-kit-guide .elementor-widget,
	.clb-kit-card .elementor-widget,
	.clb-step .elementor-widget {
		margin-bottom: 0;
	}

	/* The guide panel carries more copy than the cards, so it needs the
	   spacers pulled in further to stay on one screen. */
	.clb-kit-guide .elementor-widget-spacer .elementor-spacer-inner {
		height: 14px !important;
	}
	.clb-kit-guide .clb-kit-parts { margin-top: 2px; }

	/* Steps: number, title and body as one block, with a rule between each
	   so it is obvious where step one ends and step two begins. */
	.clb-step .elementor-widget-spacer .elementor-spacer-inner {
		height: 8px !important;
	}
	/* Elementor puts the column's own padding on the inner wrap, so setting it
	   on .clb-step alone stacks the two and doubles the gap. Zero the wrap and
	   drive the spacing from one place. */
	.clb-step > .elementor-column-wrap,
	.clb-step > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* One divider per gap, coloured for the background it sits on. The home
	   page steps run on a dark photo band, the About page steps on white, so
	   the same border colour cannot serve both. */
	.clb-step:not(:last-child) {
		padding-bottom: 24px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	}
	.clb-step:not(:last-child) + .clb-step {
		padding-top: 28px !important;
	}
	.clb-step-on-light:not(:last-child) {
		border-bottom: 1.5px solid #ddd6f2;
	}
	.clb-step:last-child {
		padding-bottom: 0 !important;
	}
}

/* A drifting row of text is exactly what a reduced-motion preference is for.
   Hold it still and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
	.clb-reviews-track,
	.clb-sponsors-track {
		animation: none;
	}
	.clb-reviews {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.clb-reviews::-webkit-scrollbar { display: none; }
	.clb-reviews-set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Contact dialog

   The form is wider than a sign in panel and the message field needs room,
   so it gets the wide panel and a capped height that scrolls rather than
   pushing the send button off a phone screen.
   ========================================================================== */
.clb-contact-modal-form { margin-top: 6px; }
.clb-contact-modal-form .wpcf7 { margin: 0; }
.clb-contact-modal-form .wpcf7-form p { margin: 0 0 14px; }
.clb-contact-modal-form textarea { min-height: 120px; }
.clb-contact-modal-form .wpcf7-response-output {
	margin: 14px 0 0; padding: 12px 15px; border-radius: 9px;
	border: none; background: var(--clb-lavender); color: var(--clb-navy);
	font-size: 14.5px; line-height: 1.6;
}
.clb-contact-modal-form .wpcf7 form.invalid .wpcf7-response-output,
.clb-contact-modal-form .wpcf7 form.failed .wpcf7-response-output {
	background: #fdecea; color: #8c2c20;
}
.clb-contact-modal-form .wpcf7 form.sent .wpcf7-response-output {
	background: #e8f4e9; color: #2c5c2f;
}
.clb-modal-alt {
	margin: 18px 0 0; text-align: center; font-size: 14px;
}
.clb-modal-alt a { color: var(--clb-indigo); font-weight: 600; text-decoration: none; }
.clb-modal-alt a:hover { color: #582890; text-decoration: underline; }

/* On a short screen the dialog itself scrolls, so the send button is always
   reachable without the page behind it moving. */
@media (max-height: 760px) {
	#clb-contact-modal .clb-modal-panel {
		max-height: 88vh;
		overflow-y: auto;
	}
}

/* The contact form was spaced for a full page. Inside a dialog that spacing
   pushes the send button two screens down on a phone, so compress it here
   without touching how the /contact/ page itself looks. */
.clb-contact-modal-form .wpcf7-form label,
.clb-contact-modal-form .wpcf7-form > p > label { margin-bottom: 5px; }
.clb-contact-modal-form .wpcf7-form br { display: none; }

@media (max-width: 860px) {
	.clb-contact-modal-form .wpcf7-form p { margin: 0 0 10px; }
	.clb-contact-modal-form input[type="text"],
	.clb-contact-modal-form input[type="email"],
	.clb-contact-modal-form input[type="tel"],
	.clb-contact-modal-form select {
		padding-top: 11px; padding-bottom: 11px;
	}
	.clb-contact-modal-form textarea { min-height: 90px; }
	#clb-contact-modal .clb-modal-panel {
		max-height: 92vh; overflow-y: auto;
		padding-top: 26px; padding-bottom: 22px;
	}
	#clb-contact-modal .clb-modal-title { font-size: 24px; }
	#clb-contact-modal .clb-modal-sub { font-size: 14.5px; margin-bottom: 16px; }
	#clb-contact-modal .clb-modal-alt { margin-top: 12px; }
}

/* Centre the submit button inside our dialogs. On the full contact page it
   sits left with the form; in a narrow centred panel that reads as misaligned. */
#clb-contact-modal .wpcf7-form input[type="submit"],
#clb-contact-modal .wpcf7-form button[type="submit"],
#clb-contribute-modal .wpcf7-form input[type="submit"],
#clb-contribute-modal .wpcf7-form button[type="submit"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#clb-contact-modal .wpcf7-form .wpcf7-spinner,
#clb-contribute-modal .wpcf7-form .wpcf7-spinner {
	display: block;
	margin: 8px auto 0;
}
#clb-contact-modal .wpcf7-form > p:last-of-type,
#clb-contribute-modal .wpcf7-form > p:last-of-type {
	text-align: center;
}

/* The personal capacity note under Partner Board Leaders. Quiet, but present:
   it should read as a standing fact rather than a warning label. */
.clb-board-capacity {
	max-width: 720px;
	margin: -6px auto 30px;
	padding: 0 18px;
	box-sizing: border-box;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.7;
	color: #6b6a80;
}
@media (max-width: 640px) {
	.clb-board-capacity { font-size: 13.5px; margin-bottom: 24px; }
}

/* The "give it a few minutes" notice on the check your email panel. Verification
   mail can take five minutes; without this people resend, which cancels the link
   already on its way to them. */
.clb-reg-wait {
	margin: 16px 0 0; padding: 13px 16px; border-radius: 10px;
	background: #FCEFD6; color: #7A5200;
	font-size: 14.5px; line-height: 1.65; text-align: left;
}
.clb-reg-wait strong { color: #5C3D00; }
.clb-reg-countdown { opacity: .75; }

/* Short description under an event card on the Upcoming Events index. */
.clb-evidx-note {
	display: block; margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: #6b6a80;
}

/* The 501(c)(3) line in the footer bottom bar. Quieter than the copyright,
   because it is reference information rather than a message. */
/* The registered status line. The pale colour belongs to the dark footer, so
   it is scoped there: the same shortcode on the white Donate page was coming
   out barely visible against the background. */
.clb-nonprofit {
	font-size: 12.5px;
	line-height: 1.6;
	color: inherit;
}
#footer-nav .clb-nonprofit {
	display: block;
	color: rgba(201, 198, 228, 0.75);
}
@media (min-width: 861px) {
	#footer-nav .clb-nonprofit { display: inline-block; margin-right: 14px; }
}

/* Donate page: the tax status note under the giving card. A note, not body
   copy, so it gets a panel of its own rather than running the full width of
   the page in two different greys. */
.clb-donate-status {
	max-width: 560px;
	margin: 26px auto 0;
	padding: 16px 20px;
	background: #f6f4fd;
	border: 1px solid #e4dff5;
	border-radius: 12px;
	text-align: center;
	font-family: var(--clb-font);
	/* TheGem sizes page paragraphs from a theme option, which outranks a class
	   rule, so the note has to insist on being note sized. */
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: #5c5a75;
}

.clb-donate-status .clb-nonprofit {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--clb-navy);
	margin-bottom: 4px;
}

@media (max-width: 767px) {
	.clb-donate-status {
		margin-left: 16px;
		margin-right: 16px;
		font-size: 13.5px !important;
		padding: 15px 16px;
	}
	.clb-donate-status .clb-nonprofit {
		font-size: 13.5px;
	}
}

/* One or two quotes: no drift, no edge fade, just centred cards. A marquee
   needs enough content to look like a stream rather than a stutter. */
.clb-reviews-thin {
	-webkit-mask-image: none;
	mask-image: none;
}
.clb-reviews-thin .clb-reviews-track {
	animation: none;
	width: 100%;
	justify-content: center;
}
.clb-reviews-thin .clb-reviews-set {
	flex-wrap: wrap;
	justify-content: center;
}

/* ==========================================================================
   Event feedback form  [clb_feedback]
   Built for a phone held at an event table: one column, large targets, and
   nothing that needs a second tap to read.
   ========================================================================== */
.clb-fb {
	max-width: 660px;
	margin: 0 auto;
	background: var(--clb-white);
	border: 1px solid rgba(85, 81, 158, 0.14);
	border-radius: 18px;
	box-shadow: 0 20px 55px rgba(43, 42, 92, 0.10);
	padding: 26px 22px 28px;
	font-family: var(--clb-font);
}

.clb-fb .clb-hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	width: 0;
}

.clb-fb-error {
	background: #fdecea;
	border-left: 3px solid #c0392b;
	color: #7c2820;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.5;
}

.clb-fb-field {
	margin-bottom: 18px;
}

.clb-fb label,
.clb-fb .clb-fb-label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--clb-navy);
	margin-bottom: 7px;
	line-height: 1.4;
}

.clb-fb .clb-req {
	color: var(--clb-yellow);
	margin-left: 3px;
}

.clb-fb .clb-fb-opt {
	font-weight: 500;
	color: #8b8ba3;
	text-transform: none;
	font-size: 12px;
}

.clb-fb input[type="text"],
.clb-fb input[type="email"],
.clb-fb select,
.clb-fb textarea {
	width: 100%;
	font-family: var(--clb-font);
	font-size: 16px; /* under 16px and iOS zooms the whole page on focus */
	color: var(--clb-text);
	background: #fbfaff;
	border: 1px solid rgba(85, 81, 158, 0.24);
	border-radius: 10px;
	padding: 13px 14px;
	line-height: 1.45;
	-webkit-appearance: none;
	appearance: none;
}

.clb-fb select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2355519e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

.clb-fb textarea {
	min-height: 132px;
	resize: vertical;
}

.clb-fb input:focus,
.clb-fb select:focus,
.clb-fb textarea:focus {
	outline: none;
	border-color: var(--clb-indigo);
	box-shadow: 0 0 0 3px rgba(85, 81, 158, 0.14);
	background: var(--clb-white);
}

/* Stars: radio buttons wearing a costume, so they still work without JS.
   Filling the stars to the left of the chosen one needs a backwards look at
   the sibling list, which is what :has does. Browsers without it still show
   the chosen star, which is enough to know the tap landed. */
.clb-fb-rating {
	display: flex;
	gap: 6px;
}

.clb-fb-star {
	margin: 0;
	cursor: pointer;
	line-height: 1;
}

.clb-fb-star input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.clb-fb-star span[aria-hidden] {
	display: inline-block;
	font-size: 34px;
	line-height: 1;
	padding: 4px 3px;
	color: #d9d7ea;
	transition: color 0.15s ease, transform 0.15s ease;
}

.clb-fb-star:has(input:checked) span[aria-hidden],
.clb-fb-star:has(~ .clb-fb-star input:checked) span[aria-hidden],
.clb-fb-star input:checked ~ span[aria-hidden] {
	color: var(--clb-yellow);
}

.clb-fb-star:has(input:checked) span[aria-hidden] {
	transform: scale(1.04);
}

.clb-fb-star input:focus-visible ~ span[aria-hidden] {
	outline: 2px solid var(--clb-indigo);
	outline-offset: 2px;
	border-radius: 4px;
}

.clb-fb-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--clb-lavender);
	border-radius: 12px;
	padding: 15px 16px;
	margin: 4px 0 22px;
	font-weight: 500 !important;
	font-size: 14px !important;
	color: var(--clb-navy) !important;
	line-height: 1.5;
	cursor: pointer;
}

.clb-fb-consent input {
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	flex: 0 0 22px;
	accent-color: var(--clb-indigo);
}

.clb-fb-consent em {
	display: block;
	font-style: normal;
	color: #6a6a86;
	font-size: 13px;
	margin-top: 4px;
}

.clb-fb-send {
	display: block;
	width: 100%;
	border: 0;
	cursor: pointer;
	font-size: 17px;
	padding: 16px 24px;
}

.clb-fb-done {
	max-width: 660px;
	margin: 0 auto;
	text-align: center;
	background: var(--clb-white);
	border-radius: 18px;
	box-shadow: 0 20px 55px rgba(43, 42, 92, 0.10);
	padding: 40px 26px 36px;
	font-family: var(--clb-font);
}

.clb-fb-done h3 {
	color: var(--clb-navy);
	margin-bottom: 12px;
}

.clb-fb-done p {
	color: var(--clb-text);
	line-height: 1.6;
}

.clb-fb-done-links {
	margin-top: 22px;
}

/* Two across only where two across fits. */
@media (min-width: 620px) {
	.clb-fb {
		padding: 34px 34px 36px;
	}
	.clb-fb-row {
		display: flex;
		gap: 18px;
	}
	.clb-fb-row .clb-fb-field {
		flex: 1 1 0;
		min-width: 0;
	}
	.clb-fb-send {
		width: auto;
		min-width: 260px;
		margin: 0 auto;
	}
}

/* Footer bottom bar on phones: the bar keeps its one line, no wrap rule from
   the desktop layout, and our 501(c)(3) line is long enough that the column
   ran off both edges of a phone. Let it wrap and centre it. */
@media (max-width: 991px) {
	#footer-nav .row {
		justify-content: center;
	}
	#footer-nav .row > div[class*="col-md"] {
		max-width: 100%;
		flex: 0 1 auto;
	}
	#footer-nav .footer-site-info {
		white-space: normal;
		text-align: center;
		max-width: 100%;
	}
	#footer-nav .row > div.col-md-pull-9 {
		margin-right: 0 !important;
	}
}

/* Give the feedback card a little air on a phone rather than running it into
   both edges of the screen. */
@media (max-width: 619px) {
	.clb-fb {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* The page intro asks for feedback; once it has been given, it is noise. */
.clb-fb-thanks .clb-page-lede {
	display: none;
}

/* The Eventbrite link inside the registration steps. */
.clb-howreg-steps .clb-howreg-link {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--clb-indigo);
	text-decoration: none;
	border-bottom: 2px solid rgba(85, 81, 158, 0.3);
	padding-bottom: 1px;
}
.clb-howreg-steps .clb-howreg-link:hover,
.clb-howreg-steps .clb-howreg-link:focus {
	color: var(--clb-navy);
	border-bottom-color: var(--clb-yellow);
}

/* A session whose write up is not published yet. Saying so beats "0 documents". */
.clb-wp-topic-count.is-empty {
	color: #8b8ba3;
	font-style: normal;
}

/* ==========================================================================
   Home: the three pillars  [clb_pillars]
   Cards, not columns. Three across on a desktop, one per row on a phone, and
   always a visible edge between them so the numbers read as separate points.
   ========================================================================== */
.clb-pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	font-family: var(--clb-font);
}

.clb-pillar {
	position: relative;
	background: #ffffff;
	border: 1.5px solid #e4dff5;
	border-radius: 14px;
	padding: 22px 22px 24px;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 4px 16px;
	align-content: start;
}

.clb-pillar-n {
	grid-row: span 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #582890;
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clb-pillar-title {
	margin: 5px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--clb-indigo);
}

.clb-pillar-text {
	margin: 6px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: #6b6a85;
}

/* Three across once there is room for three. The number moves above the
   heading so a narrow column does not squeeze the text into a ribbon. */
@media (min-width: 861px) {
	.clb-pillars {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	.clb-pillar {
		grid-template-columns: 1fr;
		padding: 28px 26px 30px;
	}
	.clb-pillar-n {
		grid-row: auto;
		margin-bottom: 4px;
	}
}

/* TheGem sets every h3 uppercase with letter spacing, which turned three word
   pillar titles into three lines on a phone. */
.clb-pillars .clb-pillar-title {
	text-transform: none;
	letter-spacing: 0;
	min-width: 0;
}
.clb-pillars .clb-pillar-text {
	font-size: 15.5px;
	min-width: 0;
}

/* ==========================================================================
   Pirate Code: the boarding passes and the sponsorship tiers
   Stacked on a phone the tiers ran into one another and each tier name read
   as a caption for the poster above it. One box each, and the spacing inside
   the box pulled in so the box does the separating.
   ========================================================================== */
.clb-pirate-tier > .elementor-widget-wrap,
.clb-pirate-tier > .elementor-column-wrap {
	border: 1.5px solid rgba(145, 97, 219, 0.55);
	border-radius: 14px;
	background: rgba(145, 97, 219, 0.07);
	padding: 22px 20px 24px !important;
	align-content: flex-start;
}

/* Elementor gives every widget a 20px bottom margin on top of the authored
   spacers, which is most of why the tiers looked loose. */
.clb-pirate-tier .elementor-widget {
	margin-bottom: 0 !important;
}
.clb-pirate-tier .elementor-widget-spacer {
	display: none !important;
}
.clb-pirate-tier .elementor-widget-heading {
	margin-bottom: 5px !important;
}
.clb-pirate-tier .elementor-widget-text-editor {
	margin-bottom: 14px !important;
}
.clb-pirate-tier .elementor-widget-image img {
	border-radius: 10px;
	display: block;
	margin: 0 auto;
}

/* A boarding pass is a poster with its buy button under it, so the button
   needs the breathing room the hidden spacer used to provide. */
.clb-pirate-tier .elementor-widget-button {
	margin-top: 16px !important;
}
.clb-pirate-tier .elementor-widget-button .elementor-button {
	width: 100%;
	justify-content: center;
}

/* Side by side the columns have no gutter of their own, so the boxes met at a
   shared edge and read as one wide box split down the middle. */
@media (min-width: 768px) {
	.clb-pirate-tier > .elementor-widget-wrap,
	.clb-pirate-tier > .elementor-column-wrap {
		margin: 0 9px;
	}
}

@media (max-width: 767px) {
	.clb-pirate-tier > .elementor-widget-wrap,
	.clb-pirate-tier > .elementor-column-wrap {
		padding: 18px 16px 20px !important;
	}
	/* Columns stack with no gap of their own on a phone. */
	.clb-pirate-tier {
		margin-bottom: 18px;
	}
	.clb-pirate-tier:last-child {
		margin-bottom: 0;
	}
}

/* Sponsorship buttons sit inside the tier box, same rhythm as a boarding pass
   button. The claimed tier is an outline rather than a solid, so it does not
   compete with the two that are still open. */
.clb-pirate-tier .clb-pirate-cta {
	margin-top: auto !important;
	padding-top: 16px;
}
.clb-pirate-tier .clb-pirate-cta .elementor-button {
	width: 100%;
	justify-content: center;
}
.clb-pirate-tier .clb-pirate-claimed .elementor-button {
	opacity: 0.85;
}

/* The tier boxes are flex columns so the buttons line up along the bottom
   even when one poster is shorter than the others. */
.clb-pirate-tier > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
}

/* The heading, the skull, and two spacers stacked with Elementor's own 20px
   widget margins put about 107px between a section heading and the first box
   on a phone. This takes roughly 60px of that back. */
@media (max-width: 767px) {
	.clb-pirate-tier-section {
		padding-top: 38px !important;
		padding-bottom: 38px !important;
	}
	.clb-pirate-tier-section .elementor-widget-spacer {
		display: none !important;
	}
	.clb-pirate-tier-section .elementor-widget-heading {
		margin-bottom: 8px !important;
	}
	.clb-pirate-tier-section .elementor-widget-icon {
		margin-bottom: 12px !important;
	}
}

/* ==========================================================================
   Home: the collaboration animation  [clb_collab]
   ========================================================================== */
.clb-collab {
	width: 100%;
	margin: 0 auto;
	line-height: 0;
}

.clb-collab svg {
	display: block;
	width: 100% !important;
	height: auto !important;
}

/* Under the button on a phone, where the column stacks. Smaller than the
   hourglass it replaces, which took most of a screen on its own. */
@media (max-width: 767px) {
	.clb-collab {
		max-width: 300px !important;
		margin-top: 6px;
	}
}

/* The bottom bar reads as one centred line at every width: status, copyright
   and the two firms that built the site, with the social icon under it. */
#footer-nav .footer-site-info {
	text-align: center;
}
/* div in the selector on purpose: the general column rule above carries an
   element as well as the classes, so a class only selector loses to it. */
#footer-nav .row > div.col-md-push-9 {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	margin-top: 4px !important;
}