/* ==========================================================================
   Header — scoped to the redesigned homepage template only
   Transparent + white nav text while floating over the hero image on load;
   once the user scrolls, behaves like every other page's header (opaque
   white, hides on scroll-down, reveals on scroll-up — see the
   body.home-redesign-template .site-header.hide-header rules below and the
   scroll listener in assets/js/home-redesign-nav.js) instead of staying
   permanently pinned in a dark navy bar.
   ========================================================================== */

body.home-redesign-template .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	box-shadow: none;
	border: 0;
	transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Visual breathing room only — kept off .site-header itself so it doesn't
   inflate header.innerHeight(), which assets/js/custom.js's sticky-header
   scroll logic reads to decide when to switch to the fixed/solid state. */
body.home-redesign-template .site-header .corp-container {
	padding-top: 2.5rem;
}

body.home-redesign-template .site-header.fixed .corp-container {
	padding-top: 0;
}

/* Fixed/scrolled state matches every other page's header exactly (opaque
   white, same shadow) instead of the dark navy used while floating over
   the hero — see style.css .site-header.fixed for the values being mirrored
   here. */
body.home-redesign-template .site-header.fixed {
	position: fixed;
	background: #fff;
	box-shadow: 0px 0px 10px -5px #000;
}

/* Slide the header off-screen on scroll-down, back on scroll-up — mirrors
   the site-wide sticky_header() behavior in custom.js, which toggles this
   class but (site-wide) has no visual rule backing it today; defining it
   here so the redesign template is the one place it's actually visible.
   translateY rather than display/visibility so the slide is animated via
   the transition on .site-header above. */
body.home-redesign-template .site-header.hide-header {
	transform: translateY(-100%);
}

/* Nav text is white only while the header is transparent (floating over the
   dark hero image). Once fixed (opaque white background), it needs to flip
   back to the site's normal nav color (#1f299c, matching
   .main-navigation ul li a in style.css) — "unset" doesn't work here since
   it resets to the *inherited* value, not back to that other same-element
   rule, so the real value has to be re-applied explicitly. */
body.home-redesign-template .main-navigation ul li a,
body.home-redesign-template .header-right ul li a {
	color: #fff;
	transition: color 0.3s ease;
}

body.home-redesign-template .site-header.fixed .main-navigation ul li a,
body.home-redesign-template .site-header.fixed .header-right ul li a {
	color: #1f299c;
}

/* "Join Collective" button: white text throughout (both the transparent
   and fixed header states) — its background/hover color come entirely from
   style.css's own ".header-right ul li:last-of-type a" rule (solid #1f299c
   at rest, orange on hover). Placed after and written with matching
   specificity plus :last-of-type so it wins over the broader
   ".header-right ul li a" rule above for this one link, in both header
   states — the earlier :not(:last-of-type) attempt didn't reliably win
   because the two selectors' specificity wasn't actually different enough
   to guarantee cascade order; this explicit .fixed-scoped version removes
   the ambiguity. */
body.home-redesign-template .header-right ul li:last-of-type a,
body.home-redesign-template .site-header.fixed .header-right ul li:last-of-type a {
	color: #fff;
}

body.home-redesign-template #mobile-menu-button span {
	background: #fff;
	transition: background 0.3s ease;
}

body.home-redesign-template .site-header.fixed #mobile-menu-button span {
	background: var(--blue);
}

/* ==========================================================================
   Hero — redesigned homepage (patch.io-inspired layout)
   ========================================================================== */

.hero-redesign {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--blue);
}

.hero-redesign__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero-redesign__bg--mobile {
	display: none;
}

.hero-redesign__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hero-overlay, transparent);
	pointer-events: none;
}

.hero-redesign__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-bottom: 3rem;
}

.hero-redesign__text {
	max-width: 72rem;
}

.hero-redesign__title {
	font-family: BostonRegular;
	font-weight: 400;
	color: #fff;
	font-size: clamp(2.8rem, 6vw, 6.25rem);
	line-height: 1.08;
	margin: 0 0 1.75rem;
}

.hero-redesign__title-bold {
	font-family: BostonBlack;
	font-weight: 400;
	color: #fff;
}

.hero-redesign__subtitle {
	font-size: 1.375rem;
	color: #fff;
	max-width: 42rem;
	margin: 0 0 2.5rem;
}

.hero-redesign__cta {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background: var(--primary);
	background-image: linear-gradient(0deg, rgb(166, 65, 32) 0%, rgb(240, 89, 40) 100%);
	padding: 1.438rem 3.188rem;
	border-radius: 100px;
	outline: none;
	transition: all 0.4s linear;
	-webkit-tap-highlight-color: transparent;
}

