/* ==========================================================================
   Homepage Hero 1 — finished artwork (attachment 134)
   ==========================================================================
   The supplied artwork is a COMPLETE composition: the sage atmosphere, the
   circular/oval treatment, the botanical shadows and the gold accent lines
   are baked into the file itself.

   This stylesheet therefore only PLACES and SIZES that file.
   Deliberately absent: masks, alpha feathering, radial/elliptical glow,
   background illumination, drop shadows, filters, pseudo-element panels,
   border-radius, transforms.  Every one of those was part of the earlier
   transparent-cutout experiments and is explicitly neutralised below.
   ========================================================================== */

/* --- 1. Hero shell -------------------------------------------------------
   The artwork's outer sage measures rgb(63, 72, 47).  Matching the hero to
   that exact tone is what removes the left/right vertical lines and the
   corners — no feathering required.  Colour only; no gradient, no glow.     */
.gfe-hero--figure.e-con.gfe-hero {
	background-color: #475136;
	background-image: none;
}
/* drifting radial background illumination — removed (artwork supplies it) */
.gfe-hero--figure.e-con.gfe-hero::before {
	content: none;
}

/* --- 2. The visual slot --------------------------------------------------
   Spans the full hero so the percentage padding below reads as
   "% of the hero width":
     left  46%  kept clear for the headline column
     right  6%  breathing room, so the artwork is never pinned to the edge
     => the artwork itself occupies the remaining 48% of the hero.          */
.gfe-hero--figure .e-con.gfe-hero__media {
	-webkit-mask-image: none;
	mask-image: none;
	overflow: visible;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	z-index: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	padding-block: 0;
	padding-inline: 46% 6%;
}
/* sage scrim that used to veil the top/bottom of the old photo — removed */
.gfe-hero--figure .e-con.gfe-hero__media::before,
.gfe-hero--figure .e-con.gfe-hero__media::after {
	content: none;
}

/* --- 3. The artwork ------------------------------------------------------ */
.gfe-hero--figure .gfe-hero__media .elementor-widget-image {
	width: 100%;
	max-width: 1180px;      /* stops the artwork outgrowing the hero height */
	height: auto;
	flex: 0 1 auto;
	align-self: center;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.043) 1.375%, rgba(0,0,0,.156) 2.75%, rgba(0,0,0,.316) 4.125%, rgba(0,0,0,.5) 5.5%, rgba(0,0,0,.684) 6.875%, rgba(0,0,0,.844) 8.25%, rgba(0,0,0,.957) 9.625%, #000 11%, #000 89%, rgba(0,0,0,.957) 90.375%, rgba(0,0,0,.844) 91.75%, rgba(0,0,0,.684) 93.125%, rgba(0,0,0,.5) 94.5%, rgba(0,0,0,.316) 95.875%, rgba(0,0,0,.156) 97.25%, rgba(0,0,0,.043) 98.625%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.043) 1.375%, rgba(0,0,0,.156) 2.75%, rgba(0,0,0,.316) 4.125%, rgba(0,0,0,.5) 5.5%, rgba(0,0,0,.684) 6.875%, rgba(0,0,0,.844) 8.25%, rgba(0,0,0,.957) 9.625%, #000 11%, #000 89%, rgba(0,0,0,.957) 90.375%, rgba(0,0,0,.844) 91.75%, rgba(0,0,0,.684) 93.125%, rgba(0,0,0,.5) 94.5%, rgba(0,0,0,.316) 95.875%, rgba(0,0,0,.156) 97.25%, rgba(0,0,0,.043) 98.625%, rgba(0,0,0,0) 100%);
	filter: none;
	animation: gfeHeroArt 1.2s var(--gfe-ease-out) both;
}
.gfe-hero--figure .gfe-hero__media .elementor-widget-image > .elementor-widget-container {
	width: 100%;
	height: auto;
}
.gfe-hero--figure .gfe-hero__media img {
	display: block;
	width: 100%;
	height: auto;           /* full composition, never cropped */
	max-width: none;
	object-fit: fill;
	object-position: 50% 50%;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: none;
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.043) 1.25%, rgba(0,0,0,.156) 2.5%, rgba(0,0,0,.316) 3.75%, rgba(0,0,0,.5) 5%, rgba(0,0,0,.684) 6.25%, rgba(0,0,0,.844) 7.5%, rgba(0,0,0,.957) 8.75%, #000 10%, #000 90%, rgba(0,0,0,.957) 91.25%, rgba(0,0,0,.844) 92.5%, rgba(0,0,0,.684) 93.75%, rgba(0,0,0,.5) 95%, rgba(0,0,0,.316) 96.25%, rgba(0,0,0,.156) 97.5%, rgba(0,0,0,.043) 98.75%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.043) 1.25%, rgba(0,0,0,.156) 2.5%, rgba(0,0,0,.316) 3.75%, rgba(0,0,0,.5) 5%, rgba(0,0,0,.684) 6.25%, rgba(0,0,0,.844) 7.5%, rgba(0,0,0,.957) 8.75%, #000 10%, #000 90%, rgba(0,0,0,.957) 91.25%, rgba(0,0,0,.844) 92.5%, rgba(0,0,0,.684) 93.75%, rgba(0,0,0,.5) 95%, rgba(0,0,0,.316) 96.25%, rgba(0,0,0,.156) 97.5%, rgba(0,0,0,.043) 98.75%, rgba(0,0,0,0) 100%);
	animation: none;
	transform: none !important;   /* refuses the scroll-parallax transform */
	will-change: auto;
}
/* the only motion kept: a plain fade-in, no scale, no glow */
@keyframes gfeHeroArt { from { opacity: 0; } to { opacity: 1; } }

/* --- 4. Narrow desktop / iPad landscape ---------------------------------
   The headline column needs more room here, so the artwork gives a little
   width back but stays inside the requested 45–50% band.                   */
@media (min-width: 901px) and (max-width: 1279px) {
	.gfe-hero--figure .e-con.gfe-hero__media {
		padding-inline: 51% 4%;
	}
}

/* --- 5. Tablet portrait and mobile ---------------------------------------
   The whole artwork, centred, generously sized, nothing cropped.           */
@media (max-width: 900px) {
	.gfe-hero--figure.e-con.gfe-hero {
		/* clear the fixed header so the artwork is not hidden behind it */
		--padding-top: calc(var(--gfe-header-h) + clamp(16px, 3.6vw, 30px));
	}
	.gfe-hero--figure .e-con.gfe-hero__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: calc(100% + 2 * var(--gfe-gutter));
		margin: 0 calc(var(--gfe-gutter) * -1);
		height: auto;
		aspect-ratio: auto;
		padding-inline: 0;
		justify-content: center;
		-webkit-mask-image: none;
		mask-image: none;
		overflow: visible;
	}
	.gfe-hero--figure .gfe-hero__media .elementor-widget-image {
		width: 100%;
		max-width: none;
	}
	.gfe-hero--figure .gfe-hero__media img {
		width: 100%;
		height: auto;
		margin: 0;
	}
	.gfe-hero--figure .e-con.gfe-hero__copy {
		margin-top: clamp(12px, 3.2vw, 26px);
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gfe-hero--figure .gfe-hero__media .elementor-widget-image {
		animation: none;
		opacity: 1;
	}
}