Industries we serve

--> /* ============ SCOPED RESET ============ */ /* Full-bleed breakout — escape Elementor's content container */ /* overflow-x: clip (not hidden) — hidden would compute to "hidden auto" and make this element a scroll container, which silently breaks position:sticky on the hero text block below. clip clips visually without creating a scroll context. */ /* ============ HERO — scroll-morph layout ============ .phs-hero is a tall scroll track (180vh). Inside: - .phs-sticky pins the text block to the top of the viewport while the user scrolls through the track. - .hero-image-wrap sits absolutely at top:100vh so it starts below the fold and rises through the pinned text as the page scrolls. Image has higher z-index, so it visually covers the text. - JS fades the text opacity as scroll advances. ================================================== */ /* No overflow:hidden here — it would make phs-hero act as a non-scrolling scroll container, which silently breaks position:sticky on descendants. Image is ~510px tall at max width, so phs-hero floor 940px ensures the image's top sits below the CTA row on short viewports, and the 100vh+360px formula keeps ~150px of the image peeking out at load time on normal viewports. */ /* phs-hero auto-sizes to its flow content now (sticky text + 50px gap + image). Drops the old vh-based min-height so the image-to-text gap stays a CSS constant instead of a ratio of vh. */ /*background: #f5f5f7;*/ /* Sticky auto-sizes to its content height. Critical: the sticky box must be exactly as tall as its content, so sticky-bottom aligns with the content's visual bottom. Otherwise (short box + overflowing content, or tall box + short content), the content ends up rendering past phs-hero-bottom after sticky releases and bleeds into phs-description. Since phs-hero-bottom = sticky-bottom (after release) = content-bottom = image-bottom = description-top, the text disappears cleanly the moment description comes into view. */ /* Massive product title — gradient text (dark → lighter gray) */ /* Subtitle — two lines, medium gray */ /* CTA row */ /* ============ RESPONSIVE ============ On small screens the sticky scroll effect is disabled — it's expensive and doesn't feel right on touch. Layout reverts to a simple vertical stack: text, then image, then description. */