/* =====================================================================
   motion.css — lively, decorative animations for the HOME page only.

   Accessibility rules this file follows (do not break them):
   - Nothing is ever hidden from screen readers: only opacity / transform
     change; no display:none, visibility, aria or text changes.
   - Every effect is switched on by html.motion-on, which a tiny inline
     script in _head.php adds only when the visitor did NOT ask for less
     motion (OS setting) and did NOT press "stop automatic motion".
   - Endless motion only in the hero (living photo, birds, title shine,
     rising hearts), and
     only because the hero has its own "stop automatic motion" button
     (WCAG 2.2.2). Everything else ends in under 5 seconds and repeats
     only on hover / keyboard focus.
   - No flashing, no text split into letters (it would break Arabic
     shaping and make screen readers spell words).
   - Only transform + opacity are animated (smooth on cheap phones).
   ===================================================================== */

/* ---------- keyframes ---------- */
@keyframes m-rise {
	from { opacity: 0; transform: translate3d(0, 40px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes m-pop {
	0%   { opacity: 0; transform: translate3d(0, 40px, 0) scale(.6); }
	60%  { opacity: 1; transform: translate3d(0, -8px, 0) scale(1.06); }
	80%  { transform: translate3d(0, 3px, 0) scale(.98); }
	100% { opacity: 1; transform: none; }
}

@keyframes m-grow {
	from { opacity: 0; transform: scaleX(0); }
	to   { opacity: 1; transform: scaleX(1); }
}

@keyframes m-kenburns {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

/* the "dance": hop, lean left, lean right, land */
@keyframes m-dance {
	0%, 100% { transform: none; }
	20%      { transform: translateY(-10px) rotate(-12deg); }
	40%      { transform: translateY(0) rotate(10deg) scale(1.1); }
	60%      { transform: translateY(-6px) rotate(-6deg); }
	80%      { transform: translateY(0) rotate(4deg); }
}

/* same frames under another name, so hover can restart it */
@keyframes m-dance-again {
	0%, 100% { transform: none; }
	20%      { transform: translateY(-10px) rotate(-12deg); }
	40%      { transform: translateY(0) rotate(10deg) scale(1.1); }
	60%      { transform: translateY(-6px) rotate(-6deg); }
	80%      { transform: translateY(0) rotate(4deg); }
}

@keyframes m-bump {
	0%, 100% { transform: none; }
	40%      { transform: scale(1.25); }
	70%      { transform: scale(.95); }
}

@keyframes m-jelly {
	0%, 100% { transform: none; }
	30%      { transform: scale(1.12, .88); }
	45%      { transform: scale(.9, 1.1); }
	60%      { transform: scale(1.05, .95); }
	75%      { transform: scale(.98, 1.02); }
}

@keyframes m-twinkle {
	0%   { opacity: .2; transform: scale(.3) rotate(-90deg); }
	70%  { opacity: 1; transform: scale(1.35) rotate(10deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes m-wiggle {
	0%, 100% { transform: none; }
	15%      { transform: rotate(-14deg) scale(1.1); }
	30%      { transform: rotate(12deg) scale(1.1); }
	45%      { transform: rotate(-8deg); }
	60%      { transform: rotate(5deg); }
}

/* ---------- 1. Hero (pure CSS: it plays from the very first paint) ---------- */
.motion-on #hero-1 .sectionbanner { overflow: hidden; }
.motion-on #hero-1 .bgimage {
	animation: m-kenburns 3.2s cubic-bezier(.22, .61, .36, 1) both;
}

.motion-on #hero-1 .banner-caption h2 {
	animation: m-rise .9s cubic-bezier(.22, .61, .36, 1) .15s both;
}

.motion-on #hero-1 .banner-caption .logotitle2 {
	animation: m-rise .9s cubic-bezier(.22, .61, .36, 1) .45s both;
}

/* living photo (hero-wind.js): WebGL copy of the photo laid exactly over it, trees sway.
   This is the one endless effect on the page; it is decorative and the "stop automatic motion"
   button (also shown in the hero) stops it, as does the OS "reduce motion" setting. */
#hero-1 .hero-wind {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
html.motion-paused #hero-1 .hero-wind { visibility: hidden; }

/* light-coloured birds crossing the sky (made by hero-wind.js, aria-hidden).
   Birds cross one at a time, each with its own start (--bird-delay) and cycle (--bird-cycle). */
.hero-birds { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-bird {
	position: absolute;
	left: 100%;
	width: var(--bird-size, 22px);
	height: calc(var(--bird-size, 22px) * .45);
	opacity: 0;
	animation: m-bird-fly var(--bird-cycle, 30s) linear var(--bird-delay, 3s) 1 both;   /* each bird crosses once; hero-wind.js then removes the flock */
}
.hero-bird-2 {
	left: auto;
	right: 100%;
	animation-name: m-bird-fly-back;
}
.hero-bird-2 svg { transform: scaleX(-1); }
.hero-bird-bob { display: block; width: 100%; height: 100%; animation: m-bird-bob 3.2s ease-in-out infinite alternate; }
.hero-bird svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: #a2988a;             /* light warm grey: soft, yet visible on the pale sky */
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .8));
	transform-origin: 50% 65%;
	animation: m-bird-flap var(--bird-flap, .4s) ease-in-out infinite alternate;
}
.hero-bird-2 svg { animation-name: m-bird-flap-back; }
@keyframes m-bird-fly {
	0%           { opacity: 0;   transform: translate3d(0, 0, 0); }
	3%           { opacity: .95; }
	47%          { opacity: .95; }
	50%, 100%    { opacity: 0;   transform: translate3d(calc(-100vw - 140px), -25px, 0); }
}
@keyframes m-bird-fly-back {
	0%           { opacity: 0;   transform: translate3d(0, 0, 0); }
	3%           { opacity: .9; }
	42%          { opacity: .9; }
	45%, 100%    { opacity: 0;   transform: translate3d(calc(100vw + 140px), -40px, 0); }
}
@keyframes m-bird-bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes m-bird-flap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
@keyframes m-bird-flap-back { from { transform: scale(-1, 1); } to { transform: scale(-1, -.5); } }
html.motion-paused .hero-birds { display: none; }
@media (max-width: 767px) { .hero-bird { --bird-size: 20px !important; } }

/* the title: a soft white halo lifts it off the photo, and a golden light passes over it
   every few seconds. The text itself is unchanged (screen readers read it as before). */
@keyframes m-shine {
	0%        { background-position: 100% 0; }
	30%, 100% { background-position: 0 0; }
}
.motion-on #hero-1 .banner-caption h2.logotitle-write,
.motion-on #hero-1 .banner-caption .logotitle2 {
	background-image: linear-gradient(105deg, #2a6806 0%, #2a6806 42%, #a07a06 46%, #f4d36b 50%, #a07a06 54%, #2a6806 58%, #2a6806 100%);
	background-size: 250% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.motion-on #hero-1 .banner-caption h2.logotitle-write {
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(255, 255, 255, .7));
	animation: m-rise .9s cubic-bezier(.22, .61, .36, 1) .15s both, m-shine 6.5s ease-in-out 2.6s 2;   /* the light passes twice, then the title rests */
}
.motion-on #hero-1 .banner-caption .logotitle2 {
	animation: m-rise .9s cubic-bezier(.22, .61, .36, 1) .45s both;   /* it sits inside the h2, whose shine already covers it */
}
/* finger-alphabet mode (body.pointerhand): the hand signs of the banner title are drawn in the site's
   gold, with a dark green edge instead of the white halo so they stay clear on the bright photo.
   The text itself is unchanged; high contrast / forced colours / print below still win. */