/* :focus (not just :hover) needs an explicit reset — a clicked link keeps
   the browser's focus state until something else takes focus, so without
   this the brightened hover look stays stuck "on" after every click
   instead of only showing during an actual mouse-over. :focus-visible below
   still gives keyboard users a visible indicator. */
.hero-redesign__cta:visited {
	color: #fff;
}

.hero-redesign__cta:focus {
	color: #fff;
	filter: none;
}

.hero-redesign__cta:hover {
	color: #fff;
	filter: brightness(1.08);
}

.hero-redesign__cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/* Logo strip — full-bleed, single row, continuous marquee with edge fade
   (patch.io-style: logos scroll edge-to-edge and fade in/out at the sides
   rather than being cropped by a hard container edge). */

.hero-redesign__logos {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding: 1.75rem 0 2.5rem;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.hero-redesign__logos-track {
	display: flex;
	align-items: center;
	gap: 6.5rem;
	width: max-content;
	padding-left: 3.75rem;
	will-change: transform;
}

.hero-redesign__logo-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 5rem;
}

/* max-width used to be 12.5rem, which capped wide logos (e.g. a horizontal
   wordmark+tagline like SBI Mutual Fund) narrower than their natural width
   at height:3.75rem — since object-fit:contain then has to shrink BOTH
   dimensions to keep the aspect ratio inside that narrower box, the logo
   also rendered shorter than square/tall logos, even though height was set
   the same for every logo. Raised so width only ever constrains truly
   extreme wordmarks, and normal wide logos can reach the full height. */
.hero-redesign__logo {
	height: 3.75rem;
	width: auto;
	max-width: 18rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.hero-redesign__logo-wrap:hover .hero-redesign__logo {
	opacity: 1;
}

@media (max-width: 782px) {
	.hero-redesign {
		min-height: 85vh;
	}

	.hero-redesign.has-mobile-bg .hero-redesign__bg--desktop {
		display: none;
	}

	.hero-redesign__bg--mobile {
		display: block;
	}

	.hero-redesign__title {
		font-size: clamp(2rem, 8vw, 3rem);
	}

	.hero-redesign__cta {
		padding: 1.1rem 2.2rem;
		font-size: 1rem;
	}

	.hero-redesign__logos-track {
		gap: 3.5rem;
	}

	.hero-redesign__logo {
		height: 2.25rem;
		max-width: 10.5rem;
	}
}

/* ==========================================================================
   Systems/Approach section — auto-advancing pointer accordion
   (patch.io "The Patch System" pattern: numbered accordion, left column;
   swapping image, right column; timed progress bar auto-advances pointers.)
   ========================================================================== */

.systems-redesign {
	background: #fff;
	padding: 6rem 0;
}

.systems-redesign .systems-redesign__container.custom-container {
	display: flex;
	gap: 3.5rem;
	align-items: stretch;
}

.systems-redesign__left {
	flex: 0 0 46%;
	max-width: 46%;
	display: flex;
	flex-direction: column;
}

.systems-redesign__right {
	flex: 1;
	display: flex;
	align-items: stretch;
}

.systems-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.systems-redesign__subheading {
	font-size: 1.125rem;
	color: var(--blue);
	opacity: 0.7;
	margin: 0 0 2rem;
	line-height: 1.5;
}

.systems-redesign__cta {
	display: inline-block;
	align-self: flex-start;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--primary);
	background: transparent;
	border: 1px solid var(--primary);
	padding: 0.875rem 1.75rem;
	border-radius: 100px;
	transition: all 0.3s linear;
	margin-bottom: 2.5rem;
}

.systems-redesign__cta:hover,
.systems-redesign__cta:focus {
	color: #fff;
	background: var(--primary);
}

.systems-redesign__pointers {
	border-top: 1px solid rgba(25, 22, 65, 0.12);
}

.systems-redesign__pointer {
	border-bottom: 1px solid rgba(25, 22, 65, 0.12);
	border-left: 4px solid transparent;
	transition: border-left-color 0.3s ease, background 0.3s ease;
}

/* Left accent bar + tinted background for whichever pointer is actually
   active/expanded. */
.systems-redesign__pointer.is-active {
	border-left-color: var(--primary);
	background: rgba(240, 89, 40, 0.06);
}

.systems-redesign__pointer-header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	background: none;
	border: 0;
	outline: none;
	box-shadow: none;
	cursor: pointer;
	padding: 1.0625rem 1.25rem;
	text-align: left;
	transition: background 0.3s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

