/* BEC Hover Reveal
   Performance: the image column is always reserved, so opening a row never moves the page.
   Opening animates clip-path, opacity and transform only. */
.bec-hr {
	--hr-num-w: 64px;
	--hr-media-w: 32%;
	--hr-gap: 32px;
	--hr-pad: 32px;
	--hr-row-min: 0px;
	--hr-inner: 12px;
	--hr-ratio: 1.6;
	--hr-radius: 16px;
	--hr-media-inset: 0px;
	--hr-line: 1px;
	--hr-line-c: rgba(20, 17, 10, .2);
	--hr-accent: #073D30;
	--hr-dim: .35;
	--hr-dot: 12px;
	--hr-dot-space: 32px;
	--hr-icon: 32px;
	--hr-arrow: 48px;
	--hr-arrow-off: 16px;
	--hr-dur: 550ms;
	--hr-zoom: 1.08;
	--hr-ease: cubic-bezier(.22, .8, .2, 1);
	--hr-clip-from: inset(50% 0 50% 0);
	position: relative;
	color: #14110A;
	text-align: left;
}
.bec-hr, .bec-hr *, .bec-hr *::before, .bec-hr *::after { box-sizing: border-box; }
.bec-hr > script { display: none; }

.bec-hr__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--hr-first-line, 0px) solid var(--hr-line-c);
	border-bottom: var(--hr-last-line, 0px) solid var(--hr-line-c);
}
.bec-hr__row {
	position: relative;
	display: grid;
	grid-template-columns: var(--hr-num-w) minmax(0, 1fr) var(--hr-media-w);
	grid-template-areas: "num main aside";
	column-gap: var(--hr-gap);
	min-height: var(--hr-row-min);
	margin: 0;
	padding: 0;
	transition: background-color .3s ease;
}
.bec-hr__row::before, .bec-hr__row::marker { content: none; }
.bec-hr__row + .bec-hr__row { border-top: var(--hr-line) solid var(--hr-line-c); }
.bec-hr:not(.has-num) .bec-hr__row { grid-template-columns: minmax(0, 1fr) var(--hr-media-w); grid-template-areas: "main aside"; }
.bec-hr.has-row-link .bec-hr__row.has-link { cursor: pointer; }

/* image on the left */
.bec-hr.is-p-left .bec-hr__row { grid-template-columns: var(--hr-media-w) var(--hr-num-w) minmax(0, 1fr); grid-template-areas: "aside num main"; }
.bec-hr.is-p-left:not(.has-num) .bec-hr__row { grid-template-columns: var(--hr-media-w) minmax(0, 1fr); grid-template-areas: "aside main"; }

/* ---------- number and text ---------- */
.bec-hr__num { grid-area: num; padding-block: var(--hr-pad); margin-top: 8px; font-size: 12px; letter-spacing: .14em; line-height: 1.2; font-variant-numeric: tabular-nums; transition: opacity .35s ease; }
.bec-hr__main {
	grid-area: main;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hr-inner);
	padding-block: var(--hr-pad);
	transition: opacity .35s ease;
}
.bec-hr-icon-left .bec-hr__main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: var(--hr-inner); align-items: start; justify-items: start; }
.bec-hr-icon-left .bec-hr__main > * { grid-column: 2; }
.bec-hr-icon-left .bec-hr__main > .bec-hr__icon { grid-column: 1; grid-row: 1; align-self: center; }

.bec-hr__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--hr-icon); height: var(--hr-icon); font-size: var(--hr-icon); line-height: 1; color: inherit; flex: none; transition: color .3s ease; }
.bec-hr__icon svg { width: 100%; height: 100%; fill: currentColor; }
.bec-hr__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.bec-hr__title { position: relative; align-self: stretch; justify-self: stretch; margin: 0; padding: 0; color: inherit; font-weight: 300; max-width: 28ch; text-align: inherit; transition: color .3s ease; }
.bec-hr__title-text { display: inline-block; max-width: 100%; transition: transform .45s var(--hr-ease); }
/* room for the slide is kept from the start, so the title never wraps differently or overflows when it moves */
.bec-hr__dot + .bec-hr__title-text { max-width: calc(100% - var(--hr-dot-space)); }
.bec-hr__dot { position: absolute; left: 0; top: .55em; width: var(--hr-dot); height: var(--hr-dot); margin-top: calc(var(--hr-dot) / -2); border-radius: 50%; background-color: var(--hr-accent); transform: scale(0); transition: transform .35s var(--hr-ease); }
.bec-hr__row.is-active .bec-hr__dot { transform: scale(1); }
.bec-hr__row.is-active .bec-hr__dot + .bec-hr__title-text { transform: translate3d(var(--hr-dot-space), 0, 0); }

