/* ========================================================================
   Breathe Easy Case Studies
   ======================================================================== */

.be-case-studies,
.be-case-study-filters {
	--be-case-study-gap: 30px;
	--be-case-study-radius: 20px;
	--be-case-study-overlap: 60px;
	--be-case-study-media-height-desktop: 440px;
	--be-case-study-media-height-tablet: 380px;
	--be-case-study-media-height-mobile: 300px;
	--be-case-study-body-pad-y: 28px;
	--be-case-study-body-pad-x: 30px;
	--be-case-study-details-padding: 24px;
	--be-case-study-eyebrow-size: 13px;
	--be-case-study-title-size: 28px;
	--be-case-study-subtitle-size: 16px;
	--be-case-study-detail-label-size: 12px;
	--be-case-study-detail-text-size: 16px;
	--be-case-study-filter-size: 13px;
	--be-case-study-toggle-size: 42px;
	--be-case-study-media-bg: #cbc6c2;
	--be-case-study-body-bg: #fbf6f2;
	--be-case-study-detail-bg: #e8dfd9;
	--be-case-study-text: #4e4858;
	--be-case-study-title-color: #000000;
	--be-case-study-eyebrow-color: #4e4858;
	--be-case-study-filter-bg: #fbf6f2;
	--be-case-study-filter-hover-bg: #e8dfd9;
	--be-case-study-filter-active-bg: #61ccc9;
	--be-case-study-filter-text: #111111;
	--be-case-study-filter-hover-text: #111111;
	--be-case-study-filter-active-text: #111111;
	--be-case-study-toggle-bg: #fbf6f2;
	--be-case-study-toggle-text: #111111;
}

.be-case-studies {
	width: 100%;
	max-width: none;
}

.be-case-studies__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--be-case-studies-desktop, 2), minmax(0, 1fr)) !important;
	gap: var(--be-case-study-gap) !important;
	align-items: start;
	width: 100%;
	max-width: none;
}

.be-case-studies__grid > .be-case-study {
	width: 100%;
	max-width: none;
}

.be-case-study {
	display: block;
	overflow: visible;
	min-width: 0;
	color: var(--be-case-study-text);
}

.be-case-study.is-linkable {
	cursor: pointer;
}

.be-case-study.is-linkable:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

.be-case-study[hidden] {
	display: none !important;
}

.be-case-study__media {
	position: relative;
	z-index: 1;
	width: 100%;
	height: var(--be-case-study-media-height-desktop);
	background: var(--be-case-study-media-bg);
	border-radius: var(--be-case-study-radius);
	overflow: hidden;
}

.be-case-study__media.has-gallery {
	touch-action: pan-y pinch-zoom;
	cursor: grab;
}

.be-case-study__media.has-gallery.is-dragging {
	cursor: grabbing;
}

.be-case-study__slides,
.be-case-study__slide,
.be-case-study__slide > a,
.be-case-study__image,
.be-case-study__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.be-case-study__slide {
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 0, 0);
	transition: opacity 260ms ease, visibility 260ms ease;
	will-change: opacity;
}

.be-case-study__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}

.be-case-study__slide.is-dragging,
.be-case-study__slide.is-drag-settling {
	z-index: 3;
	opacity: 1;
	visibility: visible;
}

.be-case-study__slide.is-dragging {
	transition: none !important;
}

.be-case-study__slide.is-drag-neighbour {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transition: none !important;
}

.be-case-study__slide.is-drag-settling {
	transition: opacity 190ms ease !important;
}

.be-case-study__image {
	display: block;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

.be-case-study__placeholder {
	background: var(--be-case-study-media-bg);
}

/* Gallery arrows are invisible until the image is hovered/focused. The button
   itself is a full-height side hit-area with no circular background. Its
   gradient covers the entire image, while bottom padding centres the chevron
   within only the visible image height above the overlapping information box. */
.be-case-study__gallery-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	width: min(24%, 120px);
	height: 100%;
	margin: 0;
	padding-top: 0;
	padding-bottom: var(--be-case-study-overlap);
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #ffffff;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	transition: opacity 180ms ease;
}

.be-case-study__gallery-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.be-case-study__gallery-nav--prev {
	left: 0;
	justify-content: flex-start;
	padding-left: 18px;
}

.be-case-study__gallery-nav--prev::before {
	background: linear-gradient(to right, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 44%, rgba(0,0,0,0) 100%);
}

.be-case-study__gallery-nav--next {
	right: 0;
	justify-content: flex-end;
	padding-right: 18px;
}

.be-case-study__gallery-nav--next::before {
	background: linear-gradient(to left, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 44%, rgba(0,0,0,0) 100%);
}

.be-case-study__gallery-nav-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	line-height: 1;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
	pointer-events: none;
}

