/* BUTTON EXPAND */
.button.button-expand {
	--button-expand-gap: 17px;
	--button-expand-label-max: 18ch;
	column-gap: 0;
	transition: filter 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95),
	column-gap 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.button.button-expand .button-expand-label {
	display: block;
	max-inline-size: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-0.35em);
	transition: max-inline-size 0.34s cubic-bezier(0.22, 1, 0.36, 1),
	opacity 0.18s ease-out,
	transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.button.button-expand:is(:hover, :focus-visible),
[data-button-hover-scope]:is(:hover, :focus-within) .button.button-expand {
	column-gap: var(--button-expand-gap);
}

.button.button-expand:is(:hover, :focus-visible) .button-expand-label,
[data-button-hover-scope]:is(:hover, :focus-within) .button.button-expand .button-expand-label {
	max-inline-size: var(--button-expand-label-max);
	opacity: 1;
	transform: translateX(0);
	transition: max-inline-size 0.34s cubic-bezier(0.22, 1, 0.36, 1),
	opacity 0.18s ease-out 0.06s,
	transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}

/* INTRINSIC WIDTH */
@supports (interpolate-size: allow-keywords) {
	.button.button-expand .button-expand-label {
		interpolate-size: allow-keywords;
		inline-size: 0;
		max-inline-size: none;
		transition: inline-size 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.18s ease-out,
		transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.button.button-expand:is(:hover, :focus-visible) .button-expand-label,
	[data-button-hover-scope]:is(:hover, :focus-within) .button.button-expand .button-expand-label {
		inline-size: auto;
		transition: inline-size 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.18s ease-out 0.06s,
		transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
	}
}

/* TOUCH FALLBACK */
@media (hover: none), (pointer: coarse) {
	.button.button-expand {
		column-gap: var(--button-expand-gap);
	}

	.button.button-expand .button-expand-label {
		inline-size: auto;
		max-inline-size: none;
		opacity: 1;
		transform: none;
	}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
	.button.button-expand,
	.button.button-expand .button-expand-label {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}
}

/* LINK UNDERLINE */
.link-underline {
	position: relative;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.link-underline::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: -0.25em;
		left: 0;
		height: 1px;
		background-color: currentColor;
		pointer-events: none;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 320ms ease;
	}

	.link-underline:hover::after,
	.link-underline:focus-visible::after {
		transform: scaleX(1);
	}
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.link-underline::after {
		content: none;
	}

	.link-underline:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

/* CUSTOM CHECKBOX */
.form-checkbox-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.form-checkbox {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.form-checkbox-label {
	margin-left: 36px;
}

.form-checkbox-label::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: rgba(27, 25, 35, 0.2);
	transform: translateY(-50%);
	transition: all 0.2s ease;
}

.form-checkbox-label::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 5px;
	width: 14px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M0.823242 3.95876L5.18688 8.07305L12.8232 0.873047' stroke='%23FAF9F5' stroke-width='2.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
	transform: translateY(-50%);
	transition: all 0.2s ease;
}

.form-checkbox-input:checked + .form-checkbox-label::before {
	background: rgba(27, 25, 35, 1);
}

.form-checkbox-input:checked + .form-checkbox-label::after {
	opacity: 1;
	transform: translateY(-50%);
}

/* CARD MEDIA LINK */
/* Webflow interactions inject `transition: all` on these descendants at runtime. */
.card-media-link-grid,
.card-media-link-figure,
.card-media-link-picture,
.card-media-link-content {
	transition: none;
}

/* RICH TEXT VIDEO */
.rich-video iframe {
	border: none;
}

