/* =====================================================================
   Our Story Hero – Little Ayub  (v2.0.0)
   Everything is scoped under .osh so it never leaks into other sections.
   ===================================================================== */

.osh {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: #FBF9F0;
	padding: 80px 24px 80px 64px;
}
.osh *,
.osh *::before,
.osh *::after { box-sizing: border-box; }

.osh-bg-image,
.osh-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.osh-bg { overflow: hidden; }

/* ---------- Layout ---------- */
.osh-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	max-width: 1320px;
	margin: 0 auto;
}
.osh-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 44%;
	flex: 0 1 auto;
	min-width: 0;
}
.osh-visual {
	position: relative;
	z-index: 2;
	width: 56%;
	flex: 0 1 auto;
	min-width: 0;
}
.osh-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1.06;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Label ---------- */
.osh-label-wrap {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	margin-bottom: 30px;
}
.osh-label {
	display: block;
	color: #134A35;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.osh-label-line {
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 10px;
	background-color: #134A35;
	border-radius: 2px;
}

/* ---------- Heading ---------- */
.osh-heading-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.osh-heading {
	margin: 0;
	padding: 0;
	color: #134A35;
	font-size: 76px;
	line-height: 1.12;
	overflow-wrap: break-word;
}
.osh-seg { display: inline; }

.osh-underline {
	display: block;
	width: 80%;
	height: 14px;
	margin: -2px 0 0 3%;
	line-height: 0;
	pointer-events: none;
	contain: inline-size; /* never widens the heading block */
}
.osh-underline svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.osh-underline path {
	fill: none;
	stroke: var(--osh-ul-color, #F7B500);
	stroke-width: var(--osh-ul-w, 6);
	stroke-linecap: round;
}

/* ---------- Description / CTA ---------- */
.osh-desc {
	margin-top: 30px;
	max-width: 540px;
	color: #1B4D3E;
	font-size: 21px;
	line-height: 1.6;
}
.osh-extra {
	margin-top: 16px;
	max-width: 540px;
	color: #1B4D3E;
}
.osh-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	padding: 14px 30px;
	border-radius: 999px;
	background-color: #134A35;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.osh-cta:hover { transform: translateY(-2px); }

/* =====================================================================
   Positioned artwork (leaves, icons, accents, heart, branch, sparrow)
   left/top = position of the element CENTRE.
   Layers: .osh-abs (position/size/rotation) > .osh-motion > .osh-zoom > .osh-media
   ===================================================================== */
.osh-abs {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	line-height: 0;
	pointer-events: none;
	--osh-mx: 0px;
	--osh-my: 0px;
	--osh-mr: 0deg;
	--osh-smin: 1;
	--osh-smax: 1.1;
}
.osh-item {
	width: 8%;
	container-type: inline-size;
}
.osh-motion { transform-origin: var(--osh-origin, 50% 50%); }
.osh-zoom   { transform-origin: 50% 50%; }
.osh-motion,
.osh-zoom,
.osh-media  { height: 100%; }
.osh-media  {
	line-height: 0;
	transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), rotate .45s ease, translate .45s ease;
}
.osh-media svg,
.osh-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
	object-fit: contain;
}
.osh-media > i {
	display: block;
	font-size: 100cqw;
	line-height: 1;
	text-align: center;
	color: var(--osh-fill, currentColor);
}
.osh-media > svg.e-font-icon-svg { fill: var(--osh-fill, currentColor); }
.osh-flip .osh-media { transform: scaleX(-1); }
.osh-accent .osh-media { filter: blur(var(--osh-blur, 0px)); }

