[data-sig="florist-hero"]{height:240dvh;max-width:none;padding:0;view-timeline-name:--bouquet;view-timeline-axis:block}[data-sig="florist-hero"] .hero-stage{height:100dvh;position:sticky;top:0;padding:48px var(--edge);display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;overflow:hidden}[data-sig="florist-hero"] .hero-copy{position:relative;z-index:3}[data-sig="florist-hero"] h1{font-size:clamp(64px,7vw,104px);max-width:6ch;line-height:.98;margin:24px 0 32px}[data-sig="florist-hero"] .hero-copy>p:first-child{font-size:13px}[data-sig="florist-hero"] .hero-copy>p{font-size:18px}[data-sig="florist-hero"] .worktable{position:relative;height:80%;min-height:450px;margin-left:-40px}[data-sig="florist-hero"] picture,[data-sig="florist-hero"] picture img{height:100%;width:100%}[data-sig="florist-hero"] picture img{object-fit:cover}[data-sig="florist-hero"] .stems{position:absolute;inset:8% 8% 8% 10%}[data-sig="florist-hero"] .stem{position:absolute;height:85%;width:64%;object-fit:contain;top:6%;left:18%;opacity:0;transform-origin:50% 85%;filter:drop-shadow(3px 5px 3px #243d3220)}[data-sig="florist-hero"] .finished{position:absolute;inset:0;height:100%;width:100%;opacity:0;object-fit:cover}[data-sig="florist-hero"] .stem-label{position:absolute;right:16px;bottom:16px;font-size:13px;background:var(--paper);padding:8px 16px}[data-sig="florist-hero"] .hero-note{position:absolute;bottom:24px;left:var(--edge);right:var(--edge);display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;font-size:12px}[data-sig="florist-hero"] .hero-note p{margin:0}@keyframes place-stem{from{opacity:0;transform:translateY(-24px) rotate(var(--rotation))}to{opacity:1;transform:translateY(0) rotate(var(--rotation))}}@keyframes complete{from{opacity:0}to{opacity:1}}@supports(animation-timeline:view()){[data-sig="florist-hero"] .stem{animation:place-stem linear both;animation-timeline:--bouquet;animation-range:contain calc(var(--step)*12%) contain calc(var(--step)*12% + 6%)}[data-sig="florist-hero"] .finished{animation:complete linear both;animation-timeline:--bouquet;animation-range:contain 88% contain 96%}}@media(max-width:760px){[data-sig="florist-hero"]{height:185dvh}[data-sig="florist-hero"] .hero-stage{padding:32px 24px 90px;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px}[data-sig="florist-hero"] h1{font-size:56px;max-width:none;margin:12px 0 16px}[data-sig="florist-hero"] .hero-copy>p{font-size:15px;margin-bottom:16px}[data-sig="florist-hero"] .hero-copy>p:first-child{font-size:12px;margin:0}[data-sig="florist-hero"] .worktable{height:100%;min-height:0;margin:0 -24px}[data-sig="florist-hero"] .hero-note{bottom:82px;font-size:10px;gap:12px}[data-sig="florist-hero"] .hero-note p{max-width:50%}[data-sig="florist-hero"] .stem-label{bottom:20px;font-size:12px}}@media(prefers-reduced-motion:reduce){[data-sig="florist-hero"]{height:auto}[data-sig="florist-hero"] .hero-stage{position:relative;min-height:760px;height:calc(100dvh - 110px)}[data-sig="florist-hero"] .stem{animation:none;opacity:0}[data-sig="florist-hero"] .finished{animation:none;opacity:1}[data-sig="florist-hero"] .stem-label{display:none}}body.worst [data-sig="florist-hero"] h1{font-size:clamp(38px,4vw,64px);max-width:14ch}body.worst [data-sig="florist-hero"] .hero-stage{height:auto;min-height:100dvh}

[data-sig="florist-hero"][data-fallback="true"] .stem,[data-sig="florist-hero"][data-fallback="true"] .finished{animation:none}

/* Every frame occupies the same stage, including before images decode. */
[data-sig="florist-hero"] .worktable{isolation:isolate;overflow:clip}
[data-sig="florist-hero"] .worktable>picture{display:block;position:absolute;inset:0}
[data-sig="florist-hero"] .worktable>picture img{position:absolute;inset:0}
[data-sig="florist-hero"] .stems{z-index:1}
[data-sig="florist-hero"] .finished{z-index:2}
[data-sig="florist-hero"] .stem-label{z-index:3}

body.worst [data-sig="florist-hero"]{height:auto}body.worst [data-sig="florist-hero"] .hero-stage{position:relative;min-height:0;height:auto}body.worst [data-sig="florist-hero"] .worktable{height:560px}body.worst [data-sig="florist-hero"] .finished{animation:none;opacity:1}body.worst [data-sig="florist-hero"] .stem-label{display:none}@media(max-width:760px){body.worst [data-sig="florist-hero"] .worktable{height:480px}}
@media(min-width:761px) and (max-width:1100px){[data-sig="florist-hero"] .worktable{margin-left:0}[data-sig="florist-hero"] .hero-copy{padding-right:24px;min-width:0}}