body.pointerhand #hero-1 .banner-caption h2.logotitle-write,
body.pointerhand #hero-1 .banner-caption .logotitle2 {
	color: #f0c300;
	background-image: none;
	-webkit-text-fill-color: #f0c300;
}
body.pointerhand #hero-1 .banner-caption h2.logotitle-write {
	filter: drop-shadow(0 0 1px #12300a) drop-shadow(0 0 2px #12300a) drop-shadow(0 1px 5px rgba(18, 48, 10, .75));
}
/* high contrast, Windows contrast themes and print: plain solid text, never see-through */
html.high-contrast #hero-1 .banner-caption h2.logotitle-write,
html.high-contrast #hero-1 .banner-caption .logotitle2 {
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
	filter: none !important;
}
@media (forced-colors: active), print {
	#hero-1 .banner-caption h2.logotitle-write,
	#hero-1 .banner-caption .logotitle2 {
		background: none !important;
		-webkit-text-fill-color: currentColor !important;
		filter: none !important;
	}
}

/* the theme's own coloured line keeps its "wave"; it just draws itself first */
.motion-on #hero-1 .border_slider {
	animation: m-grow .9s cubic-bezier(.22, .61, .36, 1) .7s both, wave 3s linear 1.6s 3;
}

.motion-on #hero-1 .stat-item {
	animation: m-pop .85s cubic-bezier(.34, 1.56, .64, 1) both;
}
.motion-on #hero-1 .stat-item:nth-child(1) { animation-delay: .9s; }
.motion-on #hero-1 .stat-item:nth-child(2) { animation-delay: 1.05s; }
.motion-on #hero-1 .stat-item:nth-child(3) { animation-delay: 1.2s; }
.motion-on #hero-1 .stat-item:nth-child(4) { animation-delay: 1.35s; }
.motion-on #hero-1 .stat-item:nth-child(n+5) { animation-delay: 1.5s; }