/* Light-orange hover feedback, and left accent bar + tinted background for
   whichever pointer is actually the active/expanded one. The button stays
   focused after a mouse click (normal browser behavior) — without an
   explicit :focus reset here, some browsers render their own default focus
   style (a solid, much more saturated block, not our 6%-opacity tint) for
   as long as focus remains, i.e. until the user clicks elsewhere. Resetting
   plain :focus (not just :focus-visible) to "no visual change" fixes that;
   :focus-visible below still gives keyboard users a visible ring. */
.systems-redesign__pointer-header:focus {
	background: none;
	outline: none;
	box-shadow: none;
}

.systems-redesign__pointer-header:hover {
	background: rgba(240, 89, 40, 0.06);
}

.systems-redesign__pointer-header:focus-visible {
	box-shadow: inset 0 0 0 2px var(--primary);
}

.systems-redesign__pointer-number {
	font-size: 0.9375rem;
	font-weight: 600;
	color: rgba(25, 22, 65, 0.35);
	transition: color 0.3s ease;
}

.systems-redesign__pointer-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: rgba(25, 22, 65, 0.45);
	text-transform: none;
	transition: color 0.3s ease;
}

.systems-redesign__pointer.is-active .systems-redesign__pointer-number,
.systems-redesign__pointer.is-active .systems-redesign__pointer-title {
	color: var(--blue);
}

.systems-redesign__pointer-description {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	margin-top: 0;
	overflow: hidden;
	transition: grid-template-rows 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.systems-redesign__pointer.is-active .systems-redesign__pointer-description {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.875rem;
}

/* The grid-rows transition above needs an element with real (non-hidden)
   overflow to measure against, so the fixed-height cap + scroll lives on
   this inner wrapper instead of the animating element itself — putting
   overflow:auto directly on the grid row would fight the 0fr/1fr
   transition. Cap (~5 lines at this line-height) means the section's
   overall height never shifts between pointers regardless of how long
   staff write a given description — longer text scrolls internally
   instead of growing the section. */
.systems-redesign__pointer-description-inner {
	max-height: 8.5rem;
	overflow-y: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-bottom: 1.375rem;
	/* Grid items default to min-height:auto, which respects intrinsic
	   content size (here, the mobile pointer image's natural height) and
	   overrides the parent's grid-template-rows:0fr collapse when
	   inactive. min-height:0 lets this wrapper actually shrink to nothing
	   instead of forcing the row open regardless of the 0fr track. */
	min-height: 0;
}

.systems-redesign__pointer-description p {
	font-size: 1.0625rem;
	color: rgba(25, 22, 65, 0.75);
	margin: 0 0 0.75rem;
	line-height: 1.6;
}

.systems-redesign__pointer-description p:last-child {
	margin-bottom: 0;
}

.systems-redesign__pointer-description strong {
	color: var(--blue);
	font-weight: 700;
}

/* Inline per-pointer image — hidden on desktop, where the shared image
   stack in .systems-redesign__right already shows the active pointer's
   image alongside the list. Shown only below 992px (see the media query),
   where that right-hand column gets hidden entirely and the section
   becomes single-column, so without an inline copy the image would sit
   below the whole pointer list instead of next to the pointer a user just
   tapped. */
.systems-redesign__pointer-image-mobile {
	display: none;
}

/* No fixed aspect-ratio: the pointer list's rendered height varies with
   font-size/line-wrapping across viewport widths in a way a static ratio
   can never track, so the image instead stretches to match its sibling
   column's actual height (align-items: stretch on both .systems-
   redesign__container and .systems-redesign__right, flex: 1 here) rather
   than guessing at a ratio that only looks right at one width. A min-height
   keeps it from going too short if the list is ever very brief. */
.systems-redesign__image-stack {
	position: relative;
	width: 100%;
	flex: 1;
	min-height: 22rem;
	border-radius: 1rem;
	overflow: hidden;
}

.systems-redesign__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.systems-redesign__image.is-active {
	opacity: 1;
}

@media (max-width: 992px) {
	.systems-redesign__container {
		flex-direction: column;
		gap: 2.5rem;
	}

	.systems-redesign__left {
		flex: 1 1 auto;
		max-width: 100%;
	}

	/* Shared image stack moves inline per-pointer instead (see
	   .systems-redesign__pointer-image-mobile below) so the active
	   pointer's image sits directly under its own expanded description
	   rather than in a separate column below the entire list. */
	.systems-redesign__right {
		display: none;
	}

	.systems-redesign__pointer.is-active .systems-redesign__pointer-image-mobile {
		display: block;
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: 1rem;
		margin-top: 1rem;
	}
}

@media (max-width: 782px) {
	.systems-redesign {
		padding: 3.5rem 0;
	}

	.systems-redesign__headline {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}

	.systems-redesign__pointer-title {
		font-size: 1rem;
	}

	/* The desktop height cap on the description text is paired with the
	   fixed image column staying put at a constant size — once the image
	   moves inline (above) and the layout goes single-column, letting the
	   section grow with content reads better than clipping the image
	   inside a short scroll box. */
	.systems-redesign__pointer-description-inner {
		max-height: none;
		overflow-y: visible;
	}
}

/* ==========================================================================
   Experts carousel — redesigned homepage
   (Swiper-driven horizontal carousel: image, name, topic per card; hover
   zooms the image; prev/next buttons live in the section header, next to
   the heading, rather than overlaid on the carousel itself.)
   ========================================================================== */

.experts-redesign {
	background: #fff;
	padding: 6rem 0;
	overflow: hidden;
}


.experts-redesign__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.experts-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.experts-redesign__subheading {
	font-size: 1.125rem;
	color: var(--blue);
	opacity: 0.7;
	margin: 0;
	line-height: 1.5;
	max-width: 40rem;
}

.experts-redesign__nav {
	display: flex;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.experts-redesign__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: none;
	background: var(--blue);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease;
	line-height: 1;
	appearance: none;
}

.experts-redesign__nav-btn svg {
	display: block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.experts-redesign__nav-btn:hover {
	background: var(--primary);
	color: #fff;
}

.experts-redesign__nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.experts-redesign__swiper {
	overflow: visible;
	/* Let the last slide's hover-zoom breathe instead of getting clipped by
	   the swiper container's default overflow:hidden. */
	padding-bottom: 0.5rem;
}

.experts-redesign__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.experts-redesign__pagination .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(25, 22, 65, 0.2);
	opacity: 1;
	cursor: pointer;
	transition: all 0.3s ease;
}

.experts-redesign__pagination .swiper-pagination-bullet-active {
	width: 1.5rem;
	border-radius: 100px;
	background: var(--primary);
}

.experts-redesign__card {
	display: flex;
	flex-direction: column;
}

.experts-redesign__card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 3.9;
	border-radius: 0.75rem;
	overflow: hidden;
	background: rgba(25, 22, 65, 0.06);
}