.bec-hr__tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 1.4; }
.bec-hr__tag + .bec-hr__tag::before { content: var(--hr-tag-sep, "·"); margin-right: 10px; opacity: .6; }
.bec-hr__desc { margin: 0; padding: 0; max-width: 56ch; color: #4A4538; text-align: inherit; transition: opacity .35s ease, transform .45s var(--hr-ease); }

/* call to action: colours from variables, so the theme's a / a:hover colours can't override them */
.bec-hr a.bec-hr__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--hr-cta-c, inherit); text-decoration: none; font-weight: 400; transition: color .25s ease, background-color .25s ease, opacity .35s ease, transform .45s var(--hr-ease); }
.bec-hr a.bec-hr__cta:hover, .bec-hr a.bec-hr__cta:focus { color: var(--hr-cta-c-h, var(--hr-cta-c, inherit)); text-decoration: none; }
.bec-hr-cta-pill .bec-hr a.bec-hr__cta:not(.is-bare) { padding: 12px 20px; border-radius: 999px; background-color: var(--hr-cta-bg, var(--hr-accent)); color: var(--hr-cta-c, #FBF6EE); }
.bec-hr-cta-pill .bec-hr a.bec-hr__cta:not(.is-bare):hover { background-color: var(--hr-cta-bg-h, var(--hr-cta-bg, var(--hr-accent))); color: var(--hr-cta-c-h, var(--hr-cta-c, #FBF6EE)); }
.bec-hr__cta-icon { display: inline-flex; transition: transform .25s var(--hr-ease); }
.bec-hr__cta-icon svg { width: 1em; height: 1em; fill: currentColor; }
.bec-hr a.bec-hr__cta:hover .bec-hr__cta-icon, .bec-hr__row.is-active .bec-hr__cta-icon { transform: translateX(4px); }
.bec-hr a.bec-hr__cta.is-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bec-hr a.bec-hr__cta:focus-visible { outline: 3px solid #FF662F; outline-offset: 3px; }
.bec-hr a.bec-hr__cta.is-stretched:focus-visible { outline: none; }
.bec-hr a.bec-hr__cta.is-stretched:focus-visible::after { outline: 3px solid #FF662F; outline-offset: -3px; }
.bec-hr__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* description / button that appear on hover keep their space, so rows never change height */
.bec-hr.is-desc-hover .bec-hr__desc,
.bec-hr.is-cta-hover a.bec-hr__cta:not(.is-bare) { opacity: 0; transform: translate3d(0, 6px, 0); }
.bec-hr.is-desc-hover .bec-hr__row.is-active .bec-hr__desc,
.bec-hr.is-cta-hover .bec-hr__row.is-active a.bec-hr__cta:not(.is-bare),
.bec-hr.is-cta-hover a.bec-hr__cta:not(.is-bare):focus-visible { opacity: 1; transform: none; }

/* ---------- image column ---------- */
.bec-hr__aside { grid-area: aside; position: relative; min-width: 0; display: grid; }
.bec-hr__label { grid-area: 1 / 1; align-self: center; justify-self: center; padding: var(--hr-pad) 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: center; opacity: .6; transition: opacity .3s ease; }
.bec-hr__row.is-active .bec-hr__label { opacity: 0; }
.bec-hr__media { grid-area: 1 / 1; position: relative; min-width: 0; min-height: 0; }
.bec-hr.is-h-row .bec-hr__media { position: absolute; inset: var(--hr-media-inset) 0; }
.bec-hr.is-h-ratio .bec-hr__media { align-self: var(--hr-media-align, center); aspect-ratio: var(--hr-ratio); margin-block: var(--hr-media-inset); }
.bec-hr.is-h-fixed .bec-hr__media { align-self: var(--hr-media-align, center); height: var(--hr-media-h, 260px); margin-block: var(--hr-media-inset); }

.bec-hr__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--hr-radius);
	clip-path: var(--hr-clip-from);
	opacity: var(--hr-op-from, 1);
	transform: scale(var(--hr-frame-from, 1));
	transition: clip-path var(--hr-dur) var(--hr-ease), opacity calc(var(--hr-dur) * .7) ease, transform var(--hr-dur) var(--hr-ease);
	pointer-events: none;
}
.bec-hr__row.is-active .bec-hr__frame { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
.bec-hr__frame img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: var(--hr-focus, center center);
	transform: scale(var(--hr-zoom));
	transform-origin: 50% 50%;
	transition: transform calc(var(--hr-dur) * 1.6) var(--hr-ease);
}
.bec-hr__row.is-active .bec-hr__frame img { transform: none; }
.bec-hr__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* tall screenshots slide from top to bottom while open */
.bec-hr__frame.is-pan img { height: auto !important; object-fit: fill; transform: none; transition: transform .8s var(--hr-ease); }
.bec-hr__row.is-active .bec-hr__frame.is-pan img { transform: translate3d(0, calc(var(--hr-pan, 0px) * -1), 0); transition: transform var(--hr-pan-dur, 6s) linear calc(var(--hr-dur) * .6); }

.bec-hr-fx-up .bec-hr { --hr-clip-from: inset(100% 0 0 0); }
.bec-hr-fx-down .bec-hr { --hr-clip-from: inset(0 0 100% 0); }
.bec-hr-fx-side .bec-hr { --hr-clip-from: inset(0 0 0 100%); }
.bec-hr-fx-side .bec-hr.is-p-left { --hr-clip-from: inset(0 100% 0 0); }
.bec-hr-fx-fade .bec-hr { --hr-clip-from: inset(0 0 0 0); --hr-op-from: 0; }
.bec-hr-fx-zoom .bec-hr { --hr-clip-from: inset(0 0 0 0); --hr-op-from: 0; --hr-frame-from: .92; }

.bec-hr__arrow {
	position: absolute;
	z-index: 2;
	top: var(--hr-arrow-off);
	right: var(--hr-arrow-off);
	width: var(--hr-arrow);
	height: var(--hr-arrow);
	display: grid;
	place-items: center;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	color: var(--hr-arrow-c, currentColor);
	font-size: calc(var(--hr-arrow) * .36);
	line-height: 1;
	pointer-events: none;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .35s ease, transform .45s var(--hr-ease);
}
.bec-hr__arrow svg { width: 1em; height: 1em; fill: currentColor; }
.bec-hr__row.is-active .bec-hr__arrow { background-color: var(--hr-accent); border-color: var(--hr-accent); color: var(--hr-arrow-on-c, #FBF6EE); }

/* ---------- other rows dim while one is open ---------- */
.bec-hr.has-dim.has-active .bec-hr__row:not(.is-active) .bec-hr__num,
.bec-hr.has-dim.has-active .bec-hr__row:not(.is-active) .bec-hr__main,
.bec-hr.has-dim.has-active .bec-hr__row:not(.is-active) .bec-hr__label,
.bec-hr.has-dim.has-active .bec-hr__row:not(.is-active) .bec-hr__arrow { opacity: var(--hr-dim); }

/* ---------- image below the text: opens like an accordion ---------- */
.bec-hr.is-p-below .bec-hr__row { grid-template-columns: var(--hr-num-w) minmax(0, 1fr); grid-template-areas: "num main" ". aside"; }
.bec-hr.is-p-below:not(.has-num) .bec-hr__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside"; }
.bec-hr.is-p-below .bec-hr__aside { grid-template-rows: 0fr; transition: grid-template-rows var(--hr-dur) var(--hr-ease); }
.bec-hr.is-p-below .bec-hr__row.is-active .bec-hr__aside { grid-template-rows: 1fr; }
.bec-hr.is-p-below .bec-hr__label { display: none; }
.bec-hr.is-p-below .bec-hr__media { position: relative; inset: auto; overflow: hidden; aspect-ratio: auto; margin: 0; align-self: stretch; }
.bec-hr.is-p-below .bec-hr__frame { position: relative; inset: auto; aspect-ratio: var(--hr-ratio); margin-bottom: var(--hr-pad); }
.bec-hr.is-p-below.is-h-fixed .bec-hr__media { height: auto; }
.bec-hr.is-p-below.is-h-fixed .bec-hr__frame { aspect-ratio: auto; height: var(--hr-media-h, 260px); }

@media (prefers-reduced-motion: reduce) {
	.bec-hr *, .bec-hr *::before, .bec-hr *::after { transition-duration: 1ms !important; transition-delay: 0s !important; }
}