/* icons dance twice after they land, then rest */
.motion-on #hero-1 .stat-icon i {
	display: inline-block;
	animation: m-dance 1s ease-in-out 1.9s 2;
}
.motion-on #hero-1 .stat-item:nth-child(2) .stat-icon i { animation-delay: 2.05s; }
.motion-on #hero-1 .stat-item:nth-child(3) .stat-icon i { animation-delay: 2.2s; }
.motion-on #hero-1 .stat-item:nth-child(4) .stat-icon i { animation-delay: 2.35s; }

/* hearts drifting up from the "hand holding a heart" icon (spawned by motion.js).
   Faint, see-through, softly glowing and blurring as they rise, like a light shadow.
   Decorative only: the holder is aria-hidden; the hero "stop automatic motion" button stops it. */
.motion-on #hero-1 .stat-icon { position: relative; }
.m-hearts {
	position: absolute;
	left: 50%;
	top: 4px;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 3;
}
.m-heart {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 15px;
	line-height: 1;
	color: inherit;
	opacity: 0;
	text-shadow: 0 0 8px rgba(240, 195, 0, .55);
	animation: m-heart-rise var(--dur, 2.8s) cubic-bezier(.25, .6, .35, 1) forwards;
	will-change: transform, opacity;
}
@keyframes m-heart-rise {
	0%   { opacity: 0;   transform: translate(-50%, 0) scale(calc(var(--s, .7) * .3)); filter: blur(0); }
	15%  { opacity: .65; }
	50%  { opacity: .45; transform: translate(-50%, 0) translate(calc(var(--dx, 0px) * -.5), calc(var(--rise, 90px) * -.5)) scale(var(--s, .7)) rotate(calc(var(--rot, 0deg) * -.6)); }
	100% { opacity: 0;   transform: translate(-50%, 0) translate(var(--dx, 0px), calc(var(--rise, 90px) * -1)) scale(calc(var(--s, .7) * 1.15)) rotate(var(--rot, 0deg)); filter: blur(1.5px); }
}
html.motion-paused .m-hearts { display: none; }

/* the number bounces once when the counter reaches its target (class set in home.php) */
.motion-on #hero-1 .stat-number.m-bump {
	animation: m-bump .5s ease-out;
}

/* ---------- 2. Scroll reveals (classes added by motion.js) ---------- */
.motion-on .m-reveal {
	opacity: 0;
	transition:
		opacity .7s ease var(--m-delay, 0s),
		transform .9s cubic-bezier(.34, 1.56, .64, 1) var(--m-delay, 0s);
	will-change: opacity, transform;
}
.motion-on .m-rise  { transform: translate3d(0, 45px, 0); }
.motion-on .m-pop   { transform: translate3d(0, 50px, 0) scale(.82); }
.motion-on .m-zoom  { transform: scale(.8) rotate(-3deg); }
.motion-on .m-flip  { transform: perspective(700px) rotateX(-40deg) translate3d(0, 40px, 0); transform-origin: 50% 100%; }
.motion-on .m-start { transform: translate3d(60px, 0, 0); }     /* from the reading start side (RTL: right) */
[dir="ltr"].motion-on .m-start { transform: translate3d(-60px, 0, 0); }

