/* Growth Engine 360 — frontend v1.5 (Orthotrack) */
.ge360{
	--ge-pin-h: calc(100vh - var(--ge-offset, 0px));
	--ge-ease: cubic-bezier(.2, .8, .2, 1);
	--ge-nav-b: clamp(16px, 3vh, 32px);
	position: relative;
	display: block;
	height: calc(var(--ge-pin-h) * 7); /* JS sets the exact height */
	background: var(--ge-bg, #0a0a0b);
	color: var(--ge-text, #fff);
	font-family: var(--ge-font-body);
	isolation: isolate;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
}
@supports (height: 100svh){ .ge360{ --ge-pin-h: calc(100svh - var(--ge-offset, 0px)); } }
.ge360 *, .ge360 *::before, .ge360 *::after{ box-sizing: border-box; }

.ge360--bleed{
	width: var(--ge-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--ge-vw, 100vw) / 2);
	margin-right: calc(50% - var(--ge-vw, 100vw) / 2);
}

/* ---------- pinned viewport ---------- */
.ge360__pin{
	touch-action: pan-y;
	position: sticky;
	top: var(--ge-offset, 0px);
	left: 0;
	width: 100%;
	height: var(--ge-pin-h);
	overflow: hidden;
}
.ge360.is-js-pin .ge360__pin{ position: absolute; top: 0; }
.ge360.is-js-pin.is-pinned .ge360__pin{ position: fixed; top: var(--ge-offset, 0px); }
.ge360.is-js-pin.is-after .ge360__pin{ top: auto; bottom: 0; }

/* ---------- background ---------- */
.ge360__bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ge360--noise .ge360__bg::before{
	content: ""; position: absolute; inset: -50%; z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: .12;
	animation: ge360-grain 1.2s steps(6) infinite;
}
.ge360--glow .ge360__bg::after{
	content: ""; position: absolute; left: 50%; top: 58%; width: 70vw; height: 55vh;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ge-accent) 32%, transparent), transparent 75%);
	opacity: var(--ge-glow, 0);
	filter: blur(30px);
}
@keyframes ge360-grain{
	0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
	60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* Ambient light: the active card's own colours bleed into the background */
.ge360__ambient{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ge360__amb{
	position: absolute; left: 50%; top: 50%;
	width: 85%; height: 85%;
	transform: translate(-50%, -50%) scale(1.1);
	background-size: cover; background-position: center;
	filter: blur(110px) saturate(1.5);
	opacity: 0;
	will-change: opacity;
}

.ge360__lines{ position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--ge-ring-o, 0); }
.ge360__lines span{
	position: absolute; top: 28%; height: 44%; width: 1px;
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,.55), color-mix(in srgb, var(--ge-accent) 70%, #fff), transparent);
	animation: ge360-line 4s ease-in-out infinite;
}
.ge360__lines span:first-child{ left: 13.5%; }
.ge360__lines span:last-child{ right: 13.5%; animation-delay: -2s; }
@keyframes ge360-line{ 0%,100%{ opacity: .35; transform: translateY(-6%); } 50%{ opacity: 1; transform: translateY(6%); } }

/* ---------- big 360° headline ---------- */
.ge360__hero{
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.ge360__hero-inner{
	position: relative;
	font-size: min(calc(var(--ge-pin-h) * .78), 34vw);
	line-height: 1;
	will-change: transform, filter, opacity;
}
.ge360 .ge360__big{
	display: block;
	font-family: var(--ge-font-big);
	font-weight: 500;
	font-size: 1em;
	line-height: .86;
	letter-spacing: -.02em;
	color: var(--ge-text);
	white-space: nowrap;
}
.ge360 .ge360__script{
	position: absolute;
	font-family: var(--ge-font-script);
	font-weight: 400;
	color: var(--ge-accent);
	line-height: .78;
	white-space: nowrap;
	text-shadow: 0 0 40px color-mix(in srgb, var(--ge-accent) 55%, transparent);
	will-change: transform, opacity;
}
.ge360__script--top{ font-size: .2em; top: .02em; left: -.03em; transform: rotate(-8deg); }
.ge360__script--bottom{ font-size: .17em; right: -.12em; bottom: -.02em; transform: rotate(-8deg); }

/* ---------- heading above the cards ---------- */
.ge360__head{
	position: absolute; left: 0; right: 0; top: clamp(10px, 2.2vh, 26px); z-index: 6;
	text-align: center; padding: 0 16px; pointer-events: none;
	opacity: var(--ge-nav-o, 0);
	transform: translateY(calc((1 - var(--ge-nav-o, 0)) * -16px));
}
.ge360 p.ge360__eyebrow{
	margin: 0 0 .5em !important; padding: 0 !important;
	font: 700 clamp(10px, .9vw, 13px)/1 var(--ge-font-body) !important;
	letter-spacing: .26em !important; text-transform: uppercase;
	color: color-mix(in srgb, var(--ge-accent) 80%, #fff) !important;
}
.ge360 h2.ge360__heading{
	margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	font-family: var(--ge-font-title) !important; font-weight: 400 !important;
	font-size: clamp(1.7rem, min(3.6vw, 6vh), 4.2rem) !important; line-height: 1.04 !important;
	letter-spacing: .005em !important; text-transform: none !important; color: var(--ge-text) !important;
}
.ge360__heading em{ font-style: normal; color: var(--ge-accent); }

/* ---------- 3D ring ---------- */
.ge360__stage{
	position: absolute; inset: 0; z-index: 2;
	perspective: 2200px;
	perspective-origin: 50% 45%;
}
.ge360__ring, .ge360__texts{
	/* card starts right under the heading and fills the screen down to the buttons */
	--ge-top0: clamp(88px, 13.5vh, 128px);
	--ge-cw: min(var(--ge-card-w, 74vw), 1480px, calc((var(--ge-pin-h) - var(--ge-top0) - var(--ge-nav-b) - 58px) * 1.88));
	--ge-ring-top: calc(var(--ge-top0) + var(--ge-cw) / 3.76);
}
.ge360__ring{
	position: absolute; left: 50%; top: var(--ge-ring-top, 54%);
	width: var(--ge-cw);
	aspect-ratio: 1.88 / 1;
	transform-style: preserve-3d;
	translate: -50% -50%;
}
@supports not (aspect-ratio: 1){ .ge360__ring, .ge360__texts{ height: calc(var(--ge-cw) / 1.88); } }

.ge360 .ge360__card{
	position: absolute; inset: 0;
	display: block;
	border-radius: clamp(14px, 1.8vw, 30px);
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-origin: 50% 50%;
	cursor: pointer;
	box-shadow: 0 40px 90px -20px rgba(0,0,0,.75);
	text-decoration: none !important;
	border: 0;
	background: #111;
	will-change: transform, opacity;
}
.ge360__img, .ge360__video{
	position: absolute; inset: 0; display: block;
	width: 100%; height: 100%;
	background-size: cover; background-position: center;
	object-fit: cover;
	border: 0; margin: 0; padding: 0; max-width: none;
}
.ge360__card::after{
	content: ""; position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 30%, transparent 52%),
		rgba(0,0,0, calc(var(--ge-overlay, .35) + var(--dim, 0)));
}
/* light sweep + hairline border that catches the light as the ring turns */
.ge360__shine{
	position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
	background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.05) 52%, transparent 65%) no-repeat;
	background-size: 250% 100%;
	background-position: var(--shine, 50%) 0;
	mix-blend-mode: screen;
}

