.hero:has(.gerbera-scene){position:relative;isolation:isolate;min-height:510px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;overflow:clip;padding-block:65px}.hero:has(.gerbera-scene) h1{font-size:clamp(48px,5.2vw,78px);max-width:65%;margin:0 0 24px;position:relative;z-index:1}.hero:has(.gerbera-scene) h1 br{display:block}.hero:has(.gerbera-scene) .hero-text{font-size:20px;max-width:50%;position:relative;z-index:1}.hero:has(.gerbera-scene)>a{position:relative;z-index:1}.gerbera-scene{position:absolute;inset:-45px -110px -100px auto;width:65%;z-index:-1;pointer-events:none;mask-image:linear-gradient(to right,transparent,black 28%);opacity:.79}.gerbera-scene canvas{width:100%;height:100%;display:block;pointer-events:none}@media(max-width:800px){.hero:has(.gerbera-scene){min-height:480px;padding-block:42px}.hero:has(.gerbera-scene) h1{max-width:85%;font-size:clamp(42px,7.5vw,60px)}.hero:has(.gerbera-scene) .hero-text{max-width:70%;font-size:18px}.gerbera-scene{width:90%;right:-28%;opacity:.43;mask-image:linear-gradient(to right,transparent,black 55%)}}@media(max-width:480px){.hero:has(.gerbera-scene){min-height:460px}.hero:has(.gerbera-scene) h1{max-width:100%;font-size:43px}.hero:has(.gerbera-scene) .hero-text{max-width:88%;font-size:17px}.gerbera-scene{width:140%;right:-62%;top:30px;opacity:.3}}

/* The continuous stem lives behind the page, rather than being clipped by the hero. */
body.gerbera-home{position:relative;isolation:isolate}.gerbera-stem{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.44}.gerbera-home .footer{background:rgba(248,226,232,.8)}.gerbera-scene{opacity:.86}@media(max-width:800px){.gerbera-scene{opacity:.43}.gerbera-stem{opacity:.23}}@media(max-width:480px){.gerbera-scene{opacity:.3}.gerbera-stem{opacity:.16}}

.hero:has(.gerbera-scene)::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-100px;top:60px;width:min(950px,90vw);height:430px;background:radial-gradient(ellipse at 28% 56%,rgba(255,249,217,.88) 0%,rgba(255,252,237,.57) 22%,rgba(255,247,227,.24) 48%,transparent 72%);filter:blur(22px)}
@media(max-width:600px){.hero:has(.gerbera-scene)::before{left:-80px;top:100px;width:120%;height:310px;opacity:.7}}

@media(min-width:801px){.gerbera-scene{right:-40px;opacity:1}}

@media(min-width:801px){.gerbera-scene{top:-18px}}

/* Sunlit florist arch, softly dissolving into the page. */
.hero:has(.gerbera-scene)::before{inset:0;left:0;top:0;width:100%;height:100%;z-index:-2;filter:none;opacity:1;background:url('/assets/images/hero-arch-v1.webp') center 42% / cover no-repeat;mask-image:linear-gradient(to bottom,black 45%,transparent 100%);border-radius:24px 24px 0 0}
@media(max-width:800px){.hero:has(.gerbera-scene)::before{background-position:65% center;opacity:.65;mask-image:linear-gradient(to bottom,black 40%,transparent 100%)}}
@media(max-width:480px){.hero:has(.gerbera-scene)::before{background-position:58% center;opacity:.5}}

/* Full-bleed architecture; preserve the content alignment and show the complete arch. */
.hero:has(.gerbera-scene){width:100%;padding-inline:max(40px,calc((100% - 1320px)/2))}
.hero:has(.gerbera-scene)::before{border-radius:0;background-image:url('/assets/images/hero-arch-wide-v2.webp');background-position:center top;background-size:100% auto;mask-image:linear-gradient(to bottom,black 40%,transparent 100%)}
@media(min-width:801px){.gerbera-scene{width:min(858px,65%);right:max(0px,calc((100% - 1320px)/2 - 40px))}}
@media(max-width:800px){.hero:has(.gerbera-scene){padding-inline:24px}.hero:has(.gerbera-scene)::before{background-size:auto 100%;background-position:45% top}}
@media(max-width:480px){.hero:has(.gerbera-scene){padding-inline:16px}.hero:has(.gerbera-scene)::before{background-position:46% top}}
.hero:has(.gerbera-scene)::before{background-image:image-set(url('/assets/images/hero-arch-wide-v3.avif') type('image/avif'),url('/assets/images/hero-arch-wide-v2.webp') type('image/webp'))}