/* ElitAgrotehnologie: the motion (Sprouts) and the new footer. New Light Digital, 2026-10-15.
   Loaded only for a browser holding the preview cookie (inc/motion.php) until Daniel says it goes live; then it
   joins style.css. Three parts: the motion (ea-fx.js), the footer (ea-grow.js, seedling.js), and the old hover
   rules that lifted cards and zoomed photos, stopped. Generated from ~/Documents/elitagrotehnologie/premium-2026-10/proto
   by make_theme_css.py: edit those files, not this one. */

/* ElitAgrotehnologie motion: the stylesheet half of ea-fx.js and ea-fields.js. New Light Digital, 2026-10-15.
   One gesture: the field answers. Every mark rises from the ground under a control, stays clear of its words,
   and goes back to rest. Boxes never move: no lift, no zoom, no growing; only the marks inside them move.
   html[data-fx-skin] names the direction (hills, wind, sprout). */
:root {
	--fx-ease: cubic-bezier(.22, 1, .36, 1);
	--fx-inout: cubic-bezier(.65, 0, .35, 1);
	--fx-in: cubic-bezier(.5, 0, .75, 0);
	--fx-mark: var(--color-green, #00BC65);
	--fx-mark-deep: var(--color-green-deep, #006B36);
}

/* ---------- the one rule a hook adds to the site's own elements ----------
   A mark needs a positioned box to sit in. ea-site.js adds .fx-pos only to an element that was static, so an
   absolutely placed slider arrow stays where the site put it, and no hook ever changes a display: a link that is
   a flex row stays a flex row. (Setting both here for every hooked element misplaced the team slider's arrows,
   stacked the contact page's phone icon over its number and resized the related-product links, 15 Oct 2026.) */
.fx-pos {
	position: relative;
}

/* ---------- buttons: the canvas behind the words ---------- */
.btn[data-fx] {
	transition: background-color .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
/* a button that is not the site's .btn has no label of its own: the canvas sits in the button, behind its words */
[data-fx]:not(.btn) {
	isolation: isolate;
}
.btn[data-fx]:hover {
	transform: none;
}
.btn[data-fx] .btn__label {
	isolation: isolate;
}
.fx-cv {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* the arrow block: each direction moves its arrow in its own way, and it always comes back to rest */
.btn__arrow {
	overflow: hidden;
}
.fx-arr {
	display: block;
	overflow: visible;
}
.fx-arr path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
	/* hills: the arrow glides on out and a new one glides in after it, like the field passing */
	html[data-fx-skin="hills"] .btn[data-fx]:hover .fx-arr {
		animation: fx-glide .9s var(--fx-inout) both;
	}
	/* wind: the arrow is blown out, then drawn back in from its tail */
	html[data-fx-skin="wind"] .btn[data-fx]:hover .fx-arr {
		animation: fx-blow 1.1s var(--fx-inout) both;
	}
	html[data-fx-skin="wind"] .btn[data-fx]:hover .fx-arr .s,
	html[data-fx-skin="wind"] .btn[data-fx]:hover .fx-arr .h {
		stroke-dasharray: 1 1.2;
		animation: fx-draw .5s .48s var(--fx-ease) both;
	}
	/* sprout: the shaft grows from its tail, then the head opens like two leaves */
	html[data-fx-skin="sprout"] .btn[data-fx]:hover .fx-arr .s {
		stroke-dasharray: 1 1.2;
		animation: fx-draw .5s var(--fx-ease) both;
	}
	html[data-fx-skin="sprout"] .btn[data-fx]:hover .fx-arr .h {
		transform-box: fill-box;
		transform-origin: 100% 50%;
		animation: fx-unfold .42s .32s var(--fx-ease) both;
	}
}
@keyframes fx-glide {
	0% { transform: translateX(0); }
	46% { transform: translateX(150%); }
	46.1% { transform: translateX(-150%); }
	100% { transform: translateX(0); }
}
@keyframes fx-blow {
	0% { transform: translateX(0); opacity: 1; }
	38% { transform: translateX(110%); opacity: 0; }
	39% { transform: translateX(0); opacity: 0; }
	44%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes fx-draw {
	from { stroke-dashoffset: 1.1; opacity: 1; transform: none; }
	to { stroke-dashoffset: 0; opacity: 1; transform: none; }
}
@keyframes fx-unfold {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

/* sending: the words step aside while the marks keep growing, then a tick */
.btn.is-sending .btn__label > :not(.fx-cv),
.btn.is-sent .btn__label > :not(.fx-cv) {
	opacity: 0;
}
.btn .fx-tick {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	opacity: 0;
	pointer-events: none;
}
.btn .fx-tick path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1 1.2;
	stroke-dashoffset: 1.1;
}
.btn.is-sent .fx-tick {
	opacity: 1;
}
.btn.is-sent .fx-tick path {
	transition: stroke-dashoffset .5s .1s var(--fx-ease);
	stroke-dashoffset: 0;
}
.btn .fx-wait {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	opacity: 0;
	pointer-events: none;
}
.btn.is-sending .fx-wait {
	opacity: 1;
}
.btn .fx-wait i {
	display: block;
	width: 2px;
	height: 14px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: 50% 100%;
	animation: fx-wait 1.2s var(--fx-inout) infinite;
}
.btn .fx-wait i:nth-child(2) { animation-delay: .12s; }
.btn .fx-wait i:nth-child(3) { animation-delay: .24s; }
.btn .fx-wait i:nth-child(4) { animation-delay: .36s; }
.btn .fx-wait i:nth-child(5) { animation-delay: .48s; }
@keyframes fx-wait {
	0%, 100% { transform: scaleY(.25); opacity: .45; }
	45% { transform: scaleY(1); opacity: 1; }
}

/* ---------- text links and card titles: one small mark under the words ---------- */
[data-fx-title] {
	position: relative;
}
.fx-u {
	position: absolute;
	left: 0;
	bottom: -9px;
	overflow: visible;
	pointer-events: none;
	color: var(--fx-mark);
}
.fx-u .u,
.fx-u .rip,
.fx-u .st {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}
/* every line that draws itself is one dash the length of the line with a gap a little longer, parked a little past
   either end: a dash parked exactly at an end leaves its round cap there as a dot (Safari did, under every link) */
.fx-u .u {
	stroke-dasharray: 1 1.2;
	stroke-dashoffset: 1.1;
	transition: stroke-dashoffset .5s var(--fx-ease);
}
.fx-u .rip {
	opacity: 0;
}
.fx-u .lf {
	fill: currentColor;
}
.fx-u .sd {
	opacity: 0;
}
.fx-u .sd .st {
	stroke-width: 1.2;
}
@media (hover: hover) and (pointer: fine) {
	/* the line draws itself from the left */
	[data-fx-link]:hover .fx-u .u,
	[data-fx-card]:hover .fx-u .u {
		stroke-dashoffset: 0;
	}
	/* hills: the ridge draws in; leaving, it carries on out to the right */
	html[data-fx-skin="hills"] [data-fx-link]:not(:hover) .fx-u .u,
	html[data-fx-skin="hills"] [data-fx-card]:not(:hover) .fx-u .u {
		stroke-dashoffset: -1.1;
		transition: stroke-dashoffset .45s var(--fx-in);
	}
	/* wind: the straight line is there at once and the swell runs along it (ea-fx.js) */
	html[data-fx-skin="wind"] .fx-rippling .fx-u .rip {
		opacity: 1;
	}
	html[data-fx-skin="wind"] .fx-rippling .fx-u .u {
		opacity: 0;
	}
	html[data-fx-skin="wind"] [data-fx-link]:hover .fx-u .u,
	html[data-fx-skin="wind"] [data-fx-card]:hover .fx-u .u {
		transition-duration: .2s;
	}
	/* sprout: at the line's end a seedling comes up and opens its leaves */
	html[data-fx-skin="sprout"] [data-fx-link]:hover .fx-u .sd,
	html[data-fx-skin="sprout"] [data-fx-card]:hover .fx-u .sd {
		opacity: 1;
		transition: opacity .1s .34s;
	}
	html[data-fx-skin="sprout"] [data-fx-link]:hover .fx-u .sd .st,
	html[data-fx-skin="sprout"] [data-fx-card]:hover .fx-u .sd .st {
		animation: fx-rise .4s .34s var(--fx-ease) both;
	}
	html[data-fx-skin="sprout"] [data-fx-link]:hover .fx-u .sd .lf,
	html[data-fx-skin="sprout"] [data-fx-card]:hover .fx-u .sd .lf {
		animation: fx-leaf .46s .62s var(--fx-ease) both;
	}
}
@keyframes fx-rise {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}
@keyframes fx-leaf {
	from { transform: rotate(var(--fold, 40deg)) scale(.3); opacity: 0; }
	to { transform: none; opacity: 1; }
}
.fx-u .sd .st,
.fx-m .sd .st {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}
.fx-u .sd .lf,
.fx-m .sd .lf {
	transform-box: view-box;
	transform-origin: 0 -7px;
}
.fx-u .sd .lf.l,
.fx-m .sd .lf.l { --fold: 46deg; }
.fx-u .sd .lf.r,
.fx-m .sd .lf.r { --fold: -46deg; }

/* ---------- menu: a small mark rises under the link; the current page keeps its mark ---------- */
.fx-nav > li > a {
	position: relative;
}
.fx-m {
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 26px;
	height: 12px;
	margin-left: -13px;
	overflow: visible;
	pointer-events: none;
	color: var(--fx-mark);
}
.fx-m path {
	fill: currentColor;
}
.fx-m .b,
.fx-m .st {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}
.fx-m .h2 {
	opacity: .45;
}
/* at rest: nothing under the link */
.fx-m .h1,
.fx-m .h2 {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scaleY(0);
	transition: transform .5s var(--fx-ease);
}
.fx-m .h2 { transition-delay: .05s; }
.fx-m .b {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scaleY(0) rotate(-24deg);
	transition: transform .55s var(--fx-ease);
}
.fx-m .b2 { transition-delay: .06s; }
.fx-m .b3 { transition-delay: .12s; }
.fx-m .sd .st {
	transform: scaleY(0);
	transition: transform .36s var(--fx-ease);
}
.fx-m .sd .lf {
	opacity: 0;
	transform: rotate(var(--fold)) scale(.3);
	transition: transform .4s var(--fx-ease), opacity .2s;
}
@media (hover: hover) and (pointer: fine) {
	.fx-nav > li > a:hover .fx-m .h1,
	.fx-nav > li > a:hover .fx-m .h2 {
		transform: none;
	}
	.fx-nav > li > a:hover .fx-m .b {
		transform: none;
	}
	.fx-nav > li > a:hover .fx-m .sd .st {
		transform: none;
	}
	.fx-nav > li > a:hover .fx-m .sd .lf {
		opacity: 1;
		transform: none;
		transition-delay: .26s;
	}
}
.fx-nav > li.is-current > a .fx-m .h1,
.fx-nav > li.is-current > a .fx-m .h2,
.fx-nav > li.is-current > a .fx-m .b,
.fx-nav > li.is-current > a .fx-m .sd .st {
	transform: none;
	transition: none;
}
.fx-nav > li.is-current > a .fx-m .sd .lf {
	opacity: 1;
	transform: none;
	transition: none;
}
/* wind: the current page's blades sway, slowly, the whole time? No: it holds still. Only a hover moves. */

/* ---------- fields: the edge draws itself both ways from where it was clicked ---------- */

.fx-field > .fx-edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 0 0 var(--radius, 6px) var(--radius, 6px);
	background: var(--fx-mark-deep);
	transform: scaleX(0);
	transform-origin: var(--ox, 50%) 50%;
	transition: transform .6s var(--fx-ease);
	pointer-events: none;
}
.fx-field.is-on > .fx-edge {
	transform: none;
}
.fx-field > .fx-ok {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 20px;
	height: 14px;
	margin-top: -7px;
	overflow: visible;
	pointer-events: none;
	opacity: 0;
	transform: translateY(3px) scale(.6);
	transform-origin: 50% 100%;
	transition: opacity .3s, transform .5s var(--fx-ease);
	color: var(--fx-mark);
}
.fx-field > .fx-ok .o1 { fill: currentColor; }
.fx-field > .fx-ok .o2 { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.fx-field.is-ok > .fx-ok {
	opacity: 1;
	transform: none;
}
.fx-field.fx-field--area > .fx-ok,
.fx-field.fx-field--select > .fx-ok {
	top: 18px;
	margin-top: 0;
}
.fx-field.fx-field--select > .fx-ok {
	right: 44px;
}

/* ---------- round arrow buttons (sliders): the ring draws itself, the chevron does the direction's move ---------- */
.fx-round {
	overflow: hidden;
	isolation: isolate;
}
.fx-round .fx-ring {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	pointer-events: none;
	overflow: visible;
}
.fx-round .fx-ring circle {
	fill: none;
	stroke: var(--fx-mark-deep);
	stroke-width: 1.6;
	stroke-dasharray: 1 1.2;
	stroke-dashoffset: 1.1;
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset .6s var(--fx-ease);
}
@media (hover: hover) and (pointer: fine) {
	.fx-round:hover .fx-ring circle {
		stroke-dashoffset: 0;
		opacity: 1;
		transition: stroke-dashoffset .6s var(--fx-ease), opacity .05s;
	}
	html[data-fx-skin="hills"] .fx-round:hover .fx-chev {
		animation: fx-glide-y .8s var(--fx-inout) both;
	}
	html[data-fx-skin="hills"] .fx-round--prev:hover .fx-chev {
		animation-name: fx-glide-back;
	}
	html[data-fx-skin="wind"] .fx-round:hover .fx-chev {
		animation: fx-gust .7s var(--fx-ease) both;
	}
	html[data-fx-skin="wind"] .fx-round--prev:hover .fx-chev {
		animation-name: fx-gust-back;
	}
	html[data-fx-skin="sprout"] .fx-round:hover .fx-chev :is(polyline, path) {
		stroke-dasharray: 1 1.2;
		animation: fx-draw .5s var(--fx-ease) both;
	}
}
.fx-round:active .fx-chev {
	transition: transform .12s;
}
@keyframes fx-glide-y {
	0% { transform: translateX(0); }
	45% { transform: translateX(180%); }
	45.1% { transform: translateX(-180%); }
	100% { transform: translateX(0); }
}
@keyframes fx-glide-back {
	0% { transform: translateX(0); }
	45% { transform: translateX(-180%); }
	45.1% { transform: translateX(180%); }
	100% { transform: translateX(0); }
}
@keyframes fx-gust {
	0% { transform: translateX(0); }
	30% { transform: translateX(5px); }
	100% { transform: translateX(0); }
}
@keyframes fx-gust-back {
	0% { transform: translateX(0); }
	30% { transform: translateX(-5px); }
	100% { transform: translateX(0); }
}

/* ---------- social icons and small round controls: the ring draws itself around ---------- */
/* the footer's own ringed buttons are this theme's markup, static by design */
.ea-ft .fx-ringed {
	position: relative;
}
.fx-ringed > .fx-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.fx-ringed > .fx-ring circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-dasharray: 1 1.2;
	stroke-dashoffset: 1.1;
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset .6s var(--fx-ease);
}
@media (hover: hover) and (pointer: fine) {
	.fx-ringed:hover > .fx-ring circle {
		stroke-dashoffset: 0;
		opacity: 1;
		transition: stroke-dashoffset .6s var(--fx-ease), opacity .05s;
	}
}

/* ---------- back to top: its mark runs up out of its ring and comes back ---------- */
.fx-top svg .m {
	transform-box: view-box;
	transform-origin: 12px 18px;
}
@media (hover: hover) and (pointer: fine) {
	html[data-fx-skin="hills"] .fx-top:hover svg .m {
		animation: fx-up 1.1s var(--fx-inout) both;
	}
	html[data-fx-skin="wind"] .fx-top:hover svg .m {
		animation: fx-sway 1.4s var(--fx-inout) both;
	}
	html[data-fx-skin="sprout"] .fx-top:hover svg .m {
		animation: fx-sprout-up 1.3s var(--fx-inout) both;
	}
}
.fx-top.is-go svg .m {
	animation: fx-up .9s var(--fx-inout) both;
}
@keyframes fx-up {
	0% { transform: translateY(0); }
	42% { transform: translateY(-160%); }
	42.1% { transform: translateY(160%); }
	100% { transform: translateY(0); }
}
@keyframes fx-sway {
	0% { transform: rotate(0); }
	30% { transform: rotate(14deg); }
	62% { transform: rotate(-6deg); }
	100% { transform: rotate(0); }
}
@keyframes fx-sprout-up {
	0% { transform: translateY(0) scale(1); }
	40% { transform: translateY(-14%) scale(1.12); }
	100% { transform: translateY(0) scale(1); }
}

/* ---------- the brand's line before a heading draws itself in once, as the heading arrives ---------- */
.js-fx .line-accent::before {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .5s var(--fx-ease);
}
.js-fx .line-accent::after {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .55s .32s var(--fx-ease);
}
.js-fx .line-accent.is-in::before,
.js-fx .line-accent.is-in::after {
	transform: none;
}

/* ---------- the field at the foot of the page ---------- */
.ea-fields {
	position: relative;
}
.ea-fields > canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.ea-fields__pause {
	position: absolute;
	right: clamp(16px, 4vw, 60px);
	bottom: 18px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	background: rgba(15, 42, 29, .62);
	color: #fff;
	cursor: pointer;
	transition: border-color .3s var(--fx-ease), background-color .3s var(--fx-ease);
}
.ea-fields__pause:hover {
	border-color: rgba(255, 255, 255, .8);
	background-color: rgba(15, 42, 29, .9);
}
.ea-fields__pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.ea-fields__pause svg {
	width: 14px;
	height: 14px;
}
.ea-fields__pause .play,
.ea-fields.is-paused .ea-fields__pause .pause {
	display: none;
}
.ea-fields.is-paused .ea-fields__pause .play {
	display: block;
}
.ea-fields.is-still .ea-fields__pause {
	display: none;
}

/* ---------- the dropdown and the phone menu: they unfold, their links come in one by one ---------- */
@media (hover: hover) and (pointer: fine) {
	/* the list unfolds down from the menu link; the clip leaves room for its shadow, so the shadow never pops in after */
	.js-fx .site-nav .sub-menu {
		transform: none;
		clip-path: inset(-24px -48px calc(100% + 24px) -48px);
		transition: clip-path .42s var(--fx-ease), opacity .25s, visibility .42s;
	}
	.js-fx .site-nav li:hover > .sub-menu,
	.js-fx .site-nav li:focus-within > .sub-menu {
		transform: none;
		clip-path: inset(-24px -48px -64px -48px);
	}
	.js-fx .site-nav .sub-menu li {
		opacity: 0;
		transition: opacity .3s;
	}
	.js-fx .site-nav li:hover > .sub-menu li,
	.js-fx .site-nav li:focus-within > .sub-menu li {
		opacity: 1;
	}
	.js-fx .site-nav li:hover > .sub-menu li:nth-child(1) { transition-delay: .08s; }
	.js-fx .site-nav li:hover > .sub-menu li:nth-child(2) { transition-delay: .14s; }
	.js-fx .site-nav li:hover > .sub-menu li:nth-child(3) { transition-delay: .2s; }
	.js-fx .site-nav li:hover > .sub-menu li:nth-child(n+4) { transition-delay: .26s; }
}
/* the phone menu: once the drawer is in, its links arrive one after another; closing, they go at once */
.js-fx .mobile-menu > ul > li,
.js-fx .mobile-menu > .mobile-menu__phone {
	opacity: 0;
	transition: opacity .3s;
}
.js-fx .mobile-menu.is-open > ul > li,
.js-fx .mobile-menu.is-open > .mobile-menu__phone {
	opacity: 1;
	transition: opacity .4s;
}
.js-fx .mobile-menu.is-open > ul > li:nth-child(1) { transition-delay: .16s; }
.js-fx .mobile-menu.is-open > ul > li:nth-child(2) { transition-delay: .21s; }
.js-fx .mobile-menu.is-open > ul > li:nth-child(3) { transition-delay: .26s; }
.js-fx .mobile-menu.is-open > ul > li:nth-child(4) { transition-delay: .31s; }
.js-fx .mobile-menu.is-open > ul > li:nth-child(5) { transition-delay: .36s; }
.js-fx .mobile-menu.is-open > ul > li:nth-child(n+6) { transition-delay: .41s; }
.js-fx .mobile-menu.is-open > .mobile-menu__phone { transition-delay: .46s; }

/* ---------- still for anyone who asks ---------- */
@media (prefers-reduced-motion: reduce) {
	.fx-cv,
	.fx-u .rip {
		display: none;
	}
	.fx-u .u,
	.fx-m *,
	.fx-field > .fx-edge,
	.fx-ring circle,
	.js-fx .line-accent::before,
	.js-fx .line-accent::after {
		transition: none !important;
		animation: none !important;
	}
	.btn__arrow *,
	.fx-top *,
	.fx-round * {
		animation: none !important;
	}
	.js-fx .site-nav .sub-menu,
	.js-fx .site-nav .sub-menu li,
	.js-fx .mobile-menu > ul > li,
	.js-fx .mobile-menu > .mobile-menu__phone {
		transition: none !important;
	}
}

/* keyboard focus is a plain ring, never animated away */
.btn[data-fx]:focus-visible,
[data-fx-link]:focus-visible,
[data-fx-card]:focus-visible,
.fx-nav > li > a:focus-visible,
.fx-round:focus-visible,
.fx-top:focus-visible {
	outline: 2px solid var(--fx-mark-deep);
	outline-offset: 3px;
}


/* ElitAgrotehnologie: the footer, second round. New Light Digital, 2026-10-15.
   One deep green ground, clean (a paper grain read as pixels on screen and in video); a statement and the phone, set large; four short columns under a
   hairline; the art (ea-grow.js) where seedlings come up; the bar. Spacing as ranges, gaps on containers. */
.ea-ft {
	--ft-ground: #0a271c;
	--ft-ink: #ffffff;
	--ft-text: rgba(255, 255, 255, .86);
	--ft-soft: rgba(255, 255, 255, .7);
	--ft-label: #8bd9ae;
	--ft-line: rgba(190, 240, 210, .16);
	--ft-gutter: clamp(20px, 4.4vw, 64px);
	--ft-max: 1400px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(44px, 5.4vw, 80px);
	padding-top: clamp(64px, 8vw, 128px);
	background: var(--ft-ground);
	color: var(--ft-text);
	font-family: var(--font-body, 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	overflow: clip;
	isolation: isolate;
}
.ea-ft > * {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ft-max);
	margin-inline: auto;
	padding-inline: var(--ft-gutter);
}
.ea-ft a {
	color: inherit;
	text-decoration: none;
}
.ea-ft ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ea-ft p {
	margin: 0;
}

/* the head: the line on the left, the phone on the right */
.ea-ft__head {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(32px, 5vw, 96px);
}
.ea-ft__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2.2vw, 30px);
}
.ea-ft__eyebrow,
.ea-ft__label {
	display: flex;
	align-items: center;
	color: var(--ft-label);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.3;
	text-transform: uppercase;
}
.ea-ft__eyebrow .line-accent {
	margin-right: 16px;
}
.ea-ft__statement {
	color: var(--ft-ink);
	font-size: clamp(40px, 6.2vw, 92px);
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.ea-ft__call {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: .4em;
}
.ea-ft__phone {
	color: var(--ft-ink) !important;
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ea-ft__addr {
	color: var(--ft-soft) !important;
	font-size: 16px;
	line-height: 1.5;
	transition: color .3s var(--fx-ease, ease);
}
.ea-ft__addr:hover {
	color: var(--ft-ink) !important;
}

/* the columns, under one hairline */
.ea-ft__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 48px);
	padding-top: clamp(32px, 3.4vw, 48px) !important;
	border-top: 0;
	background: linear-gradient(var(--ft-line), var(--ft-line)) var(--ft-gutter) 0 / calc(100% - 2 * var(--ft-gutter)) 1px no-repeat;
}
.ea-ft__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
}
.ea-ft__col ul:not(.ea-ft__social) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.ea-ft__col a {
	color: var(--ft-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	transition: color .3s var(--fx-ease, ease);
}
.ea-ft__col a:hover {
	color: var(--ft-ink);
}
.ea-ft__social {
	display: flex;
	gap: 12px;
}
.ea-ft__social a {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(190, 240, 210, .26);
	color: var(--ft-text);
	transition: color .3s var(--fx-ease, ease), background-color .3s var(--fx-ease, ease);
}
.ea-ft__social a:hover {
	color: var(--ft-ink);
	background-color: rgba(190, 240, 210, .07);
}
.ea-ft__social svg:not(.fx-ring) {
	width: 18px;
	height: 18px;
}
.ea-ft .fx-ring circle {
	stroke: var(--ft-label);
	stroke-width: 1.4;
}
.ea-ft .fx-u {
	color: var(--ft-label);
	bottom: -8px;
}

/* the art */
.ea-grow {
	position: relative;
	padding-inline: 0 !important;
	max-width: none !important;
}
.ea-grow > canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.ea-ft__end {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ea-grow__pause {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(190, 240, 210, .3);
	background: transparent;
	color: var(--ft-ink);
	cursor: pointer;
	transition: background-color .3s var(--fx-ease, ease);
}
.ea-grow__pause:hover {
	background-color: rgba(190, 240, 210, .08);
}
.ea-grow__pause:focus-visible,
.ea-ft__top:focus-visible {
	outline: 2px solid var(--ft-ink);
	outline-offset: 3px;
}
.ea-grow__pause svg:not(.fx-ring) {
	width: 13px;
	height: 13px;
}
.ea-grow__pause .play,
.ea-grow__pause.is-paused .pause {
	display: none;
}
.ea-grow__pause.is-paused .play {
	display: block;
}

/* look 1, the signature: the company's name set the full width of the content, the seedlings coming up at its foot.
   The name is the logo's own lettering without its mark; it sets the band's height, so it always fits the line. */
.ea-ft[data-look="signature"] .ea-grow {
	margin-top: clamp(-8px, -1vw, 0px);
	margin-bottom: calc(clamp(44px, 5.4vw, 80px) * -.8);
}
.ea-grow__word {
	position: relative;
	display: block;
	width: calc(min(100%, var(--ft-max)) - 2 * var(--ft-gutter));
	aspect-ratio: 169.6 / 37.6;
	margin-inline: auto;
	background: #1c5743;
	/* the logo's own lettering, without its mark, in one tone: assets/img/wordmark.svg used as a mask */
	-webkit-mask: url(../img/wordmark.svg) center / 100% 100% no-repeat;
	mask: url(../img/wordmark.svg) center / 100% 100% no-repeat;
}
/* the soil line runs behind the name, on the letters' baseline (y 42 of 12.4 to 50): the g's reach down through it */
.ea-ft[data-look="signature"] .ea-grow::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 21.28%;
	height: 1px;
	background: rgba(190, 240, 210, .22);
}
.ea-grow:not([data-look="signature"]) .ea-grow__word {
	display: none;
}

/* look 2, the engraving, and look 3, germination: a band the canvas fills */
.ea-ft[data-look="engraving"] .ea-grow {
	height: clamp(220px, 25vw, 360px);
}
.ea-ft[data-look="germination"] .ea-grow {
	height: clamp(200px, 21vw, 300px);
}

/* the bar */
.ea-ft__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px clamp(24px, 3vw, 48px);
	padding-block: clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 36px);
	color: var(--ft-soft);
	font-size: 15px;
	line-height: 1.5;
	background: linear-gradient(var(--ft-line), var(--ft-line)) var(--ft-gutter) 0 / calc(100% - 2 * var(--ft-gutter)) 1px no-repeat;
}
.ea-ft[data-look="signature"] .ea-ft__bar {
	background: none;
}
.ea-ft__credit a {
	color: var(--ft-text);
	font-weight: 500;
}
.ea-ft__top {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(190, 240, 210, .3);
	background: transparent;
	color: var(--ft-ink);
	cursor: pointer;
	overflow: hidden;
	transition: background-color .3s var(--fx-ease, ease);
}
.ea-ft__top:hover {
	background-color: rgba(190, 240, 210, .08);
}
.ea-ft__top > svg:not(.fx-ring) {
	width: 22px;
	height: 22px;
	overflow: visible;
}
.ea-ft__top svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}
.ea-ft__top svg .lf {
	fill: currentColor;
	stroke: none;
}