/* ---------- floating glass cards: inside the photo, small, softly focused ---------- */
.ge360__chips{
	position: absolute; inset: 0; z-index: 4;
	pointer-events: none;
	perspective: 900px;
	opacity: 0;
}
.ge360 .ge360__chip{
	position: absolute;
	display: inline-flex; align-items: center; gap: .6em;
	padding: .75em 1.25em .75em .85em;
	border-radius: 14px;
	font: 500 clamp(11px, .95vw, 16px)/1 var(--ge-font-body);
	color: #3b3631;
	white-space: nowrap;
	background: linear-gradient(135deg, rgba(255,250,244,.72), rgba(255,236,222,.42));
	border: 1px solid rgba(255,255,255,.65);
	box-shadow: 0 14px 32px -12px rgba(20,20,30,.4), inset 0 1px 0 rgba(255,255,255,.9);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	--s: 1; --ry: 0deg; --b: .5px; --o: .9; --d: 0s;
	opacity: 0;
	filter: blur(var(--b));
	transform: rotateY(var(--ry)) scale(calc(var(--s) * .9)) translateY(14px);
	transition: opacity .7s ease var(--d), transform .9s var(--ge-ease) var(--d);
}
.ge360__chips.is-on .ge360__chip{
	opacity: var(--o);
	transform: rotateY(var(--ry)) scale(var(--s));
	animation: ge360-float 6s ease-in-out calc(var(--d) + 1s) infinite;
}
.ge360__chip-ico{ width: 1.7em; height: 1.7em; flex: none; fill: none; stroke: #3b3631; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ge360__swatch{ width: 1.25em; height: 1.25em; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 2px 6px rgba(0,0,0,.2); }
/* all inside the photo and above the title area; far ones smaller and more out of focus */
.ge360__chip--0{ left: 5%;  top: 9%;  --s: 1;   --ry: 12deg;  --b: .4px; --o: .92; --d: .05s; }
.ge360__chip--1{ right: 5%; top: 11%; --s: .95; --ry: -12deg; --b: .5px; --o: .9;  --d: .15s; }
.ge360__chip--2{ left: 6%;  top: 40%; --s: .9;  --ry: 14deg;  --b: .9px; --o: .85; --d: .25s; }
.ge360__chip--3{ right: 6%; top: 43%; --s: .92; --ry: -14deg; --b: .8px; --o: .85; --d: .35s; }
.ge360__chip--4{ left: 31%; top: 5%;  --s: .74; --ry: 6deg;   --b: 2px;  --o: .7;  --d: .45s; }
.ge360__chip--5{ right: 30%; top: 4%; --s: .7;  --ry: -6deg;  --b: 2.2px; --o: .65; --d: .55s; }
@keyframes ge360-float{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -6px; } }