.motion-on .m-reveal.m-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* stars light up one after another once their card is revealed */
.motion-on .m-in .rateButton.star-highlight {
	display: inline-block;
	animation: m-twinkle .5s ease-out both;
	animation-delay: calc(var(--m-delay, 0s) + .5s);
}
.motion-on .m-in .rateButton:nth-of-type(2) { animation-delay: calc(var(--m-delay, 0s) + .6s); }
.motion-on .m-in .rateButton:nth-of-type(3) { animation-delay: calc(var(--m-delay, 0s) + .7s); }
.motion-on .m-in .rateButton:nth-of-type(4) { animation-delay: calc(var(--m-delay, 0s) + .8s); }
.motion-on .m-in .rateButton:nth-of-type(5) { animation-delay: calc(var(--m-delay, 0s) + .9s); }

/* ---------- 3. Play again on hover AND keyboard focus (same experience for both) ---------- */
@media (hover: hover) {
	.motion-on #hero-1 .stat-item:hover .stat-icon i {
		animation: m-dance-again .9s ease-in-out;
	}

	.motion-on #home-5 .cbox-1:hover {
		transform: translateY(-10px) rotate(-.8deg);
		box-shadow: 0 16px 30px rgba(0, 0, 0, .15);
	}
	[dir="ltr"].motion-on #home-5 .cbox-1:hover { transform: translateY(-10px) rotate(.8deg); }

	.motion-on #home-5 .cbox-1:hover .img-fluid,
	.motion-on .img-block:hover img {
		transform: scale(1.06);
	}
}

.motion-on #home-5 .cbox-1:focus-within {
	transform: translateY(-10px);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .15);
}
.motion-on #home-5 .cbox-1 .img-fluid,
.motion-on .img-block img {
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* floating WhatsApp / app buttons wave hello each time they appear */
.motion-on #whatsappButton,
.motion-on #aptoide {
	animation: m-wiggle 1s ease-in-out .2s 2;
}

/* ---------- 3b. Section titles + photos (all sections; corner shapes on #home-4 only) ----------
   Static part (frame, title bar, corner shapes) shows for everyone; the movement only under
   .motion-on. Brand colours only (green #2a6806, gold #f0c300). Shapes are CSS pseudo-elements:
   nothing new for screen readers, text keeps its contrast (shapes sit in the side gutters). */
#home-4 { position: relative; overflow: hidden; }
#home-4 > .container { position: relative; z-index: 1; }

/* corner shapes: a soft ring (top, title side) and a gold dot grid (bottom, other side) */
#home-4::before,
#home-4::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1), opacity 1s ease;
}
#home-4::before {
	width: 260px;
	height: 260px;
	top: -110px;
	right: -110px;
	border: 34px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
}
#home-4::after {
	width: 120px;
	height: 120px;
	bottom: 24px;
	left: 24px;
	background-image: radial-gradient(rgba(240, 195, 0, .45) 2px, transparent 2.6px);
	background-size: 20px 20px;
}
[dir="ltr"] #home-4::before { right: auto; left: -110px; }
[dir="ltr"] #home-4::after { left: auto; right: 24px; }
@media (max-width: 1199px) { #home-4::after { display: none; } }   /* no gutter: keep dots off the text */
.motion-on #home-4.m-stage::before { transform: scale(.3) rotate(-60deg); opacity: 0; }
.motion-on #home-4.m-stage::after  { transform: translateY(30px) scale(.6); opacity: 0; }
.motion-on #home-4.m-stage.m-in::before,
.motion-on #home-4.m-stage.m-in::after { transform: none; opacity: 1; }

/* gold bar under EVERY section title on the home page, drawn from the reading start.
   Selector list = the section headings (not the hero title). */
#main-content .section-title h2::after,
#main-content .txt-block h2::after,
#home-6 h2::after {
	content: "";
	display: block;
	width: 70px;
	height: 4px;
	margin-top: 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, #f0c300, #fff2a8, #f0c300);
	transform-origin: 100% 50%;
}
[dir="ltr"] #main-content .section-title h2::after,
[dir="ltr"] #main-content .txt-block h2::after,
[dir="ltr"] #home-6 h2::after { transform-origin: 0 50%; }
.motion-on #main-content h2.m-reveal::after {
	transform: scaleX(0);
	transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .55s;
}
.motion-on #main-content h2.m-in::after { transform: scaleX(1); }

