/**
 * CGP Homepage V2 patterns.
 * Extends cgp-beaver-pattern-library.css. Tokens come from that file.
 *
 * Beaver wraps column children in > .fl-col-content and module children in
 * > .fl-module-content. Grid and card chrome must target those wrappers, not
 * the .fl-col / .fl-module elements the CSS class actually lands on.
 */

/* ============================================================ normalisation
   Beaver's stylesheet loads after this file, so these rules are scoped to
   .cgp-hv2-page to win on specificity without leaking onto other pages.
   Everything below establishes one consistent rhythm: a single section padding
   scale, full-width columns, and predictable spacing between modules. */

.cgp-hv2-page {
	--hv2-section-y: clamp(3.5rem, 7vw, 6rem);
	--hv2-stack: 1.25rem;
}

/* One vertical rhythm for every section. */
.cgp-hv2-page .fl-row > .fl-row-content-wrap {
	padding-top: var(--hv2-section-y);
	padding-bottom: var(--hv2-section-y);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* The hero and the logo rail set their own vertical padding. */
.cgp-hv2-page .cgp-hv2-logorail > .fl-row-content-wrap {
	padding-top: 2.75rem;
	padding-bottom: 2.75rem;
}

/* A column that is alone in its group should fill the row; width-limiting then
   happens on .fl-col-content. Columns in a multi-column group keep the widths
   Beaver assigned them, so the split rows are untouched. */
.cgp-hv2-page .fl-col-group > .fl-col:only-child {
	width: 100%;
	max-width: none;
	float: none;
}

/* Beaver gives every module a bottom margin that fights the stack below. */
.cgp-hv2-page .fl-module {
	margin: 0 0 var(--hv2-stack);
}

.cgp-hv2-page .fl-module:last-child {
	margin-bottom: 0;
}

/* Cards manage their own internal spacing, so neutralise the stack there. */
.cgp-hv2-page .cgp-bb-card-grid .fl-module {
	margin-bottom: 0;
}

/* A button module is a flex item too, so without this it stretches the full
   column width instead of hugging its label. */
.cgp-hv2-page .fl-module-button {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.cgp-hv2-page .cgp-bb-centered > .fl-col-content .fl-module-button {
	align-self: center;
}

/* Beaver makes .fl-col-content a column flex container, so modules are flex
   items and stretch to full width by default. Centred sections need their
   items centred rather than stretched, or buttons and short blocks span the
   whole column. */
.cgp-hv2-page .cgp-bb-centered > .fl-col-content {
	align-items: center;
}

/* Modules that contain their own full-width grid must opt back out of the
   centring above, or they shrink to their content and the grid collapses to
   fewer columns. */
.cgp-hv2-page .cgp-hv2-credbar__inner,
.cgp-hv2-page .cgp-hv2-logorail__rail,
.cgp-hv2-page .cgp-hv2-logorail__label {
	align-self: stretch;
	width: 100%;
}

/* Left-aligned sections keep items stretched but constrain the text measure. */
.cgp-hv2-page .cgp-bb-reading-column > .fl-col-content {
	max-width: 780px;
	align-items: stretch;
}

/* Grids should span the full row, not the reading measure. */
.cgp-hv2-page .cgp-bb-card-grid > .fl-col-content {
	max-width: none;
}

.cgp-hv2-page .fl-row-content {
	width: 100%;
}

/* Headings and paragraphs: tighten the default theme spacing. */
.cgp-hv2-page .fl-rich-text p:last-child {
	margin-bottom: 0;
}

.cgp-hv2-page .cgp-bb-eyebrow p {
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- hero */
/* The shared .cgp-bb-hero pattern paints a flat navy background and caps
   copy width for a left-aligned hero. V2 is a centered photo hero, so both
   are overridden here. The photo itself is injected by cgp-home-v2.php so
   the attachment URL stays correct across environments. */
.cgp-hv2-hero > .fl-row-content-wrap {
	background-color: var(--cgp-bb-navy);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	min-height: min(720px, calc(100svh - var(--cgp-site-header-height, 88px)));
}

.cgp-hv2-hero .fl-rich-text,
.cgp-hv2-hero .fl-heading {
	max-width: none;
}

/* The shared hero caps the headline at 64px. This scales further at both ends:
   larger on wide screens, and still comfortable on small ones. The svh term
   keeps it from overwhelming short landscape viewports. */
.cgp-hv2-page .cgp-hv2-hero h1 {
	max-width: 20ch;
	margin: 0 auto 1.75rem;
	font-size: clamp(2.35rem, min(6.1vw, 11.5svh), 5.25rem);
	line-height: 1.03;
	letter-spacing: -0.015em;
}

.cgp-hv2-hero .cgp-bb-lede p {
	margin-inline: auto;
}

/* The column must stay full width so the auto margins below actually have room
   to centre the copy inside the 1200px row rather than pinning it left. */
.cgp-hv2-hero__copy {
	width: 100%;
	max-width: none;
}

.cgp-hv2-hero__copy > .fl-col-content {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	padding-inline: 1.5rem;
}

/* Hero breathing room: the stack is eyebrow -> headline -> lede -> CTAs, with
   each gap scaling with the viewport so the spacing holds at every width. */
.cgp-hv2-page .cgp-hv2-hero__copy > .fl-col-content {
	padding-block: clamp(4rem, 9vh, 7.5rem);
}

.cgp-hv2-page .cgp-hv2-hero__eyebrow p {
	color: var(--cgp-bb-aqua);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: clamp(0.75rem, 0.95vw, 0.9375rem);
	margin: 0 0 clamp(1.1rem, 2.2vh, 1.9rem);
}

.cgp-hv2-page .cgp-hv2-hero__headline {
	margin-bottom: clamp(1.4rem, 2.8vh, 2.25rem) !important;
}

.cgp-hv2-page .cgp-hv2-hero .cgp-bb-lede {
	margin-bottom: clamp(2rem, 4vh, 3rem) !important;
}

.cgp-hv2-page .cgp-hv2-hero .cgp-bb-lede p {
	font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
	line-height: 1.55;
	max-width: 60ch;
}

/* Paired CTAs. Both live in one module (see the importer) so flex cannot pull
   them apart; they sit side by side and wrap together on narrow screens. */
.cgp-hv2-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
	margin-top: 0.5rem;
}

.cgp-hv2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.9rem;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cgp-hv2-btn--primary {
	background: var(--cgp-bb-red);
	border-color: var(--cgp-bb-red);
	color: var(--cgp-bb-white);
}

.cgp-hv2-btn--primary:hover,
.cgp-hv2-btn--primary:focus {
	background: var(--cgp-bb-red-hover);
	border-color: var(--cgp-bb-red-hover);
	color: var(--cgp-bb-white);
}

.cgp-hv2-btn--secondary {
	background: transparent;
	border-color: var(--cgp-bb-white);
	color: var(--cgp-bb-white);
}

.cgp-hv2-btn--secondary:hover,
.cgp-hv2-btn--secondary:focus {
	background: var(--cgp-bb-white);
	color: var(--cgp-bb-navy);
}

/* -------------------------------------------------------- credibility bar */
.cgp-hv2-credbar > .fl-row-content-wrap {
	background: var(--cgp-bb-navy);
}

.cgp-hv2-credbar__list {
	list-style: none;
	margin: 0;
	padding: 2.25rem 0;
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	text-align: left;
}

.cgp-hv2-credbar__list li {
	border-left: 3px solid var(--cgp-bb-aqua);
	padding-left: 1rem;
}

.cgp-hv2-credbar__list strong {
	display: block;
	color: var(--cgp-bb-white);
	font-size: 1.0625rem;
	margin-bottom: 0.25rem;
}

.cgp-hv2-credbar__list span {
	display: block;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* -------------------------------------------------------------- logo rail */
/* Several supplied marks are raster files with an opaque near-white ground
   rather than transparent PNGs, so the rail sits on white and the logos are
   desaturated to keep eight different brand palettes from fighting. */
.cgp-hv2-logorail > .fl-row-content-wrap {
	background: var(--cgp-bb-white);
	padding-top: 2.75rem;
	padding-bottom: 2.75rem;
}

.cgp-hv2-logorail__label p {
	color: var(--cgp-bb-slate);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.75rem;
	margin: 0 0 1.75rem;
}

.cgp-hv2-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 2.5rem;
	align-items: center;
}

.cgp-hv2-logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
}

.cgp-hv2-logos img {
	max-width: 165px;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Several marks ship on an opaque near-white ground rather than a
	   transparent one; multiply drops that ground out against the white row. */
	mix-blend-mode: multiply;
}

/* Per-mark optical sizing. Wide wordmarks are capped short; the two near-square
   files carry heavy built-in margins and need a taller cap to read at all. */
.cgp-logo--visa img { max-height: 34px; }
.cgp-logo--giphy img { max-height: 30px; }
.cgp-logo--impact img { max-height: 34px; }
.cgp-logo--cockroach img { max-height: 26px; }
.cgp-logo--wesleyan img { max-height: 44px; }
.cgp-logo--fcpeuro img { max-height: 32px; }
.cgp-logo--yieldstreet img { max-height: 30px; }

/* Yale ships on an opaque #EAE8E4 ground that multiply alone cannot clear.
   Lifting brightness pushes that ground to white so it disappears against the
   row, while the navy wordmark stays comfortably dark. */
.cgp-logo--yale img {
	max-height: 46px;
	filter: brightness(1.11);
}

/* ------------------------------------------------------------ AEO answer */
.cgp-hv2-section-heading {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	color: var(--cgp-bb-navy);
	margin: 0 0 1.25rem;
}

p.cgp-hv2-answer {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--cgp-bb-navy);
	border-left: 4px solid var(--cgp-bb-teal);
	padding-left: 1.25rem;
	margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------- grids */
.cgp-hv2-service-grid > .fl-col-content {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
}

.cgp-hv2-principal-grid > .fl-col-content {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
}

.cgp-hv2-quote-grid > .fl-col-content {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* ---------------------------------------------------------- service cards */
.cgp-hv2-service-card > .fl-module-content {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cgp-hv2-service-card > .fl-module-content:hover {
	box-shadow: 0 12px 28px rgba(0, 23, 48, 0.12);
	transform: translateY(-2px);
}

.cgp-hv2-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cgp-bb-mist);
}

.cgp-hv2-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cgp-hv2-service-card h3 {
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--cgp-bb-navy);
	margin: 1.5rem 1.5rem 0.6rem;
}