.be-case-study__gallery-nav-icon svg {
	display: block;
	width: 12px;
	height: 12px;
	overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
	.be-case-study__gallery-nav {
		pointer-events: auto;
	}

	/* Hovering anywhere over a gallery gently reveals both navigation sides. */
	.be-case-study__media.has-gallery:hover .be-case-study__gallery-nav {
		opacity: 0.5;
	}

	.be-case-study__media.has-gallery:hover .be-case-study__gallery-nav::before {
		opacity: 0.5;
	}

	/* Hovering a specific side brings only that side to full strength. */
	.be-case-study__media.has-gallery:hover .be-case-study__gallery-nav:hover {
		opacity: 1;
	}

	.be-case-study__media.has-gallery:hover .be-case-study__gallery-nav:hover::before {
		opacity: 1;
	}
}

.be-case-study__gallery-nav:focus-visible {
	opacity: 1;
	outline: none;
}

.be-case-study__gallery-nav:focus-visible::before {
	opacity: 1;
}

.be-case-study__gallery-dots {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: calc(var(--be-case-study-overlap) + 8px);
	display: flex;
	gap: 0;
	transform: translateX(-50%);
}

.be-case-study__gallery-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.be-case-study__gallery-dot::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255,255,255,0.55);
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	transition: background-color 160ms ease, transform 160ms ease;
}

.be-case-study__gallery-dot:hover::before,
.be-case-study__gallery-dot:focus-visible::before {
	background: rgba(255,255,255,0.86);
	transform: scale(1.35);
}

.be-case-study__gallery-dot:focus-visible {
	outline: none;
}

.be-case-study__gallery-dot.is-active::before {
	background: #ffffff;
	transform: scale(1.2);
}

/* The content panel deliberately overlaps the lower part of the image. */
.be-case-study__body {
	position: relative;
	z-index: 2;
	margin-top: calc(0px - var(--be-case-study-overlap)) !important;
	width: 100%;
	padding: var(--be-case-study-body-pad-y) var(--be-case-study-body-pad-x);
	background: var(--be-case-study-body-bg);
	border-radius: var(--be-case-study-radius);
	box-sizing: border-box;
}

.be-case-study__eyebrow {
	margin: 0 0 14px;
	color: var(--be-case-study-eyebrow-color);
	font-size: var(--be-case-study-eyebrow-size);
	line-height: 1.3;
	opacity: 0.72;
}

.be-case-study__title {
	margin: 0 0 10px !important;
	color: var(--be-case-study-title-color) !important;
	font-family: "freight-display-pro", serif;
	font-size: var(--be-case-study-title-size) !important;
	font-weight: 400 !important;
	line-height: 1.1;
}

.be-case-study__title a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Short descriptions are clamped to a maximum of two lines. JavaScript then
   equalises only the cards that share the same visible row, using the tallest
   subtitle in that row. A row where every intro is one line therefore stays one
   line tall; a mixed one/two-line row aligns at two lines. */
.be-case-study__subtitle {
	margin: 0;
	overflow: hidden;
	font-size: var(--be-case-study-subtitle-size);
	line-height: 1.4;
}

.be-case-study__subtitle.is-empty {
	min-height: 0;
}

.be-case-study__subtitle p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 2.8em;
	margin: 0;
	overflow: hidden;
	font-size: inherit;
	line-height: inherit;
}

.be-case-study__subtitle p + p {
	display: none;
}

/* The summary region is equalised per visible grid row by JS. This keeps the
   AQI panels aligned without forcing every row on the page to the same height. */
.be-case-study__summary {
	min-width: 0;
}

/* Optional Case Study AQI snapshot. It uses the same global AQI type/spacing
   variables and the exact same .be-aqi-reading component as every other AQI
   surface. This file controls only Case Study placement. */
.be-case-study__aqi {
	container-type: inline-size;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-areas:
		"empty metrics"
		"reading status";
	align-items: end;
	column-gap: var(--be-aqi-element-gap, 16px);
	row-gap: var(--be-aqi-card-row-gap, 8px);
	margin-top: 26px;
	padding: var(--be-aqi-padding, 20px);
	border-radius: var(--be-case-study-radius);
	background: linear-gradient(180deg, var(--be-case-study-aqi-top), var(--be-case-study-aqi-bottom));
	color: var(--be-case-study-aqi-text);
	box-sizing: border-box;
	overflow: hidden;
}

.be-case-study__aqi:not(:has(.be-case-study__aqi-metrics)) {
	grid-template-areas: "reading status";
	row-gap: 0;
}

.be-case-study__aqi > .be-aqi-reading[data-be-aqi-reading] {
	grid-area: reading;
	justify-self: start;
	align-self: end;
	color: inherit;
}