.experts-redesign__card-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.experts-redesign__card:hover .experts-redesign__card-image img {
	transform: scale(1.06);
}

.experts-redesign__card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(25, 22, 65, 0) 55%, rgba(15, 12, 45, 0.85) 100%);
	pointer-events: none;
}

.experts-redesign__card-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5rem 1.25rem;
}

.experts-redesign__card-name {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: 1.375rem;
	line-height: 1.25;
	margin: 0 0 0.25rem;
}

.experts-redesign__card-topic {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	line-height: 1.4;
}

.experts-redesign__footer {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.experts-redesign__cta {
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background: var(--primary);
	background-image: linear-gradient(0deg, rgb(166, 65, 32) 0%, rgb(240, 89, 40) 100%);
	padding: 1.1rem 2.75rem;
	border-radius: 100px;
	transition: all 0.4s linear;
}

.experts-redesign__cta:hover,
.experts-redesign__cta:focus {
	color: #fff;
	filter: brightness(1.08);
}

@media (max-width: 782px) {
	.experts-redesign {
		padding: 3.5rem 0;
	}

	.experts-redesign__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.experts-redesign__headline {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}

	.experts-redesign__nav {
		align-self: flex-end;
	}

	.experts-redesign__card-name {
		font-size: 1.1875rem;
	}
}

/* ==========================================================================
   Reviews/testimonials — redesigned homepage
   (patch.io-style quote cards: large quote mark, review text, divider,
   reviewer avatar + name + designation, company logo bottom. Static 2-up
   grid, not a carousel — stacks to 1 column on mobile.)
   ========================================================================== */

.reviews-redesign {
	background: #fff;
	padding: 6rem 0;
	overflow: hidden;
}

.reviews-redesign__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.reviews-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.reviews-redesign__subheading {
	font-size: 1.125rem;
	color: var(--blue);
	opacity: 0.7;
	margin: 0;
	line-height: 1.5;
	max-width: 40rem;
}

.reviews-redesign__nav {
	display: flex;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.reviews-redesign__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: none;
	background: var(--blue);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease;
	line-height: 1;
	appearance: none;
}

.reviews-redesign__nav-btn svg {
	display: block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.reviews-redesign__nav-btn:hover {
	background: var(--primary);
	color: #fff;
}

.reviews-redesign__nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.reviews-redesign__swiper {
	overflow: hidden;
}

.reviews-redesign__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.reviews-redesign__pagination .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(25, 22, 65, 0.2);
	opacity: 1;
	cursor: pointer;
	transition: all 0.3s ease;
}

.reviews-redesign__pagination .swiper-pagination-bullet-active {
	width: 1.5rem;
	border-radius: 100px;
	background: var(--primary);
}

.reviews-redesign__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.reviews-redesign__card {
	display: flex;
	flex-direction: column;
	background: rgba(25, 22, 65, 0.03);
	border: 1px solid rgba(25, 22, 65, 0.08);
	border-radius: 1rem;
	padding: 2.5rem;
	/* Fixed floor so short reviews don't shrink the card — content-agnostic
	   like the Systems section's description cap, rather than a hardcoded
	   height, so it stays correct if review lengths change later. */
	min-height: 22rem;
}

.reviews-redesign__quote-mark {
	font-family: Georgia, serif;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.reviews-redesign__text {
	font-size: 1.125rem;
	color: var(--blue);
	line-height: 1.6;
	margin: 0 0 2rem;
	flex: 1;
}

.reviews-redesign__person {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(25, 22, 65, 0.1);
	margin-bottom: 1.5rem;
}

.reviews-redesign__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.reviews-redesign__person-text {
	display: flex;
	flex-direction: column;
}

.reviews-redesign__name {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: 1rem;
}

.reviews-redesign__designation {
	font-size: 0.875rem;
	color: rgba(25, 22, 65, 0.6);
}

.reviews-redesign__company-logo {
	height: 1.75rem;
	width: auto;
	max-width: 8rem;
	object-fit: contain;
}

@media (max-width: 782px) {
	.reviews-redesign {
		padding: 3.5rem 0;
	}

	.reviews-redesign__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.reviews-redesign__nav {
		align-self: flex-end;
	}

	.reviews-redesign__grid,
	.reviews-redesign__grid--mobile {
		grid-template-columns: 1fr;
	}

	.reviews-redesign__card {
		padding: 2rem;
	}

	.reviews-redesign__headline {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}
}

/* ==========================================================================
   Events/Bootcamps magazine gallery — redesigned homepage
   (grouped into "pages" of 5 images, each page a Swiper slide that snaps
   full-page via prev/next buttons — like flipping a magazine spread, not a
   continuous scroll. Each page is a 4x2 CSS Grid with one featured 2x2 tile;
   which of 3 hand-designed variants a page uses cycles a/b/c so the
   featured tile's position (left/right/center) varies page to page instead
   of always landing in the same spot. Same gradient-scrim + white-text
   overlay treatment as .experts-redesign cards. Each card is a GLightbox
   trigger grouped into one gallery.)
   ========================================================================== */

.gallery-redesign {
	background: #fff;
	padding: 6rem 0;
	overflow: hidden;
}


.gallery-redesign__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.gallery-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.gallery-redesign__subheading {
	font-size: 1.125rem;
	color: var(--blue);
	opacity: 0.7;
	margin: 0;
	line-height: 1.5;
	max-width: 40rem;
}

.gallery-redesign__nav {
	display: flex;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.gallery-redesign__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: none;
	background: var(--blue);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease;
	line-height: 1;
	appearance: none;
}

.gallery-redesign__nav-btn svg {
	display: block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.gallery-redesign__nav-btn:hover {
	background: var(--primary);
	color: #fff;
}

.gallery-redesign__nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.gallery-redesign__swiper {
	overflow: hidden;
}

.gallery-redesign__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 13rem);
	gap: 1.25rem;
}

.gallery-redesign__card {
	position: relative;
	display: block;
	border-radius: 0.75rem;
	overflow: hidden;
	cursor: pointer;
}

.gallery-redesign__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gallery-redesign__card:hover img {
	transform: scale(1.06);
}

.gallery-redesign__card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(25, 22, 65, 0) 55%, rgba(15, 12, 45, 0.85) 100%);
	pointer-events: none;
}