/* ---------- card text: crisp, word-by-word reveal ---------- */
.ge360__texts{
	position: absolute; left: 50%; top: var(--ge-ring-top, 54%);
	width: var(--ge-cw);
	aspect-ratio: 1.88 / 1;
	translate: -50% -50%;
	pointer-events: none;
	z-index: 5;
}
.ge360__text{
	position: absolute; left: 0; right: 0; bottom: 8%;
	padding: 0 10%;
	text-align: center;
	visibility: hidden;
}
.ge360__text.is-active, .ge360__text.is-leaving{ visibility: visible; }

.ge360 h3.ge360__title{
	margin: 0 0 .3em !important;
	padding: 0 !important;
	font-family: var(--ge-font-title) !important;
	font-weight: 400 !important;
	font-size: clamp(2rem, 4.6vw, 5.4rem) !important;
	line-height: 1.02 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	color: var(--ge-text) !important;
	text-shadow: 0 6px 34px rgba(0,0,0,.5);
	border: 0 !important;
	background: none !important;
}
.ge360__w{ display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em 0 -.1em; }
.ge360__w > span{
	display: inline-block;
	transform: translateY(110%) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform .9s var(--ge-ease);
	transition-delay: calc(var(--wi, 0) * 70ms);
}
.is-active .ge360__w > span{ transform: none; transition-delay: calc(120ms + var(--wi, 0) * 70ms); }
.is-leaving .ge360__w > span{ transform: translateY(-110%) rotate(-3deg); transition-duration: .55s; transition-timing-function: cubic-bezier(.6, 0, .8, .4); transition-delay: calc(var(--wi, 0) * 35ms); }