.rich-video-play {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%236881FF'/%3E%3Cpath d='M44.3999 59.625L44.8282 59.2285C46.7439 57.1228 47.0836 51.9346 47.0836 50.117C47.0836 48.1715 46.6945 42.7332 44.3999 40.609L54.6702 50.117L44.8282 59.2285C44.6934 59.3767 44.5507 59.5096 44.3999 59.625Z' fill='%23FAF9F5'/%3E%3Cpath d='M47.0836 50.117C47.0836 48.1715 46.6945 42.7332 44.3999 40.609L54.6702 50.117L44.3999 59.625C46.6945 57.8697 47.0836 52.0625 47.0836 50.117ZM54.6702 50.117L47.0836 50.117' stroke='%23FAF9F5' stroke-width='2'/%3E%3C/svg%3E");
	background-size: contain;
}

/* TEXT BUTTON BORDER */
.text-button:before,
.text-button:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentcolor;
	transition: all 0.3s ease-in;
}

.text-button:after {
	left: calc(100% + 40px);
}

.text-button:hover:before {
	left: calc(-100% - 40px);
}

.text-button:hover:after {
	left: 0;
}

/* HORIZONTAL SCROLLBAR
   The rows below 992px are excluded on purpose: there the bar under them is the
   one we draw (SCROLL INDICATOR below), and styling the native one is not merely
   redundant — it is what put a second bar on the client's iPad. Touch WebKit
   leaves the native bar as a transient overlay only while nothing styles it; a
   single ::-webkit-scrollbar rule makes it swap that overlay for a classic bar it
   paints permanently, and the iPadOS versions before 17 ignore `display: none` on
   the very same pseudo-element, so the bar we meant to hide stayed sitting under
   ours. Newer iPadOS drops these rules on touch altogether — hence the same page
   reading clean on an 11" Air and doubled on every iPad before it.

   Above 992px nothing changes: the classic bar is permanent there anyway, so it
   is ours to style. */
