/* FOCUS RING
   Keyboard focus only. Webflow zeroes the outline on its own controls, so those are restored. */
:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-nav-button:focus-visible,
.w-tab-link:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible {
	outline: 2px solid var(--_system-colors---primary);
	outline-offset: 4px;
}

/* 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: runtime classes created by rich-video.js */
.rich-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background-color: #000;
}

.rich-video-thumb {
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-size: cover;
}

.rich-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.rich-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background-repeat: no-repeat;
	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;
}

@media screen and (max-width: 767px) {
	.rich-video-play {
		width: 72px;
		height: 72px;
	}
}

/* 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
   Styled native bar from 992px. Below that the scroll indicator draws the bar:
   styling the native one on touch WebKit makes it permanent and doubles it. */
: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;
	}
}

/* Article tables keep the styled native bar at every width. */
: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
   Below 992px touch browsers hide the native scrollbar, so global.js draws one
   that stays visible. Absolutely positioned, so it takes no layout space. */
: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);
}

/* Offset via margin-top so a section can override the variable without 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 enters the viewport. The delay lets rows with
   their own fade-up reveal settle first. */
[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 below 992px. Zero size as well as
	   display: none, since older WebKit ignores display on scrollbar pseudo-elements. */
	.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 while the row has nothing to scroll. */
[data-scroll-indicator][hidden] {
	display: none !important;
}

/* DRAG LANE
   Lane mode is switched on by drag-lane.js, so the Designer canvas shows a plain grid. */
[data-drag-lane].is-lane {
	grid-auto-flow: column;
	overflow: auto hidden;
}

/* Added by drag-lane.js only while the lane can scroll. */
[data-drag-lane].is-grabbable {
	cursor: grab;
}

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

/* Pager controls get the `hidden` attribute when there are three cards or fewer. */
[data-drag-lane-controls][hidden] {
	display: none !important;
}

/* Hide the separator of a card that starts exactly at the right edge. */
[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;
}

/* Pager hover: the arrow nudges in its direction. Disabled ends stay still. */
[data-drag-lane-prev] img,
[data-drag-lane-next] img {
	transition: translate 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* `translate`, not `transform`: some pagers rotate a shared arrow via transform. */
[data-drag-lane-prev]:not(.is-disabled):hover img {
	translate: -4px 0;
}

[data-drag-lane-next]:not(.is-disabled):hover img {
	translate: 4px 0;
}

[data-drag-lane-prev].is-disabled,
[data-drag-lane-next].is-disabled {
	cursor: default;
}

/* Desktop drags the lane with the cursor, so the scrollbar is hidden there. */
@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
   Keyed on the data attribute: used on Who We Are and Careers. */
[data-gallery-marquee] {
	will-change: transform;
}

/* Script-owned class on the clipping element. pan-y leaves vertical scroll 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
   One card open at a time; the card height stays the same in both states.
   The height comes from global.js as --rv-card-h. Section styles live in page CSS. */
[data-reveal-accordion] {
	--rv-duration: 0.42s;
	--rv-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--rv-fade: 0.26s;
}

/* Both collapsing regions need exactly one child: a grid row only collapses what it 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;
}

/* Mid-transition the slack goes to the card's absorbing box, not to the detail. */
[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. */
[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 collapses by height (--rv-more-h), not by a grid row. */
[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;
}

/* Padding, border and the -1px seam margin collapse with the height. */
[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 and stretch released, transitions off. */
[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;
}

/* Reduced motion covers the whole component, including section-specific transitions. */
@media (prefers-reduced-motion: reduce) {
	[data-reveal-accordion] * {
		transition: none !important;
	}
}

/* STICKY SIDEBAR SCROLL
   Capped sticky cards scroll inside themselves with an inset thumb. */
@media screen and (min-width: 992px) {
	.blog-post-sidebar > .sidebar-card:has(.authors) {
		min-height: 0;
		overflow-y: auto;
	}
}

.sitebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.blog-post-sidebar > .sidebar-card:has(.authors)::-webkit-scrollbar {
	width: 20px;
}

.sitebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.blog-post-sidebar > .sidebar-card:has(.authors)::-webkit-scrollbar-track {
	margin-block: 20px;
	background: transparent;
}

.sitebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.blog-post-sidebar > .sidebar-card:has(.authors)::-webkit-scrollbar-thumb {
	border: 7px solid transparent;
	border-radius: 999px;
	background-color: rgba(128, 128, 128, 0.35);
	background-color: color-mix(in srgb, currentColor 22%, transparent);
	background-clip: padding-box;
}

.sitebar::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.blog-post-sidebar > .sidebar-card:has(.authors)::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, currentColor 40%, transparent);
}

@supports not selector(::-webkit-scrollbar) {
	.sitebar,
	.sidebar,
	.blog-post-sidebar > .sidebar-card:has(.authors) {
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent;
	}
}

/* FOOTER: fill the sub-pixel gap ScrollSmoother leaves under the content. */
.site-footer,
.site-footer-extended {
	position: relative;
}

.site-footer::after,
.site-footer-extended::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 1px;
	background: inherit;
}

/* FOOTER: link groups collapse into accordions below 992px, see global.js */
.footer-links {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

.footer-accordion.is-open .footer-links {
	max-height: 500px;
}

.footer-toggle {
	cursor: pointer;
}

@media screen and (min-width: 992px) {
	.footer-links {
		max-height: none;
		overflow: visible;
	}

	.footer-toggle {
		cursor: default;
	}
}