/* Shared, responsive hero for the two active gardenhouse landing pages. */
.hero.hero-gardenhouse-video .hero-visual{left:0;width:100%;background:var(--paper)}
.hero-gardenhouse-video .gardenhouse-poster{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-gardenhouse-video .gardenhouse-poster img,.hero-gardenhouse-video .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-gardenhouse-video .hero-film{opacity:0;transition:none;pointer-events:none}
.hero-gardenhouse-video .is-film-visible .hero-film{opacity:1}
.hero-gardenhouse-video .hero-film-toggle{position:absolute;z-index:3;right:var(--gutter);bottom:28px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff59;border-radius:50%;color:#fff;background:rgba(32,33,36,.86)}
.hero-gardenhouse-video .hero-film-toggle:hover{background:#202124}
.hero-gardenhouse-video .hero-film-toggle:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 6px #202124}
.hero-film-toggle svg{width:18px;height:18px;fill:currentColor}
.hero-film-toggle .film-pause,.hero-film-toggle[data-playing=true] .film-play{display:none}
.hero-film-toggle[data-playing=true] .film-pause{display:block}
@media(max-width:1050px) and (min-width:701px){.hero-gardenhouse-video .hero-copy{width:61%}.hero-gardenhouse-video h1{font-size:48px}}
@media(max-width:700px){
  .hero.hero-gardenhouse-video{min-height:0}
  .hero.hero-gardenhouse-video .hero-copy{width:100%;padding-bottom:0}
  .hero.hero-gardenhouse-video .hero-visual{position:relative;inset:auto;order:1;flex:0 0 auto;width:100%;height:auto;min-height:0;aspect-ratio:9/16;margin-top:24px}
  .hero-gardenhouse-video .hero-film-toggle{bottom:18px;right:20px}
  .hero-gardenhouse-video .noscript-note{order:2}
}