.cgp-hv2-service-card p {
	margin: 0 1.5rem 1rem;
	color: var(--cgp-bb-slate);
	line-height: 1.55;
}

.cgp-hv2-card__link {
	margin-top: auto !important;
	padding-bottom: 1.5rem;
}

.cgp-hv2-card__link a {
	color: var(--cgp-bb-teal);
	font-weight: 700;
	text-decoration: none;
}

.cgp-hv2-card__link a:hover {
	text-decoration: underline;
}

.cgp-hv2-card__link a::after {
	content: " \2192";
}

/* ------------------------------------------------------------- split row */
/* Vertically centre the image against the copy instead of letting it sit at
   the top of a much taller column, which was leaving a large empty band. */
.cgp-hv2-page .cgp-hv2-split__media > .fl-col-content,
.cgp-hv2-page .cgp-hv2-split__copy > .fl-col-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.cgp-hv2-page .cgp-hv2-split__copy > .fl-col-content {
	max-width: 620px;
}

.cgp-hv2-split__media img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.cgp-hv2-situations {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.cgp-hv2-situations li {
	position: relative;
	padding: 0 0 0 1.75rem;
	margin-bottom: 0.9rem;
	line-height: 1.55;
	color: var(--cgp-bb-slate);
}

.cgp-hv2-situations li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid var(--cgp-bb-teal);
}