/* section photos: gold frame + soft drop shadow.
   - photo inside the text (#home-4, #home-2): the link becomes the floating box (same side and
     size as before) so the frame, the light sweep and the focus ring wrap the photo exactly;
   - photo in its own column (#home-1): the .img-block around it gets the frame. */
#main-content .detailspage a.image-link,
#main-content .img-block {
	display: block;
	position: relative;
	overflow: hidden;
	padding: 5px;
	border-radius: 12px;
	background: linear-gradient(135deg, #f0c300, #fff2a8 45%, #f0c300);
	box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .35);   /* compact: the text box clips wider shadows */
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s ease;
}
#main-content .detailspage a.image-link {
	float: left;
	max-width: 330px;
	margin: 8px 18px 20px 8px;   /* room for the focus ring and the shadow inside the clipped text box */
}
[dir="ltr"] #main-content .detailspage a.image-link { float: right; margin: 8px 8px 20px 18px; }
#main-content .detailspage a.image-link img,
#main-content .img-block img {
	float: none;
	display: block;
	margin: 0;
	max-width: 100%;
	border-radius: 8px;
	box-shadow: none;
	transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
/* the site's gold focus ring would vanish against the gold frame:
   white ring on the green sections, green ring on the light ones */
#main-content .detailspage a.image-link:focus-visible {
	outline: 3px solid #2a6806 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff, 0 14px 16px -8px rgba(0, 0, 0, .45) !important;
}
#main-content .grey-bg .detailspage a.image-link:focus-visible {
	outline-color: #fff !important;
	box-shadow: 0 0 0 2px #2a6806, 0 14px 16px -8px rgba(0, 0, 0, .45) !important;
}
html.high-contrast #main-content .detailspage a.image-link:focus-visible { outline: 4px solid #0ff !important; }
/* phones: the photo takes the full width instead of squeezing the text into a thin column */
@media (max-width: 575px) {
	#main-content .detailspage a.image-link,
	[dir="ltr"] #main-content .detailspage a.image-link { float: none; max-width: calc(100% - 12px); margin: 8px 6px 18px; }
	#main-content .detailspage a.image-link img { width: 100% !important; max-width: 100%; }
}

/* light sweep across the photo: once when it appears, again on hover / keyboard focus */
#main-content .detailspage a.image-link::after,
#main-content .img-block::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}
@keyframes m-photo-sweep {
	0%   { opacity: 1; transform: translateX(0) skewX(-18deg); }
	100% { opacity: 1; transform: translateX(450%) skewX(-18deg); }
}
@keyframes m-photo-sweep-again {
	0%   { opacity: 1; transform: translateX(0) skewX(-18deg); }
	100% { opacity: 1; transform: translateX(450%) skewX(-18deg); }
}
.motion-on #main-content .detailspage a.image-link.m-in::after,
.motion-on #main-content .img-block.m-in::after { animation: m-photo-sweep 1.1s ease-in-out 1s; }
.motion-on #main-content .detailspage a.image-link:focus-visible::after { animation: m-photo-sweep-again 1s ease-in-out; }
.motion-on #main-content .detailspage a.image-link:focus-visible { transform: translateY(-6px) rotate(-1.2deg); }
@media (hover: hover) {
	.motion-on #main-content .detailspage a.image-link:hover::after,
	.motion-on #main-content .img-block:hover::after { animation: m-photo-sweep-again 1s ease-in-out; }
	.motion-on #main-content .detailspage a.image-link:hover,
	.motion-on #main-content .img-block:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 14px 16px -8px rgba(0, 0, 0, .45); }
	.motion-on #main-content .detailspage a.image-link:hover img,
	.motion-on #main-content .img-block:hover img { transform: scale(1.06); }
}
[dir="ltr"].motion-on #main-content .detailspage a.image-link:hover,
[dir="ltr"].motion-on #main-content .detailspage a.image-link:focus-visible,
[dir="ltr"].motion-on #main-content .img-block:hover { transform: translateY(-6px) rotate(1.2deg); }

