/* Surcam 3D Hero Ride */
.shr {
	--shr-len: 620vh; --shr-top: 0px;
	--shr-stage: #060708; --shr-on: #f2f4f4; --shr-on-2: #a6afb2; --shr-teal: #04b9a4; --shr-teal-hi: #45e3ce; --shr-on-teal: #062420;
	--shr-wrap: min(1240px, 100% - 48px); --shr-ease: cubic-bezier(0.23, 1, 0.32, 1);
	position: relative; height: var(--shr-len); background: var(--shr-stage); color: var(--shr-on);
	font-family: "IBM Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.shr *, .shr *::before, .shr *::after { box-sizing: border-box; }
.shr h1, .shr h2, .shr p { margin: 0; }
.shr__stage { position: sticky; top: var(--shr-top); height: calc(100vh - var(--shr-top)); height: calc(100svh - var(--shr-top)); overflow: hidden; background: radial-gradient(70% 60% at 50% 72%, #1b2124 0%, #0a0c0d 52%, var(--shr-stage) 78%); }
.shr__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--shr-ease); }
.shr.is-ready .shr__canvas { opacity: 1; }
.shr__poster { display: none; position: absolute; left: 50%; bottom: 4svh; height: 52svh; width: auto; transform: translateX(-50%); }
.shr--no-gl .shr__poster { display: block; }
.shr__leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.shr--no-gl .shr__leads { display: none; }
.shr-lead { opacity: 0; }
.shr-lead__line { fill: none; stroke: var(--shr-teal-hi); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.shr-lead__halo { fill: rgba(69, 227, 206, .07); }
.shr-lead__ring { fill: none; stroke: var(--shr-teal-hi); stroke-width: 1.5; }
.shr-lead__dot { fill: var(--shr-teal-hi); }
.shr-lead__ticks { fill: none; stroke: var(--shr-teal-hi); stroke-width: 1.25; stroke-linecap: round; opacity: .75; }

.shr__intro { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(36px, 8svh, 96px) 0 calc(clamp(28px, 6svh, 64px) + var(--shr-lift, 0px)); pointer-events: none; will-change: opacity, transform, filter; }
.shr__intro > * { pointer-events: auto; }
.shr__intro h1 { justify-self: center; max-width: 17ch; padding-inline: 20px; text-align: center; font-size: clamp(2.75rem, 1.2rem + 4.4vw, 5.25rem); font-weight: 600; line-height: .98; letter-spacing: -.026em; color: var(--shr-on); text-wrap: balance; }
.shr__foot { grid-row: 3; width: var(--shr-wrap); margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.shr__left { width: min(460px, calc(50vw - 210px)); }
.shr__left p { font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); line-height: 1.4; color: var(--shr-on-2); }
.shr__acts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.shr__right { width: min(280px, calc(50vw - 230px)); display: grid; justify-items: end; gap: 14px; text-align: right; font-size: .9375rem; color: var(--shr-on-2); }
.shr__right p > span { display: block; }
.shr__right b { color: var(--shr-on); font-weight: 600; }

.shr__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--shr-teal); color: var(--shr-on-teal); font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--shr-ease), background-color 200ms ease; }
.shr__btn:active { transform: scale(.97); }
.shr__btn--ghost { background: transparent; color: var(--shr-on); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.shr__link { display: inline-flex; align-items: center; gap: .35em; color: var(--shr-teal-hi); font-weight: 600; text-decoration: none; }
.shr__ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--shr-ease); }
@media (hover: hover) and (pointer: fine) {
	.shr__btn:hover { background: #2fd2bd; color: var(--shr-on-teal); }
	.shr__btn--ghost:hover { background: rgba(255, 255, 255, .08); color: var(--shr-on); }
	.shr__link:hover { color: var(--shr-teal-hi); }
	.shr__link:hover .shr__ico { transform: translateX(3px); }
}
.shr a:focus-visible { outline: 2px solid var(--shr-teal-hi); outline-offset: 3px; }

.shr__stop { position: absolute; top: 50%; width: min(440px, 36vw); opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 24px)); filter: blur(6px); }
.shr__stop.is-l { left: max(24px, calc((100vw - 1240px) / 2)); }
.shr__stop.is-r { right: max(24px, calc((100vw - 1240px) / 2)); }
.shr__fig { display: block; white-space: nowrap; font-size: clamp(3rem, 1.8rem + 3.6vw, 5rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--shr-on); font-variant-numeric: tabular-nums; }
.shr__stop h2 { margin-top: 14px; font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); font-weight: 600; letter-spacing: -.012em; color: var(--shr-on); }
.shr__stop p { margin-top: 10px; font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); line-height: 1.42; color: var(--shr-on-2); }
.shr__stop p strong { color: var(--shr-on); font-weight: 600; }

