/* ==========================================================================
   Frog Glass immersive pass
   Loaded after main.css. All selectors fg- prefixed except .home hooks.
   Motion is gated by html.fg-js and honours prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   a. Home hero: full bleed, bottom-left on desktop, centred on mobile
   -------------------------------------------------------------------------- */

.fg-hero {
	overflow-x: clip;
}

.fg-hero--home {
	min-height: max(560px, calc(100vh - 130px));
	min-height: max(560px, calc(100svh - 130px));
	border-radius: 0 0 50% 50% / 0 0 40px 40px;
}

@media (min-width: 900px) {
	.fg-hero--home {
		align-items: flex-end;
	}
}

/* Stronger left-to-right overlay plus a static faint glare corner */
.fg-hero__media::after {
	z-index: 1;
	background:
		radial-gradient(65% 90% at 88% -5%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%),
		linear-gradient(100deg, rgba(8, 14, 11, .88) 0%, rgba(9, 17, 13, .74) 45%, rgba(10, 19, 15, .5) 78%, rgba(10, 19, 15, .45) 100%);
}

/* Slow Ken Burns on the home photo */
.fg-hero--home .fg-hero__img {
	will-change: transform;
	animation: fg-kenburns 28s ease-in-out infinite alternate;
}

@keyframes fg-kenburns {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.08);
	}
}

/* Glass sheen: one slow diagonal sweep with a long pause */
.fg-hero--home .fg-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 60%);
	transform: translateX(-120%);
	animation: fg-sheen 9s ease-in-out infinite;
	pointer-events: none;
}

@keyframes fg-sheen {
	0% {
		transform: translateX(-120%);
	}

	42% {
		transform: translateX(120%);
	}

	100% {
		transform: translateX(120%);
	}
}

.fg-hero--home h1 {
	max-width: 14ch;
	font-size: clamp(2.4rem, 7.5vw, 5.25rem);
	line-height: 1.02;
	font-weight: 800;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.fg-hero--home .fg-lead {
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
}

.fg-hero--home .fg-btn {
	min-width: 48px;
	min-height: 52px;
	padding: 0 28px;
}

/* Trust strip becomes a frosted glass bar */
.fg-trust__list {
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 18px 44px rgba(17, 25, 23, .16);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

@supports not (backdrop-filter: blur(1px)) {
	.fg-trust__list {
		background: #FFFFFF;
	}
}

/* --------------------------------------------------------------------------
   b. Inner page heroes
   -------------------------------------------------------------------------- */

.fg-hero:not(.fg-hero--home):not(.fg-hero--plain) {
	min-height: clamp(320px, 52vh, 560px);
}

.fg-hero:not(.fg-hero--home) h1 {
	font-size: clamp(2rem, 5.2vw, 3.75rem);
}

.fg-hero:not(.fg-hero--plain) h1,
.fg-hero:not(.fg-hero--plain) .fg-lead {
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   c. Type
   -------------------------------------------------------------------------- */

.fg-section h2 {
	font-size: clamp(1.9rem, 4.4vw, 3.25rem);
	line-height: 1.1;
	font-weight: 800;
}

.fg-section h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 5px;
	margin-top: 14px;
	border-radius: 3px;
	background: var(--red-bright);
}

.fg-lead {
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

/* --------------------------------------------------------------------------
   d. Service tiles: image fills, frosted glass body panel
   -------------------------------------------------------------------------- */

.fg-card {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 0;
	border-radius: 20px;
	background: #0E1814;
}

@media (min-width: 900px) {
	.fg-card {
		aspect-ratio: 3 / 4;
	}
}

@media (min-width: 1000px) {
	.fg-cards--feature > .fg-card:first-child {
		aspect-ratio: 16 / 9;
	}
}

.fg-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.fg-card__media img {
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.fg-card__body {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	padding: 16px 20px 12px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 14px;
	background: rgba(14, 24, 20, .55);
	color: #FFFFFF;
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	transition: background-color .3s ease, border-color .3s ease;
}

.fg-card__title {
	margin-bottom: 6px;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	color: #FFFFFF;
}

.fg-card__text {
	margin-top: 4px;
	color: #FFFFFF;
}

.fg-card__more {
	min-height: 48px;
	margin-top: 6px;
	color: #FFFFFF;
}

/* Photo fills the whole tile (beats main.css 3:2 and feature rules) */
.fg-cards .fg-card .fg-card__link,
.fg-cards .fg-card .fg-card__media {
	display: block;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
}

.fg-cards .fg-card .fg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Teaser text reveals on hover/focus for precise pointers, always on touch */
@media (hover: hover) and (pointer: fine) {
	.fg-card__text {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		transition: max-height .45s ease, opacity .45s ease, margin-top .45s ease;
	}

	.fg-card:hover .fg-card__text,
	.fg-card:focus-within .fg-card__text {
		max-height: 8em;
		opacity: 1;
	}
}

.fg-card:hover,
.fg-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px rgba(17, 25, 23, .22);
}

.fg-card:hover .fg-card__media img,
.fg-card:focus-within .fg-card__media img {
	transform: scale(1.07);
}

.fg-card:hover .fg-card__body,
.fg-card:focus-within .fg-card__body {
	background: rgba(22, 36, 30, .65);
	border-color: rgba(255, 255, 255, .45);
}

/* White outline plus green outer ring so focus shows on photos */
.fg-card:focus-within {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #1B6B3A, 0 22px 48px rgba(17, 25, 23, .22);
}

@supports not (backdrop-filter: blur(1px)) {
	.fg-card__body {
		background: rgba(14, 24, 20, .85);
	}
}

/* Post cards stay light, only gain the same lift */
.fg-post-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(17, 25, 23, .16);
}

/* --------------------------------------------------------------------------
   e. Section rhythm (home): dramatic dark sections with angled top edges
   -------------------------------------------------------------------------- */

.home .fg-section--dark,
.fg-section:has(> .fg-container > .fg-areas) {
	--fg-angle: 2.2vw;
	position: relative;
	margin-top: calc(var(--fg-angle) * -1);
	clip-path: polygon(0 var(--fg-angle), 100% 0, 100% 100%, 0 100%);
	overflow-x: clip;
}

@media (max-width: 639.98px) {
	.home .fg-section--dark,
	.fg-section:has(> .fg-container > .fg-areas) {
		--fg-angle: 1.5vw;
	}
}

/* Genuine 24/7 dark section */
.home .fg-section--dark {
	padding-top: calc(clamp(80px, 12vw, 160px) + var(--fg-angle));
	padding-bottom: clamp(80px, 12vw, 160px);
	background:
		radial-gradient(55% 75% at 18% 25%, rgba(64, 160, 88, .22), rgba(64, 160, 88, 0) 62%),
		radial-gradient(45% 65% at 85% 80%, rgba(27, 107, 58, .2), rgba(27, 107, 58, 0) 65%),
		var(--ink);
}

.home .fg-section--dark h2 {
	font-size: clamp(2.2rem, 5vw, 3.75rem);
}

.home .fg-section--dark .fg-prose--wide {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
}

/* Areas section goes dark with frosted panels */
.fg-section:has(> .fg-container > .fg-areas) {
	padding-top: calc(clamp(64px, 10vw, 120px) + var(--fg-angle));
	padding-bottom: clamp(64px, 10vw, 120px);
	background:
		radial-gradient(38% 55% at 12% 18%, rgba(64, 160, 88, .32), rgba(64, 160, 88, 0) 60%),
		radial-gradient(42% 60% at 88% 85%, rgba(45, 140, 110, .3), rgba(45, 140, 110, 0) 65%),
		var(--ink);
	color: #FFFFFF;
}

.fg-section:has(> .fg-container > .fg-areas) h2 {
	color: #FFFFFF;
}

.fg-section:has(> .fg-container > .fg-areas) .fg-areas__item {
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
	color: #FFFFFF;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.fg-section:has(> .fg-container > .fg-areas) .fg-areas__item h3 {
	color: #FFFFFF;
}

.fg-section:has(> .fg-container > .fg-areas) a {
	color: #A9DFC0;
}

.fg-section:has(> .fg-container > .fg-areas) :focus-visible {
	outline-color: #FFFFFF;
}

/* Split figures: radius, soft shadow, offset glass frame, hover zoom */
.fg-split__media {
	position: relative;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba(17, 25, 23, .16);
}

.fg-split__media::before {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 12px;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.fg-split__media img {
		transition: transform .8s cubic-bezier(.2, .7, .2, 1);
	}

	.fg-split__media:hover img {
		transform: scale(1.04);
	}
}

/* --------------------------------------------------------------------------
   f. Full width image bands with CSS-only parallax
   -------------------------------------------------------------------------- */

.fg-band {
	position: relative;
	overflow: hidden;
	overflow-x: clip;
	height: clamp(260px, 46vw, 560px);
	margin: 0;
}

.fg-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fg-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(17, 25, 23, 0), rgba(17, 25, 23, .35));
	pointer-events: none;
}