.gallery-redesign__card-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem;
}

.gallery-redesign__card-title {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0;
}

/* Variant A — featured tile on the left (cell 0). */
.gallery-redesign__grid--a .gallery-redesign__cell-0 {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
.gallery-redesign__grid--a .gallery-redesign__cell-1 { grid-column: 3; grid-row: 1; }
.gallery-redesign__grid--a .gallery-redesign__cell-2 { grid-column: 3; grid-row: 2; }
.gallery-redesign__grid--a .gallery-redesign__cell-3 { grid-column: 4; grid-row: 1; }
.gallery-redesign__grid--a .gallery-redesign__cell-4 { grid-column: 4; grid-row: 2; }
.gallery-redesign__grid--a .gallery-redesign__cell-0 .gallery-redesign__card-title { font-size: 1.5rem; }

/* Variant B — featured tile on the right (cell 4). */
.gallery-redesign__grid--b .gallery-redesign__cell-0 { grid-column: 1; grid-row: 1; }
.gallery-redesign__grid--b .gallery-redesign__cell-1 { grid-column: 1; grid-row: 2; }
.gallery-redesign__grid--b .gallery-redesign__cell-2 { grid-column: 2; grid-row: 1; }
.gallery-redesign__grid--b .gallery-redesign__cell-3 { grid-column: 2; grid-row: 2; }
.gallery-redesign__grid--b .gallery-redesign__cell-4 {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
}
.gallery-redesign__grid--b .gallery-redesign__cell-4 .gallery-redesign__card-title { font-size: 1.5rem; }

/* Variant C — featured tile in the center (cell 2). */
.gallery-redesign__grid--c .gallery-redesign__cell-0 { grid-column: 1; grid-row: 1; }
.gallery-redesign__grid--c .gallery-redesign__cell-1 { grid-column: 1; grid-row: 2; }
.gallery-redesign__grid--c .gallery-redesign__cell-2 {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
}
.gallery-redesign__grid--c .gallery-redesign__cell-3 { grid-column: 4; grid-row: 1; }
.gallery-redesign__grid--c .gallery-redesign__cell-4 { grid-column: 4; grid-row: 2; }
.gallery-redesign__grid--c .gallery-redesign__cell-2 .gallery-redesign__card-title { font-size: 1.5rem; }

.gallery-redesign__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.gallery-redesign__pagination .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(25, 22, 65, 0.2);
	opacity: 1;
	cursor: pointer;
	transition: all 0.3s ease;
}