/* ------------------------------------------------------------- principals */
.cgp-hv2-principal-card > .fl-module-content {
	text-align: center;
}

.cgp-hv2-principal__photo {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	margin: 0 auto 1.1rem;
	background: var(--cgp-bb-mist);
	overflow: hidden;
}

.cgp-hv2-principal__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.cgp-hv2-principal-card h3 {
	font-size: 1.1875rem;
	color: var(--cgp-bb-navy);
	margin: 0 0 0.25rem;
}

.cgp-hv2-principal-card p {
	color: var(--cgp-bb-slate);
	line-height: 1.5;
	margin: 0 0 0.6rem;
}

p.cgp-hv2-principal__role {
	color: var(--cgp-bb-teal);
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 0.6rem;
}

p.cgp-hv2-principal__line {
	font-style: italic;
	color: var(--cgp-bb-navy);
}

/* ----------------------------------------------------------------- quotes */
.cgp-hv2-quote-card > .fl-module-content {
	border-left: 4px solid var(--cgp-bb-teal);
}

.cgp-hv2-quote-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.cgp-hv2-quote-card p {
	color: var(--cgp-bb-navy);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-style: italic;
	margin: 0;
}

p.cgp-hv2-privacy {
	color: var(--cgp-bb-slate);
	font-size: 0.9375rem;
	margin: 1.75rem 0 1rem;
}

/* -------------------------------------------------------------------- FAQ */
.cgp-hv2-faq details {
	border-bottom: 1px solid var(--cgp-bb-line);
	padding: 1.1rem 0;
}

.cgp-hv2-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.cgp-hv2-faq summary::-webkit-details-marker {
	display: none;
}

.cgp-hv2-faq summary h3 {
	display: inline;
	font-size: 1.0625rem;
	color: var(--cgp-bb-navy);
	margin: 0;
}

.cgp-hv2-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var(--cgp-bb-teal);
	flex: 0 0 auto;
}

.cgp-hv2-faq details[open] summary::after {
	content: "\2013";
}

.cgp-hv2-faq details p {
	margin: 0.85rem 0 0;
	color: var(--cgp-bb-slate);
	line-height: 1.6;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.cgp-hv2-service-grid > .fl-col-content,
	.cgp-hv2-principal-grid > .fl-col-content,
	.cgp-hv2-quote-grid > .fl-col-content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cgp-hv2-service-grid > .fl-col-content,
	.cgp-hv2-principal-grid > .fl-col-content,
	.cgp-hv2-quote-grid > .fl-col-content {
		grid-template-columns: 1fr;
	}

	.cgp-hv2-hero__copy > .fl-col-content {
		padding-inline: 1.25rem;
	}
}