/* Built-in SVG paint */
.osh-f  { fill: var(--osh-fill, #6DB33F); }
.osh-hl { fill: #fff; opacity: .16; }
.osh-s  {
	fill: none;
	stroke: var(--osh-stroke, #2F6B2A);
	stroke-width: var(--osh-sw, 2);
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Heart lives in the heading block */
.osh-heart { width: 110px; left: 111%; top: 64%; z-index: 2; }

/* Branch */
.osh-branch { width: 104%; left: 52%; top: 70%; z-index: 2; }
.osh-bark    { fill: var(--osh-bark, #8B5A2B); }
.osh-bark-s  { fill: none; stroke: var(--osh-bark, #8B5A2B); stroke-linecap: round; }
.osh-bark-hl { fill: none; stroke: var(--osh-bark-light, #B07A45); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.osh-bark-tx { fill: none; stroke: var(--osh-bark-dark, #5E3A1A); stroke-width: 1.6; stroke-linecap: round; opacity: .45; }

/* Sparrow */
.osh-sparrow { width: 28.4%; left: 41.2%; top: 52.6%; z-index: 5; }
.osh-bird-body  { fill: var(--osh-bird-body, #3DA9E9); stroke: var(--osh-bird-line, #143B3B); stroke-width: 3.5; stroke-linejoin: round; }
.osh-bird-wing  { fill: var(--osh-bird-wing, #2B90D6); stroke: var(--osh-bird-line, #143B3B); stroke-width: 3; stroke-linejoin: round; }
.osh-bird-line,
.osh-bird-eye,
.osh-bird-leg   { fill: none; stroke: var(--osh-bird-line, #143B3B); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.osh-bird-beak  { fill: var(--osh-bird-beak, #F6A623); stroke: var(--osh-bird-line, #143B3B); stroke-width: 2.5; stroke-linejoin: round; }
.osh-bird-cheek { fill: var(--osh-bird-cheek, #F49AB0); opacity: .75; }
.osh-bird-shine { fill: #fff; opacity: .16; }
.osh-bird-shine2 { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .35; }
.osh-wing {
	transform-box: fill-box;
	transform-origin: 12% 18%;
}
.osh-wing-on .osh-wing { animation: osh-wing var(--osh-wing-dur, 3.5s) ease-in-out infinite; }
@keyframes osh-wing {
	0%, 40%, 100% { transform: rotate(0deg); }
	8%  { transform: rotate(-16deg); }
	16% { transform: rotate(3deg); }
	24% { transform: rotate(-12deg); }
	32% { transform: rotate(2deg); }
}

/* Hover effects (only on elements that opted in) */
.osh-hover-zoom,
.osh-hover-spin,
.osh-hover-lift { pointer-events: auto; }
.osh-hover-zoom:hover .osh-media { scale: 1.18; }
.osh-hover-spin:hover .osh-media { rotate: 14deg; }
.osh-hover-lift:hover .osh-media { translate: 0 -10%; }

/* ---------- Sparrow entrance ---------- */
.osh-entrance {
	transition:
		opacity var(--osh-ent-dur, 1.1s) ease var(--osh-ent-delay, .2s),
		transform var(--osh-ent-dur, 1.1s) cubic-bezier(.34, 1.3, .64, 1) var(--osh-ent-delay, .2s);
}
.osh:not(.osh-in) .osh-entrance[data-entrance="fade-up"] { opacity: 0; transform: translateY(40px); }
.osh:not(.osh-in) .osh-entrance[data-entrance="zoom-in"] { opacity: 0; transform: scale(.4); }
.osh:not(.osh-in) .osh-entrance[data-entrance="fly-in"]  { opacity: 0; transform: translate(80%, -70%) rotate(-14deg); }
.osh:not(.osh-in) .osh-entrance[data-entrance="drop"]    { opacity: 0; transform: translateY(-45%); }
/* Fail-safe: if JS never runs, reveal everything after 2.5s */
.osh:not(.osh-ready) .osh-entrance { animation: osh-reveal 0s 2.5s forwards; }
@keyframes osh-reveal { to { opacity: 1; transform: none; } }

/* ---------- Underline draw-in ---------- */
.osh-underline.osh-draw svg {
	clip-path: inset(-60% 0 -60% 0);
	transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .35s;
}
.osh:not(.osh-in) .osh-underline.osh-draw svg { clip-path: inset(-60% 100% -60% 0); }
.osh:not(.osh-ready) .osh-underline.osh-draw svg { animation: osh-reveal-clip 0s 2.5s forwards; }
@keyframes osh-reveal-clip { to { clip-path: inset(-60% 0 -60% 0); } }

/* ---------- Performance & accessibility ---------- */
.osh.osh-paused .osh-motion,
.osh.osh-paused .osh-zoom,
.osh.osh-paused .osh-wing { animation-play-state: paused !important; }

.osh.osh-static .osh-motion,
.osh.osh-static .osh-zoom,
.osh.osh-static .osh-wing { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.osh .osh-motion,
	.osh .osh-zoom,
	.osh .osh-wing { animation: none !important; }
	.osh .osh-entrance { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
	.osh .osh-underline svg { clip-path: none !important; transition: none !important; }
	.osh .osh-media { transition: none !important; }
}

/* ---------- Per-device visibility & animation toggles ---------- */
@media (min-width: 1025px) {
	.osh .osh-hide-d { display: none !important; }
	.osh .osh-noanim-d .osh-motion,
	.osh .osh-noanim-d .osh-zoom,
	.osh .osh-noanim-d .osh-wing { animation: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.osh .osh-hide-t { display: none !important; }
	.osh .osh-noanim-t .osh-motion,
	.osh .osh-noanim-t .osh-zoom,
	.osh .osh-noanim-t .osh-wing { animation: none !important; }
}
@media (max-width: 767px) {
	.osh .osh-hide-m { display: none !important; }
	.osh .osh-noanim-m .osh-motion,
	.osh .osh-noanim-m .osh-zoom,
	.osh .osh-noanim-m .osh-wing { animation: none !important; }

	/* sensible fallbacks – Elementor responsive controls override these */
	.osh { padding: 56px 20px 24px; }
	.osh-container { flex-direction: column; align-items: stretch; gap: 24px; }
	.osh-content,
	.osh-visual { width: 100%; }
	.osh-heading { font-size: 42px; }
	.osh-heart { width: 58px; }
	.osh-br-nomobile { display: none; }
}