.gallery-redesign__pagination .swiper-pagination-bullet-active {
	width: 1.5rem;
	border-radius: 100px;
	background: var(--primary);
}

@media (max-width: 992px) {
	.gallery-redesign__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 11rem);
	}

	.gallery-redesign__grid--a .gallery-redesign__cell-0,
	.gallery-redesign__grid--b .gallery-redesign__cell-4,
	.gallery-redesign__grid--c .gallery-redesign__cell-2 {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.gallery-redesign__grid--a .gallery-redesign__cell-1 { grid-column: 1; grid-row: 3; }
	.gallery-redesign__grid--a .gallery-redesign__cell-2 { grid-column: 2; grid-row: 3; }
	.gallery-redesign__grid--a .gallery-redesign__cell-3 { grid-column: 1; grid-row: 4; }
	.gallery-redesign__grid--a .gallery-redesign__cell-4 { grid-column: 2; grid-row: 4; }

	.gallery-redesign__grid--b .gallery-redesign__cell-0 { grid-column: 1; grid-row: 3; }
	.gallery-redesign__grid--b .gallery-redesign__cell-1 { grid-column: 2; grid-row: 3; }
	.gallery-redesign__grid--b .gallery-redesign__cell-2 { grid-column: 1; grid-row: 4; }
	.gallery-redesign__grid--b .gallery-redesign__cell-3 { grid-column: 2; grid-row: 4; }

	.gallery-redesign__grid--c .gallery-redesign__cell-0 { grid-column: 1; grid-row: 3; }
	.gallery-redesign__grid--c .gallery-redesign__cell-1 { grid-column: 2; grid-row: 3; }
	.gallery-redesign__grid--c .gallery-redesign__cell-3 { grid-column: 1; grid-row: 4; }
	.gallery-redesign__grid--c .gallery-redesign__cell-4 { grid-column: 2; grid-row: 4; }

	.gallery-redesign__grid {
		grid-template-rows: repeat(4, 9rem);
	}
}

/* Mobile-only grid — built at runtime by home-redesign-nav.js, which
   regroups every page's cards into one image per swipe (see the note there)
   instead of reusing the desktop 4x2 magazine layout, which doesn't fit a
   narrow screen. A 3-per-page grid was tried first but cropped each image
   too much at that size — one full-width card per slide reads much better
   on a narrow screen. */
.gallery-redesign__grid--mobile {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: none;
}

.gallery-redesign__grid--mobile .gallery-redesign__card {
	grid-column: 1;
	grid-row: auto;
	height: 34rem;
}