:root {
	--horizontal-scrollbar-size: 16px;
	--horizontal-scrollbar-track: #f8f7f3;
	--horizontal-scrollbar-thumb: var(--_system-colors---dark, #1b1923);
	--horizontal-scrollbar-thumb-hover: rgba(27, 25, 35, 0.82);
	--horizontal-scrollbar-radius: 999px;
}

@media screen and (min-width: 992px) {
	:where(
	  [data-horizontal-scroll],
	  [data-horizontal-scroll] *,
	  [data-horizontal-scroll-dark],
	  [data-horizontal-scroll-dark] *
	) {
		scrollbar-color: var(--horizontal-scrollbar-thumb) var(--horizontal-scrollbar-track);
		scrollbar-width: thin;
	}

	:where(
	  [data-horizontal-scroll],
	  [data-horizontal-scroll] *,
	  [data-horizontal-scroll-dark],
	  [data-horizontal-scroll-dark] *
	)::-webkit-scrollbar:horizontal {
		height: var(--horizontal-scrollbar-size) !important;
		background: transparent !important;
	}

	:where(
	  [data-horizontal-scroll],
	  [data-horizontal-scroll] *,
	  [data-horizontal-scroll-dark],
	  [data-horizontal-scroll-dark] *
	)::-webkit-scrollbar-track:horizontal {
		border: 0 !important;
		border-radius: var(--horizontal-scrollbar-radius) !important;
		background: var(--horizontal-scrollbar-track) !important;
		box-shadow: none !important;
	}

	:where(
	  [data-horizontal-scroll],
	  [data-horizontal-scroll] *,
	  [data-horizontal-scroll-dark],
	  [data-horizontal-scroll-dark] *
	)::-webkit-scrollbar-thumb:horizontal {
		border: 0 !important;
		border-radius: var(--horizontal-scrollbar-radius) !important;
		background: var(--horizontal-scrollbar-thumb) !important;
		box-shadow: none !important;
	}

	:where(
	  [data-horizontal-scroll],
	  [data-horizontal-scroll] *,
	  [data-horizontal-scroll-dark],
	  [data-horizontal-scroll-dark] *
	)::-webkit-scrollbar-thumb:horizontal:hover {
		background: var(--horizontal-scrollbar-thumb-hover) !important;
	}
}

/* An article table is the one scroller nobody draws a bar for, so the styled
   native bar is all it has and it keeps it at every width. One bar, never two. */
:where(.article .w-embed:has(> table)) {
	scrollbar-color: var(--horizontal-scrollbar-thumb) var(--horizontal-scrollbar-track);
	scrollbar-width: thin;
}

:where(.article .w-embed:has(> table))::-webkit-scrollbar:horizontal {
	height: var(--horizontal-scrollbar-size) !important;
	background: transparent !important;
}

:where(.article .w-embed:has(> table))::-webkit-scrollbar-track:horizontal {
	border: 0 !important;
	border-radius: var(--horizontal-scrollbar-radius) !important;
	background: var(--horizontal-scrollbar-track) !important;
	box-shadow: none !important;
}

:where(.article .w-embed:has(> table))::-webkit-scrollbar-thumb:horizontal {
	border: 0 !important;
	border-radius: var(--horizontal-scrollbar-radius) !important;
	background: var(--horizontal-scrollbar-thumb) !important;
	box-shadow: none !important;
}

:where(.article .w-embed:has(> table))::-webkit-scrollbar-thumb:horizontal:hover {
	background: var(--horizontal-scrollbar-thumb-hover) !important;
}

:where([data-horizontal-scroll-dark], .article.is-dark .w-embed:has(> table)) {
	--horizontal-scrollbar-track: rgba(255, 255, 255, 0.16);
	--horizontal-scrollbar-thumb: var(--_system-colors---accent, #ecf071);
	--horizontal-scrollbar-thumb-hover: #f4f78d;
}

/* SCROLL INDICATOR
   Touch browsers draw the scrollbar as a transient overlay: it fades in while a
   finger is moving and is gone the rest of the time — and on iOS the rules above
   are ignored outright, so nothing up there can hold it open. A row of cards then
   reads as a row that ends at the screen edge. This is the same bar drawn by us,
   below 992px only, so it can simply stay visible.

   The element is script-owned (scroll-indicator in global.js), which pins it to
   the bottom edge of its scroll container; the gap below that edge is the offset
   below. Absolute positioning keeps it out of the parent's flow, so it costs the
   layout nothing and no section had to make room for it.
   Above 992px nothing changes: desktop keeps the classic native bar, which is
   permanent already, and a drag lane keeps hiding it on purpose. */
:root {
	--scroll-indicator-size: 6px;
	--scroll-indicator-offset: 10px;
	--scroll-indicator-track: rgba(27, 25, 35, 0.12);
	--scroll-indicator-thumb: var(--_system-colors---dark, #1b1923);
}

/* The offset rides on margin-top rather than the script's `top`, so a single
   section can breathe differently by overriding the variable and nothing has to
   be recomputed in JS. */
[data-scroll-indicator] {
	position: absolute;
	z-index: 2;
	display: none;
	height: var(--scroll-indicator-size);
	margin-top: var(--scroll-indicator-offset);
	border-radius: var(--horizontal-scrollbar-radius);
	background: var(--scroll-indicator-track);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.45s ease 0.7s, transform 0.45s ease 0.7s;
	pointer-events: none;
}

/* Set by the script when the row reaches the viewport, so the bar arrives with
   its section instead of being the one solid thing on an otherwise fading page.

   The delay is measured, not decorative: on /own-your-ai and /private-equity the
   reveal sits on the row itself and slides it ~20px over about a second. The bar
   is placed where the row lands, not where it currently is (see place() in
   global.js), so it waits out that slide instead of hanging above a row still on
   its way up. Elsewhere the row never moves and the delay just lets the cards
   lead. */
[data-scroll-indicator].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-scroll-indicator] {
		transform: none;
		transition: none;
	}
}

[data-scroll-indicator="dark"] {
	--scroll-indicator-track: rgba(255, 255, 255, 0.16);
	--scroll-indicator-thumb: var(--_system-colors---accent, #ecf071);
}

[data-scroll-indicator-thumb] {
	height: 100%;
	border-radius: inherit;
	background: var(--scroll-indicator-thumb);
}

@media screen and (max-width: 991px) {
	[data-scroll-indicator] {
		display: block;
	}

	/* The indicator replaces the native bar, it does not join it. Nothing styles
	   the native bar down here any more, but a desktop browser at this width
	   still draws its own classic one, which would sit right underneath ours.

	   Zero size next to `display: none` because the two are not the same claim:
	   older WebKit ignores display on a scrollbar pseudo-element and lays the bar
	   out anyway, and then honours the size. Whichever of the two an engine
	   listens to, the bar has nothing left to occupy. */
	.is-scroll-indicated {
		scrollbar-width: none;
	}

	.is-scroll-indicated::-webkit-scrollbar,
	.is-scroll-indicated::-webkit-scrollbar:horizontal {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		background: transparent !important;
	}
}

/* Set by the script while the row has nowhere to scroll — a three-card row that
   fits the tablet width should show no bar at all. */
[data-scroll-indicator][hidden] {
	display: none !important;
}

/* DRAG LANE
   A card row that turns into a horizontal lane. The lane mode lives here and is
   switched on by drag-lane.js, never by a Webflow class — the Designer canvas
   runs no custom code, so on the canvas the row stays a plain wrapping grid and
   every card, including the fourth one, is visible and editable.
   Without the script the published row also just wraps: readable, not broken. */
[data-drag-lane].is-lane {
	grid-auto-flow: column;
	overflow: auto hidden;
}

/* The grab affordance is script-owned like lane mode itself: drag-lane.js adds
   `is-grabbable` only while the lane has somewhere to scroll. A class and not an
   inline style, so the look stays here with the rest of the cursor rules. */
[data-drag-lane].is-grabbable {
	cursor: grab;
}

[data-drag-lane].is-dragging {
	cursor: grabbing;
}

/* Optional pager state for a drag lane. The controls themselves stay visible
   in Designer (where scripts do not run) and are hidden only by the runtime
   `hidden` attribute when the published lane has three or fewer cards. */
[data-drag-lane-controls][hidden] {
	display: none !important;
}

/* A fourth card can begin exactly at the visible right edge. Its separator is
   still between cards, but should not look like an extra rule after card three. */
[data-drag-lane] > .is-lane-edge {
	border-left-color: transparent;
}

[data-drag-lane-prev].is-disabled img,
[data-drag-lane-next].is-disabled img {
	opacity: 0.35;
}

/* Desktop drags the lane by the cursor, so the bar is noise there. Below 992 the
   lane is a touch strip and keeps the site scrollbar — see data-horizontal-scroll. */
@media screen and (min-width: 992px) {
	[data-drag-lane].is-lane {
		scrollbar-width: none;
	}

	[data-drag-lane].is-lane::-webkit-scrollbar {
		display: none;
	}
}

/* GALLERY MARQUEE
   The looping image row of the Who We Are and Careers galleries. Keyed on the
   contract rather than on a page class: both galleries run gallery-marquee.js,
   but only one of the two pages loads who-we-are.css, where these rules used to
   live — so Careers had neither the grab affordance nor `pan-y`, and its
   horizontal gesture competed with the page scroll on touch. */
[data-gallery-marquee] {
	will-change: transform;
}

/* The strip, not the row: gallery-marquee.js adds `is-marquee-strip` to the
   element that clips the row, because the row rides a transform and slides out
   from under what the hand is actually over. The class is script-owned, so a row
   never advertises a drag before the loop is running. `pan-y` hands the
   horizontal gesture to the script and leaves the vertical one to the page. */
.is-marquee-strip {
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.is-marquee-strip.is-dragging {
	cursor: grabbing;
}

/* REVEAL ACCORDION
   Cards that swap their content instead of growing: one card open at a time, and
   the card's height is the same in both states, so the row — and everything below
   the section — never moves. The height itself is measured by the module in
   global.js and arrives as --rv-card-h; nothing here is a hard-coded pixel size.

   Only the mechanism lives here. Colours, padding and the per-section choreography
   stay in each section's own stylesheet, so two sections can share the behaviour
   and still look nothing alike.

   Contract: see the doc comment above the module in global.js. */
[data-reveal-accordion] {
	--rv-duration: 0.42s;
	--rv-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--rv-fade: 0.26s;
}

/* The two collapsing regions are mirror images: the closed copy shrinks away
   while the detail opens. Both need exactly one child — a grid row only collapses
   what it explicitly sizes. */
[data-reveal-accordion-summary],
[data-reveal-accordion-detail] {
	display: grid;
	min-height: 0;
	overflow: hidden;
	transition: grid-template-rows var(--rv-duration) var(--rv-ease),
	margin-top var(--rv-duration) var(--rv-ease),
	opacity var(--rv-fade) linear;
}

[data-reveal-accordion-summary] > *,
[data-reveal-accordion-detail] > * {
	min-height: 0;
	overflow: hidden;
}

[data-reveal-accordion-summary] {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* The detail never gives up height: mid-transition the slack belongs to the
   card's absorbing box, not to the copy that is currently arriving. */
[data-reveal-accordion-detail] {
	flex: 0 0 auto;
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
}

[data-reveal-accordion-item].is-open [data-reveal-accordion-summary] {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
}

/* Open, the detail takes the card's spare height. The locked height is the
   tallest state across the row, so on wide screens the closed state can be the
   tall one and the open card has slack to place — it belongs at the bottom of
   the detail, not as a gap under the card's header. */
[data-reveal-accordion-item].is-open [data-reveal-accordion-detail] {
	flex: 1 1 auto;
	grid-template-rows: 1fr;
	opacity: 1;
	pointer-events: auto;
}

/* The "read more" strip has two children and its own border, so it collapses by
   height rather than by a grid row. --rv-more-h is measured alongside the card
   height; until it arrives the strip is simply auto, which is its closed size. */
[data-reveal-accordion-more] {
	flex: 0 0 auto;
	height: var(--rv-more-h, auto);
	min-height: 0; /* a column flex item floors at its min-content height otherwise */
	overflow: hidden;
	transition: height var(--rv-duration) var(--rv-ease),
	margin-top var(--rv-duration) var(--rv-ease),
	padding-top var(--rv-duration) var(--rv-ease),
	padding-bottom var(--rv-duration) var(--rv-ease),
	border-top-width var(--rv-duration) var(--rv-ease),
	border-bottom-width var(--rv-duration) var(--rv-ease),
	opacity var(--rv-fade) linear;
}

/* border-box floors the strip at its own padding, so the padding has to go with
   the height; at height 0 a horizontal border would still draw a line. The seam
   margin goes too: sections overlap the strip onto the box above it by -1px so
   their borders merge, and a collapsed strip that keeps pulling up hides the
   last pixel of the block it now sits under — its bottom border. */
[data-reveal-accordion-item].is-open [data-reveal-accordion-more] {
	height: 0;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
	opacity: 0;
	pointer-events: none;
}

[data-reveal-accordion-toggle]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

[data-reveal-accordion-lock-height] [data-reveal-accordion-item] {
	height: var(--rv-card-h, auto);
}

/* Measuring pass: heights are released and the card is taken out of the row's
   stretch, so each card reports its own content height in each state. Silencing
   the transitions keeps the pass invisible. */
[data-reveal-accordion-measuring] [data-reveal-accordion-item] {
	align-self: flex-start !important;
	height: auto !important;
}

[data-reveal-accordion-measuring],
[data-reveal-accordion-measuring] * {
	transition: none !important;
}

/* The choreography is spread over the section's own rules too (a shrinking icon,
   a fading subtitle), so reduced motion is answered for the whole component
   rather than for the three regions this file happens to know about. */
@media (prefers-reduced-motion: reduce) {
	[data-reveal-accordion] * {
		transition: none !important;
	}
}