.be-case-study__aqi-metrics {
	grid-area: metrics;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	align-self: start;
	justify-self: end;
	gap: var(--be-aqi-element-gap, 16px);
	min-width: max-content;
	font-size: var(--be-aqi-runtime-metric-size, var(--be-aqi-metric-size, 16px));
	font-weight: var(--be-aqi-metric-weight, 400);
	line-height: 1;
	white-space: nowrap;
}

.be-case-study__aqi-metric {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: .45em;
	white-space: nowrap;
}

.be-case-study__aqi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--be-aqi-runtime-icon-size, var(--be-aqi-icon-size, 18px));
	height: var(--be-aqi-runtime-icon-size, var(--be-aqi-icon-size, 18px));
	flex: 0 0 var(--be-aqi-runtime-icon-size, var(--be-aqi-icon-size, 18px));
}
.be-case-study__aqi-icon svg,
.be-case-study__aqi-icon .be-icon {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.be-case-study__aqi-status {
	grid-area: status;
	justify-self: end;
	align-self: end;
	min-width: 0;
	max-width: 100%;
	margin-left: auto;
	font-size: var(--be-aqi-runtime-body-size, var(--be-aqi-body-size, 18px));
	font-weight: var(--be-aqi-body-weight, 300);
	line-height: 1.25;
	text-align: right;
	color: inherit;
	opacity: .72;
}

.be-case-study__aqi[data-be-aqi-runtime-mode="compact"] {
	column-gap: var(--be-aqi-mobile-element-gap, 12px);
	row-gap: var(--be-aqi-mobile-card-row-gap, var(--be-aqi-card-row-gap, 8px));
	padding: var(--be-aqi-mobile-padding, 14px);
}
.be-case-study__aqi[data-be-aqi-runtime-mode="compact"] .be-case-study__aqi-metrics {
	gap: var(--be-aqi-mobile-element-gap, 12px);
}

/* When reading + status genuinely cannot share the bottom row, only the status
   drops to its own row. It remains right-aligned as requested. */
@container (max-width: 410px) {
	.be-case-study__aqi {
		grid-template-columns: 1fr;
		grid-template-areas:
			"metrics"
			"reading"
			"status";
		row-gap: var(--be-aqi-mobile-card-row-gap, var(--be-aqi-card-row-gap, 8px));
	}
	.be-case-study__aqi:not(:has(.be-case-study__aqi-metrics)) {
		grid-template-areas:
			"reading"
			"status";
		row-gap: var(--be-aqi-mobile-card-row-gap, var(--be-aqi-card-row-gap, 8px));
	}
	.be-case-study__aqi-metrics,
	.be-case-study__aqi-status {
		justify-self: end;
		text-align: right;
	}
}

/* Smooth Challenge / Solution / Result reveal. The wrapper itself animates
   from a zero-row grid to a content-sized row, avoiding the old hidden/visible
   jump. */
.be-case-study__details {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows 360ms cubic-bezier(.2,.7,.2,1),
		margin-top 360ms cubic-bezier(.2,.7,.2,1),
		opacity 240ms ease,
		visibility 0s linear 360ms;
}

.be-case-study__details-inner {
	min-height: 0;
	overflow: hidden;
	padding: 0 var(--be-case-study-details-padding);
	background: var(--be-case-study-detail-bg);
	border-radius: var(--be-case-study-radius);
	transition: padding 360ms cubic-bezier(.2,.7,.2,1);
}

.be-case-study.is-expanded .be-case-study__details {
	grid-template-rows: 1fr;
	margin-top: 24px;
	opacity: 1;
	visibility: visible;
	transition:
		grid-template-rows 360ms cubic-bezier(.2,.7,.2,1),
		margin-top 360ms cubic-bezier(.2,.7,.2,1),
		opacity 240ms ease,
		visibility 0s linear 0s;
}

.be-case-study.is-expanded .be-case-study__details-inner {
	padding: var(--be-case-study-details-padding);
}

.be-case-study__detail + .be-case-study__detail { margin-top: 18px; }
.be-case-study__detail-label {
	margin-bottom: 6px;
	font-size: var(--be-case-study-detail-label-size);
	line-height: 1.2;
	opacity: 0.68;
}
.be-case-study__detail-content,
.be-case-study__detail-content p {
	margin: 0;
	font-size: var(--be-case-study-detail-text-size);
	line-height: 1.45;
}

.be-case-study__toggle-wrap {
	display: flex;
	justify-content: center;
	padding-top: 18px;
}

.be-case-study__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--be-case-study-toggle-size);
	height: var(--be-case-study-toggle-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--be-case-study-toggle-bg);
	color: var(--be-case-study-toggle-text);
	cursor: pointer;
}