/* motion stopped half-way: shapes and title bars simply show in their final place */
html.motion-paused #home-4.m-stage::before,
html.motion-paused #home-4.m-stage::after,
html.motion-paused #main-content h2::after { transform: none !important; opacity: 1 !important; }

/* contrast modes: drop the decoration, keep a plain visible border around the photos */
html.high-contrast #home-4::before, html.high-contrast #home-4::after,
html.high-contrast #main-content .section-title h2::after,
html.high-contrast #main-content .txt-block h2::after,
html.high-contrast #home-6 h2::after { display: none; }
html.high-contrast #main-content .detailspage a.image-link,
html.high-contrast #main-content .img-block { background: none; box-shadow: none; border: 2px solid currentColor; }
@media (forced-colors: active), print {
	#home-4::before, #home-4::after,
	#main-content .section-title h2::after, #main-content .txt-block h2::after, #home-6 h2::after,
	#main-content .detailspage a.image-link::after, #main-content .img-block::after { display: none; }
	#main-content .detailspage a.image-link,
	#main-content .img-block { background: none; box-shadow: none; border: 2px solid CanvasText; }
}

/* ---------- 3c. Success stories (#home-stories) ----------
   Static look for everyone: warm background, white cards, round photo in a green/gold ring,
   gold quote mark. Under .motion-on (motion.js): the section shapes swing in, cards pop in one by
   one, then in each card the ring spins into place, the quote mark twinkles, the line under the
   name draws itself and a light crosses the photo. All of it ends in under 4 seconds; hover only
   lifts the card. Text is never hidden or changed; decorations are aria-hidden or pseudo-elements. */
#home-stories { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbf7e6 0%, #fff 75%); }
/* full width (no .container): background edge to edge, content capped, 16px gutter on phones */
.stories-inner {
	position: relative; z-index: 1;
	width: 100%; max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 56px);
}
#home-stories .section-title .p-md { max-width: 760px; }
#home-stories::before,
#home-stories::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	transition: transform 1.3s cubic-bezier(.34, 1.56, .64, 1), opacity 1s ease;
}
/* big soft gold disc (top, title side) and a green dot grid (bottom, other side) */
#home-stories::before {
	width: 320px; height: 320px; top: -140px; right: -120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 195, 0, .22) 0%, rgba(240, 195, 0, .08) 55%, rgba(240, 195, 0, 0) 70%);
}
#home-stories::after {
	width: 190px; height: 130px; bottom: 26px; left: 18px;
	background: radial-gradient(circle, rgba(42, 104, 6, .22) 2px, transparent 2.5px) 0 0 / 18px 18px;
}
[dir="ltr"] #home-stories::before { right: auto; left: -120px; }
[dir="ltr"] #home-stories::after { left: auto; right: 18px; }

#home-stories .section-title,
#home-stories .section-title .p-md { text-align: start; }
/* cards share the full capped width edge to edge (up to 4 per row at 1440px);
   a single story keeps a normal card size instead of becoming one huge card */