@media (max-width: 959px), (max-aspect-ratio: 21/20) {
	.shr__intro { grid-template-rows: auto auto 1fr auto auto; padding-top: clamp(28px, 6svh, 64px); padding-bottom: calc(76px + var(--shr-lift, 0px)); }
	.shr__foot, .shr__left { display: contents; }
	.shr__left p { grid-row: 2; justify-self: center; max-width: 34ch; margin-top: 14px; padding-inline: 24px; text-align: center; font-size: 1.0625rem; }
	.shr__left .shr__acts { grid-row: 4; justify-self: center; justify-content: center; margin-top: 0; padding-inline: 20px; }
	.shr__right { grid-row: 5; justify-self: center; justify-items: center; width: auto; margin-top: 14px; gap: 4px; text-align: center; font-size: .8125rem; }
	.shr__right p > span { display: inline; }
	.shr__right p > span + span::before { content: " · "; }
}
@media (max-width: 760px) {
	.shr__intro h1 { font-size: 2.35rem; }
	.shr__stop, .shr__stop.is-l, .shr__stop.is-r { left: 20px; right: 20px; top: auto; bottom: 72px; width: auto; padding: 18px 18px 20px; border-radius: 24px; background: rgba(10, 12, 13, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transform: translateY(24px); }
	.shr__fig { font-size: 2.75rem; }
	.shr__stop p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .shr__stop { filter: none; } .shr__canvas { transition: none; } }

/* Loading screen: progress ring in the centre of the stage until the 3D view is ready; the headline shows meanwhile. */
.shr .shr__load { position: absolute; left: 50%; top: 52%; z-index: 3; display: grid; justify-items: center; gap: 10px; color: var(--shr-on-2); text-align: center; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms; }
.shr.is-loading .shr__load { opacity: 1; visibility: visible; transition: opacity 300ms ease; animation: shr-load-failsafe 0s linear 30s forwards; }
.shr.is-ready .shr__load, .shr.shr--no-gl .shr__load, .shr .shr__load.is-done { opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
@keyframes shr-load-failsafe { to { opacity: 0; visibility: hidden; } }
.shr .shr__lring { display: block; width: 64px; height: 64px; transform: rotate(-90deg); overflow: visible; }
.shr .shr__ltrack { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
.shr .shr__lfill { fill: none; stroke: var(--shr-teal-hi); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; }
.shr .shr__lpct { position: absolute; left: 50%; top: 32px; transform: translate(-50%, -50%); color: var(--shr-on); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8125rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.shr .shr__ltext { margin-top: 4px; color: var(--shr-on-2); font-size: .8125rem; letter-spacing: .02em; }
.shr .shr__lskip, .shr .shr__lskip:hover, .shr .shr__lskip:focus { margin: 0; padding: 6px 12px; border: 0; border-radius: 999px; background-color: transparent; color: var(--shr-on-2); font-family: inherit; font-size: .75rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; pointer-events: none; opacity: 0; transition: opacity 300ms ease, color 160ms ease; }
.shr.is-holding .shr__lskip { pointer-events: auto; opacity: .85; transition-delay: 1.8s, 0s; }
.shr .shr__load.is-late .shr__lskip { display: none; }
.shr .shr__lskip:focus-visible { outline: 2px solid var(--shr-teal-hi); outline-offset: 2px; opacity: 1; }
.shr .shr__load.is-nudge .shr__lring { animation: shr-nudge 600ms var(--shr-ease); }
@keyframes shr-nudge { 35% { transform: rotate(-90deg) scale(1.1); } }
@media (hover: hover) and (pointer: fine) { .shr .shr__lskip:hover { color: var(--shr-on); } }
@media (max-width: 760px) { .shr .shr__load { top: 50%; } }
@media (prefers-reduced-motion: reduce) { .shr .shr__load, .shr .shr__lskip { transition: none; } .shr .shr__load.is-nudge .shr__lring { animation: none; } }

/* Phones: the opening keeps the headline, the implant and the buttons apart. The second button repeats the
   header's "Become a distributor" link, so it steps aside to give the implant room. */
@media (max-width: 760px) {
	.shr__intro { padding-top: clamp(20px, 4svh, 40px); padding-bottom: calc(clamp(22px, 3.6svh, 40px) + var(--shr-lift, 0px)); }
	.shr__intro h1 { font-size: clamp(2rem, 8.8vw, 2.35rem); }
	.shr__left p { margin-top: 10px; font-size: 1rem; line-height: 1.45; }
	.shr__left .shr__acts .shr__btn--ghost { display: none; }
	.shr__right { margin-top: 12px; }
}
/* Poster (no GPU): sized and placed like the 3D implant. The extra classes beat Elementor's `.elementor img { height: auto }`; on phones the boot script sets top and height inline. */
.shr .shr__stage .shr__poster { width: auto; max-width: none; height: 56svh; bottom: 4svh; }
/* desktop: rises with the header offset like the 3D view does (a transform, so it is not a layout shift) */
@media (min-width: 761px) { .shr .shr__stage .shr__poster { transform: translate(-50%, calc(var(--shr-lift, 0px) * -0.5)); } }