/* Native photo planes preserve the cloud opening when the GPU renderer is unavailable. */
.hero-clouds{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cloud-enabled .hero-image:not(.ready)>.hero-clouds{display:block}
.cloud-enabled .hero-image:not(.ready)>img{opacity:0}
.hero-cloud-plane{position:absolute;inset:0;transform-origin:center;will-change:transform}
.hero-image .hero-cloud-plane>img{opacity:1;filter:none;mix-blend-mode:normal;transform:translate3d(0,var(--cloud-depth-y,0%),0) scale(var(--cloud-depth-scale,1));transform-origin:center}
@media(prefers-reduced-motion:reduce){.hero-clouds{display:none!important}}
@media print{.hero-clouds{display:none!important}}

/* The service descriptor shares the headline's existing scroll choreography. */
.hero-descriptor{display:flex;align-items:center;gap:13px;width:max-content;max-width:100%;margin:0 0 25px 5px;font:400 clamp(13px,1.1vw,16px)/1.4 var(--mono);letter-spacing:.055em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 12px var(--navy)}
.hero-descriptor:before{content:'';display:block;width:30px;height:1px;background:currentColor;flex:none}
@media(max-width:700px){.hero-descriptor{font-size:13px;gap:10px;margin:0 0 22px 2px;letter-spacing:.045em}.hero-descriptor:before{width:22px}}
@media print{.hero-descriptor{color:inherit;text-shadow:none}}

/* A short phone must not carry the old 740px desktop-era minimum. svh keeps
   the sticky stage steady while the browser's address bar changes height. */
@media (max-width:700px) and (prefers-reduced-motion:no-preference) {
  .hero-scroll.cloud-enabled {height:285svh;min-height:0}
  .cloud-enabled .hero {height:100svh;min-height:0}
}
@media (max-width:700px) and (max-height:740px) {
  .home-clarity .hero-caption {top:36%;font-size:21px}
  .home-clarity .hero h1 {font-size:clamp(36px,11.4vw,49px);bottom:85px}
  .home-clarity .hero-descriptor {font-size:21px;margin-bottom:20px}
}