@media (max-width: 1080px) {
	.ea-ft__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
	.ea-ft__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 680px) {
	.ea-ft__statement {
		font-size: clamp(36px, 10.4vw, 52px);
	}
	.ea-ft__nav {
		gap: 36px 20px;
	}
	.ea-ft__bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.ea-ft__copy {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.ea-ft__credit {
		grid-row: 1;
	}
	.ea-ft__end {
		grid-row: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ea-ft * {
		transition: none !important;
	}
}


/* ---------- the old hover movement, stopped: no box moves under the pointer ---------- */
.btn:hover,
.cat-card:hover,
.product-card:hover,
.hp-boli__tile:hover,
.hp-partners__placeholder:hover,
.nutrient-swiper__btn:hover,
.boli-disease-tile:hover,
.boli-detail-hero__enlarge:hover,
.elitag-related-card:hover,
.contact-card__social-link:hover {
	transform: none !important;
}
.nutrient-back:hover .nutrient-back__arrow,
.boli-back:hover .boli-back__arrow,
.hp-partners__placeholder:hover .hp-partners__placeholder-mark,
.boli-disease-tile:hover .boli-disease-tile__img,
.elitag-related-card:hover .elitag-related-img-bg {
	transform: none !important;
}
.nutrient-plant__hotspot:hover {
	transform: translate(-50%, -50%) !important;
}
/* the about page's yellow button and the send button carry the canvas behind their words */
.dn-cta__btn[data-fx] .btn__label,
.fx-send .btn__label {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	align-self: stretch;
}
.fx-send {
	position: relative;
	border: 0;
	cursor: pointer;
	overflow: hidden;
}
.fx-send .btn__label {
	justify-content: center;
	width: 100%;
	padding: 15px 26px;
}
/* card titles: room for the mark under them */
[data-fx-title] {
	display: inline-block;
}
.fx-round--sq {
	overflow: hidden;
}
.fx-round--sq .fx-ring {
	display: none;
}