@keyframes fg-parallax {
	from {
		transform: translateY(-7%);
	}

	to {
		transform: translateY(7%);
	}
}

@media (min-width: 1000px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.fg-band__img {
			top: -12%;
			height: 124%;
			animation: fg-parallax linear both;
			animation-timeline: view();
		}
	}
}

/* --------------------------------------------------------------------------
   g. Scroll reveal (added by immersive.js only when motion is allowed)
   -------------------------------------------------------------------------- */

html.fg-js .fg-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--fg-i, 0) * 90ms);
}

html.fg-js .fg-reveal--left {
	transform: translateX(-32px);
}

html.fg-js .fg-reveal--right {
	transform: translateX(32px);
}

html.fg-js .fg-reveal--zoom {
	transform: scale(.98);
}

html.fg-js .fg-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   h. Reduced motion: everything calm, content always visible
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fg-hero--home .fg-hero__img {
		animation: none !important;
		transform: none !important;
		will-change: auto;
	}

	/* Sweep off, static glare stays */
	.fg-hero--home .fg-hero__media::before {
		animation: none !important;
	}

	.fg-band__img {
		top: 0 !important;
		height: 100% !important;
		animation: none !important;
		transform: none !important;
	}

	html.fg-js .fg-reveal,
	html.fg-js .fg-reveal.is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fg-card,
	.fg-post-card,
	.fg-card__media img,
	.fg-split__media img {
		transition: none !important;
	}

	.fg-card:hover,
	.fg-card:focus-within,
	.fg-post-card:hover,
	.fg-card:hover .fg-card__media img,
	.fg-card:focus-within .fg-card__media img,
	.fg-split__media:hover img {
		transform: none !important;
	}
}

/* Decorative bands do not print */
@media print {
	.fg-band {
		display: none !important;
	}
}