.ge360 p.ge360__desc{
	margin: 0 auto !important;
	padding: 0 !important;
	max-width: 34em;
	font-family: var(--ge-font-body) !important;
	font-size: clamp(.95rem, 1.2vw, 1.2rem) !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	color: var(--ge-text) !important;
	text-shadow: 0 2px 16px rgba(0,0,0,.65);
	opacity: 0;
	transform: translateY(18px);
	filter: blur(6px);
	transition: opacity .6s var(--ge-ease), transform .8s var(--ge-ease), filter .6s var(--ge-ease);
}
.is-active p.ge360__desc{ opacity: .95; transform: none; filter: none; transition-delay: .35s; }
.is-leaving p.ge360__desc{ opacity: 0; transform: translateY(-14px); filter: blur(6px); transition-duration: .4s; transition-delay: 0s; }

/* ---------- counter + progress ---------- */
.ge360__counter{
	position: absolute; z-index: 6;
	left: clamp(16px, 5vw, 80px); bottom: var(--ge-nav-b);
	display: flex; align-items: baseline; gap: 6px;
	font-family: var(--ge-font-big);
	color: var(--ge-text);
	opacity: var(--ge-nav-o, 0);
	line-height: 1;
}
.ge360__count-now{ font-size: clamp(28px, 3vw, 48px); display: inline-block; min-width: 1.1em; }
.ge360__count-sep, .ge360__count-total{ font-size: clamp(14px, 1.2vw, 18px); opacity: .45; }
.ge360__counter::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--ge-accent) 0 100%) no-repeat 0 0 / calc(var(--ge-auto, 0) * 100%) 100%, rgba(255,255,255,.14);
}
.ge360__count-now.is-tick{ animation: ge360-tick .5s var(--ge-ease); }
@keyframes ge360-tick{ from{ transform: translateY(40%); opacity: 0; } to{ transform: none; opacity: 1; } }
.ge360__progress{
	position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 2px;
	background: rgba(255,255,255,.08);
	opacity: var(--ge-nav-o, 0);
}
.ge360__progress span{
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--ge-accent), color-mix(in srgb, var(--ge-accent) 40%, #fff));
	transform-origin: 0 50%;
	transform: scaleX(var(--ge-prog, 0));
	box-shadow: 0 0 14px var(--ge-accent);
}