.stories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: 30px;
}
.story-cell { display: flex; }
.stories-grid > .story-cell:only-child { width: 100%; max-width: 460px; justify-self: center; }
.story-card {
	position: relative;
	flex: 1;
	background: #fff;
	border: 1px solid rgba(42, 104, 6, .1);
	border-radius: 20px;
	padding: 36px 26px 30px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(42, 104, 6, .08);
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease;
}
/* green-gold accent along the top edge */
.story-card::before {
	content: "";
	position: absolute;
	top: 0; left: 26px; right: 26px; height: 4px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, #2a6806, #f0c300, #2a6806);
}
.story-photo {
	position: relative;
	width: 132px; height: 132px;
	margin: 0 auto 20px;
	clip-path: circle(calc(50% + 8px));   /* keeps the passing light inside the ring */
}
.story-ring {
	position: absolute; inset: -7px; border-radius: 50%;
	background: conic-gradient(#f0c300, #2a6806 30%, #f0c300 55%, #2a6806 80%, #f0c300);
}
.story-photo img,
.story-photo-empty {
	position: relative; z-index: 1;
	display: block;
	width: 132px; height: 132px;
	border-radius: 50%;
	border: 4px solid #fff;
	object-fit: cover;
}
.story-photo-empty {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #2a6806, #4b8c1d);
	color: #f0c300; font-size: 44px;
}
/* the light that crosses the photo (moves only under .motion-on) */
.story-photo::after {
	content: "";
	position: absolute; z-index: 2;
	top: -12%; bottom: -12%; left: 0; width: 50%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 85%);
	transform: translateX(-170%);
	pointer-events: none;
}
.story-name { margin: 0 0 6px; color: #2a6806; font-size: 1.35rem; font-weight: 700; line-height: 1.5; }
.story-name::after {
	content: "";
	display: block;
	width: 48px; height: 3px;
	margin: 10px auto 0;
	border-radius: 3px;
	background: #f0c300;
}
.story-sub { margin: 0 0 12px; color: #55664c; font-size: .95rem; line-height: 1.6; }
.story-quote { display: block; margin: 4px 0 8px; color: #e0b400; font-size: 28px; line-height: 1; }
[dir="ltr"] .story-quote i { transform: scaleX(-1); }
.story-text { margin: 0; color: #444; font-size: 1.02rem; line-height: 1.9; }

/* motion */
@keyframes m-story-sweep { from { transform: translateX(-170%); } to { transform: translateX(300%); } }
@keyframes m-ring-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.motion-on #home-stories.m-stage::before { transform: scale(.3) rotate(-60deg); opacity: 0; }
.motion-on #home-stories.m-stage::after  { transform: translateY(30px) scale(.6); opacity: 0; }
.motion-on #home-stories.m-stage.m-in::before,
.motion-on #home-stories.m-stage.m-in::after { transform: none; opacity: 1; }

.motion-on .story-cell .story-ring {
	transform: rotate(-220deg) scale(.6);
	opacity: 0;
	transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1) calc(var(--m-delay, 0s) + .35s), opacity .6s ease calc(var(--m-delay, 0s) + .35s);
}
.motion-on .story-cell.m-in .story-ring { transform: none; opacity: 1; }
.motion-on .story-cell:not(.m-in) .story-quote { opacity: 0; }
.motion-on .story-cell.m-in .story-quote { animation: m-twinkle .6s ease-out calc(var(--m-delay, 0s) + .8s) both; }
.motion-on .story-cell .story-name::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.22, .61, .36, 1) calc(var(--m-delay, 0s) + .9s); }
.motion-on .story-cell.m-in .story-name::after { transform: scaleX(1); }
.motion-on .story-cell.m-in .story-photo::after { animation: m-story-sweep 1.3s ease-in-out calc(var(--m-delay, 0s) + 1.2s) both; }
@media (hover: hover) {
	.motion-on .story-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(42, 104, 6, .16); }
	.motion-on .story-cell.m-in .story-card:hover .story-ring { animation: m-ring-spin 1.4s cubic-bezier(.34, 1.56, .64, 1); }
}

/* motion stopped by the visitor: show every decoration in its final place */
html.motion-paused .story-ring,
html.motion-paused .story-quote,
html.motion-paused .story-name::after,
html.motion-paused #home-stories.m-stage::before,
html.motion-paused #home-stories.m-stage::after { opacity: 1 !important; transform: none !important; }

/* high contrast, Windows contrast themes, print: plain cards, no decorations */
html.high-contrast #home-stories::before, html.high-contrast #home-stories::after,
html.high-contrast .story-card::before, html.high-contrast .story-photo::after,
html.high-contrast .story-ring { display: none; }
html.high-contrast .story-card { border: 2px solid currentColor; box-shadow: none; }
@media (forced-colors: active), print {
	#home-stories::before, #home-stories::after,
	.story-card::before, .story-photo::after, .story-ring { display: none; }
	.story-card { border: 2px solid CanvasText; box-shadow: none; }
}