@media (max-width: 600px) {
	.gallery-redesign {
		padding: 3.5rem 0;
	}

	.gallery-redesign__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.gallery-redesign__nav {
		align-self: flex-end;
	}

	.gallery-redesign__headline {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}
}

/* ==========================================================================
   "Meet the CEO" — redesigned homepage
   (ported from the original homepage's .the_meet section in style.css,
   same formatting/layout, rewritten under a .meet-redesign scope so it
   doesn't depend on / interfere with the global .the_meet rules the old
   homepage template still uses.)
   ========================================================================== */

.meet-redesign {
	padding: 6rem 0;
	background: #fff;
}

/* No max-width override here (unlike the other *-redesign sections) —
   this section reuses the old homepage's .the_meet padding values verbatim
   (see .meet-redesign .content below), which were tuned for the site's
   standard wide .custom-container (max-width:100%, 15rem side padding).
   Capping it at 75rem like the other sections squeezed the box narrower
   than those padding values were designed for, making the same spacing
   read as cramped/centered instead of naturally wide. */

.meet-redesign .section-header {
	text-align: center;
	padding-bottom: 1.5rem;
}

.meet-redesign h2 {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

.meet-redesign .custom-row {
	display: grid;
	grid-template-columns: auto 23.775rem;
	align-items: center;
	grid-column-gap: 2.5rem;
}

.meet-redesign .content {
	background: #fdeee9;
	padding: 2.5rem 8.75rem 2.375rem 2.625rem;
	border-radius: 1rem;
}

.meet-redesign .quote-icon {
	background: url(../images/qutote-icon.png) no-repeat center;
	background-size: 4.75rem 4.125rem;
	width: 4.75rem;
	height: 4.125rem;
	display: flex;
	align-items: center;
}

.meet-redesign .meet_content_row {
	margin: 1.25rem 0 4.063rem;
	font-size: 1.125rem;
	color: var(--blue);
	line-height: 1.6;
}

.meet-redesign .ceo-info strong {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--blue);
	display: block;
}

.meet-redesign .ceo-info span {
	font-size: 0.938rem;
	color: rgba(25, 22, 65, 0.55);
	display: block;
	line-height: normal;
}

.meet-redesign .meet_image {
	text-align: right;
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
}

.meet-redesign .meet_image img {
	border-radius: 50%;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.meet-redesign .content {
		padding: 1.875rem 0.9375rem;
	}
}

@media (max-width: 782px) {
	.meet-redesign {
		padding: 3.5rem 0;
	}

	.meet-redesign .custom-row {
		display: flex;
		flex-direction: column-reverse;
		background: #fdeee9;
		padding: 2.5rem 1.25rem;
		gap: 1.875rem 0;
		border-radius: 1rem;
	}

	.meet-redesign .content {
		width: 100%;
		background: transparent;
		padding: 0;
		text-align: center;
	}

	.meet-redesign .quote-icon {
		margin: 0 auto;
	}

	.meet-redesign .meet_content_row {
		margin: 0.9375rem 0;
	}

	.meet-redesign .meet_image {
		max-width: 60%;
		margin: 0 auto;
		text-align: center;
		justify-content: center;
	}

	.meet-redesign .section-header {
		padding-bottom: 0.625rem;
	}

	.meet-redesign h2 {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}
}

/* ==========================================================================
   Instagram feed — redesigned homepage
   (wraps the Smash Balloon [instagram-feed] shortcode, same as the original
   homepage's .instagram_feed_row block — the feed grid itself is styled by
   the plugin's own CSS/admin customizer, not overridden here. Only the
   wrapper spacing and optional heading are this theme's concern.)
   ========================================================================== */

.instagram-redesign {
	padding: 6rem 0;
	background: #fff;
}


.instagram-redesign__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.5rem;
}

.instagram-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	margin: 0;
}

@media (max-width: 782px) {
	.instagram-redesign {
		padding: 3.5rem 0;
	}

	.instagram-redesign__headline {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}
}

/* ==========================================================================
   "Beyond the brief" CTA banner — redesigned homepage
   (deliberate pattern-break: full-bleed dark photo section, centered
   headline/body/CTA, sits between the white sections around it.)
   ========================================================================== */

.cta-banner-redesign {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 0;
	overflow: hidden;
	background: #1d1b56;
}

.cta-banner-redesign__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Navy-to-bright-blue blend from the brand palette (#1d1b56 -> #0373ff)
   instead of the previous off-palette rgba(15,12,45,...) near-black tint. */
.cta-banner-redesign__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(29, 27, 86, 0.85) 0%, rgba(3, 115, 255, 0.55) 100%);
	pointer-events: none;
}