/* ---------- buttons ---------- */
.ge360__nav{
	position: absolute; left: 0; right: 0; bottom: var(--ge-nav-b);
	z-index: 6;
	display: flex; justify-content: center; align-items: center; gap: 14px;
	padding: 0 16px;
	opacity: var(--ge-nav-o, 0);
	transform: translateY(calc((1 - var(--ge-nav-o, 0)) * 20px));
	pointer-events: none;
}
.ge360.is-nav-on .ge360__nav{ pointer-events: auto; }
.ge360 .ge360__btn{
	display: inline-flex !important; align-items: center; justify-content: center;
	height: 40px !important; min-height: 0 !important; margin: 0 !important;
	border-radius: 999px !important;
	font: 700 15px/1 var(--ge-font-body) !important;
	text-transform: uppercase !important; letter-spacing: .02em !important;
	text-decoration: none !important; cursor: pointer;
	box-shadow: none;
	transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.ge360 .ge360__btn--arrow{ width: 92px !important; padding: 0 !important; border: 0 !important; background: var(--ge-text) !important; color: var(--ge-bg) !important; }
.ge360 .ge360__btn--cta{ padding: 0 32px !important; border: 1.5px solid var(--ge-text) !important; color: var(--ge-text) !important; background: transparent !important; }
.ge360 .ge360__btn:hover{ transform: translateY(-2px); }
.ge360 .ge360__btn--cta:hover{ background: var(--ge-text) !important; color: var(--ge-bg) !important; }
.ge360 .ge360__btn--arrow:hover{ background: var(--ge-accent) !important; color: #fff !important; box-shadow: 0 8px 30px -6px var(--ge-accent); }
.ge360 .ge360__btn svg{ display: block; }
.ge360 .ge360__btn:focus-visible, .ge360 .ge360__card:focus-visible{ outline: 2px solid var(--ge-accent); outline-offset: 3px; }

/* ---------- mobile ---------- */
@media (max-width: 767px){
	.ge360__ring, .ge360__texts{ --ge-top0: clamp(92px, 12.5vh, 120px); --ge-cw: min(88vw, calc((var(--ge-pin-h) - var(--ge-top0) - 150px) / 1.25)); --ge-ring-top: calc(var(--ge-top0) + var(--ge-cw) * .625); aspect-ratio: 4 / 5; }
	.ge360__head{ top: 18px; }
	.ge360 p.ge360__eyebrow{ font-size: 10px !important; letter-spacing: .2em !important; }
	.ge360 h2.ge360__heading{ font-size: clamp(1.5rem, 7vw, 2rem) !important; }
	.ge360__text{ bottom: 6%; }
		.ge360__text{ padding: 0 7%; }
	.ge360__hero-inner{ font-size: 44vw; }
	.ge360 h3.ge360__title{ font-size: clamp(1.9rem, 9.5vw, 2.8rem) !important; }
	.ge360 p.ge360__desc{ font-size: .92rem !important; line-height: 1.45 !important; }
	.ge360__lines{ display: none; }
	.ge360__nav{ gap: 8px; bottom: max(14px, 3.2vh); }
	.ge360 .ge360__btn{ height: 42px !important; font-size: 11.5px !important; }
	.ge360 .ge360__btn--arrow{ width: 54px !important; flex: 0 0 auto; }
	.ge360 .ge360__btn--cta{ padding: 0 14px !important; white-space: nowrap; letter-spacing: .01em !important; }
	.ge360__counter{ left: 50%; transform: translateX(-50%); bottom: calc(max(14px, 3.2vh) + 54px); }
	.ge360 .ge360__chip{ font-size: 11px; padding: .6em .95em .6em .65em; gap: .45em; border-radius: 10px; }
	.ge360 .ge360__chip--3, .ge360 .ge360__chip--4, .ge360 .ge360__chip--5{ display: none; }
	.ge360 .ge360__chip--0{ left: 6%; top: 5%; --ry: 0deg; }
	.ge360 .ge360__chip--1{ right: 6%; left: auto; top: 15%; --ry: 0deg; }
	.ge360 .ge360__chip--2{ left: 8%; top: 28%; --ry: 0deg; --b: 1.4px; --o: .7; --s: .85; }
}
@media (max-width: 767px) and (max-height: 640px){
	.ge360 p.ge360__desc{ display: none; }
	.ge360__counter{ display: none; }
}
@media (max-width: 380px){
	.ge360 .ge360__btn--cta{ font-size: 10.5px !important; padding: 0 10px !important; }
	.ge360 .ge360__btn--arrow{ width: 46px !important; }
}
/* desktop & laptop: keep card, text, counter and buttons inside one screen */
@media (min-width: 768px) and (max-height: 760px){
	.ge360 h3.ge360__title{ font-size: clamp(2rem, 3.8vw, 3.8rem) !important; }
	.ge360 p.ge360__desc{ font-size: clamp(.9rem, 1.1vw, 1.05rem) !important; }
}

@media (prefers-reduced-motion: reduce){
	.ge360--noise .ge360__bg::before, .ge360__chip, .ge360__lines span{ animation: none !important; }
	.ge360__chip{ transition: none; }
}