.be-case-study__toggle-icon {
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 260ms ease;
}

.be-case-study.is-expanded .be-case-study__toggle-icon {
	transform: translateY(2px) rotate(225deg);
}

/* Realtime filtering fades cards out before they are removed from the grid,
   then fades newly matched cards back in after the layout has settled. */
.be-case-study.is-filtering-out {
	opacity: 0 !important;
	transition: opacity 180ms ease !important;
	pointer-events: none;
}

.be-case-study.is-filtering-in {
	opacity: 0 !important;
	transition: none !important;
}

.be-case-study.is-filtering-visible {
	opacity: 1 !important;
	transition: opacity 180ms ease !important;
}

.be-case-studies__empty {
	padding: 24px 0;
	text-align: center;
}

/* Separate filter bar shortcode. */
.be-case-study-filters {
	--be-case-study-filter-edge-fade: 38px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: visible;
}

/* Category pills and the optional random refresh control share one horizontal
   scrolling row. */
.be-case-study-filters__scroll {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	-webkit-mask-image: none;
	mask-image: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.be-case-study-filters__scroll::-webkit-scrollbar {
	display: none;
}

/* Edge fades appear only where more filter buttons exist beyond the visible
   edge. At the absolute left/right extremes that side is fully opaque. */
.be-case-study-filters__scroll.has-scroll-right:not(.has-scroll-left) {
	-webkit-mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - var(--be-case-study-filter-edge-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - var(--be-case-study-filter-edge-fade)),
		transparent 100%
	);
}

.be-case-study-filters__scroll.has-scroll-left:not(.has-scroll-right) {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--be-case-study-filter-edge-fade),
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--be-case-study-filter-edge-fade),
		#000 100%
	);
}

.be-case-study-filters__scroll.has-scroll-left.has-scroll-right {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--be-case-study-filter-edge-fade),
		#000 calc(100% - var(--be-case-study-filter-edge-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--be-case-study-filter-edge-fade),
		#000 calc(100% - var(--be-case-study-filter-edge-fade)),
		transparent 100%
	);
}

.be-case-study-filter {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 9px 16px;
	white-space: nowrap;
	border: 0;
	border-radius: 999px;
	background: var(--be-case-study-filter-bg);
	color: var(--be-case-study-filter-text);
	font: inherit;
	font-size: var(--be-case-study-filter-size);
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.be-case-study-filter:hover,
.be-case-study-filter:focus-visible {
	background: var(--be-case-study-filter-hover-bg);
	color: var(--be-case-study-filter-hover-text);
	outline: none;
}

.be-case-study-filter.is-active,
.be-case-study-filter.is-active:hover,
.be-case-study-filter.is-active:focus-visible {
	background: var(--be-case-study-filter-active-bg);
	color: var(--be-case-study-filter-active-text);
}


/* Icon-only random refresh control. It behaves like the final item in the
   normal filter row and scrolls with the category pills when space is tight. */
.be-case-study-filter-refresh {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--be-case-study-filter-bg);
	color: var(--be-case-study-filter-text);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.be-case-study-filter-refresh[hidden] {
	display: none !important;
}

.be-case-study-filter-refresh:hover,
.be-case-study-filter-refresh:focus-visible {
	background: var(--be-case-study-filter-hover-bg);
	color: var(--be-case-study-filter-hover-text);
	outline: none;
}

.be-case-study-filter-refresh .be-icon {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	transform: none !important;
	transform-origin: 50% 50%;
	transition: none !important;
}

.be-case-study-filter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.be-case-study-filter__icon img,
.be-case-study-filter__icon-image {
	display: block;
	width: 16px !important;
	height: 16px !important;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.be-case-studies__grid {
		grid-template-columns: repeat(var(--be-case-studies-tablet, 2), minmax(0, 1fr)) !important;
	}
	.be-case-study__media {
		height: var(--be-case-study-media-height-tablet);
	}
}

@media (max-width: 767px) {
	.be-case-studies__grid {
		grid-template-columns: repeat(var(--be-case-studies-mobile, 1), minmax(0, 1fr)) !important;
	}
	.be-case-study__media {
		height: var(--be-case-study-media-height-mobile);
	}
	.be-case-study-filters,
	.be-case-study-filters__scroll {
		gap: 8px;
	}
}

/* View more sits beneath the grid and only appears while another batch of
   matching Case Studies is available. The anchor deliberately uses the shared
   .be-button hierarchy so it inherits the site's normal button styling. */
.be-case-studies__more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 30px;
}

.be-case-studies__more-wrap[hidden] {
	display: none !important;
}

.be-case-studies__more {
	margin-left: auto !important;
	margin-right: auto !important;
}