/* ---------- 3e. Partners (#home-6): logo cards in a soft-edged strip ----------
   Static look for everyone; lift/sweep only under .motion-on. Logos stay full colour (easier to
   recognise for low-vision visitors); the alt text is unchanged. The carousel keeps its visible
   "stop automatic motion" button (restyled here) and now also pauses under the mouse (custom.js). */
#home-6 { background: linear-gradient(180deg, #f6f8f4, #fff 70%); }

/* the strip fades out at both ends instead of cutting logos in half */
#home-6 .brands-carousel .owl-stage-outer {
	padding: 16px 0 26px;   /* room for the lift and the shadow */
	height: 192px !important;   /* theme fixed 160px: card (150) + the padding above */
	box-sizing: border-box;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* logo card: white, rounded, thin gold-to-green gradient frame, soft shadow */
#home-6 .brand-logo {
	position: relative;
	height: 150px;
	margin: 0 8px;
	padding: 10px 12px;   /* logos come trimmed (no empty margins), so little padding is needed */
	border: 2px solid transparent;
	border-radius: 20px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, rgba(240, 195, 0, .75), #e9eee5 40%, #e9eee5 60%, rgba(42, 104, 6, .6)) border-box;
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, background .35s ease;
}
#home-6 .brand-logo img {
	width: auto !important;
	max-width: 100%;
	height: 100%;
	max-height: 124px;
	object-fit: contain;
	padding: 0 !important;
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* light sweep across the card */
#home-6 .brand-logo::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}
@keyframes m-brand-sweep { 0% { opacity: 1; transform: translateX(0) skewX(-18deg); } 100% { opacity: 1; transform: translateX(450%) skewX(-18deg); } }
#home-6 .brand-logo:hover {
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #f0c300, #fff2a8 45%, #2a6806) border-box;
	box-shadow: 0 18px 30px -14px rgba(42, 104, 6, .45);
}
@media (hover: hover) {
	.motion-on #home-6 .brand-logo:hover { transform: translateY(-8px); }
	.motion-on #home-6 .brand-logo:hover img { transform: scale(1.07); }
	.motion-on #home-6 .brand-logo:hover::after { animation: m-brand-sweep .9s ease-in-out; }
}

/* the "stop automatic motion" button in the brand colours */
#home-6 .a11y-carousel-toggle {
	border: 1.5px solid #2a6806;
	color: #2a6806;
	background: #fff;
	padding: 6px 18px;
	font-weight: 600;
	opacity: 1;
	box-shadow: 0 6px 14px -8px rgba(42, 104, 6, .5);
	transition: background-color .3s ease, color .3s ease;
}
#home-6 .a11y-carousel-toggle:hover,
#home-6 .a11y-carousel-toggle:focus-visible { background: #2a6806; color: #fff; }
#home-6 .a11y-carousel-toggle span[aria-hidden="true"] { color: #c79f00; }
#home-6 .a11y-carousel-toggle:hover span[aria-hidden="true"],
#home-6 .a11y-carousel-toggle:focus-visible span[aria-hidden="true"] { color: #f0c300; }

html.high-contrast #home-6 .brand-logo { background: #fff; border: 2px solid currentColor; box-shadow: none; }
html.high-contrast #home-6 .brand-logo::after { display: none; }
@media (forced-colors: active), print {
	#home-6 .brands-carousel .owl-stage-outer { -webkit-mask-image: none; mask-image: none; }
	#home-6 .brand-logo { border: 2px solid CanvasText; }
	#home-6 .brand-logo::after { display: none; }
}

/* ---------- 4. Visitor pressed "stop automatic motion": everything still, everything visible ---------- */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
	animation: none !important;
	transition: none !important;
}
html.motion-paused .m-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- 5. Safety nets ---------- */
@media (prefers-reduced-motion: reduce) {
	.m-reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
	.m-reveal { opacity: 1 !important; transform: none !important; }
	* { animation: none !important; }
}