.cta-banner-redesign__content.custom-container {
	position: relative;
	z-index: 2;
	text-align: center;
}

.cta-banner-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1.15;
	margin: 0 0 1.5rem;
}

.cta-banner-redesign__body {
	max-width: 60rem;
	font-size: 1.125rem;
	line-height: 1.75;
	margin: 0 auto 2.5rem;
}

.cta-banner-redesign__body,
.cta-banner-redesign__body p {
	color: rgba(255, 255, 255, 0.85) !important;
}

.cta-banner-redesign__body p {
	margin: 0 0 1.25rem;
}

.cta-banner-redesign__body p:last-child {
	margin-bottom: 0;
}

.cta-banner-redesign__cta {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background: var(--primary);
	background-image: linear-gradient(0deg, rgb(166, 65, 32) 0%, rgb(240, 89, 40) 100%);
	padding: 1.25rem 3rem;
	border-radius: 100px;
	outline: none;
	transition: all 0.4s linear;
	-webkit-tap-highlight-color: transparent;
}

/* :focus reset (see the matching note on .hero-redesign__cta) — without
   this the brightened look sticks after every click instead of only
   showing on actual hover. */
.cta-banner-redesign__cta:visited {
	color: #fff;
}

.cta-banner-redesign__cta:focus {
	color: #fff;
	filter: none;
}

.cta-banner-redesign__cta:hover {
	color: #fff;
	filter: brightness(1.08);
}

.cta-banner-redesign__cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

@media (max-width: 782px) {
	.cta-banner-redesign {
		min-height: auto;
		padding: 4rem 0;
	}

	.cta-banner-redesign__headline {
		font-size: clamp(1.875rem, 7vw, 2.5rem);
	}

	.cta-banner-redesign__body {
		font-size: 1rem;
	}

	.cta-banner-redesign__cta {
		padding: 1.1rem 2.2rem;
		font-size: 1rem;
	}
}

/* ==========================================================================
   Process / "how we work" section — redesigned homepage
   (a shorter companion to Systems: statement headline, short paragraph,
   horizontal step flow with arrow connectors between steps. Background is
   plain white by default — the alternating light tint, when it applies, now
   comes from the shared .home-alt-tint rule, not a rule hardcoded here.)
   ========================================================================== */

.process-redesign {
	background: #fff;
	padding: 6rem 0;
}

.process-redesign__container.custom-container {
	text-align: center;
}

.process-redesign__headline {
	font-family: BostonBold;
	font-weight: 400;
	color: var(--blue);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.2;
	margin: 0 auto 1.25rem;
	max-width: 60rem;
}

.process-redesign__body {
	font-size: 1.125rem;
	color: var(--blue);
	opacity: 0.75;
	line-height: 1.7;
	margin: 0 auto 3rem;
	max-width: 60rem;
}

.process-redesign__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
}

.process-redesign__step {
	font-family: BostonBold;
	font-weight: 400;
	color: #fff;
	font-size: 1.125rem;
	padding: 0.75rem 1.5rem;
	border-radius: 100px;
	background: var(--primary);
	background-image: linear-gradient(0deg, rgb(166, 65, 32) 0%, rgb(240, 89, 40) 100%);
	border: none;
}

.process-redesign__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--blue);
	flex: 0 0 auto;
}

.process-redesign__arrow svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

@media (max-width: 782px) {
	.process-redesign {
		padding: 3.5rem 0;
	}

	.process-redesign__headline {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}

	.process-redesign__body {
		font-size: 1rem;
	}

	.process-redesign__flow {
		flex-direction: column;
	}

	.process-redesign__step {
		width: 100%;
	}

	.process-redesign__arrow svg {
		transform: rotate(90deg);
	}
}

/* ==========================================================================
   Alternating section tint — shared across all plain-white sections
   (Systems, Experts, Reviews, Gallery, Meet, Instagram, Process). Each
   section template outputs this class on its own root element when
   $args['section_index'] is odd (see home-page-redesign.php for how that
   index is computed — it counts every section on the page, including
   Hero/CTA-banner, so the rhythm stays consistent regardless of what staff
   insert between white sections). One shared rule here instead of a
   hardcoded background per section, so any new white-background section
   type added later joins the alternation automatically just by outputting
   this same class — no new CSS needed per section. Placed at the end of
   the file (after every section's own "background: #fff" rule) so it wins
   by source order without needing !important.
   ========================================================================== */

body.home-redesign-template .home-alt-tint {
	background: rgba(240, 89, 40, 0.05);
}